{"id":371,"date":"2020-07-12T07:09:43","date_gmt":"2020-07-12T07:09:43","guid":{"rendered":"http:\/\/redhost:8888\/documentation\/?page_id=371"},"modified":"2022-02-28T14:32:04","modified_gmt":"2022-02-28T14:32:04","slug":"customizer","status":"publish","type":"page","link":"https:\/\/docs.redsun.design\/amaya\/customizer\/","title":{"rendered":"Customizer"},"content":{"rendered":"\n

The Customizer is the place where you have access to all the theme’s configuration settings. All changes may be previewed before saving them.<\/p>\n\n\n\n

You can find the Customizer at Appearance \u2192<\/strong><\/strong> Customize <\/strong>.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Site Identity<\/h4>\n\n\n\n

Appearance<\/strong> \u2192 Customize<\/strong><\/strong> \u2192 Site Identity<\/strong><\/p>\n\n\n\n

Upload the header logo.
More info at Header \/ Footer \u2192 The Header<\/a>.<\/p>\n\n\n\n

Layout<\/h4>\n\n\n\n

Appearance<\/strong> \u2192 Customize<\/strong><\/strong> \u2192 Layout<\/strong><\/p>\n\n\n\n

Change your Top Bar \/ Header \/ Footer \/ Blog layout.<\/p>\n\n\n\n

Typography<\/h4>\n\n\n\n

Appearance \u2192<\/strong><\/strong> Customize \u2192<\/strong><\/strong> Typography<\/strong><\/p>\n\n\n\n

Change the Typography.<\/p>\n\n\n\n

Font Sizes<\/h5>\n\n\n\n

px VS em<\/strong>
For the font size and line height you can use either the px<\/strong> or em<\/strong> unit.
While px are fixed-size units (one pixel is equal to one dot on the computer screen), using the “em” unit will display the text element relative to the Base Font.
Example:
Base font size: 16px.
Headline font size: 2em. \u2192<\/strong><\/strong> The headline will display twice the size of the base font, which equals 32px.
<\/p>\n\n\n\n

The Base Font<\/strong>
Changing the Base Font will affect most other typography elements on the site as it also increases\/decreases all other text elements (like headlines etc.) that use the \u201cem\u201d unit. Any typography elements that use the \u201cpx\u201d unit will not be affected.<\/p>\n\n\n\n

Using Adobe Fonts<\/strong><\/h5>\n\n\n\n
  1. Go to Appearance \u2192<\/strong> Customize \u2192<\/strong> Typography<\/strong> \u2192<\/strong><\/strong> Font Families<\/strong> <\/li>
  2. Select Font Family Source: Adobe Font <\/strong>for the Base Font or Headings Font<\/li>
  3. The Adobe Fonts Project Embed Code<\/strong> field will Appear<\/li>
  4. Enter the Adobe Fonts Project ID.<\/li><\/ol>\n\n\n\n
    \"\"<\/figure><\/div>\n\n\n\n

    How to get the Adobe Fonts Project ID:<\/strong><\/p>\n\n\n\n

    1. Using Adobe Fonts requires any Creative Cloud Plan<\/a><\/strong><\/li>
    2. Go to the Adobe Fonts<\/a><\/strong> website and log into your account.<\/li>
    3. Browse thousands of fonts<\/strong><\/a> to find the right ones for your site.<\/li>
    4. Create a new web project or add a font to an existing project by clicking: \"\"<\/li><\/ol>\n\n\n\n
      \"\"<\/figure><\/div>\n\n\n\n
      1. Go to My Adobe Fonts \u2192 Web Projects<\/strong> to find all your Web Projects.<\/li><\/ol>\n\n\n\n
        \"\"<\/figure><\/div>\n\n\n\n
        1. Copy the Project ID of a Web Project.<\/li><\/ol>\n\n\n\n
          Using Custom Fonts<\/h5>\n\n\n\n

          If you wish to add a custom font, you can use the Use Any Font <\/a>plugin for that. Once the plugin is installed and activated you can upload your font file at Use Any Font \u2192 Upload Font <\/strong>and then select the uploaded font at Appearance \u2192\u00a0Customize\u00a0\u2192\u00a0Typography\u00a0\u2192 Font Families<\/strong>.<\/p>\n\n\n\n

          Select \u201cGoogle Font” and then select your uploaded font under \u201cStandard Fonts”. <\/p>\n\n\n\n

          \"\"<\/figure><\/div>\n\n\n\n

          Colors<\/h4>\n\n\n\n

          Appearance<\/strong> \u2192 Customize<\/strong><\/strong> \u2192 Colors<\/strong><\/p>\n\n\n\n

          Change the color of the background, text, links, headlines, buttons, header, footer and more…<\/p>\n\n\n\n

          Connect<\/h4>\n\n\n\n

          Appearance<\/strong> \u2192 Customize<\/strong> \u2192 Connect<\/strong> \u2192 Social Accounts<\/strong><\/p>\n\n\n\n

          Set up your social accounts to display them in the top bar and in the social widget.<\/p>\n\n\n\n

          Appearance<\/strong> \u2192 Customize<\/strong> \u2192 Connect<\/strong> \u2192 Share<\/strong><\/p>\n\n\n\n

          Select which social share buttons you wish to display for each blog post.<\/p>\n\n\n\n

          Media<\/h4>\n\n\n\n

          Appearance<\/strong> \u2192 Customize<\/strong> \u2192 Media<\/strong><\/p>\n\n\n\n

          Activate\/deactivate the Image Lightbox, which will open your images in a fullscreen Lighbox instead of in a new window.<\/p>\n\n\n\n

          Woocommerce<\/h4>\n\n\n\n

          Appearance<\/strong> \u2192 Customize<\/strong> \u2192 WooCommerce<\/strong> \u2192 Product Catalog<\/strong><\/p>\n\n\n\n

          Additionally to the default WooCommerce customizer settings<\/a> that come with the WooCommerce plugin, the theme adds a couple additional settings at Appearance \u2192<\/strong> Customize \u2192<\/strong> WooCommerce \u2192<\/strong> Product Catalog<\/strong>:<\/p>\n\n\n\n