Sections are important parts of your home page, which allow you to provide a variety of features such as widgets, tools, and links to specific projects that you want to present. A section can be added by clicking on the “+” sign in the right part of the appearance editor.

Note: To save the changes you have made, you can use the buttons Save as draft (to save the changes), and Publish (to show these changes on the front end), which appear at the top. If you do not, the changes will not be saved. You will also see the Preview button.

On clicking Preview, you can choose from the top left corner, to see how the home page would appear on the front end through a tablet, a mobile phone, as well as a computer.

The Home page can also be shared using the Share a draft option on the right corner. This will allow you to share the home page with your colleagues or managers for approval.

This article covers the following sections in the Appearance editor:

When you click on "+ Add a section", the page containing the different sections opens. You will see a list of sections in the bar on the left and the different layout styles for each section on the right. To add a section, just click on the layout image of your choice.

Now let's look at the example in the Banner section.

On the sections page (as shown in the image above), click on the Banner menu item on the left, then click on one of the layout images in the Banner section to add it. The first five layout options displayed will give prominence to the text overlay more than the banner image. This results in wider images appearing cropped. If the image is required to be displayed without getting cropped along with the text, layout 6 is the option to go with. Once the section is added, we see the parameters part on the left and the preview on the right

Note: At any time, you can move the cursor over any image of the section on the right, to see the Edit section button. By clicking on this button, you will open this section.

In the settings, you can update the Image, Height, Title, and Description of the banner. You can also choose to Display the full banner image by enabling the toggle "Display full banner image". This will hide the Banner Title and Description and only the image will be visible.

By continuing to scroll, you will be able to update the Button Text, as well as the Button URL (the link to the page to which it leads when you click the button). Setting a focal point on the main subject of the image will keep that particular part of the image visible on any device/platform.

At the top of the settings for each section, you will find 3 other tabs and an icon with three dots on the right. These three tabs allow you to define the color, font, and layout settings (how they apply to each type of section).

The three dots on the right allow you to hide the section, move it up or down the page and delete it.

​

After the banner, comes the "Projects" section.

As the name suggests, it allows you to add a section that presents one or more projects on your home page.

You can choose to add projects by either choosing the ‘Auto select’ option or the ‘Manual select’ option.

If you choose Auto select, the below options will be displayed.

If you choose the option 'Manual Select, then the below options are displayed, where you can choose each of the projects to be displayed.

​

With the project section, you can also add tools, hubs, & custom URLs along with the projects.

Select the Project option in the dropdown to add and customize a project for display on the homepage. The following Card Settings options are displayed.

​

In the Card type section, once you add a project, customize the title, enter a description, and upload the image, click Save. You have to repeat this process of adding a card for all the projects that you would like to add to your homepage. You can then drag and drop cards to reorder them as you require.

To delete a project from the homepage, click on the ‘Delete project' button located at the bottom-left corner.

Note: The way to select this section or any other section to come, is the same as that explained in the case of the Banner. Once selected, the parameters will appear on the left and the preview on the right. It is also the model for all the other sections.

The project settings allow you to define the following elements (highlighted in the image below)

• The title of the section

• The publication date

• To show or hide the "View project" button

• Selection of projects via project tags or manual selection.

• The tabs for each project are presented in this section (indicated as 1, 2, and 3 in the • image below). Other projects can be added by clicking on the blue “+” sign on the right.

• Select an existing project

When we scroll through the settings in the projects section, we see other options as follows.

• Change the image of the project

• Change of title and description

• Delete project

​

As explained in the Banner section, the other three tabs shown in the image below and the icon with the three dots are used respectively to manage the color, the font, the layout, and other parameters. They appear in all sections and the options there change depending on the section selected.

This section also allows you to change the order of the project cards on the Homepage. This can be done by dragging and moving the card you wish to reallocate to replace the existing card in the current order. Eg. Drag and drop card 5 in place of card 1 to have card 5 appear as the first card.

Sometimes when there are more than 6 cards, it gets tricky to move the cards as all cards are not visible in the same row. In such instances, just zoom out so that all cards are displayed in a row. Then the reordering becomes much easier. Please see the video below for reference.
​

After Projects, we see the “Featured” section. The particularity of this section is that it allows us to choose either specific projects to present, or particular tools, or a hub.

As with the other sections, we see the settings on the left side and the preview on the right. In the settings, we see the first tab selected, by default.

​

The settings in this section allow you to do the following.

• Change section title

• Show or hide the status of the project, whether it is published or archived

• Show or hide the call to action button (See the project)

• Select the type of content (be it a project or a tool)

• Change the image of the project

• By scrolling through the list, we can do the following

• Change the title and description of the project sheet

• Edit button text and a button link

Now back to the Content-Type. We saw earlier that the default selection was "Project". Now we select "Tool" and we see that there are two drop-down menus, one for the project and the other for the tool. In this example, we have selected the survey tool entitled “Latest New articles”, from the “Louis Vuitton” project.

​

When you choose to show the tools of a project, the settings are as follows.

• Change the image in the section

• Edit title and description

• Edit button text and link.

The next section is the Project Finder. The next section is "Project Showcase".

This section allows the user to search for a particular project using certain filters, such as project name, project label, year of creation, status (published or archived).

Then a series of options related to the filter, such as

• Show search

• Show tags filter

• Show year filter

• Show state filter

Below is the "View more options" link.

Clicking on this button will open other links, listed below.

• Show reset filter button

• Show project name

• Show project description

• Show project status

• Display the "View project" button

• Display publish date

• Project pagination view

