Colors, Typography & Page Heading - Listdomer Theme

Adjust site-wide colors and typography, and control the page heading banner.

ノート

These color and typography controls apply across the theme. Tweaks here let you match Listdomer to your brand without custom code.

Colors and Styles

• Body Background Color: Set the overall page background color. By default it’s a light off-white (#e8f1ff). You can change it to any hex color or use the color picker.
• Primary Gradient Colors: Listdomer uses a gradient for various buttons and highlights. It has two color stops. You can select the Primary Color (first gradient color) and Secondary Color (second gradient color). By default, these are a light blue (#33c6ff) blending to a darker blue (#306be6).
• Buttons Styling: Under Colors, see the Buttons subsection for detailed control of button appearance. Configure Primary Buttons and Secondary Buttons: set background color and secondary background for gradients, text color, hover background and text colors, border style and color, and border radius.

Typography

• Main Font: Controls the base font for body text. By default Listdomer uses “Poppins” at 16px. You can select any Google Font from the dropdown and adjust size, weight, line height, and color for general text.
• Headings (H1-H6): Each heading level can be configured. By default, these use the Poppins font with various sizes: H1 ~54px, H2 ~32px, descending to H6 ~14px. You can change the font family or size of any heading, adjust weight, and color.

Page Heading (Banner) Settings

• Enable Page Header Section: A master switch to show or hide the page title section globally. If you turn this off, page titles will not be shown in the designed banner.
• Title & Description Typography: Customize the font styling for the page title and optional description text in the banner. By default, titles are large and centered (e.g., 42px, Poppins, semi-bold).
• Background for Banner: Choose a background color or image for the page header area. Options allow setting the image position, repeat, size, and scroll behavior.
• Banner Border & Shapes: Add a bottom border or divider to the banner. There’s also a toggle “Enable Shapes” to add abstract shape graphics in the banner background for style.
• Archive Page Titles: Include Context in Title - e.g., show “Category: Travel” vs just “Travel” as the archive title.
• Breadcrumbs: Enable a breadcrumb trail in the page header for archives and pages. If enabled, it appears just below the title.
• Archive Description: For category, tag, and listing taxonomy archive pages, choose to display the description in the banner or after the listing content. The position setting lets you put the description Inside Page Header or After Content or disable it entirely. You can limit the description length and add a “Show More” link after a set number of characters.

Examples

Updating Brand Colors - Change the Primary Color and Secondary Color in Colors and Styles. Buttons and highlights across the site update instantly to match your brand.

Custom Fonts for Headings - In Typography, set H1 and H2 to a new Google Font and adjust their sizes for a unique look.

Minimal Page Header - Disable “Enable Shapes” in Page Heading and set a solid background color for a clean banner.