PE Maldives WordPress theme manual

This documentation is last updated on 12th June 2017.

Thank you for purchasing PE Maldives Theme . If you have any question that is beyond the scope of this documentation, Please feel free to create a support ticket using Our Support Site.

If you like this theme, Please support us by rating this theme with 5 stars.

Follow steps listed here

Follow steps listed here

Follow installation steps listed here

Please note:

• If you have earlier Slider Revolution plugin installed and some sliders, please go to Appearance > Widgets. In sidebar Header open widget Revolution Slider, choose slider and click Save.

Follow steps listed here

Demo Site Configuration

Follow steps listed here

Configure Main Menu

Follow steps listed here

Import of the Revolution Slider data

Follow steps listed here

Import Widgets

Follow steps listed here

Configure WP Settings

Navigate to Settings > Reading and set options like that:

Next, set media in Settings > Media:

Follow steps listed here

All available settings for default version of PE Maldives theme. More information about different versions you will find in Styles div.

To setup Basic Settings, navigate to Appearance > Theme Options and click on Basic Settings tab.

To setup Layout, navigate to Appearance > Theme Options and click on Layout tab.

To setup Main Menu, navigate to Appearance > Theme Options and click on Main Menu tab.

To setup Blog, navigate to Appearance > Theme Options and click on Blog tab.

General:

Archive:

Single Post:

To setup Pages, navigate to Appearance > Theme Options and click on Pages tab.

Single Page:

Members:

Portfolio:

Single project:

To setup Fonts, navigate to Appearance > Theme Options and click on Fonts tab.

To setup Colors, navigate to Appearance > Theme Options and click on Colors tab.

General:

Header:

Top1:

Top2:

Top3:

Top4:

Bottom1:

Bottom2:

Bottom3:

Footer:

Off-canvas:

Widgets:

To setup Footer, navigate to Appearance > Theme Options and click on Footer tab.

To setup Contact, navigate to Appearance > Theme Options and click on Contact tab.

To setup Advanced, navigate to Appearance > Theme Options and click on Advanced tab.

To setup Import / Export, navigate to Appearance > Theme Options and click on Import / Export tab.

You will find theme settings in files:

• / Theme Options / (version) / options.json

Follow steps listed here

Follow steps listed here

Follow steps listed here

Follow steps listed here

Follow steps listed here

Follow steps listed here

Follow steps listed here

Follow steps listed here

This page displays login page. To create that page go to Pages > Add New. Now select template Login Page and click Update/Publish.

This page displays registration page. To create that page go to Pages > Add New. Now select template Registration Page and click Update/Publish.

This page displays portfolio page. To create that page go to Pages > Add New. Now select template Portfolio and click Update/Publish.

Very useful plugin that allow you to show/hide widgets on certain pages. These options are displayed on the bottom of all widgets.

You can choose:

1. Display widget for everyone, only logged-in or only logged-out users.
2. Show or hide widget on pages selected below.
3. Pages to show/hide widget.

Follow steps listed here

Follow steps listed here

Built-in widget which allows you to display social icons.

On demo page widget is visible in 'social' sidebar.

We have also a video tutorial on how to configure the PE Social widget:

Built-in widget which allows you to display contact form and Google Map.

You can set email recipients, map location and other settings in Theme Options > Contact tab:

We use custom style for our map. The code which you need to put into the "Custom map style" field in Theme Options > Contact tab:

[
{'featureType':'all', 'elementType':'labels.text.fill', 'stylers':[{'saturation':36},{'color':'#000000'},{'lightness':40}]},
{'featureType':'all','elementType':'labels.text.stroke','stylers':[{'visibility':'on'},{'color':'#000000'},{'lightness':16}]},
{'featureType':'all','elementType':'labels.icon','stylers':[{'visibility':'off'}]},
{'featureType':'administrative','elementType':'geometry.fill','stylers':[{'color':'#000000'},{'lightness':20}]},
{'featureType':'administrative','elementType':'geometry.stroke','stylers':[{'color':'#000000'},{'lightness':17},{'weight':1.2}]},
{'featureType':'landscape','elementType':'geometry','stylers':[{'color':'#000000'},{'lightness':20}]},
{'featureType':'poi','elementType':'geometry','stylers':[{'color':'#000000'},{'lightness':21}]},
{'featureType':'road.highway','elementType':'geometry.fill','stylers':[{'color':'#000000'},{'lightness':17}]},
{'featureType':'road.highway','elementType':'geometry.stroke','stylers':[{'color':'#000000'},{'lightness':29},{'weight':0.2}]},
{'featureType':'road.arterial','elementType':'geometry','stylers':[{'color':'#000000'},{'lightness':18}]},
{'featureType':'road.local','elementType':'geometry','stylers':[{'color':'#000000'},{'lightness':16}]},
{'featureType':'transit','elementType':'geometry','stylers':[{'color':'#000000'},{'lightness':19}]},
{'featureType':'water','elementType':'geometry','stylers':[{'color':'#000000'},{'lightness':17}]}
]

