Design & Styling

The Design tab in the Guide Editor controls how your guide looks on the frontend. Click the Design icon in the left menu to open it. The tab contains six configuration cards that cover layout, background, colors, typography, buttons, and cards.

Layout

Choose how the guide container renders on the page:

• Full Width — The guide stretches edge-to-edge across the viewport, breaking out of the theme’s content container.
• Boxed Card (default) — The guide stays within the normal content width with rounded corners and a contained look.

Background

The background settings apply to the outer wrapper around the entire guide.

Gradient

Set two colors and a direction to create a CSS gradient behind the guide. Pick Gradient Color 1 and Gradient Color 2 using the color pickers, then adjust the Gradient Direction (0–360 degrees, defaults to 180° which is top-to-bottom). The gradient fields only appear once at least one color is set. Leave both colors empty for no gradient.

Background image

Upload an image from the WordPress Media Library. Once selected, an Image Opacity slider appears (0–100%, defaults to 100%). Lower the opacity to let the background color or gradient show through. Use the Replace and Remove buttons to swap or clear the image.

Colors

Four color pickers control the guide’s color scheme. Each one maps to a CSS custom property on the frontend:

• Primary Color (default: #000000) — Used for selected card borders, slider tracks, buttons, and active indicators.
• Secondary Color (default: #666666) — Used for secondary text and muted elements.
• Background Color (default: #ffffff) — The inner guide container background.
• Text Color (default: #111111) — Main text, headings, and labels.

Typography

Font family

Choose which font the guide uses:

• Inherit from theme (default) — Uses whatever font your WordPress theme defines.
• System UI — The operating system’s default font (San Francisco on Mac, Segoe UI on Windows).
• Inter — A clean, modern sans-serif optimized for screens.
• Arial — A widely available sans-serif fallback.
• Georgia — A classic serif font.

Spacing

Controls the overall density of the guide layout:

• Compact — Tighter padding and margins. Best for guides embedded in narrow columns.
• Comfortable (default) — Balanced spacing for most use cases.
• Spacious — More breathing room between elements. Best for full-width, standalone guides.

Buttons

Controls the look of navigation buttons (Next, Back, Continue):

Button style

• Filled (default) — Solid background in the primary color with white text.
• Outlined — Transparent background with a primary-color border and text.
• Ghost — No background or border, just primary-color text. Subtle and minimal.

Button radius

A slider from 0 to 24 pixels that controls how rounded the button corners are. Defaults to 8 px. Set to 0 for sharp corners or 24 for a fully pill-shaped button.

Cards

Controls the appearance of selection cards in Cards steps:

Card style

• Bordered (default) — A subtle border around each card.
• Elevated — No visible border; uses a shadow to lift the card off the background.
• Flat — No border and no shadow. Minimal look that relies on spacing alone.

Card radius

A slider from 0 to 24 pixels for corner rounding. Defaults to 8 px.

Card shadow

• None — No shadow.
• Small (default) — A subtle shadow for light depth.
• Medium — A more visible shadow.
• Large — A pronounced shadow for a floating effect.

Card hover effect

• Lift (default) — The card scales up slightly and gains a deeper shadow on hover.
• Glow — A colored glow appears around the card on hover.
• Border highlight — The card border changes to the primary color on hover.
• None — No hover animation.

CSS custom properties

All design settings are applied to the frontend via CSS custom properties. If you need to override a value with custom CSS, target the .guide-container selector and set these variables:

• --guide-primary — Primary color
• --guide-bg — Background color
• --guide-text — Text color
• --guide-border — Border color
• --guide-radius — Default border radius

Next steps

• Results Page — Configure how filtered results look after the guide.
• Guide Editor Overview — Full tour of the editor interface.