Footer Widget


> Boxed layout: to add padding around the main wrapper of the section

  • Section padding: add values in pixel unit to set the padding for the footer following the order of:
    Top Right Bottom Left  (Eg: 50px 10px 0 10px). To adjust the padding of this section for Table or Mobile, you add a comma after 4 values of the Desktop. 

Eg: 50px 10px 0 10px, 50px 10px 0 10px20px 5px 0 5px  (DesktopTabletMobile respectively)

  • Column Grid layout: insert values in % unit to set the column grid layout for each block (Eg: 25% 25% 25% 25%)
  • Item spacing: add value in pixel unit to set the space between each block (30px)


There are 3 blocks in this footer: Menu, Newsletter, Color Style. Clicking on Add block to have more content for the footer

1. Menu

  • Title: add a title for this menu on the footer
  • Menu: choose a menu you want from the existing list. You can change or edit it, or create a new one by selecting Change menu > clicking on Create menu above the menu list. 

2. Newsletter

  • Text 1: add a title for this block by entering text into the box
  • Text 2: add the content for the newsletter

  • Form type: Mailchimp/ Klaviyo/ Shopify
  • Form URL
  • Button Text: add a text for the button

3. Color style

Using the color picker to adjust color for:

  • Background color
  • Heading color
  • Heading Font Weight: drag to adjust how bold the title is for each menu
  • Heading Font Size: change its size by entering values in rem unit. Add a comma to set its size for Mobile interface (Eg: 2rem, 1.5rem)

  • Text 1 color: is the text when customers enter their email into the box
  • Link color: set color for the texts of items placed under its title on each block
  • Hover color: set the color for the same texts as link color but you will see them when you hover over the items

You'll know how it works by watching the gif under