List Events

List Events

Welcome to the “Calendar Events” documentation. Looking to integrate calendar into your website? Our block enables you to craft beautiful event listings that captivate your visitors. In this guide, we'll show you how to use the editor to customize your calendar events block.

Step 1 : Open The Editor
Step 2 :  Add And Customize Events
Step 3 : Adjust The Layout 
Step 4 : Configure Settings
Step 5 : Choose Colors
Step 6 : Preview





Step 1: Open the Editor

1. Go to List Events template.
2. Click on "Edit" after choosing your template.


class="" alt="">



Step 2: Add and customize events


1. In this panel, you can easily add and remove events as needed.


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



2. Customize each event by entering its name and tag, uploading an image, specifying the event location and date, writing the button label, and adjusting colors.


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




Step 3: Adjust the Layout


1. In the layout panel, you can choose your preferred layout style, whether it's in grids or as a list.
     2. Additionally, you can specify the gap between event cards and set the maximum number of grids.


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

           


Step 4 : Configure settings


1. In this section, you'll manage the event settings, giving you the ability to show or hide old events, the title, filter, and adjust the padding and margin of the container.


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



2. In this section, you will customize event cards :

  •  You can select the action that occurs when a post is clicked, adjust card roundness, borders, and shadow. You can also specify the image height for grids layout, select the date display for list layout, and choose to use a 12-hour format.


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



  •  Additionally, you can choose whether to show or hide all card content, such as the image, tag, date, time, and location.


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


    3. For the popup, you can adjust its width, roundness, and button roundness.
    You also have the option to show or hide elements like the image, button, date, and location.


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



    4. Finally, you can select the icons for time and location.


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




    Step 5 : Choose Colors 


    1. Within this panel, you can select colors that match your website's design.


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




    Step 6 : Preview


    Lastly, you can click on “Preview” to see how your list events block looks on both desktop and mobile devices. After this, you can proceed to the next step.