Summary

  • Overview
  • Add Block Slider
    • Convert A Block To Block Slider
    • Block Slider Presets and Designs
    • Add Empty Block Slider
  • Block Slide Operations
    • Add New Block Slide
    • Duplicate Block Slide
    • Move Block Slide
    • Delete Block Slide
    • Change Block Slide Height
  • Add Elements To Slide
  • Active Block Slide
    • Slide Hight And Content Width
    • Slide Background
    • Slide Border
    • Slide Parallax
    • Slide Hyperlink
  • Block Slider Animation
    • Animation Actions
    • Animation Interval
    • Animation Direction
    • Animation Duration
  • Block Slider Hide On Devices
  • Block Slider Arrows
    • Arrow Styles
    • Arrow Icon Sets
    • Arrow Size
    • Arrow Color
    • Arrow Background
    • Arrow Border
    • Arrow Shadow
  • Block Slider Indicators
    • Indicator Shape
    • Indicator Size
    • Indicator Background
    • Indicator Border
  • Block Slider in Mobile Views

Overview

Use the Block Slider to create sliding blocks, such as introduction blocks with a slider, taking the whole width of the screen. You can add lead Texts, call-to-action Buttons, and other Website Elements.

The Block Slider is mobile-friendly by default.

block-slider.gif

Add Block Slider

You can add the Block Slider Element from the Add Panel of the Quick Access Pane.

add-block-slider.png

Convert A Block To Block Slider

Convert any Block to the Block Slider by selecting any Preset or Design from the Add Panel -> Add Block Slider section.

Add Block Slider option is available if you click the Options icon on the Context Toolbar or select it from the Right-Click Context Menu.

convert-block-slider.png

Block Slider Presets and Designs

You can start by choosing the Block Slider Presets or designer-made Block Sliders from the Add Panel.

block-slider-presets.png

Add Empty Block Slider

You can add an empty Block Slider by selecting the first Preset in the Add Block Slider section of the Add Panel.

add-empty-block-slider.png

Block Slide Operations

Add New Block Slide

You can add a new Slide to the Block Slider by clicking the gray Plus icon in the Thumbnails Pane under the Block Slider.

add-new-block-slide.png

Duplicate Block Slide

You can duplicate your current Block Slide by pressing Ctrl + D or clicking the Duplicate icon on the Block Slide Thumbnail.

duplicate-block-slide.png

You can duplicate the Block Slide in the Context Menu, Block Options, and Add Panel.

duplicate-slide-add-menu.png

The Duplicate Slide option is also in the Block Options.

duplicate-slide-block-options.png

Move Block Slide

Move the Block Slide by clicking and dragging to the desired position in the sliding sequence on the Thumbnails Pane.

move-block-slide.gif

Delete Block Slide

You can delete the Block Slider by clicking the Trash Can icon on the Slide Thumbnail.

delete-block-slider.png

Change Block Slide Height

You can drag the Block Markers on the top and bottom of the Block Slide to change its Height, similar to the Block Element.

block-slider-height.png

Add Elements To Block Slide

Like the Block, click on the blue Plus icon at the center to add or insert new Elements from the Add Panel. You can insert any Element, and each Block Slide can have different combinations of Elements.

add-elements-block-slider.png

Active Block Slide

Select the Block Slider and customize the Settings for the Active Block in the Active Slide section.

block-slider-active-slide-properties.png

Slide Height and Content Width

You can switch the Slide content width from Sheet to Screen to set the desired Wide / Boxed layout for Slider content. To change the Block Slide's Hight, enter the value in the corresponding field in the Property Panel.

Slide Background

Select the Background for the Block Slider. Like the Block, you can choose the No Color, Color, Gradient, Image, or Video option for the Block Slider Background.

Slide Border

Add the Border to the Block Slide, or set the Custom Border by choosing the side where the Border is visible. You can also select the Color and adjust the width of your Border.

Slide Parallax

Apply the Parallax effect to the Block Slide by clicking the corresponding checkbox in the Property Panel.

NOTE: The Parallax only works for the Background Image.

Slide Hyperlink

Enable the Hyperlink to the Block Slide by checking the Hyperlink checkbox in the Property Panel. You can link it to a Page, Block Anchor, File, Phone number, Email, Modal Popup, or Post.

Block Slider Animation

The Slider section for the Block Slide in the Property Panel allows you to adjust the Animation.

block-slide-slider-properties.png

Animation Actions

You can enable or disable Autoplay on Load and Pause on the Hover action.

