Slider
Slider
Welcome to the “Slider” documentation.
Looking to integrate slider into your website? Our block provides you to create stunning and dynamic slideshows to enhance the visual appeal of your website.
In this guide, we'll show you how to use the editor to customize your slider block.
Step 1: Open the Editor
1. Go to Slider template.
2. Click on "Edit" after choosing your template.
class="" alt="">Step 2: Add and customize slides
1. In this panel, you can easily add, remove, or rearrange your slides as needed.
class="flex justify-center items-start h-auto w-auto" alt="">2. Begin customizing each slide by entering a slide name and editing the content.
class="flex justify-center items-start h-auto w-auto" alt="">3. Select the block's position and customize your preferred colors for the content.
class="flex justify-center items-start h-auto w-auto" alt="">4. You can add a background and image to each slide, adjusting its roundness, position, and inserting a link.
class="flex justify-center items-start h-auto w-auto h-auto " alt="">5. Additionally, you can include an overlay beneath the text, fine-tuning its roundness and adding a text link.
For buttons, you can adjust their size and roundness, enter a label, choose their position, and add an icon.
class="flex justify-center items-start h-auto w-auto" alt="">6. Finally, you can specify when to display or hide each slide.
class="flex justify-center items-start h-auto w-80" alt="">Step 3: Configure settings
Here, you'll handle the settings:
1. You have the option to apply transitions between slides, enable full-screen mode, choose a height type, and make height adjustments.
class="flex justify-center items-start h-auto w-96 h-auto " alt="">2. You can also opt to display pagination and select its style. Additionally, you can make the pagination dots clickable and dynamic.
class="flex justify-center items-start h-auto w-80" alt="">3. You can activate autoplay and specify the delay for each slide.
class="flex justify-center items-start h-auto w-80" alt="">4. Finally, you can choose whether to show controls, enable loop mode, activate zoom functionality, and adjust margins as needed.
class="flex justify-center items-start h-auto w-80" alt="">Step 4: Choose Colors
1. Within this panel, you can choose colors for both the background and controls.
class="flex justify-center items-start h-auto w-auto" alt="">Step 5: Preview
Lastly, you can click on “Preview” to see how your slider block looks on both desktop and mobile devices. After this, you can proceed to the next step.
class="flex justify-center items-start h-auto w-auto" alt="">