Page banner
Settings
| Setting | ID | Type | Default | Description |
|---|---|---|---|---|
| Full width | full_width | checkbox | false | |
| Class | class | text | ||
| Layout | layout | select | text | |
| Text width | text_width | range | 40 | |
| Text horizontal | text_horizontal | text_alignment | left | |
| Text vertical | text_vertical | select | end | |
| Overlay class | overlay_class | text | When layout is overlay. Spacing like: mt-1, mb-2, px-4, py-6. | |
| Style | overlay_style | select | none | When layout is overlay. |
| Background | overlay_bg | color_background | Set a gradient background with transparency. | |
| Height (desktop) | pageheader_height | range | 30 | |
| Height (mobile) | pageheader_height_mob | range | 50 | |
| Show page title | show_title | checkbox | true | |
| Page title | title | text | ||
| Tag | title_tag | select | h1 | |
| Custom style | title_custom_style | checkbox | false | |
| Size (mobile) | title_size_mob | select | text-sm | |
| Size (desktop) | title_size | select | text-base | |
| Color | title_color_mode | select | heading-text | |
| Custom color | title_color_custom | color_background | linear-gradient(to right, #111827, #6b7280) | Solid color or gradient. Shown when Color is set to Custom. |
| Alignment (desktop) | title_alignment | text_alignment | left | |
| Alignment (mobile) | title_alignment_mob | text_alignment | left | |
| Show SEO description | show_description | checkbox | true | |
| Custom style | description_custom_style | checkbox | false | |
| Size (mobile) | description_size_mob | select | text-sm | |
| Size (desktop) | description_size | select | text-base | |
| Color | description_color_mode | select | base-text | |
| Custom color | description_color_custom | color_background | linear-gradient(to right, #111827, #6b7280) | Solid color or gradient. Shown when Color is set to Custom. |
| Alignment (desktop) | description_alignment | text_alignment | left | |
| Alignment (mobile) | description_alignment_mob | text_alignment | left | |
| Image (desktop) | banner_bgimg | image_picker | ||
| Image (mobile) | banner_bgimg_mob | image_picker | ||
| Enable thumbnail style | thumbnail | checkbox | true | |
| Radius | radius | select | rounded-md |
Option values
- Layout (
layout): Overlay (overlay), Text above image (above), Text below image (below), Text left image (left), Text right image (right), Only text/No image (text) - Text vertical (
text_vertical): Top (start), Middle (center), Bottom (end) - Style (
overlay_style): Tint (full), Box (box), Text shadow (shadow), Text shadow and tint (full shadow), No overlay background (none) - Tag (
title_tag): h1 (h1), h2 (h2), h3 (h3), h4 (h4), div (div) - Size (mobile) (
title_size_mob): 3 Extra Small (text-3xs), 2 Extra Small (text-2xs), Extra Small (text-xs), Small (text-sm), Medium (text-base), Large (text-lg), Extra Large (text-xl), 2X Large (text-2xl), 3X Large (text-3xl), 4X Large (text-4xl), 5X Large (text-5xl), 6X Large (text-6xl), 7X Large (text-7xl), 8X Large (text-8xl), 9X Large (text-9xl) - Size (desktop) (
title_size): 3 Extra Small (text-3xs), 2 Extra Small (text-2xs), Extra Small (text-xs), Small (text-sm), Medium (text-base), Large (text-lg), Extra Large (text-xl), 2X Large (text-2xl), 3X Large (text-3xl), 4X Large (text-4xl), 5X Large (text-5xl), 6X Large (text-6xl), 7X Large (text-7xl), 8X Large (text-8xl), 9X Large (text-9xl) - Color (
title_color_mode): Primary (primary), Secondary (secondary), Success (success), Warning (warning), Danger (danger), Base text (base-text), Heading text (heading-text), Black (black), White (white), Gray 100 (gray-100), Gray 200 (gray-200), Gray 300 (gray-300), Gray 400 (gray-400), Gray 500 (gray-500), Gray 600 (gray-600), Gray 700 (gray-700), Gray 800 (gray-800), Gray 900 (gray-900), Random (random), Custom (custom) - Size (mobile) (
description_size_mob): 3 Extra Small (text-3xs), 2 Extra Small (text-2xs), Extra Small (text-xs), Small (text-sm), Medium (text-base), Large (text-lg), Extra Large (text-xl), 2X Large (text-2xl), 3X Large (text-3xl), 4X Large (text-4xl), 5X Large (text-5xl), 6X Large (text-6xl), 7X Large (text-7xl), 8X Large (text-8xl), 9X Large (text-9xl) - Size (desktop) (
description_size): 3 Extra Small (text-3xs), 2 Extra Small (text-2xs), Extra Small (text-xs), Small (text-sm), Medium (text-base), Large (text-lg), Extra Large (text-xl), 2X Large (text-2xl), 3X Large (text-3xl), 4X Large (text-4xl), 5X Large (text-5xl), 6X Large (text-6xl), 7X Large (text-7xl), 8X Large (text-8xl), 9X Large (text-9xl) - Color (
description_color_mode): Primary (primary), Secondary (secondary), Success (success), Warning (warning), Danger (danger), Base text (base-text), Heading text (heading-text), Black (black), White (white), Gray 100 (gray-100), Gray 200 (gray-200), Gray 300 (gray-300), Gray 400 (gray-400), Gray 500 (gray-500), Gray 600 (gray-600), Gray 700 (gray-700), Gray 800 (gray-800), Gray 900 (gray-900), Random (random), Custom (custom) - Radius (
radius): Square (rounded-none), Rounded small (rounded-md), Rounded medium (rounded-xl), Rounded large (rounded-2xl), Rounded extra large (rounded-3xl), Squircle (rounded-squircle), Circle (rounded-circle), Pill (rounded-full), Rounded top (rounded-top), Rounded bottom (rounded-bottom), Single corner (rounded-corner), Diagonal corners (rounded-diagonal), Arch (rounded-arch), Dome (rounded-dome), Cylinder (rounded-cylinder), Barrel (rounded-barrel), Leaf pointed (rounded-leaf-point), Leaf (rounded-leaf), Lens (rounded-lens), Petal (rounded-petal), Egg (rounded-egg), Egg inverted (rounded-egg-inverted), Shield (rounded-shield), Drop (rounded-drop), Diamond (rounded-diamond), Blob (rounded-blob), Amoeba (rounded-amoeba), Flower (rounded-flower), Mountain (rounded-mountain), Pebble (rounded-pebble), Bean (rounded-bean), Cloud (rounded-cloud)
Presets
- Page banner