PE Services WordPress theme manual

This documentation is last updated on 23th June 2017.

Thank you for purchasing PE Services 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 steps listed here

Follow steps listed here

Follow steps listed here

All available settings for 'Clinic' version of PE Services theme. More information about different versions you will find in Styles section.

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 Posts & Pages, navigate to Appearance > Theme Options and click on Posts & Pages tab.

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.

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 Accessibility settings, navigate to Appearance > Theme Options and click on Accessibility tab.

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

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

Follow steps listed here

Follow steps listed here

This page displays posts with post type Services Category and Services. To create that page go to Pages > Add New. Now select template Services Page and click Update/Publish

When you save or publish page additional options will be available.

You can set:

1. Service Categories
2. Items per Page
3. Thumbnails per Row
4. Thumbnails Position
5. Thumbnails Size
6. Item height
7. Thumbnail Section Width

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

Follow steps listed here

Follow steps listed here

Follow steps listed here

Follow steps listed here

Add PE Box widget to sidebar Primary Widget Area.

You can choose here:

1. Title: title of widget
2. Link
3. Show Icon : checkbox
4. Icon height : in pixels
5. Icon width : in pixels
6. Icon image : URL with http://
7. Icon "hover" image : URL with http://

Click Save when you are done.

Add PE Short Info widget to sidebar Primary Widget Area.

You can choose here:

1. Title: title of widget
2. Link
3. Icon (HTML)
4. Description
5. Animation type (animate.css)
6. Animation delay (miliseconds)

Click Save when you are done.

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

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

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

Add PE Team Carousel widget to sidebar Primary Widget Area.

You can choose here:

1. Title: title of widget
2. Type of view: Carousel View or Grid View
3. Image size: thumbnail, medium, large
   Images are automatically cropped to dimentions (from Media settings):
   thumbnail - 100 x 100px
   medium - 278 x 185px
   large - 893 x 350px
4. Number of Members
5. Number of Members in one row
6. Member description limit
7. Show or hide Social icons
8. Show or hide Member name
9. Show or hide Member profession
10. Show or hide Member avatar
11. Show or hide Member description

Click Save when you are done.

Add PE Testimonials Carousel widget to sidebar Primary Widget Area.

You can choose here:

1. Title: title of widget
2. Number of testimonials to show
3. Testimonial opinion limit
4. Show or hide testimonial author occupation

Click Save when you are done.

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. Member job position
2. Nember Facebook profile
3. Member Twitter profile
4. Member Linkedin profile
5. Member Phone number
6. Member Email address

Navigate to Testimonials > Add New. Enter title (author name), description and click Publish. Optionally you can choose testimonial author occupation.

First you should add Service Categories.

Navigate to Services > Service Categories.

Enter:

1. Category name
2. Category slug
3. Choose Category parent
4. Category description

Click Add New Service Category when you are done.

Once you have category, you can add post.

Navigate to Services > Service Categories.

Enter title (service name), description, choose Service Categories, Featured Image and Service Subtitle.

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

pe-margin - removes all margins for widget.

pe-widget-overlap - moves widget above another section.

pe-box-lighten - (PE Box widget only) makes widget background lighter.

pe-box-darken - (PE Box widget only) makes widget background darken.

pe-nospace - removes space between widgets.

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.

cd-headline - headline class for text ususally used as a single sentence for colorful sections.

Follow steps listed here

Follow steps listed here

Shortcodes article you will find here here.

In this article you will find some examples of shortcodes which you can use in articles.

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 here.

In this article you will find some examples of custom classes which you can use in articles.

Follow steps listed here

Theme PE Services is available in 4 different versions. Each version have own settings and content.

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

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

   

3. Open theme-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 section

Follow steps listed here

WAI is Web Accessibility Initiative - an initiative established by the W3C, defining the standards for creating web pages, which have to be available for many users - in the project participate companies such as IBM, Microsoft, Google, Apple (the author of WCAG). Web Content Accessibility Guidelines is a collection of documents relating to the availability of Internet services, Since 2012 has the status of international standard ISO.

