Design Setup Module Overview

The Design Setup module is where you control your website's visual identity, including your logos, brand colors, typography, and the layout of your header and footer. Changes made here apply site-wide and are reflected immediately after saving. Note: This module is only available and functional for sites using the Page Builder module setup.

Accessing Design Setup

Log in to your Freedom admin panel.
Click Website in the top navigation bar.
Select Design Setup from the dropdown menu.

The module is organized into three tabs: Logos / Icons, Website Branding, and Header / Footer.

Logos / Icons Tab

This tab allows you to upload the images that represent your organization across the site.

Website Logo: The primary logo displayed in your site's header. Use the Logo Size dropdown to choose how large the logo appears (Small, Medium, or Large), then click Select to choose an image from your File Manager.
Footer Logo: A separate logo displayed in the footer area. This can be the same image as your header logo or a variation (such as a light version for dark footer backgrounds). Click Select to upload or choose your image.
Shortcut Icon: Also known as a favicon, this small icon appears in the browser tab next to your site's title. It should be a simple, square version of your logo or brand mark. Click Select to choose your icon file.

After making changes on any tab, click Save Changes in the upper-right corner to apply them.

Website Branding Tab

This tab controls your site's color palette and typography. These settings feed into your site's theme and affect buttons, text, headings, and background elements throughout your pages.

Website Colors

Primary Brand Color: Your main brand color. This is typically your organization's primary color and is used as the dominant accent throughout the site.
Secondary Brand Color: A supporting color that complements your primary brand color, often used for accents and highlights.
Primary Dark Color: A darker variation of your primary color, used for contrast in areas like text on light backgrounds or section dividers.
Secondary Dark Color: A darker version of your secondary color, used for depth in design elements.
Primary Light Color: A lighter variation of your primary color, often used for backgrounds or subtle highlights.
Secondary Light Color: A lighter version of your secondary color for similar lighter-tone use cases.

Button Colors

Default Button Color: The background color of standard call-to-action buttons across your site.
Default Button Text Color: The text color displayed on default buttons. Make sure this contrasts well with your Default Button Color for readability.
Accent Button Color: The background color for secondary or accent buttons, used when you want a visual distinction from the default button style.
Accent Button Text Color: The text color displayed on accent buttons.

Typography

Body Font: The font applied to all general body text across your site. Use the dropdown to select from the available font options.
Heading Color: The color applied to all heading elements (such as page titles and section headers).
Text Link Color: The color of clickable hyperlinks throughout your content. Choose a color that stands out from your body text so links are easy to identify.

To update a color field, click the color swatch next to the field to open the color picker, or type a hex value directly into the field (for example, #2563eb).

Header / Footer Tab

This tab controls the layout and visibility of elements in your site's header and footer.

Header Settings

Style: Select the overall layout style for your header using the Style dropdown (for example, Header Style 1). Different styles change the arrangement of your logo, navigation, and utility elements.
Full Width: When enabled, header elements stretch edge-to-edge across the browser window. When disabled, elements are centered within a fixed-width grid.
Show Phone Number: Toggle on to display your organization's phone number in the header.
Show Hours: Toggle on to display your hours of operation in the header.
Show Search: Toggle on to include a search bar in the header so visitors can search your site.
Show Social Media: Toggle on to display social media icon links in the header.
Show Top Menu: Toggle on to display an additional top navigation menu above the main header.

Footer Settings

Style: Select the layout style for your footer using the Style dropdown (for example, Footer Style 1).
Full Width: When enabled, footer elements stretch edge-to-edge. When disabled, elements are centered within a fixed-width grid.
Show Menu: Toggle on to display a navigation menu in the footer.
Show Logo: Toggle on to display your footer logo in the footer area.
Background Color: Use the dropdown to set the background color of the footer (for example, White or a custom color tied to your brand palette).

Tips

Always click Save Changes after updating any tab. Changes are not applied until saved.
When choosing brand colors, make sure there is enough contrast between your text and background colors so your site remains easy to read for all visitors.
Your shortcut icon (favicon) works best as a square image, ideally 32x32 or 64x64 pixels.
If you update your header or footer layout style, preview your site after saving to confirm the new layout looks correct across different page types.
Phone numbers and hours displayed in the header are pulled from your organization's settings in Freedom. Make sure that information is up to date before enabling those toggles.