# Build Demo Page

{% hint style="info" %}
Firstly, you need to install the theme. Here is our instruction for how to [install the WordPress theme manually](/emo-timeline-plus/base/theme-manual-installation.md)
{% endhint %}

### 1. Home page

{% hint style="info" %}
Here is the instruction to create the same Homepage: *Step 1 – Drag & Drop widgets* ***Emo Focus*** has a Custom widget created especially for the theme. To set the Widget go to Dashboard > Appearance > Widgets. Or you can go to the Dashboard > Customize to see the live change. 
{% endhint %}

<figure><img src="/files/ZvK6hA5ZOCHlZbBRGn0k" alt=""><figcaption></figcaption></figure>

1.1. Home Top (Full)

This is the first section of the Home page, you can use the ***Emo Focus - Hom Feature*** widget. This widget has 4 styles that you can choose/change.&#x20;

<figure><img src="/files/8fejAgtlCb2WyWPKNYkv" alt=""><figcaption></figcaption></figure>

#### 1.2. Home Mid-top (left)

This section will show under the Home Top section, you can use the ***Emo Focus - Hom News*** widget. This widget has 5 styles that you can choose/change.&#x20;

<figure><img src="/files/1De5WL7SfOEYiUKaTT4f" alt=""><figcaption></figcaption></figure>

#### 1.3. Home Mid-Top (Right)

This is a sidebar of the Mid-top left section.&#x20;

#### 1.4. Home Middle (Full)

This section using the ***EMO Focus - Home Carousel*** widget.

<figure><img src="/files/vA7A1IRMtqjGaA3PrY0V" alt=""><figcaption></figcaption></figure>

#### 1.5. Home Mid-Bottom (Left)

This section uses the ***Emo Focus - Hom News*** widget with other layouts. This widget has 5 styles that you can choose/change.&#x20;

<figure><img src="/files/7GHdDVm8bTsgeeAcrRxi" alt=""><figcaption></figcaption></figure>

#### 1.6. Home Mid-Bottom (Right)

This is a sidebar of the Mid-Bottom left section.&#x20;

#### 1.7. Home Bottom (Full)

This section uses the **EMO Focus - Home Video** widget.

<figure><img src="/files/Z9vTV38CYi3aCeEU9ZFy" alt=""><figcaption></figcaption></figure>

To display the video posts here, you need to add the video URL when adding a post and select the Video Format.&#x20;

### 2. Header

<figure><img src="/files/YIwvW6pY1UbeXk4MRMEw" alt=""><figcaption></figcaption></figure>

This section includes the Topbar, Logo & banner, Menu.&#x20;

#### 2.1. Topbar

<figure><img src="/files/7fpF7Cp9tJ5ufly97jRW" alt=""><figcaption></figcaption></figure>

You can enable/disable the topbar from the Dashboard > Emo Focus (Theme options) > Header.

<figure><img src="/files/5acNYNE71KwiiV615eOx" alt=""><figcaption></figcaption></figure>

***2.1.1.*** To show/edit the right menu, you can go to the Dashboard > Appearance > Menu then Create a new menu and select the Topbar left menu under the Menu Settings.  &#x20;

<figure><img src="/files/yyJFxT6QlQzpPbSLYC7I" alt=""><figcaption></figcaption></figure>

***2.1.2.*** You can enable/disable the Current day and then change the Date format that you want to show from Emo focus (Theme option) > Header.

***2.1.3.*** To show the Right menu, you can Create a new menu and then select the Topbar Right Menu. If you want to add a social icon, you can find the social [here](https://fontawesome.com/search?o=r\&m=free), and copy the HTML code

<figure><img src="/files/zsW2VSSjeSrkU9Mmn1P9" alt=""><figcaption></figcaption></figure>

Then add this HTML code to the Navigation label

<figure><img src="/files/VT8i3rgxQEhscIwR35Ib" alt=""><figcaption></figcaption></figure>

2.1.4. To add the Banner to the Header, you can go to the Dashboard > Widgets and add the image widget to the **Header Banner** position.&#x20;

<figure><img src="/files/yZBUiYkl3HdTIVu70rzz" alt=""><figcaption></figcaption></figure>

### 3. Footer

You can add the widgets to the Footer sidebar position from the Dashboard > Widgets, footer from 1 to 4.&#x20;

<figure><img src="/files/F9EwDojgG4Niot8P7MHb" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://emohelp.gitbook.io/emo-timeline-plus/overview/build-demo-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.