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 five default design themes, depending on your needs. Section consists of 4 other parts by default. Let's examine them one by one.
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 five templates - Bondi, Whitehaven, Cottesloe, Burleigh, and Gold Coast. 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.
In 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 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 "Update" 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: Which allow 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.
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 auto save feature .
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 your page.
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.
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
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 Update.
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.
Finally, at the bottom of the page, you will find the Footer section. This section also has three tabs. The first, Content, allows you to add links to social media and a logo at the bottom of the page.
The other two tabs, Color and Links, work in exactly the same way as in the header.