1. Page navigation by using keyboard - you don’t need to use a computer mouse to navigate through the relevant sections of the website, just keyboard will be enough
2. Skip to the following Menu items is possible with the Tab key, so we can quickly move through the page
   

   

3. Avoidance of animated elements (facilities for people suffering from epilepsy) stable graphics, no garish animated effects is one of the advantages of our theme
4. High contrast mode: ensure optimal readability of the text ( Black/White Mode, Black/Yellow Mode, Yellow/Black Mode)
   

   

   

   

5. Night mode - lets you avoid eyestrain. If your eyes get tired quickly, don’t strain them and to use night mode color version
   

   

6. Width switcher (fixed/fluid) adjust the width of the screen to fit your needs
7. Font size switcher (3 degrees of font size, which are fixed as a percentage)
   

   

You can easily customize all of the available facilities (disable and enable mods depending on your requirements) in Theme Options

Shortcut menu in the top left corner of screen is visible when you use keyboard to navigate on the site (use TAB key). It allows for quick access to interesting or important content parts.

You can manage links and items in WordPress backend Appearance -> Menus -> Select 'Skip Menu' if exists or create new menu in 'Skip Menu' theme location.

If you want create a new link in menu, simply chose Custom Links type.

As URL you should set section ID where you want to link. You can check document sections ID with any Code inspector in your browser. Example in Chrome (F12 button) :

Id of Bottom 1 section in example is 'pe-bottom1' which means we can add Custom Link in Skip menu with URL : #pe-bottom1

All main sections in theme have its own headings for users who use screen readers. It is helpful to browse the site and correctly recognize each part of site.

You can easly change labels in Theme Options -> WCAG & ADA

Plugins:

1. Duplicator (Create a backup of your WordPress files and database. Duplicate and move an entire site from one location to another in a few steps. Create a full snapshot of your site at any point in time.) http://lifeinthegrid.com/
2. Display Widgets (Adds checkboxes to each widget to show or hide on site pages.) http://strategy11.com/
3. W3 Total Cache http://www.linkedin.com/in/w3edge
4. Revolution Slider (Revolution Slider - Premium responsive slider) http://themepunch.com/
5. WP User Avatar (Use any image from your WordPress Media Library as a custom user avatar. Add your own Default Avatar.) http://www.flippercode.com/
6. WordPress Importer https://profiles.wordpress.org/wordpressdotorg/
7. Max Mega Menu (Mega Menu for WordPress.) http://www.maxmegamenu.com/
8. Multiple Post Thumbnails (Adds the ability to add multiple post thumbnails to a post type.) http://voceplatforms.com/
9. PE Easy Slider (Simple Horizontal Slider for Posts) http://www.pixelemu.com/
10. PE Recent Posts (Simple Slider for Posts) http://www.pixelemu.com/
11. WP-LESS https://github.com/oncletom/wp-less/
12. Redux Framework https://reduxframework.com/

Commercial images and videos used on the demo theme:

Depositphotos

1. http://pl.depositphotos.com/54310847/stock-photo-car-upkeep-and-safe-driving.html
2. http://pl.depositphotos.com/70777125/stock-photo-young-mechanic-at-work.html
3. http://pl.depositphotos.com/62515479/stock-photo-dieting-collage.html

Graphickstok

Are you interested to get 83% off on your GraphicStock subscription? Here you will find a discount coupon: http://go.referralcandy.com/share/LVTS2JK

1. https://www.graphicstock.com/stock-image/travel-car-121946
2. https://www.graphicstock.com/stock-image/architect-and-engeneer-on-construciton-site-check-documents-and-business-workflow-on-new-building-274026
3. https://www.graphicstock.com/stock-image/team-of-architects-on-construciton-site-274058
4. https://www.graphicstock.com/stock-image/mature-doctor-making-an-ultrasound-examination-to-pregnant-woman-243995
5. https://www.graphicstock.com/stock-image/smiling-girl-looking-at-camera-while-doctor-examining-her-teddybear-in-clinics
6. https://www.graphicstock.com/stock-image/female-researcher-holding-up-a-test-tube-in-lab-8