Use the website builder as a small design system, not a collection of unrelated page edits. Start with your logo and style, then make the header, primary call to action, footer, and mobile menu follow the same hierarchy.
Farin automatically adapts the header when links no longer fit. The primary action keeps its accent treatment; overflow links move into a menu instead of being clipped.
Quick facts
Start here
- The logo palette tool can use the current uploaded logo or a newly selected logo.
- Keep one primary action in the header; move utility links and lower-intent pages to the footer.
- Footer locations can include clickable addresses and Google Maps links.
- Preview desktop, tablet, and mobile before you publish.
Choose the visual direction first
- 1 Appearance is the workspace for style, logo, palette, and responsive preview changes.
- 2 Choose a site style and update the header identity from this focused panel.
- 3 Use the live preview to check the selected page at desktop, tablet, and mobile sizes.
- 4 A short tagline appears under the tenant name in the public header.
Set the logo and palette
Open Appearance, confirm the current logo, and use Create palettes from current logo when you want a grounded starting point.
Compare the logo-faithful option with the more expressive options. Choose the palette with enough contrast for text, links, form controls, and the primary CTA.
Edit the header identity
Use the tenant name and tagline fields to say what customers should remember. A short promise such as Handcrafted with Love is more useful than an automatically generated date or status line.
Keep the logo in its original color when it improves recognition. Use a monochrome mark only when the original has insufficient contrast in a specific placement.
Make navigation earn its space
- Put the most valuable next step first: order, request catering, book a wholesale conversation, or visit a location.
- Keep the account icon compact and neutral. Accent color belongs to the primary action, not every navigation control.
- Use the collapsed footer navigation panel to add low-frequency links such as nutrition, gift cards, policies, or social profiles.
- Check the mobile menu and confirm the primary CTA remains visible when there is room; otherwise it moves into the overflow menu rather than squeezing the brand name.
- 1 Navigation controls the links shown in the desktop and mobile header.
- 2 Edit labels, destinations, visibility, and order without touching page content.
- 3 Publish the optional themed nutrition page and include it in the footer.
- 4 Each row is a complete link: toggle it, rename it, choose its destination, then reorder it.
Check responsive behavior before launch
- Preview desktop, tablet, and mobile in the page editor.
- Look for clipped headlines, cropped logos, narrow form controls, and buttons that wrap awkwardly.
- Open the public page at a narrow browser width as a final check. Responsive behavior should be content-driven, not based on one device width.
- If a page has a long headline or many navigation links, shorten the copy before shrinking the type.