In the "Appearance" section, the Home page editor is the second part (after Global styles), where you can further customize the look and feel of your site.

You can refer to the below video that explains the different sections or follow the article.

Click on the Appearance button and then the Home Page Editor.

The Home page consists of two parts, Templates and Sections.

Templates allow you to choose one of six default design themes, depending on your needs. The section consists of 4 other parts by default. Let's examine them one by one.

Templates

Click the Templates button, as shown in the image above. You will see that a template has already been selected by default. Below, you will also see the title of this Template under the text "Current Template", which in this example is Whitehaven

Click the "Change Template" button to view the collection of six templates - Bondi, Whitehaven, Cottesloe, Burleigh, Gold Coast, and Crestview. Here, if you like the Bondi template and click on it, the template will be changed to Bondi.

Click here to learn more about the different templates available.

Sections

In the Sections part, there are 4 default elements for the Whitehaven model. The number and types of sections selected by default will change depending on the template selected. Among these four sections, the Header and Footer are permanent, for any model. They cannot be deleted.

As you can see, there are two sections in between, both labeled "Projects". These two sections that appear by default, as well as any other sections that you could add here, can be deleted as required.

The Header

The first of the sections is the Header. This tab offers three main parameters. Content, colors, and links.

Under the first tab, you will see the Logo section.

As the name suggests, the Logo section allows you to add a logo to your site. Just click on "Edit Image" to choose an image for your logo. The part located under the Logo parameter allows you to customize the text of the links to connect and to register.

The Color tab allows you to select the background and text color of the navigation bar.

Finally, by clicking on the links icon, you will open the Navigation links section. By clicking on the Edit Links button, you will open the page where you can define the following.

  • Header: The navigation links, which will appear in the header of the site. You can rearrange them as required, drag and drop, or add new links from here.

  • Breadcrumb: This allows you to define a parent-child hierarchy of your project pages.

  • Footer: The navigation links that will appear in the footer area. This section allows you to add or remove links from the footer.

You can also add Google Translate in the header of your site via the Marketplace and can choose to align it eiither on the left or right.

Note: Even when the new appearance editor is not published, any changes made after clicking on 'Edit Links', will reflect on the homepage right away as this is an autosave feature.

Projects

This is the second section (in the context of the Whitehaven model) that allows you to configure project details on the home page, such as Content, Color, Font, and Layout. This section has four icons, each corresponding to the features mentioned above.

Content: This tab shows you the appearance parameters of the project card and the content it displays, such as the source project name, the project image, the project title, the permalink and the project description. You will also find icons for adding other projects.

Color: In the color tab, you can change the colors of the different elements of the page, as shown in the image below.

Fonts: The Fonts section allows you to define different font styles for titles and body text. You can also change the font size of different parts of the text.

Layout: The layout allows you to choose different layout styles for the project section.

At any time, you can click the + sign, which says Add Section, to add one of the various choices of sections available. Click here to learn more about the sections.

Adding widgets

This interface allows you to add a variety of widgets to your home page. As an example, we can see how the Key Dates widget can be added. Just click on the "+" sign which indicates "Add a section".

On the page that opens, scroll down the bottom of the page to find the Key Dates widget for example. Click on the Key Dates link to choose a layout.

Once you have selected the layout, you will be taken back to the previous screen, where you will see the added widget section (right) and its open settings (left).

On this page, in the left section, you will see and be able to modify the following items.

  • Section title

  • Icon for the widget

  • Type of event: One-day or multi-day event

  • Start date

  • The name of the event

  • Description of the event - Add an event link hyperlinking the text

The changes you make on this page in the settings section will be displayed immediately on the right side. You can make specific settings for individual instances of key dates, by clicking on tabs 1, 2 and 3 (highlighted in the image below).

Other key dates can be added by clicking on the round blue "+" sign to the right. The widget icon can also be changed by clicking "Edit image".

At the top, you will see three other tabs.

  1. Color: To change the colors of the title, text, section background and background of the widget area (as shown below)

2. Fonts: To change the font and font style of the title, subtitle and content.

3. Layout: To select an appropriate layout for the widget

In this way, you can add any widget from the "Sections" page. All widgets will have the same tab template, the first for specific widget settings and three more tabs for color, font, and layout.

Click here to learn more about the sections.

Footer

Finally, at the bottom of the page, you will find the Footer section. This section also has three tabs. The first tab allows you to add links for Facebook, Twitter, Google, Instagram, Linked In, and YouTube. The social media icon on the footer will be linked to the URL added in the left panel

The other two tabs, Color, and Links work in exactly the same way as in the header.

Contact our support team if you need any further assistance via chat or email support@engagementhq.com

Did this answer your question?