Below these options, you can choose the number of projects per page.

The Slider section is used to present various images of the project such as a photo gallery. Users can see the projects and also visit the project by clicking on the slider image.

Once the Slider section is activated, you will see the following options.

• Change section title

• Increase or decrease the cursor speed

• Increase the slider height - the minimum height of the slider is 400px, so please ensure that your images are sized to fit this

• Tabs 1, 2 & 3 (and more can be added if necessary by clicking on the “+” sign on the right), for the details of each slider.

Changing the slider image.

The further down you go, the more options you see, such as

• Title and description of the project

• Button text and Button URL

• Delete slide

The Register Banner section is located after the Slider section.

This section allows the user to click on the button in the center of the banner and go directly to the registration page. In the settings you will see the following options.

• Change image

• Change of title and description

When we scroll down, we also see the option to change the text on the button.

We now see the section on the Who's Listening widget. To learn more about this widget, click here.

Click on this link, and then your preferred layout on the right, to add this section.

As for the other sections, you will find on the left the various parameters listed below.

Change section title

• Selection of profiles 1, 2, and 3 of different people in the widget. Others can be added by clicking on the blue “+” sign

• Change of the person's Name, Occupation, Email, and Company.

and at the end, the button to delete the member.

• These options will be available for each member in the tabs 1, 2 & 3 (and more) indicated above.

We now see Documents, which is the next widget-based section. To learn more about this widget, click here.

Just click on the Documents link and click on the preferred layout that appears on the right to add this section.

On this page, you will find the following settings.

• Change of section title.

• Change of icon. You can click Edit Image, to choose from a list of icons. There is also the possibility of downloading icons.

• Tabs for each document. The parameters of each document can be modified individually in these tabs labeled 1, 2, and 3. Other tabs can be added by clicking on the blue “+” sign.

• The ability to upload a document, or to provide an external link to the document. • Option to name the file

• At the bottom, you will find the button to delete the document

The documents section is followed by the Key Dates section. To learn more about the Key Dates widget, click here.

As before, click on Key Dates and the layout of your choice on the right side of the page, to add this section.

The settings in the key dates widget are as follows.

• Change of section title

• Change of icon (you can choose from a collection of icons by clicking on the blue "Edit Image" button

• Adding or removing the number of instances of Key Dates in the tabs labeled 1, 2 and 3. Other dates can be added by clicking on the blue “+” sign

• Type of event: One day or several days.

• Add Start date and End date based on the type of event.

• Change name and description of cards in the section

• Option to add a Link Text and Link URL field

• The option to open the link in a new tab

• Option to delete Key dates

We will now examine the Life Cycle section based on this widget. To learn more about the Life Cycle widget, click here.

Click on Life Cycle and select a layout of your choice to add this section.

The options available in this section are as follows.

• Change section title

• Change the icon. You can choose any other icon of your choice by clicking on the blue button "Edit Image". Here, you can also upload new icons if needed.

• Tabs 1, 2, and 3 indicate the 3 stages of the life schedules available by default. Other steps can be added by clicking on the blue “+” icon on the right

• Modification of the name and description of the section files

• Button to delete a stage from the Life timelines section

The next section is the FAQs. To learn more about this widget, click here.

Click on this link and add the section, choosing the model of your choice in the panel that appears on the right side. The settings section then appears as shown in the image below and presents the following options.

• Change section title

• Change the icon. You can choose from several icons by clicking on the blue button titled "Update".

• Tabs 1 and 2 (for each question and its answer). Other tabs can be added by clicking on the blue “+” sign.

• The text of the question and the text of the answer.

• At the bottom, the button to delete the question.

The next section is the Important Links section, based on the widget. To learn more about this widget, click here.

Click on this link and add the section, choosing the model of your choice in the panel that appears on the right side. The settings section appears as shown in the image below.

In the settings of this section we can:

• Change section title

• Change the icon. You can choose several icons by clicking on the blue "Edit Image" button.

• Add or remove the tabs labeled 1 & 2. These are tabs for each important link. Other tabs can be added by clicking on the blue "+" button on the right

• Edit link name and URL

• Deactivate or activate the opening of the link in a new tab

• Remove the link by clicking on the 'Delete link' button at the bottom

It is possible to add custom content, such as images, text, links and tables, using the Freestyle Content section. This is based on the custom widget.

To add this section, click on the Custom link, then on your preferred layout on the right side.

The custom section offers the following options:

• Change of section title

• Add and edit content, using a text editor that lets you add text, images, tables, hyperlinks, and other font formatting.

• You will notice that this section does not have tabs to change the fonts and the layout at the top because it allows this customization in the content area itself.

The title is probably the easiest section to add.

As the name suggests, the function of this section is to add a title to your page. There are no other options in this section, just a field to enter the title of your choice.

​

You may want to add a combination of a title and description. This is precisely what this section does.

Like the Title section, the Title and description section has no other parameters than a field for entering the title and another field for adding the description. As seen in almost all of the previous sections, it also has the usual color, font and layout tabs at the top.

The video section allows you to add YouTube or Vimeo videos to your home page. Click the Videos button to add this section.

The options available in this section are quite simple. You can select the type of video (YouTube or Vimeo), the URL of the video, the height and finally the title of the video.

The last section of the list is HTML. This section allows you to enter your own HTML code.

Click the HTML link to add this section. The settings in this section simply consist of the space where you can enter your HTML code.

Note: HTML section only accepts proper HTML syntax/code/tags. The 'Custom code' in site settings accepts these 5 codes - SCRIPT, META, LINK, STYLE, BASE.

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