March Documentation

Customize footer

Instead of having a static footer, Hatch enables you to build your own unique and custom footer. No coding experience needed. 

Chapter 1: The steps to open the Footer global module

  1. Open any Hatch page in the page editor.
  2. Click the Contents tab and find the Page footer module:

    Image 2020-12-02 at 8.28.31 PM.jpg?source=viewer&v=9bb0733aa0ed61f9b20f3b2a1b827dc0

  3. Click Open in global content editor

    Image 2020-12-02 at 8.29.25 PM.jpg?source=viewer&v=854d4ea865e13934e4fee94eebf72111

  4. Open Footer

    Image 2020-12-02 at 8.30.23 PM.jpg?source=viewer&v=964a3d32ef3936ced501f3a6ddd054e4

  5. In the left sidebar, you'll find all of the Footer fields and field groups:

    Image 2020-12-02 at 8.31.20 PM.jpg?source=viewer&v=6a52746c5122a2cfd838d2f743b8f2a5
    1. Enable Background Image boolean: Choose to enable/disable the background image.
    2. Row Repeater: Footer can have an unlimited number of rows. Each row is built as a repeater item. 
    3. Social Links: Build the list of social links to be displayed in the footer from one group, this will be called into the Content repeater inside the Row Repeater.


Chapter 2: Footer Builder

A footer consists of an unlimited number of rows, and in each row, you can customize the number of columns and content to be displayed.

For example, the footer currently live on the Hatch demo site consists of 3 rows:

Image 2020-12-02 at 8.35.47 PM.jpg?source=viewer&v=89dae7cf239084d6b8e3e6205bf25a13

Let's build a new footer row, shall we? Here are the steps:

  1. Click +add in the Row Repeater field
    Image 2020-12-02 at 8.41.02 PM.jpg?source=viewer&v=a9c875a3b9982fef30ec10dd04089184
  2. You'll find all the field groups and fields:

    Image 2020-12-02 at 8.41.59 PM.jpg?source=viewer&v=d07fc385e14168b355cf735db5bd0b8f
    1. Internal name: Assign a unique name to each footer row. The value will not be printed on the actual live page. 
    2. Row Appearance: Customize padding and background options.
    3. Row Separator: Choose to display a separator between each column in the row.
    4. Typography: Text and heading text color options.
    5. Column Repeater: A repeater field to control the columns to be displayed within the footer row.
  3. The next step is to decide how many columns to be displayed inside the row and the types of content. 
    Click +Add in the Column repeater to add your first column. 
  4. Once added, here are the available fields and field groups:
    Image 2020-12-02 at 8.46.41 PM.jpg?source=viewer&v=ee60ce289d7a55ee68892fb2c7b9c172
    1. Column Width:  Choose how wide/narrow the column needs to be.
    2. Alignment: Desktop and mobile text alignment options.
    3. Content Repeater: Each column can have its own contents, you can add an unlimited number of contents into each column.
  5. A footer row supports up to 12 columns. If you need three equal-width columns, you can specify 4 in this field.
    As an example, the first Footer row of the live demo site has 3 columns of 3 - 3 - 6. Image 2020-12-02 at 8.38.57 PM.jpg?source=viewer&v=c2e123b410e245d9eb945e60e395cc29
  6. Next is to add the Contents into the column. Click +Add in the Content Repeater field.
  7. Similar to Mega Menu's Content Repeater, you'll start with choosing the Content Variant to display. 
    Image 2020-12-02 at 8.51.21 PM.jpg?source=viewer&v=80420f25bb0de3d9b0eb7f8b703eb496
    Available Content Variants:
    1. Content
    2. Form
    3. Inline Menu
    4. Vertical Menu
    5. Logos
    6. Posts 01
    7. Posts 02
    8. Social Links: The social links will be fetched from the Social links group as seen in Chapter 1's step 5.