Design Builder

Overview

The Design Builder allows you to choose from a variety of base designs to get you started determining the look and feel of your website. First pick a base, then use the Design Builder's editing tools to upload logos, set fonts, define the color palette, and configure various design elements and mobile behaviors. 

• Select a Base
• Design Options
• Publish, Preview, or Change Your Design
  

New Design Builder Overview

 

 

---

Select a Base

When you first land on the Design Builder, you will see the option to either choose a new base design, or edit the current design.

1. Select Base: Select from a variety of new base designs in different visual styles.
2. Edit Existing Design: Select this option to edit an existing base with any design changes already saved in the system.

---

Design Options

Once you have selected a base, you can refine your design by configuring various visual elements and mobile behaviors.

1. Logo and Colors

Desktop Logo

• Desktop Logo: The desktop logo is the logo that will appear in your header when viewed on desktop and laptop computers at full screen size.

Other Logos

• Responsive Logo: The responsive logo is not required. Because responsive design will scale your logo down on smaller screens, this is an option to upload a different version of your logo that looks better on smaller screen sizes. For example, if your logo is very horizontal, you might want to upload an alternative version that is less horizontal so it is easier to read on smaller screen sizes.
• Favicon: A favicon is a 16x16 px graphic that appears in the browser as well as search results on some search engines. The best file formats are PNG, GIF, or JPG. For more information about favicons, read here.
• Default Social Media: Add a square version of your logo that will be used on Facebook and other social media. This is the image that will appear any time a reader shares a piece of content that does not have any images of its own. Without this, Facebook and the other social media services will randomly display an image from your website.
• AMP Logo: The Accelerated Mobile Pages (AMP) Project is an open-source initiative by Google which aims to make the web faster by providing an alternative distribution for your web pages on Google's own network. If you plan to activate AMP, find out more about the image requirements.
• Small/Large PWA Logos: Progressive Web Apps (PWA) allow websites to leverage modern web capabilities to deliver an app-like experience to users on mobile devices. If you plan to activate PWA, find out more about the image requirements.

Brand Colors

• Titles: Applied to titles (content, locations, and events) within sprockets and on location or event search pages.
• Links and Buttons: Applied to text links within content, buttons, and sprocket titles.
• Tabs and Map Markers: Applied to map markers and tabs within search results.

2. Fonts

• Text: Applied to body and descriptive text throughout the site.
• Headers: Applied to titles for content, sprockets, and section pages.
• Navigation: Applied to navigation and sub-navigation.

3. Navigation Bar

• All Caps Navigation: Displays navigation text in all caps.
• Center Navigation: Centers navigation text.
• Sticky Navigation: Navigation "sticks" to top of browser window (on desktop) when user scrolls.
• Background Color: Applied to background of navigation.
• Text Color: Applied to text within navigation.
• Selected/On Color: Color of text when user hovers over a navigation item or when on a specific section page.
• Top Border: Add a border to top of navigation. Leave blank for no border.
• Border Color: Specifies the color of the border.
• Bottom Border: Add a border to bottom of navigation. Leave blank for no border.
• Border Color: Specifies the color of the border.

4. Header and Footer

• Full Width, Full Window: Makes header stretch the full-width of browser window.
• Social Media Chicklets in Footer: Moves the social media icons to the footer for a cleaner header.
• White Social Media Icons: By default, social media icons are black. Use this option to change them to white for more contrast if you are using a dark background color in the header or footer.
• Center Logo: Align logo center in header.
• Logo Height: Move slider to adjust logo size.
• Header Background Color: Applied to background of header.
• Header Text Color: Applied to text links within header.
• Footer Background Color: Applied to background of footer.
• FooterText Color: Applied to text within footer.

5. Flourishes

• Hide "Read More" Links: Hides "Read more" link at the end of descriptions on sprocket items. NOTE: As of Spring 2025 we will be removing the option to display "Read More" links completely due to current day Accessibility and SEO guidelines. 
• Hide "Breadcrumbs" Links: Adds breadcrumb navigation to top of page.
• Highlight Section in Sprockets: Adds highlighted color to sections when displaying those in sprockets.
• Bigger Text in Lead Paragraph: Makes text in first paragraph of content larger than body text.
• Initial Drop Cap in Lead Paragraph: Adds a drop cap to first word in lead paragraph for content.
• Back to Top Button: Adds option for user to jump back to top on small screens.
• Button Style: Choose corner style for buttons.

Add Background Image

• Background Placement: Displays image in background on all pages throughout the website. Fixed positions the image at top of browser window. Scrolling moves the images as the user scrolls.

6. Mobile Options

• Center Logo: Centers the logo on small screen sizes.
• Fold Search into Navigation: Adds search bar to bottom of mobile navigation.
• Hide Header Links: Hides text links in header on small screens.

---

Publish, Preview, or Change Your Design

At the bottom of the design tools palette are several important options.  

• Publish: Publishes your changes to the live site.
• Live Preview: Preview your unpublished changes. This option displays the current state of your design since the last time you published with real content from your database.
• Change Theme: Select a new base theme.
• Revert to Live: Reverts the current design to the last published version.
• Load: Paste in the design that you copied from another Metro Publisher website.
• Copy: Copies the current design. This feature allows you to copy your design to another Metro Publisher website. 

On the upper part of the page you have additional preview options:

• Sample Pages: Preview your design elements on sample page layouts. These page layouts are just samples, you can preview the real pages by using the "Live Preview" option above.
• Mobile Views: Click the icons to see how your design looks on three common device types(screen sizes) – desktop, tablets, and phones.