Menu Close

Blocksify Pro Docs

Build a hero slider

Build a Blocksify Pro hero slider with Northstar Studio property, agent, and experience slides, plus autoplay, navigation, and replayed headings.

Before you start: Prepare one property image, one agent image, one experience image, and the heading, short description, and button text for each slide. Keep the Slider and Slide blocks reference open for the complete settings list.

Add the Slider

  1. Go to Pages → All Pages and open the Northstar Studio home page in the block editor.
  2. Open the block inserter and choose Blocksify → Slider. The editor adds three slides labeled Slide 1, Slide 2, and Slide 3.
  3. Select the Slider and confirm that the toolbar counter reads 1 / 3.
The Northstar Studio home page editor shows a newly inserted Slider with a 1 / 3 toolbar counter and a three-dot navigation bar.

Build the first property slide

  1. Select the first Slide, then set Label to Featured property.
  2. Use the Slide’s background image controls to choose the property image.
  3. Insert a Heading and type Featured property.
  4. Insert a Paragraph and add one short line about the property.
  5. Insert a Button and use a short action label such as View property.
  6. Set Vertical align to Middle if the slide is taller than its content.
The Northstar Studio Featured property slide shows a property background image, a heading, a short description, and a View property button.

Complete the three-slide story

  1. Select the Slider, then click the second dot or Next slide. The counter changes to 2 / 3.
  2. Select the Slide and change Label to Meet the agents.
  3. Choose the agent image as its background, then add a heading, short introduction, and button.
  4. Return to the Slider and click Next slide.
  5. Set the third Label to Local experiences, then add the experience image, heading, short description, and button.
  6. Use Move slide left or Move slide right if the story order needs to change.
The Northstar Studio page editor shows the completed Local experiences slide with the Slider counter at 3 / 3.

Configure autoplay and navigation

  1. Select the Slider and open the Slider panel.
  2. Set Effect to Slide and Columns to 1. Use the device picker to confirm Desktop, Tablet, and Mobile each resolve to one column.
  3. Turn on Autoplay, keep Delay at 4000 ms, and leave Pause on hover on.
  4. Open Navigation, set Controls to Light, and set Arrows to On hover with Arrows position set to Inside.
  5. Set Dots to Always, Dots position to Inside, and Dots align to Center. The dots sit at the bottom center of the slide area.
The Slider and Navigation panels show Autoplay enabled with a 4000 millisecond delay and Pause on hover, plus Light controls, On hover arrows, and centered inside dots.

Use the same device picker pattern described in Responsive and hover editing when a later Slider needs different column counts or gaps at each width.

Replay each heading when its slide appears

  1. Open the first slide and select its Heading block.
  2. Open Interactions → Block Animation.
  3. Click Add Animation Trigger and choose On Slide Active.
  4. Open the On Slide Active trigger row. An adjacent popover shows Effect, Type, Duration, Delay, Easing, Trigger on, and Preview Animation.
  5. Choose the entrance effect for the heading, then use Preview Animation to check it in the editor.
  6. Repeat the same steps for the Meet the agents and Local experiences headings.
The Featured property heading settings show the On Slide Active row and its adjacent animation popover with Preview Animation.

On Slide Active replays whenever the containing slide enters the visible set and resets after it leaves. Review Block animations and interactions for the entrance controls, then see Interaction triggers for its behavior on sliders that show several slides at once.

Publish and test the hero

  1. Click Update or Publish, then open the page in a new browser tab.
  2. Wait for autoplay to advance. Each new property heading should play its entrance.
  3. Move the pointer over the hero. Autoplay should pause and the arrows should appear.
  4. Use an arrow, a dot, and the Left and Right Arrow keys to visit each slide.
  5. Move back to a previous slide. Its heading entrance should play again.
The published Northstar Studio hero Slider shows the Meet the agents slide with light arrows and centered dots inside the slide.

Tip: Also test with reduced motion enabled in the browser or operating system. The Slider should stop autoplay, remove transition time, and keep animated content in its natural visible state.

  1. Add another Blocksify → Slider below the property section.
  2. Replace each slide with a testimonial layout for a Northstar client, including the quote and client name.
  3. Use Add slide to add a fourth testimonial.
  4. In the Slider panel, set Columns to 3 on Desktop, 2 on Tablet, and 1 on Mobile.
  5. Set Gap to the space you want between testimonial cards, then turn on Center slides.
  6. Click Update and check all three device previews. The visible testimonials should change from three to two to one.
The Northstar Studio page editor shows a testimonial Slider with three complete cards, a 24-pixel gap, outside arrows, and Center slides enabled.

Was this helpful?

0

Updated