# Homepage Builder

{% embed url="<https://youtu.be/fsiJOKQEKtk>" %}

### Getting Started

To create your homepage:

1. Navigate to **Pages → Add New** in your WordPress dashboard.
2. Name the page (e.g., “Home”) and edit it with **Elementor**.
3. Drag and drop the provided **custom widgets** from the Elementor panel.
4. Adjust the **Content**, **Query**, and **Style** options for each widget.
5. Save and set this page as your site’s front page via\
   **Settings → Reading → Homepage Displays → A static page**.

***

### Widgets Used on the Home Page

The following custom widgets are typically used to build the homepage layout:

* **Post Grid** – Showcase posts in multiple grid layouts with overlays.
* **Post List** – Display a vertical list of recent or category-based posts.
* **Classic Posts** – Traditional post listing with layout and meta toggle options.
* **Popular Posts** – Highlight trending posts with thumbnails and meta info.
* **Videos Grid** – Display videos in a grid with play icons and meta details.
* **Slider Widget** – Create a featured content slider.
* **Urdu Heading** – Add section headings with customizable typography.

Each widget comes with its own **Content**, **Query**, and **Style** settings (see individual widget documentation for details).

***

### Styling the Homepage

* Use the **Style Tab** in each widget to adjust typography, spacing, and colors.
* Match the **color scheme** and **font styles** with your brand identity.
* Experiment with **grid vs list layouts** depending on the content type.

***

### Video Guide

🎥 A step-by-step video tutorial is available to guide you through the entire homepage creation process.\
This tutorial shows how to drag and drop widgets, configure settings, and style each section.

\[Insert Video Screenshot/Link Here]

***

### Tips

* Start with the main content blocks (sliders, grids, videos).
* Add supporting sections (post lists, popular posts) below.
* Use the **Urdu Heading widget** to separate different sections visually.
* Keep spacing consistent across all sections for a clean layout.


---

# 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://docs.stylothemes.com/urdupress/elementor/homepage-builder.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.