Banners

Banners

Welcome to the “Banners” documentation. Looking to integrate a Banner into your website? Our block is designed to grab your visitors' attention and communicate important announcements. In this guide, we'll show you how to use the editor to customize your banner block.






Step 1 : Open the Editor


1. Go to  Banners templates.
2. Click on "Edit" after choosing your template.


class="flex justify-center items-start h-auto w-auto" alt="">



Step 2 : Add And Customize Elements


 1. Here in this panel, you have control over what shows up in your block, you can easily add, remove, or change the content of the popup or section countdown, such as text, image, button or countdown. Simply hover over the container to access these options.


class="flex justify-center items-start h-auto w-auto" alt="">



2. To customize your element, click on the edit icon. You can then adjust its color, style, width, and height. You also have the option to put a border, set a background image, and control its opacity. If you're adding a countdown, you can specify your desired date and time.
Apart from that you can tweak the spacing around each element by customizing the margin and padding.

3. Once you're finished, click on "Done" to save your changes.


class="flex justify-center items-start h-auto w-auto" alt="">



Step 3 : Adjust the Layout


In the Layout panel, you can adjust how your layout looks and behaves. You have control over things like size, rounding, width, popup position, adding an overlay, choosing how it's displayed, and even adding animations.

class="flex justify-center items-start h-auto w-auto" alt="">


  • To create the banner block, keep its size set to full, choose either the top or bottom for the vertical position, and ensure it's displayed in an elevated manner. 


  • class="flex justify-center items-start h-auto w-auto" alt="">



    Step 4 : Preview


    Lastly, you can click on “Preview” to see how your popup or section countdown 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="">


    For further information on configuring triggers, please navigate to the Block Triggers section.