Editing Your Header, Top Bar, Logo and Footer

Using the Legacy Customizer? Legacy Customizer steps: Adding Certification Logos to the Footer of your Codeless Website [Codeless] · Legacy Customizer steps: How to add your Logo to the Header & Footer [Codeless]

The header, the top bar and the footer show on every page of your website. In Site Edit you change your logo from the header, the top bar from Settings, and the footer from the footer itself or from Settings. Your changes go into a draft. Visitors see them after you publish.

  1. Select Dashboard in the top menu.
  2. On the site card, select EDIT SITE. Site Edit opens with your homepage.
  3. Move the pointer over the logo at the top left of your site. A small toolbar appears under it.

The logo with its toolbar in Site Edit

  1. Logos: The logo in the header of every page. Point at it to show its toolbar.
  2. Customize Logos: Opens the Edit Logos panel.

Select Customize Logos. The Edit Logos panel opens.

The Edit Logos panel

  1. Add or edit optional logo: Opens the settings of a second logo that shows next to the main logo.
  2. Desktop logo: Select the image to choose another logo from the Media Library.
  3. Primary Logo: Choose Text logo to show your name as text, or Image logo to show an image.
  4. Alternative text: A short description of the logo for screen readers and search engines.
  5. Desktop logo height: Sets how tall the logo is on a computer screen.
  6. Mobile logo height: Sets how tall the logo is on a phone.
  7. Use different primary logo on mobile: Turn on to show a different image on phones.

When Use different primary logo on mobile is on, the panel also shows Mobile logo and Mobile logo alternative text. Select Remove under the logo to take the image out. The Tagline box adds a short line of text with the logo.

Set up the top bar

The top bar is a bar at the top of your site. It shows details such as your phone number and email address.

  1. Select Settings in the top menu.
  2. Select the Site tab.
  3. Select Top bar. The General tab opens.

The General tab of the Top bar settings

  1. Top bar details: The details the top bar shows, in order. Use the arrows to move a detail and Remove to take it out.
  2. Add a detail: Choose a detail to add, such as Email, Name, Social or License.
  3. ADD: Adds the chosen detail to the end of the list.
  4. Design: Opens the layout, the on and off switch and the colors of the top bar.

To add a detail, choose it in Add a detail, then select ADD. Select Design to choose how the bar looks.

The Design tab of the Top bar settings

  1. Layout: Five arrangements of the details in the bar.
  2. Display Top Bar at the top of the site: Turn on to show the top bar above the header of every page.
  3. Top bar color scheme: The colors of the top bar.

The top bar shows on your site only when Display Top Bar at the top of the site is on.

  1. Scroll down to the footer at the bottom of the page.
  2. Move the pointer over a column title in the footer. A small toolbar appears above it.

The footer with its toolbar in Site Edit

  1. Footer: A column title in the footer at the bottom of every page. Point at the footer to show its toolbar.
  2. Customize Footer: Opens the Edit Footer panel.

Select Customize Footer. The Edit Footer panel opens on the Business info tab.

The Edit Footer panel

  1. Business info: The title of the first column. The address and phone numbers come from Office details.
  2. Menu 1: The title and links of the second column.
  3. Menu 2: The title and links of the third column.
  4. Compliance: The title, text and links of the last column.
  5. Branding: The Created with Placester line.
  6. Add or edit logo: Opens the settings of the footer logo.

The footer logo has the same settings as the header logo, in the Edit Footer logo panel. Add or edit optional logo adds a second footer logo. To change the address and phone numbers in the first column, see Updating Your Contact and Office Details.

You can also edit the footer from Settings. Select Settings, select the Site tab, then select Footer. It has the same tabs. Each menu tab has a column title and a list of links.

The Menu 1 tab of the Footer settings

  1. Column Title: The heading of this footer column.
  2. Link 1 title: The words visitors see for this link.
  3. Link 1 options: Opens the moves and Remove link for this link.
  4. ADD LINK: Adds a new link at the end of the column.

Under each link, Links to sets the page, post or address that the link opens. Footer links work the same way as menu links. For more, see Editing Your Navigation Menu.

The Compliance tab also has a Column Description with an Edit content button. For compliance pages and links, see Adding Compliance Pages and Footer Links.

The Branding tab has the Disable Placester Branding switch. It removes the "Created with Placester" line. When your plan does not include it, the switch is grey and an Upgrade link shows.

Select the Design tab to choose how the footer looks.

The Design tab of the Footer settings

  1. Footer style: The arrangement of the footer. Use the arrows to see all six styles.
  2. Reveal Footer Animation: Enable to show the footer with a reveal effect as visitors scroll to it.
  3. Upload image: Choose a background image for the footer from the Media Library.

Under the image, Overlay strength sets how strong the overlay on the image is (Low, Medium or High), and Enable parallax turns on a parallax effect for the image. Footer color scheme sets the colors of the footer.

Add certification logos

The Certificates module shows the logos of your certifications and memberships on a page.

  1. Move the pointer between two modules on the page, or to the top of the page, and select the + button. The Add module panel opens on the New tab.

The Add module panel

  1. Certificates: Adds a Certificates module at once. It has no layouts to choose.

Select Certificates. The module appears on the page.

A new Certificates module

  1. Certificates: The new module. It shows This module has no content yet until you add logos.
  2. Unpublished changes: The add went into your draft.

To add the logos, move the pointer over the left or right part of the new module. A toolbar appears above it. Select the customize button in the toolbar. The Edit Certificates panel opens. On the Content tab, select Pick image from Media Library under Certificates to choose your logos. The Design tab sets the width, the separators, the spacing and the background of the module.

For more about modules, see Working with Modules.

Publish your changes

Logo, footer and module changes go into your draft. The draft bar at the bottom of Site Edit shows Unpublished changes with Discard and Publish. Close the open panel, then select Publish to show your changes to visitors, or Discard to undo all of the draft.

For more about drafts, see Publishing and Discarding Drafts.

How did we do?

Adding Compliance Pages and Footer Links

Editing Content on the Page
#

Let experts do it for you

Visit our creative services marketplace to get on-demand help, on-time and on-budget.

Browse all Services
#

Are you looking for something different?

Didn't find an answer to your questions? Our support team is ready to help you.

Contact Support