Footer
Footer
Welcome to the “Footer” documentation.
Looking to integrate a footer into your website? Our block not only allows you to provide essential information to your visitors but also enhances the user experience by offering quick access to important links. In this guide, we'll show you how to use the editor to customize your footer block.
Step 1: Open the Editor
1. Go to Footer template.
2. Click on "Edit" after choosing your template.
class="" alt="">Step 2: customize the content
In this panel, you will edit each element of the footer:
1. Begin by uploading your logo and linking it to your website. Choose whether to display or hide the header and customize it using our text editor.
class="flex justify-center items-start h-auto w-80" alt="">
class="flex justify-center items-start h-auto w-auto" alt="">2. Easily manage the footer columns by adding, removing, or rearranging them. Edit their content seamlessly with our text editor.
class="flex justify-center items-start h-auto w-80" alt="">
class="flex justify-center items-start h-auto w-auto" alt="">3. For the contact section, choose to display or hide mail, phone, and address contacts and select their respective icons.
class="flex justify-center items-start h-auto w-80" alt="">4. Include your social media platforms in the footer by adding their links.
class="flex justify-center items-start h-auto w-auto" alt="">5. Lastly, add a border and the "All Rights Reserved" message to complete your footer.
class="flex justify-center items-start h-auto w-80" alt="">Step 3: Configure settings
Here, you'll handle the settings:
1. Start by specifying the width and padding of your footer.
class="flex justify-center items-start h-auto w-auto" alt="">2. Customize the logo by adjusting its width and position. Decide whether to align it inline with the header.
class="flex justify-center items-start h-auto w-80" alt="">3. Tailor the footer columns by selecting the maximum number of grids, adjusting the gap between them, and determining their position.
class="flex justify-center items-start h-auto w-80" alt="">4. In the contact section, fine-tune the maximum number of grids to be displayed, set the gap between them, and choose their position.
Customize the icons by adjusting their width, roundness, and position. You also have the option to open these links in a new tab.
class="flex justify-center items-start h-auto w-80" alt="">Step 4: 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-80" alt="">Step 5: Preview
Lastly, you can click on “Preview” to see how your footer 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="">