# Lifestyle

### 1. Create new articles

* Please go to **admin > Content > Articles > Add new**
* Create your articles for a lifestyle topic
* Assign your articles to the category "Lifestyle"

![Create Joomla articles](https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FBhjwa2UV3sm4VZ9syXOz%2Fcreate-joomla-articles.jpg?alt=media\&token=fdc9d8e2-eba2-412c-88a2-c45ff172ebb5)

### 2. Create menu item "Lifestyle"

* Go to **Admin > Menus > Main menu > Add new**
* Menu item type: **Articles » Category Blog**
* Choose a category: **choose the Lifestyle category**
* Template style: **tz\_magazine - Default**

![](https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FhJjTRFrXKGzalr1D4Q4L%2Flifestyle-menu.jpg?alt=media\&token=d655fee6-4bdd-452a-80c5-8e95fd7ec5e5)

**2.1. Configure blog layout**

Navigate to the **tab "Blog Layout"**, and you'll be able to configure options including Leading articles, Intro Article, columns, article order, and others. Set each value number of each option or use default settings.

* **Leading articles**: the number of featured articles placed on the top of the page
* **Intro Articles**: the number of articles will be displayed on the page
* **Columns**: the number of columns in which articles will be shown

![Blog Layout Settings.](https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FTvjEko20hCRWk5AJNXLc%2Flifestyle-blog-layout.jpg?alt=media\&token=f40ec270-89f2-4e07-9e6b-5569f9dff6e5)

**2.2. Configure Blog Options**

Navigate to the tab "Blog Options", and you'll be able to **adjust the image position of the lead article, and intro articles**. Moreover, you can also configure width options of intro images on different devices (Large desktop, desktop, laptop, tablet, and mobile).

![Configure blog options](https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FjvoktyvJ6VV2H60suinq%2Flifestyle-blog-options.jpg?alt=media\&token=44493852-a1ab-423d-acb5-36b468589907)

### **3. Set Up Mega Menu**

#### Create module "Travel - Lifestyle"

* Please go to **System > Manage > Site Module > Add New**
* Module type: **SP Page Builder**
* Create a new section and add the Jollyany addon **"UI Articles"**
* Configure UI Articles add-on, you're supposed to choose a resource (Joomla articles), choose a category (Travel) and set the limit option (the number of articles you want to display)

![Create module "Travel - Lifestyle"](https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2Fi0D8NnkgYA6rxMLk5a1p%2Fmodule-travel-lifestyle.jpg?alt=media\&token=f7500db4-46bd-4cc5-aa72-38933affef1f)

#### Navigate to **the tab "Astroid Menu Options"**

* Enable Mega Menu
* Set width: 980px
* Drop-down: Container

In the mega menu options, click to add a new row > Select a grid layout (custom layout 3+9)  

* In the first column: Select Post Types
* In the second column: select the module "Travel - Lifestyle"

{% hint style="info" %}
On our demo, the mega menu of Lifestyle menu item was used with submenu "Post Types" and the module: Travel - Lifestyle
{% endhint %}

{% tabs %}
{% tab title="First Tab" %}
![Set up the mega menu. ](https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FbQx5PtjNtdialNXocXRp%2Flifestyle-menu2.jpg?alt=media\&token=91196adf-b22d-4222-ad89-345ae410532c)
{% endtab %}

{% tab title="Second Tab" %}
![Choose a menu layout](https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FNeGfBNvbcFwvvUNOXKyo%2Flifestyle-menu3.jpg?alt=media\&token=9b2a84a8-1a89-4916-b311-1470cc6ae8e9) ![Add a module to the menu](https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FA0H4RTqb8ZvAhw94dbVA%2Ftravel-menu3.jpg?alt=media\&token=d4cdf765-1e96-4394-9854-a61ca3e4291f)
{% endtab %}
{% endtabs %}