Customizing Your Blog Design
Explain every field in the Blog Design customize panel, for both the Blog page and the Article Detail page.
Open Blog Design from All Posts → Design Blog to customize how your public blog looks and behaves (fonts, colors, section layouts, and call-to-action banners) with a live preview on the right. Use the Live preview dropdown above the preview pane to switch between Blog page and Detail page: the panel on the left changes to match whichever one you're editing, and a single Save applies changes from both.
Blog Page
Identity
These settings apply everywhere on the blog, not just the homepage.
| Field | What it does |
|---|---|
| Header & Footer | Opens a dedicated editor for your blog's navigation menu, logo, and footer content. Requires the Admin role on the project; other roles see it read-only. |
| Favicon | The small icon shown in browser tabs and bookmarks (PNG/JPG/WEBP, up to 2MB, 512×512 recommended). |
| Language | The language used for blog UI labels and date formatting; article content itself is not translated. |
| Fonts | Pick a font family from a preset list (System default, Inter, Roboto, Poppins, Lato, Nunito, Geist, Montserrat, Playfair Display, JetBrains Mono, Helvetica), with a live heading/body preview. |
| Colors | Five palette colors: Page background, Primary text (headings and body copy), Secondary text (captions, meta, dates), Accent (links, buttons, highlights), and Surface (card and section backgrounds). Edit with the color swatch or type a hex code. |
Cards
Controls how article cards look everywhere they appear: the featured section, article grid, and topic pages.
| Field | What it does |
|---|---|
| Border radius (px) | Corner rounding on every card. |
| Border size (px) | Card border thickness; 0 removes the border. |
| Shadow | None, Small, or Medium drop shadow. |
| Card colors | Five independent overrides: Background (falls back to Surface), Border (falls back to the default card border), Title (falls back to Primary text), Description (falls back to Secondary text), and Topic (falls back to Secondary text). A Reset link appears once you override a color. |
Homepage Content
| Field | What it does |
|---|---|
| Default Article Image | The fallback cover image used when an article has none (PNG/JPG/WEBP, up to 2MB, 1024×1024 recommended). |
| Blog Title | The headline in the homepage banner. Leave empty to use the default: "Insights by {your brand name}". |
| Blog Description | The subtitle under the title. Leave empty to use the default: "News, updates, and insights from the team at {your brand name}". |
Page Header
Choose the homepage's top banner layout: Centered, Editorial Split, Banner, Serif, Topic Cloud, or Pull Quote.
Featured Posts
Choose how the featured section is laid out: Left Hero, Magazine, Numbered, Timeline, Dark Stack, or Two-Up. Section title is a free-text field (defaults to "Featured Posts").
Recent Articles
Choose the main article-list layout: Top Chips, Sidebar Filter, Strip, Mosaic, or Listing. Section title is a free-text field (defaults to "Recent Articles").
Posts by Topic
Choose the layout for the topic section: 3-Col Grid, 1 Large + 2 Small, or Stacked. Max topics on home page limits how many topic cards/filter chips show; extra topics stay reachable via the All chip. Use 0 to show every topic.
Contact Buttons
Floating contact buttons shown on every blog page. Each of the four channels has its own enable toggle and value field: Zalo (profile URL), Messenger (m.me link), WhatsApp (phone number), and Phone (phone number). Turn a channel off, or leave its value blank, to hide it.
Detail Page
General
| Field | What it does |
|---|---|
| Sale Page URL | The link the "Contact us" button at the end of every article points to. Leave blank to use your brand website automatically. |
| Article Header Background | The color of the title band at the top of every article. Pick from 14 presets (Slate, Ink, Blue, Sky, Teal, Green, Red, Orange, Purple, Pink, Cream, Mist, Amber, Ice) or set a custom hex color; text color adapts automatically for contrast. |
Right Banner CTA
A sticky card shown in the right column next to the article, on by default. Toggle it off entirely, or set: a banner image (uploaded and cropped to fit), Heading, Body text, Button label, and Link. Leave any text field blank to fall back to its default; leave Link blank to use the Sale Page URL from General.
Left Banner CTA
The same fields as the Right Banner CTA (image, heading, body, button label, link), rendered in a new left column, shown only on wide screens. Off by default; turn it on if you want CTAs on both sides of the article.
Body CTA
An in-content call-to-action shown mid-article, right after the intro and before the first heading. Same Heading, Body text, Button label, and Link fields, no image. Off by default.
Bottom Banner CTA
The full-width banner shown at the end of every article. Same Heading, Body text, Button label, and Link fields; leave any blank to use sensible defaults. Unlike the other CTAs, this one has no on/off toggle: it always shows.
Switch modes with the dropdown above Live Preview (top of the preview pane). The panel and preview both update to match, and Save applies changes from both modes in one click.
The Right Banner CTA is on by default; the Left Banner CTA and Body CTA are off. Turn on only the CTAs that fit your layout: most brands keep just the right banner.
Card color overrides let you break from the main palette for card backgrounds and text specifically. Click Reset next to a field to fall back to the palette color again.