The Autoplay On Load immediately starts the Block sliding when the website is displayed, and the Pause On Hover stops when you hover the cursor over the Block Slider.

Animation Interval

Set the Interval between the Block sliding.

Animation Direction

You can select the Animation direction for the Block Slider, including Left To Right, Right To Left, Down, Up, or Fade.

Animation Duration

Set the Duration for the Animation sequence while switching Block Slides between each other.

Block Slider Hide On Device

You can select the Mobile Devices on which you hide the Block Slider.

block-slider-hide.png

Block Slider Arrows

In the Arrows section, you can customize or disable the Arrow icon for the Block Slider.

block-slider-arrows.png

Arrow Styles

Select one of the Preset Styles for the Block Slider Arrow's Icons for the Block Slider.

Arrow Icon Sets

Pick one of the Block Slider Arrow's Icon Sets for the Block Slider.

Arrow Size

Change the Block Slider Arrow's Size by dragging the slider or entering the Size value in the Property Panel.

Arrow Color

Select the Block Slider Arrow's Color from the Basic, Additional Colors, or add a new Color with the Color Picker. You can also select the Color for the Arrow hover state.

Arrow Background

Enable the Block Slider Arrow's Background or Gradient, and select it for the Hover state.

Arrow Border

Enable the Block Slider Arrow's Border. Adjust the corners' Border Color, Width, Shape, and Radius. You can also do that for the Hover state.

Arrow Shadow

Apply Shadow to the Block Arrow Border. You can select a Shadow Preset or customize it in the Settings tab.

Block Slider Indicators

The Block Slider Indicators are displayed below and show the number of slides in the Block.

block-slider-indicators.png

Indicator Shape

Change the Block Slider Indicator's Shape from Hyphens to Circles and vice versa.

Indicator Size

You can enter the Block Slider Indicator's Width And Height.

Indicator Background

Enable the Block Slider Indicator's Background. You can set it to Color or Gradient. You can also do that for the Hover state.

Indicator Border

Enable the Block Slider Indicator's Border. Adjust the corners' Border Color, Width, Shape, and Radius. You can also do that for the Hover state.

Block Slider in Mobile Views

You can modify the Size and Position of the Block Slider Elements for each Mobile Device.

Please also see the essential tips on how to build responsive websites.

