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.
To edit the link, click on the pencil icon as shown below.
3. Enter the title in the Custom Title box (this title appears in the Header), enter the link in the URL (if link type selected is External link provided, and select the parent menu link from the drop-down menu. Click Save.
4. To create a new link in the header menu, click the Add Link button.
The Add Link tab is displayed. You can add different types of links to your site.
The options are as shown and described below -
Project - Link directly to a project page. Only the required project has to be selected and a custom title must be entered (the title will appear in the header) to create a new link.
Once saved, the link will appear on the header menu of the site as illustrated below.
All projects - Creates a link to a page that showcases all projects. If you have not set up your all projects page, read the article on Use the all projects page to showcase your project history.
Static - Links to an existing static page. Read about setting up your own information on a static page in the article Add Static Pages.
External Link - Link to an outside URL of an external site, for example your organization's website or a reference site.
Home Page - This will link to the site’s homepage. You can read the article on The homepage editor to understand your site homepage.
Hub - This will link to your hub landing page to showcase the projects on a hub. Read the article on Setup your hub landing page to understand how to create a hub landing page.
Parent links: To create a parent link, simply select the / symbol within the "Nest under parent link" dropdown.
You can also add sub-items to an existing Parent link. You have to add these as new links choosing the correct Parent Link.
Once saved, the sub items will appear under the header menu item of the site as illustrated below.
5. Select the Breadcrumbs tab to define the hierarchy of parent and child projects. This can be done by selecting, dragging and dropping the child projects under the parent projects. Please note that only Published projects will be shown here.
6. Select Footer Links. The links listed here will appear as a footer (at the bottom) of your site.
You can select the type of link, details to display on your page and the titles that will be displayed.
You can delete any of these links by using the Delete button alongside each.
7. You can add additional links using the Add a Link button
Note - At any point to preview your site header and footers, choose your project from the project list and click Preview or simply view the home-page.
You can also add Google Translate in the header of your site via the Marketplace and can choose to align it either on the left or right.
Note: Please note that only published projects and projects not already grouped within a hub will be shown here.
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.
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