Banner/Breadcrumb

Estimated reading: 2 minutes 15 views

Themepul themes provide complete control over the banner area and breadcrumbs, allowing you to create visually appealing headers and improve navigation across your site. These settings can be applied globally or overridden on individual pages or posts.

1. Banner Background

Customize the default banner background for all pages and posts:

Background Colors:
- From Color: Starting color of the banner.
- To Color: Ending color for gradient backgrounds.
- Direction: Define the gradient direction (e.g., left to right).
⚠️ Gradient backgrounds take priority over background images.
Background Image:
- Upload: Upload a custom banner image.
- Position: Choose the alignment (e.g., Center Center).
- Repeat: Set whether the image repeats (No Repeat recommended).
- Attachment: Choose scroll behavior (Scroll or Fixed).
- Size: Use Cover to ensure the image fills the banner area completely.

2. Breadcrumb Styling

Breadcrumbs improve user navigation and indicate the current page location. Configure them as follows:

Breadcrumb Title Color: Set the color for the breadcrumb title text.
Breadcrumb Text Color: Customize the text color for breadcrumbs.
Breadcrumb Link Color: Set colors for normal breadcrumb links.
Breadcrumb Link Hover Color: Define colors for breadcrumb links on hover.
Breadcrumb Spacing: Adjust spacing around breadcrumbs (top, right, bottom, left in pixels).

3. Banner Title Settings

HTML Tag: Choose the HTML tag for the banner title (H1–H6) for semantic structure.
Title Alignment: Set the page title alignment within the banner (left, center, right).

Tips for Banner & Breadcrumb Settings

Use high-quality images to ensure banners look professional on all devices.
Test gradient colors and background images together for consistent design.
Maintain sufficient contrast between banner background and title text for readability.
Adjust breadcrumb spacing carefully to prevent overlapping with other elements.