On demo page widget is visible in 'footer' sidebar.

Built-in widget which allows you to display members (member post type).

On demo page widget is visible in 'bottom1' sidebar.

Built-in widget which allows you to display services (service post type).

On demo page widget is visible in 'top2' sidebar.

Built-in widget which allows you to display works (work post type).

On demo page widget is visible in 'top3' sidebar.

Built-in widget which allows you to display short information.

We display the widget in "header" sidebar to show short info about blog:

We also display the widget in "top1" sidebar to show short info "about us":

Built-in widget which allows you to display portfolio (portfolio post type).

On demo page widget is visible in 'top4' sidebar.

Built-in widget which allows you to display testimonials (testimonial post type).

On demo page widget is visible in 'bottom2' sidebar.

Follow steps listed here

Follow steps listed here

Follow steps listed here

Follow steps listed here

Navigate to Members > Add New. Enter title (member name), description and click Publish. Optionally you can choose featured image (member avatar).

You can also provide:

1. Proffesion
2. Phone
3. Email
4. Social links
5. Working hours

Navigate to Services > Add New. Enter title (service name), description and click Publish. Optionally you can choose post icon.

Navigate to Works > Add New. Enter title (work name), description and click Publish.

Follow steps listed here

Navigate to Testimonials > Add New. Enter title, description and click Publish. Optionally you can choose the occupation and avatar image.

Navigate to Portfolio > Project Categories. Enter name, description and click Add New Project Category

Navigate to Portfolio > Add New. Enter title, description, choose Portfolio Categories, Featured Image and click Publish.

You can also set:

1. Project Thumbnail Size - choose the size of thumbnail to display in Portfolio widget or page
2. Additional Images - choose additional images to display them on the Single Project page.
3. Number of Columns - choose number of columns for additional images.
4. Slider Images - choose additional images to display them as animated slider on the Single Project page.
5. Video - enter a video url to display a video on the Single Project page.

Follow steps listed here

Follow steps listed here

Follow steps listed here

Follow steps listed here

Follow steps listed here

PE Maldives theme allows to display a one-page menu. You can see how it works on our demo site by clicking the menu items:

To configure such menu items, you need to follow 3 steps:

Step1: Define sections ID

First you need decide to which sections you want to scroll your menu items. Each section must have a unique ID which you can control from the widget settings:

• by providing "Onepage section ID"
• if the "Onepage section ID" is empty, then the widget title slug will be taken
• if the widget title is empty, then the widget ID name will be taken

Navigate to Appearance > Widgets and choose a widget. Then decide whether to use the widget title or "Onepage section ID":

Step2: Configure menu items

Navigate to Appearance > Menus. Click on Custom Links, enter the URL, link text and click on Add to Menu

The URL address must contain the page address and the section ID to which you want to scroll the menu item. For example: www.mydomain.com/#home, where "home" is the widget title or a value from the "Onepage secition ID" field.

Step3: Add "one-page" class to menu items

The last step is to add the "one-page" class for each menu items which you want to work as one-page menu.

Remember to Save Menu after your changes.

PE Maldives theme allows to display the post image, title, author in the theme header instead of the post/page content.

You can control that in Theme Options. Navigate to Theme Options > Blog > Single post or Theme Options > Pages > Single page, choose the Header Image for Post/Page layout option.

Remember to Save Changes.

Follow steps listed here

pe-color - provides different widget layout

pe-color2 - provides different widget layout

pe-vertical - provides different widget layout

pe-horizontal - provides different widget layout

pe-expand - allow to display a widget on "header" sidebar on full screen

pe-margin - removes all margins for widget.

text-right - aligns text right

text-left - aligns text left

text-center - aligns text center

pe-clean - for Tabs shortcode

pe-section-space - removes space above and below section.

pe-section-space-top - removes space above section.

pe-section-space-bottom - removes space below section.

no-bold - removes bold font weight from string.

Follow steps listed here

All available shortcodes you will find here.

All available widget positions in theme :

We have also a video tutorial on how to manage the theme layout in WordPress themes:

Typography article you will find here.

On above page you will find some examples of custom classes which you can use in articles.

Follow steps listed here

Theme PE Maldives is available in 2 different versions. Each version have own settings and content.

You can import settings in Theme Options using provided in package file options.json

1. Go to Theme Options > Import / Export
2. Click Import from File

   

3. Open options.json file with Code or Text Editor and copy content.

   

4. Paste content in input.

   

5. Click Import

Remeber: All of your previous settings will be overrided.

Content can be imported in Tools > Import. More details in Demo Site Configuration

Follow steps listed here

Commercial images and videos used on the demo page: