Pearl - Theme Customization

Pearl WP - Theme Options and Customization guides.

Theme Customization

Once the Pearl Theme is installed, you will now have to customize the theme to suit your needs. The following are some of the tasks you need to complete to customize the theme:

  • Build your own header, set up headers, footers, and sidebars for your website.
  • Choose your own color scheme and typography options.
  • Type in the address and other information about your organization.
  • Design and add widgets to your website.
  • Set up the menus of the website.
  • Change the main language of the site (if your main language is not English).

General Theme Options

Here you can setup global website settings such as site logo/icon, view types for basic modules, site width and site layout options, default settings for page Title Box, Google and PayPal API settings.

Typography settings

If you want to change your website typography settings, you need to go Pearl > Them Options > Typography. It’s possible to change typography options for Main (body) and Headings, also Paragraphs, Link, Blockquote and List settings.

Setting the General Color Scheme for your Website.

With the Pearl theme you can specify a basic color scheme for your website. You can select from between three pre-defined schemes or create your own custom scheme by defining a base color, a secondary color and a third color.

To specify the Color Scheme:

1. Click on Pearl > Theme Options > Colors in the WordPress menu.

2. Click on the Submit button to save your settings.

Header & Mega Menu

You can customize the look-and-feel of the header. You can also control what items appear in the header area of your pages.

To set up or customize the header of your web pages:

Click on Theme Options > Header in the WordPress menu.

 

Header Builder

You can set up the theme header individually. Every section of the header can be modified and it’s possible to add different elements like: dropdown, text, menu, popup, button, infobox, etc.

To change the header layout:

1. Click on Pearl > Theme Options > Header > Header builder in the WordPress menu. 

2. Drag & Drop needed elements. 

3. Click on the Submit button to save your changes.

Here you can see detailed video tutorial:

Setting Up the Standard Menus

As mentioned above, your theme allows you to have a menu at the top of your website pages and up to three menus in the sidebars.

To set up the Standard Menus:

  1. Click on Appearance > Menus in the WordPress menu to open the Menus page. 
  2. You can now set up the menus as you would do for any other WordPress theme. 

Mega Menu for your Website

The Pearl Theme supports up to four menus. You can have a menu at the top of your website pages and up to three menus in the sidebars. In addition to the above locations, you can also add one of the four menus to any page you want using the Visual Composer Custom Menu widget.

You can got to Appearance -> Menu in order to change your menu items appearance. For first parent of the theme mega menu includes parameters like:

  • Mega Menu type - Boxed or Wide;
  • Mega menu columns - it sets how many columns would be your Mega Menu child elements;

Mega Menu child elements also have special options such:

  • Mega Menu column width;
  • Mega Menu child columns width;
  • Mega Menu icon;
  • Mega Menu content image;

 

Setting Up the Footer

You can customize the look-and-feel of the Footer. You can have up to four footers on your pages/posts. You can control what items appear in the footer area of your pages. You can also select between two heading styles for the footer and write the copyright message to be displayed on the website.

To set up or customize the footer of your web pages:

  1. Click on Theme Options > Footer in the WordPress menu. 
  2. Click on Main to customize footer styles, or click on Socials to specify which social icons should appear in the footer and Copyright for bottom footer information.

Sidebars

The Pearl Theme has two sidebars, left and right. These sidebars can be selected for archives as well as single pages or posts. You can create additional sidebars using Visual Composer widgets or elements. These additional sidebars can then be added to individual pages or posts.

To set up the sidebars, click on Theme Options > Blog (or Shop Pages) in the WordPress menu.

While creating or editing the page or post, add a Widgetised Sidebar or an STM Sidebar Visual Composer element to the page.

Note: Use the Widgetised Sidebar element if you want to add one of your predefined widgets to the column, and use the STM Sidebar element if you want to add one of your predefined sidebars to the column.

Creating Additional Sidebars

In addition to the left and right sidebars, you can create your own sidebars using Visual Composer widgets or elements. You can then add these sidebars to individual pages or posts.

To create additional sidebars:

1. Click on VC Sidebars > Add New in the WordPress menu. 

2. Design the sidebar as you would design any other page. You can also add sections to the sidebar using Visual Composer Elements and Widgets, if required.

Note: Once you have created the sidebars, you can add these sidebars to any of your pages or posts. See Setting Up Sidebars for more details.

Adding Custom Icons 

Apart from Theme and Visual Composer Icons you can include your own Icons in your site. Firstly it needs to generate fonts of your custom icons. You can do it via uploading your ready .SVG and generating fonts here - https://icomoon.io/app/

Apart from Theme and Visual Composer Icons you can include your own Icons in your site. Firstly it needs to generate fonts of your custom icons. You can do it via uploading your ready .SVG and generating fonts here - https://icomoon.io/app/

Then you can upload your fonts .zip archive file (which you have downloaded from IcoMoon) via Appearance -> STM Icon Manager -> Upload New Icons.

Localization

You can change your site main language via Settings -> General -> Site Language.

Theme language files are located in a ../wp-content/themes/theme-folder/languages/ folder.

There are several ways to fill up translations:

- It’s easy to localize your site using Loco Translate plugin. Here you can see the tutorial – https://localise.biz/help/wordpress/translate-plugin/beginners.

- Besides this, you can use a PoEdit platform. You can add translation via editing your .po file and at the end, PoEdit generates .mo file for you. Then you can upload ready translation files to primordial folder (../wp-content/themes/theme-folder/languages/). Before adding translations for static strings it needs to rename language files correctly according to your site languages. You can find a list of language codes at WordPress in your Language. As an example, the language code for French is fr_FR, so you would save the translated files as fr_FR.po first, then fr_FR.mo.

In order to safe your translations during theme updates, we recommend to save them in ../wp-content/languages/themes/ folder. 

4

Was this article helpful?

Yes No

Thanks so much for your feedback!

Thanks so much for your suggestion!