Theme Customizer Options

The Coastal theme comes with a full featured theme customizer that allows you to take control of the look of your site and see your changes in real time before committing them to your live site. This section will cover the various settings included in the customizer. You can edit your theme's layouts, colors, typography, etc in Appearance > Customize

SITE IDENTITY

Site Title – The main title on the home page.

Tagline – The subheader on the home page.

Logo Upload – You can optionally add a logo to your site here. You can select to have the site tagline displayed as well.

Site Icon – Upload a custom site icon (or Favicon) for your site’s browser and app icon.

LANDING HEADER

The header uploader is intended for a background texture or image, not a logo. A logo should be added using the dedicated logo uploader above.

Headline Text – You can add text to your landing header here.

Header Overlay Text – Think of this as a subtitle if the headline text is the title.

Fix header image on scroll? – The default is unchecked, where the background appears to move behind the rest of the site. Check the box to have the background scroll with the site.

You can also choose to randomize your uploaded headers so that a different one appears during reload or new visit.

THEME COLORS

Element Border Color – Affects the signup field and area above the footer.

Footer Background Color – Affects the footer area background color.

Primary Background Color – Affects all light blue background areas on the website.

Secondary Background Color – Affects white background areas on the home page.

Button Hover Color – Affects the color upon hovering over buttons.

TYPOGRAPHY

This section allows you to edit the typography styles across the website theme and includes support for Google fonts. Here’s a standalone page on our site about working with Google Fonts in Analogue.

Google Font Link Code – In order to use Google Fonts, they must be installed on the website. It’s recommended that you install all weights of a font in order to maintain consistency throughout the site. Here are the steps to find the Google Font Link Code:

  • Go to Google Fonts and browse the fonts and styles you’d like to use

  • Click + Select This Font for each style you want to use

  • Once you’ve selected your fonts, in the bottom right of the screen click on the black collapsed window

  • Go to Embed This Font – click on Standard and copy this link

  • Paste this link somewhere like a text editor for safe keeping

  • Copy only the section within the quotes starting with ‘http://…’ (e.g., http://fonts.googleapis.com/css?family=Lora:400,700)

  • Go back to the WordPress customizer and paste that code in the Google Font Link Code field

  • You can now enter the font family name into either the fields for Primary Font Family, Body Text Font Family or use it in your CSS.

Here’s a handy screenshot for an accompanying visual. For example, if you were using the fonts Old Standard TT and Rubik, here’s how you would find the link:

GoogleFonts.png

If you need greater control over the design of the theme, check out our article on CSS customizations.

Keep in mind that any design changes or customizations to the theme beyond what is demonstrated on the demo site are beyond the scope of support we can provide and are a DIY endeavor :)

CoastalStation Seven