Site Settings: Customize Logo, Colors & Fonts

Layers User Guide  Since: 1.0 Last Updated: Layers ver. 1.5.5 Time to Read: 5 minutes

Layers features three primary customization zones for the “global” areas of your theme, or the areas that you don’t customize with widgets. These are the Header, Site Settings and Footer sections. We also provide a quick way to add Custom CSS with the CSS panel, and to set your default landing page. This article focuses on the Site Settings panel, which contains the Logo, Colors, Global Sidebar and Font settings.

Site Settings

The Site Settings section holds your general site configuration, including the Logo & Title,  Navigation Menus, Global Colors, Sidebar Layouts and Fonts.

To reach the Layers Site Settings from the WordPress Dashboard, click on Layers → Customize

Logo

You may upload a custom graphical logo in this section by clicking  Select Logo.

Layers will scale your logo automatically, but for best results, pre-format your image to be under 100px tall and no wider than 300px. This ensures your logo remains true to size on all device screens, no matter which header layout you choose.

Site Title

Sets the overall title for your site. This title is used in Search Engine listings and is visible in the main browser title bar. Your site title should be precise and reflect your name or the name of your blog, business or project.

Tagline

The Tagline is also known as your site description, and is also used in Search Engine listings. Keep this short and sweet, under 120 characters. Visit this post for some great ideas on how to format your tagline.

Display Site Title and Tagline

Checked by default. Uncheck to hide the Site Title and Tagline in your site’s header. Enabling this option is best if you do not have an image logo, or if your logo is just an icon.

Site Icon

The Site Icon is used as a browser and app icon for your site. Icons must be square, and at least 512px wide and tall. Click Select Image to upload or choose an image in your Media Library.

Logo Size (Layers Pro)

This section is explained in more detail in the Layers Pro User Guide. Want more control over your Logo Size & Header Layout? Get Layers Pro to unlock the full power of Layers!

Note: If you have installed Layers Pro, this section will be called General and the Header and Footer options moved to their own panels.

Click SELECT COLOR to bring up the color wheel to choose a color. You may optionally enter a color manually using its HEX code.

  • Background colors should match any background image you set, as the darkness or lightness of the color will determine whether the widget title and description area is black or white by default.

Header Color

Use this option to set a custom background color.

Site Accent Color

Applies to inner-page title bar backgrounds, button backgrounds, sidebars, and text links in the body content.

Footer Color

Change the background color of the footer widget area.

Save your layout any time by clicking SAVE & PUBLISH then return < to the main Site Settings menu.

Click the back icon in the Customizer toolbar to return to the Site Settings menu.

Here you can set which page you want to display when visitors go to your main site URL. Typically this is your “Home” page. Select the desired page from the drop-down, and leave the “posts” option blank. Layers has a Blog page template that takes care of that for you.

Click the back icon in the Customizer toolbar to return to the Site Settings menu.

Layers bundles a simple font customization tool that lets you choose a Google webfont for Headings/Titles, body text and buttons. Simply choose your desired font from each drop-down. You may preview fonts in advance by visiting the Google Fonts page.

Font size is determined by the widget options and styling of Layers or your chosen Layers Child Theme, therefore we don’t offer detailed font tweaking in terms of size to help keep your layouts balanced and readable.

Pro Tip: Layers uses the rem font size value, which also sets line-height automatically.

Advanced font customization will be available in future versions of Layers Pro, or you can use a 3rd Party plugin such as Easy Google Fonts and a little custom CSS. See How to Customize Fonts for advanced techniques.

Click the back icon in the Customizer toolbar to return to the Site Settings menu.

This section allows you to add important script support for things like Google Analytics, Google Maps, site counters or other web widgets requiring script support.

Google Analytics ID

Add your Google Analytics ID to this field, which is found in your Analytics dashboard on the Google Analytics website. You can also add this under Layers → Dashboard.

Google Maps API Key

This is required for the map in the Layers Contact Widget and other Google libraries used in Layers. See How to Setup Your Google API Key:

This solution requires you to update Layers to 1.5.6 or later.

http://docs.layerswp.com/doc/how-to-setup-your-google-api-key/

API keys are special passphrases that allow websites on your domain to connect to an application interface to make use of its features. Not all APIs require keys, but some do in order to handle authentication or to keep their platforms safe from being compromised. You can setup your own Google API Key for use with any Google application, including map plugins in WordPress, the Layers Contact widget and fonts, etc. This service is absolutely free.

The following steps take you through creating a Browser Key for use with widgets and plugins (you only need one):

  1. Follow this link and click on Get a key
  2. Agree with the service Terms of Service
  3. Choose a name for your new key and specify the websites on which the key usage will be allowed. If you don’t need any website restriction, just put an * in that field (but don’t leave it blank, unless you are having issues with *! See comments for further information). Your website domain should be entered like www.yoursite.com
  4. Then click on Create
  5. Copy your brand new API key, and click OK. You can access this from your “Projects”dashboard anytime.
  6. Ensure Layers is updated to 1.5.6 or later
  7.  Go to AppearanceCustomize and expand Site Settings, then Additional Scripts. Paste the key in the Google Maps API Key field and Save Changes.
  8. If you have additional plugins that require a Google API Key, you may paste the same key into those plugin options fields.

You must enter this API key even if your map is still working, to avoid a disruption in service from Google Maps

Header & Footer Scripts

This panel allows you to add jQuery or Javascript snippets to the header or footer of your site. Examples include snippets for modifying the slider behavior, jQuery animations like smooth scrolling, or Google Analytics code.

Typically a snippet tutorial will indicate if it must be in the header of your site, otherwise scripts should go in the Footer when possible.

Scripts added to the Additional Scripts field should be wrapped in appropriate javascript functions and should not include <script> tags.

You cannot add calls to external libraries here. For example, our Smooth Scrolling jQuery snippet can work in the Header Scripts field, but <script src=”someurl/script.js”></script> will not. You must use a plugin or child theme to enqueue script files and libraries correctly.

headerscripts

For scripts such as Typekit, you must use the “advanced embed” and copy only the part between the <script> and </script> or use the Typekit field under Site Settings → Fonts

Available in Layers Pro, the Buttons section allows advanced customization of button colors, sizes and borders for buttons in your content such as Read More, Buy Now and Comment buttons. This section is explained in more detail in the Layers Pro User Guide.

Return to the main Customizer menu by clicking the back arrow in the top-left:

 Continue with Customize Header & Footer