1. Home
  2. Ansar Elements
  3. Post Query Widgets
  4. Featured Posts (Highlight What Matters Most)

Featured Posts (Highlight What Matters Most)

Showcase your most important post as a hero section, with supporting posts alongside it.

Perfect for homepage highlights, news sections, or editorial layouts.


⚡ Quick Start

  1. Drag & drop Featured Posts
  2. Choose layout (Vertical / Horizontal)
  3. Select posts using Post Query
  4. Customize hero + supporting posts
  5. Style to match your brand

🎛️ Content Controls (TAB_CONTENT)

📦 Container Layout

Define overall structure

  • Layout:
    • Vertical (Hero left, list right)
    • Horizontal (Stacked layout)
  • Hero Width (for vertical layout)
  • Small Columns (supporting posts grid)
  • Column & Row Gaps

💡 Controls how hero + small posts are arranged


🧩 Hero Post Layout

Design the main featured post

  • Layout Preset:
    • Standard
    • Overlay
    • Three (alt style)

📄 Hero Post Content

Control what appears in main post

  • Show/Hide Image
  • Title + HTML Tag
  • Meta (date, author, comments)
  • Excerpt length
  • Category

🧩 Supporting Posts Layout

Design smaller posts (right side / below)

  • Layout Preset:
    • List
    • Overlay
    • Standard
  • Thumbnail Size

📄 Supporting Posts Content

Control content for small posts

  • Show/Hide Image
  • Title
  • Meta
  • Excerpt

🔍 Post Query

Choose which posts to display

  • Categories / Tags
  • Order & Order By
  • Posts Per Page
  • Not Found Text

🔘 Button (Optional)

Add CTA inside posts

  • Button Text
  • Icon
  • Position

🔢 Post Counter (Optional)

  • Enable numbering
  • Style & position

🎨 Style Controls (TAB_STYLE)

🧱 Post Card (Hero)
  • Background
  • Border & radius
  • Shadow
  • Padding

🧱 Supporting Cards
  • Background
  • Border & spacing
  • Compact styling

🖼 Featured Image
  • Size & ratio
  • Overlay
  • Border radius

📝 Title
  • Typography
  • Color & hover

📊 Meta
  • Typography
  • Icon color
  • Spacing

📄 Excerpt
  • Typography
  • Color

🔘 Button
  • Colors & hover
  • Padding & radius

💡 Pro Tips (High Conversion Use Cases)

🔥 1. Use as Homepage Hero Section
  • First post = latest or featured article
  • Others = supporting content

⚡ 2. Best Layout Combo
  • Vertical layout
  • Hero width: ~60%
  • 2–3 small posts

👉 This creates a news portal style UI


🎯 3. Content Strategy
  • Hero → long title + image
  • Small posts → short titles only

How can we help?