Homepage Builder

The Home Page is built using a collection of Elementor widgets included with the theme. Each widget controls a specific section of the page (such as grids, sliders, headings, and post lists). By combi

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.

Last updated

Was this helpful?