Hero Section

Page Manager addon WHMCS

Order now | Download | FAQ

The Hero Section widget renders a full-width banner intended for the top of a page. It supports a badge tag, title, subtitle, description, two action buttons, overlay effects, a background video, and parallax scrolling. All typography, layout, and background options are configurable.

---

Admin Settings

hero-section-admin.png

---

Frontend

hero-section-frontend.png

---

Settings

Content Settings

Setting	Type	Default	Description
badge	text	—	Small tag displayed above the title (e.g. New Release, Special Offer)
title	text	—	Main hero heading
subtitle	text	—	Secondary line of text below the title
description	textarea	—	Longer descriptive paragraph below the subtitle

---

Button 1

Setting	Type	Default	Description
button_text	text	—	Label for the primary button
button_url	text	—	URL the primary button links to
button_color	color	#337ab7	Background color of the primary button
button_target	select	_self	Link target: Same tab or New tab

---

Button 2

Setting	Type	Default	Description
button2_text	text	—	Label for the secondary button
button2_url	text	—	URL the secondary button links to
button2_color	color	#ffffff	Background color of the secondary button
button2_target	select	_self	Link target: Same tab or New tab

---

Typography and Alignment

Setting	Type	Default	Description
text_color	color	#ffffff	Color applied to all text content in the hero
text_align	select	center	Horizontal alignment of content: center, left, or right
vertical_align	select	center	Vertical alignment of content: center, top, or bottom

---

Dimensions and Overlay

Setting	Type	Default	Description
height	text	80vh	CSS height of the hero section (e.g. 80vh, 600px)
overlay_color	color	#000000	Color of the semi-transparent overlay on top of the background
overlay_opacity	number	40	Opacity of the overlay (0 = fully transparent, 100 = fully opaque)
video_url	text	—	URL of a .mp4 video file to use as the background

---

Button Options

Setting	Type	Default	Description
button_rounded	checkbox	on	Apply rounded corners to both buttons
parallax	checkbox	off	Enable parallax scrolling effect on the background image

---

Layout Settings

Setting	Type	Default	Description
width	text	—	CSS width of the widget container (e.g. 800px, 100%)
margin_top	text	—	CSS top margin (e.g. 20px)
margin_bottom	text	—	CSS bottom margin (e.g. 20px)
style	select	puq	Visual style template
background_image	text	—	URL of the hero background image
background_color	color	#1a1a2e	Fallback background color when no image is set
disable_background_shadow	checkbox	off	Remove the drop shadow from the container
disable_background_radius_top	checkbox	off	Remove the top border radius from the container
disable_background_radius_bottom	checkbox	off	Remove the bottom border radius from the container
disable_background	checkbox	off	Disable the background container entirely
full_width	checkbox	off	Stretch the widget to the full page width

---

Style Templates

Template	Description
puq	Default hero section style