## Summary - Overview - Add Block Slider - Convert A Block To Block Slider - Block Slider Presets and Designs - Add Empty Block Slider - Block Slide Operations - Add New Block Slide - Duplicate Block Slide - Move Block Slide - Delete Block Slide - Change Block Slide Height - Add Elements To Slide - Active Block Slide - Slide Hight And Content Width - Slide Background - Slide Border - Slide Parallax - Slide Hyperlink - Block Slider Animation - Animation Actions - Animation Interval - Animation Direction - Animation Duration - Block Slider Hide On Devices - Block Slider Arrows - Arrow Styles - Arrow Icon Sets - Arrow Size - Arrow Color - Arrow Background - Arrow Border - Arrow Shadow - Block Slider Indicators - Indicator Shape - Indicator Size - Indicator Background - Indicator Border - Block Slider in Mobile Views ## Overview Use the Block Slider to create sliding blocks, such as introduction blocks with a slider, taking the whole width of the screen. You can add lead Texts, call-to-action Buttons, and other Website Elements. The Block Slider is mobile-friendly by default. !block-slider.gif! ## Add Block Slider You can add the Block Slider Element from the Add Panel of the Quick Access Pane. !add-block-slider.png! ### Convert A Block To Block Slider Convert any Block to the Block Slider by selecting any Preset or Design from the Add Panel -> Add Block Slider section. Add Block Slider option is available if you click the Options icon on the Context Toolbar or select it from the Right-Click Context Menu. !convert-block-slider.png! ### Block Slider Presets and Designs You can start by choosing the Block Slider Presets or designer-made Block Sliders from the Add Panel. !block-slider-presets.png! ### Add Empty Block Slider You can add an empty Block Slider by selecting the first Preset in the Add Block Slider section of the Add Panel. !add-empty-block-slider.png! ## Block Slide Operations ### Add New Block Slide You can add a new Slide to the Block Slider by clicking the gray Plus icon in the Thumbnails Pane under the Block Slider. !add-new-block-slide.png! ### Duplicate Block Slide You can duplicate your current Block Slide by pressing **Ctrl + D** or clicking the Duplicate icon on the Block Slide Thumbnail. !duplicate-block-slide.png! You can duplicate the Block Slide in the Context Menu, Block Options, and Add Panel. !duplicate-slide-add-menu.png! The Duplicate Slide option is also in the Block Options. !duplicate-slide-block-options.png! ### Move Block Slide Move the Block Slide by clicking and dragging to the desired position in the sliding sequence on the Thumbnails Pane. !move-block-slide.gif! ### Delete Block Slide You can delete the Block Slider by clicking the Trash Can icon on the Slide Thumbnail. !delete-block-slider.png! ### Change Block Slide Height You can drag the Block Markers on the top and bottom of the Block Slide to change its Height, similar to the Block Element. !block-slider-height.png! ## Add Elements To Block Slide Like the Block, click on the blue Plus icon at the center to add or insert new Elements from the Add Panel. You can insert any Element, and each Block Slide can have different combinations of Elements. !add-elements-block-slider.png! ## Active Block Slide Select the Block Slider and customize the Settings for the Active Block in the Active Slide section. !block-slider-active-slide-properties.png! ### Slide Height and Content Width You can switch the Slide content width from Sheet to Screen to set the desired Wide / Boxed layout for Slider content. To change the Block Slide's Hight, enter the value in the corresponding field in the Property Panel. ### Slide Background Select the Background for the Block Slider. Like the Block, you can choose the No Color, Color, Gradient, Image, or Video option for the Block Slider Background. ### Slide Border Add the Border to the Block Slide, or set the Custom Border by choosing the side where the Border is visible. You can also select the Color and adjust the width of your Border. ### Slide Parallax Apply the Parallax effect to the Block Slide by clicking the corresponding checkbox in the Property Panel. NOTE: The Parallax only works for the Background Image. ### Slide Hyperlink Enable the Hyperlink to the Block Slide by checking the Hyperlink checkbox in the Property Panel. You can link it to a Page, Block Anchor, File, Phone number, Email, Modal Popup, or Post. ## Block Slider Animation The Slider section for the Block Slide in the Property Panel allows you to adjust the Animation. !block-slide-slider-properties.png! ### Animation Actions You can enable or disable Autoplay on Load and Pause on the Hover action. The **Autoplay On Load** immediately starts the Block sliding when the website is displayed, and the **Pause On Hover** stops when you hover the cursor over the Block Slider. ### Animation Interval Set the Interval between the Block sliding. ### Animation Direction You can select the Animation direction for the Block Slider, including Left To Right, Right To Left, Down, Up, or Fade. ### Animation Duration Set the Duration for the Animation sequence while switching Block Slides between each other. ## Block Slider Hide On Device You can select the Mobile Devices on which you hide the Block Slider. !block-slider-hide.png! ## Block Slider Arrows In the Arrows section, you can customize or disable the Arrow icon for the Block Slider. !block-slider-arrows.png! ### Arrow Styles Select one of the Preset Styles for the Block Slider Arrow's Icons for the Block Slider. ### Arrow Icon Sets Pick one of the Block Slider Arrow's Icon Sets for the Block Slider. ### Arrow Size Change the Block Slider Arrow's Size by dragging the slider or entering the Size value in the Property Panel. ### Arrow Color Select the Block Slider Arrow's Color from the Basic, Additional Colors, or add a new Color with the Color Picker. You can also select the Color for the Arrow hover state. ### Arrow Background Enable the Block Slider Arrow's Background or Gradient, and select it for the Hover state. ### Arrow Border Enable the Block Slider Arrow's Border. Adjust the corners' Border Color, Width, Shape, and Radius. You can also do that for the Hover state. ### Arrow Shadow Apply Shadow to the Block Arrow Border. You can select a Shadow Preset or customize it in the Settings tab. ## Block Slider Indicators The Block Slider Indicators are displayed below and show the number of slides in the Block. !block-slider-indicators.png! ### Indicator Shape Change the Block Slider Indicator's Shape from Hyphens to Circles and vice versa. ### Indicator Size You can enter the Block Slider Indicator's Width And Height. ### Indicator Background Enable the Block Slider Indicator's Background. You can set it to Color or Gradient. You can also do that for the Hover state. ### Indicator Border Enable the Block Slider Indicator's Border. Adjust the corners' Border Color, Width, Shape, and Radius. You can also do that for the Hover state. ## Block Slider in Mobile Views You can modify the Size and Position of the Block Slider Elements for each Mobile Device. Please also see the essential tips on [how to build responsive websites](page:36215). ##