How to use the Slider block by Zoloblocks

This documentation provides comprehensive insights into the Slider Block developed by Zoloblocks.

Adding a block to the editor

1. Click the Toggle Block Inserter icon and a sidebar will appear on the left side, All the blocks will be visible here.
2. Search by the Slider block name.
3. Then select the appear blocks ( with zoloblocks logo T.R corner).
4. After Drag and Drop it on the page.

After Inserting the blocks, Follow this.

1. Click on the Document Overviewer button and the Blocks list view will appear.
2. Here appears the Slider block.
3. After on the right side, Click on the Block. Then the Slider details appear.
4. Here show all the control tabs( Basic, Style, Extra ) of a block.

Basic Tab (Parents Blocks)

The Basic tab controller displayed here offers the flexibility to adjust the layout of blocks according to your preferences. Customize for the Parent’s blocks. Any changes applied will all items

General Section

Go to Basic > General

This section provides controls for the slider,

1. Slider Height: Set the height for the slider.
2. Content Max Width: Set the max width for the content.

Slider Options Section

Go to Basic > Slider Options

Set controls for the slider by following it,

1. Speed: Set the speed for the slider. The speed counts in ms.
2. Infinite Loop: Enable the switcher to loop the slider for infinite time.
3. Autoplay: Enable the switcher for the playing automatically.
4. Autoplay Delay: Set the delay time for automatic play. The speed counts in ms.

5. Pause on Mouse Enter: Enable the switcher to pause the slider on mouse enter.
6. Show Navigation: Enable the switcher to show the navigation.
7. Show Pagination: Enable the switcher to show the pagination.

Effects Section

Go to Basic > Effects

Set effects for the slider,

1. Select Effect: Select the effects for the slider (e.g.: Slide, Fade, Cube, etc. ).

Navigation Section

Go to Basic > Navigation

Set the navigation for the slider,

1. Custom Navigation Icons: Enable the switcher to customize the navigation icon.
2. Select Prev Icon: Set the icon for the prev.
3. Select Next Icon: Set the icon for the next.

Style Tab (Parents Blocks)

Provide the controller to make the visual appearance or presentation of the tabs. This includes aspects visually appealing and cohesive with the overall design of the interface.

Content Section

Go to Style > Content

Customize the content by following,

1. Padding: Set the padding for the content.

Navigation Section

Go to Style > Navigation

Make the navigation section more stylish by following the controls,

1. Width: Set the width for the navigation section.
2. Height: Set the height for the navigation.
3. Border: Set the border for this.

4. Border Radius: Set the border radius for navigation.
5. Icon Size: Set the icon size for navigation.

Normal State for Navigation

6. Color: Set the color for the navigation.
7. Background: Set the background color for navigation.

Hover State for Navigation

The changes appear on the mouse hovering,

8. Color: Set the color for the navigation.
9. Background: Set the background color for navigation.

Pagination Section

Go to Style > Pagination

Make the appearance changes for the pagination section,

1. Space Between: Set the space between the pagination.
2. Vertical Offset: Set the vertical offset for it.

Normal State for Pagination

The changes appear on the normal state of the pagination,

3. Width: Set the width for the pagination.
4. Height: Set the height for the pagination.

5. Border: Set the border for the icon.
6. Border Radius: Make the border corner rounded.
7. Background: Set the background for the pagination.

Active State for Pagination

The appearance changes are visible when the pagination is active,

8. Width: Set the width for the pagination.
9. Height: Set the Height for the pagination.
10. Border: Set the border corner edges rounded by setting it.

11. Border Radius: Set the border radius for the pagination.
12. Background: Set the background for this.

Slider (Child Blocks)

Here we will work with the Child blocks of Slider. The changes will applied to the relevant item only. Let’s follow this.

1. Select the Slide Child block under the Slider parent blocks.
2. On the right side, the selected Slide Child details will appear.
3. The Slide Child controls will appear here. ( Basic, Style, Extra ).

Add a New block on Slide

1. Select any single item( Child block ) from the slider parents section.
2. Click on the ” + ” Icon ( Add Blcok ) icon to add a new block.

3. Search by the block name and it will appear new block.
4. Select the desired block and customize it.

5. Edit the selected block.

Add More Block For Slider

6. Select the Slide child item again.
7. Click on the ” Add block ” Icon and add as many blocks as you need.

8. After customizing all the blocks, The slide shows all the blocks.

Set Background for Slider

Go to Slide > Extra

9. Select the slide item then go to Background and select an image from the media library,
   By following it you can set the background for the slide ( Child Item ).

Style Tab ( Child Block )

This tab provides the controls of the Fancy List Child Items. The changes will apply only to relevant items. Let’s Explore all the controls.

Item Section

Go to Style > Item

This section provides control for the slide ( Child item ),

1. Border: Set the border for the single slide item.
2. Border Radius: Set the radius for the slide.
3. Padding: Set inner space by setting the padding.

Extra Tab Controls

The extra tabs provide the controls of any blocks. You can make different visual layouts by following these Controls.
Click to learn more>>.

Video Assist

Video Tutorial Coming Soon! Check the Demo Page.

Thanks for being with us!