> For the complete documentation index, see [llms.txt](https://emohelp.gitbook.io/emo-timeline-plus/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://emohelp.gitbook.io/emo-timeline-plus/overview/build-demo-page.md).

# Build Demo Page

This section will help you build default Theme page the same as Emo Focus demo site.

{% 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="https://1014750312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2rqBDsggTtkD1jrmlx81%2Fuploads%2FdDeZUeiH66Y42fBTDjfg%2Fhome.png?alt=media&amp;token=172dd7c8-b072-4e4b-ba28-3fbfc85c4772" 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="https://1014750312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2rqBDsggTtkD1jrmlx81%2Fuploads%2FUrVDjW4VSMck8CFoNayV%2Ffocus-widget-1.png?alt=media&amp;token=46fda7ae-24de-47f6-8cd7-fdc1952dd184" 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="https://1014750312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2rqBDsggTtkD1jrmlx81%2Fuploads%2FIfU1lLyYRV4ezVf5FPcx%2Ffocus-widget-2.png?alt=media&amp;token=1bbf3f19-6fc0-4db4-a853-8ca8367ca15a" 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="https://1014750312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2rqBDsggTtkD1jrmlx81%2Fuploads%2FM2VHwF1Q1AyE0AjIL7Yh%2Ffocus-widget-3.png?alt=media&amp;token=4fb49db3-23a8-4170-88bf-33a5d0b2afd5" 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="https://1014750312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2rqBDsggTtkD1jrmlx81%2Fuploads%2FBcJYqSbOIq4Vs05fPzsq%2FFrame%2013.png?alt=media&amp;token=1f84f8b9-8517-4e40-804a-1936b7a78032" 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="https://1014750312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2rqBDsggTtkD1jrmlx81%2Fuploads%2FqfC1EswzrA92PCs57Aib%2Fchrome-capture-2023-2-6%201.png?alt=media&amp;token=61a8ba34-bf06-45f3-94a2-e774a961885e" 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="https://1014750312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2rqBDsggTtkD1jrmlx81%2Fuploads%2FB8jR5YO6bpFtMBrY3UNL%2Fchrome-capture-2023-2-6%201%20(1).png?alt=media&amp;token=0522d704-409b-4cc0-beef-a9faee018c48" alt=""><figcaption></figcaption></figure>

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

#### 2.1. Topbar

<figure><img src="https://1014750312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2rqBDsggTtkD1jrmlx81%2Fuploads%2F4YJqUlVGTIdKwxWAeJfB%2Ftopbar.png?alt=media&amp;token=7d63a928-885a-4d38-985a-a6a4b4776ffd" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1014750312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2rqBDsggTtkD1jrmlx81%2Fuploads%2FHPuruE9jy4qPYM7ghLWH%2FScreenshot_2.png?alt=media&amp;token=2d8c607f-a4f4-4719-8334-59aa86016b1d" 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="https://1014750312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2rqBDsggTtkD1jrmlx81%2Fuploads%2FHzCPSSonXGgvYjgo6zIb%2FGroup%207.png?alt=media&amp;token=8ce56cfe-1a42-49cf-a452-8fd6f397878e" 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="https://1014750312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2rqBDsggTtkD1jrmlx81%2Fuploads%2FGC05AiHSKVeJSDalYqoJ%2FScreenshot_3.png?alt=media&amp;token=f810b6f2-f353-4b7f-a27b-1f7da07a480e" alt=""><figcaption></figcaption></figure>

Then add this HTML code to the Navigation label

<figure><img src="https://1014750312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2rqBDsggTtkD1jrmlx81%2Fuploads%2FSWO6XXSgrH6y7IQPUIrL%2FScreenshot_4.png?alt=media&amp;token=cf4962cb-fbac-4fa8-a8d3-c2964645a265" 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="https://1014750312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2rqBDsggTtkD1jrmlx81%2Fuploads%2FxeGHAhLqeekLOOGepCLA%2FScreenshot_6.png?alt=media&amp;token=420a8fca-31e5-4afa-89e4-ef41246d99dd" 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="https://1014750312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2rqBDsggTtkD1jrmlx81%2Fuploads%2FWtXcLtoABJ4UUPGJEvsa%2Fchrome-capture-2023-2-6%201%20(2).png?alt=media&amp;token=cfab6b3e-4ade-4651-bf46-55b7f04feeb0" alt=""><figcaption></figcaption></figure>