# 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.