Go Back to Experience

WHAT DOES EXPERIENCE INCLUDE?

When you buy the Experience Theme you will download a ZIP file which includes:

  • The Experience Theme compressed in a ZIP file ready to be installed in the WordPress admin. This include: PHP, CSS, JS files and the plugins needed to make the theme work properly.
  • Exclusive PSD’s files to help you make your designs.
  • HTML file with additional information about the theme.

 

MAIN FEATURES

Experience is a complete multi-purpose WordPress theme. It’s perfect for everyone who want to give added value to their websites by offering experiences/activities to their customers, but also for people who want to share their knowledge through workshops and events.

It also has a blog which has different designs to choose —Grid and normal version both with and without sidebar—, and a Portfolio with two alternative designs.

Moreover, creating pages had never been more dynamic: thanks to the Page Builder plugin now we can drag and drop elements in any page and post, in which we will find exclusive widgets made by Anmar Studio developer’s team only for Experience Theme.

 

FIRST STEPS

Below we list all the steps you need to follow before you get to work with it.

 

WordPress installation on the hosting

The first step before you get to work with it is the WordPress installation on your hosting. If you don’t know how to do it, don’t worry, it is much easier than it seems. On the next link it’s explained in a very simple way how to install WordPress step by step.

 

Theme installation

Install the theme is so simple. Once we have the ZIP file of the Experience Theme, we should go to the admin of WordPress and go to Appearance > Themes screen, then we click on Add New button on the top of the screen next to the title. We will get another screen with the most popular WordPress themes, latest releases, etc. Again, we will look for the button on the top that we will click, that is Upload Theme.

theme-documentation-theme-install

Once this is done, we will get a “Select File …” button, click on it and look for the location where we downloaded the WinRAR. Now we select the “Experience_1.0.zip” file and click “Install Now”. Finally, we will get the last screen informing that the theme has been successfully installed. From the different options, select Activate and the Experience theme will be ready to be configured how we like best.

IMPORTANT: You may have a previous version and the number after Experience is different, to download the latest version of Experience visit this link.

In case you have problems when installing because of the limitation of megabyte you can also install it manually as we list below:

  • Unzip the Experience V1.0.1zip file.
  • We need to copy the resulting folder (“Experience V1.0.1″) and paste it in the folder where we hosted WordPress themes, i.e., wp-content > themes.
  • Now the Experience theme appears in the section Themes of the WordPress Dashboard, activate it and go!

 

Install necessary plugins

Once the theme is installed and activated, WordPress will redirect us automatically to the Appearance > Themes screen where all the installed themes are shown. But now let’s focus in the necessary plugins for the complete customization of the theme.

Experience has nine recommended plugins to get the most of the theme: Experience Portfolio, Experience Shortcodes, Experience Slider, Experience Widgets, Experiences Plugin, Page Builder by SiteOrigin, Become a professional contact form, MailChimp for WordPress and Really Simple CAPTCHA.

Moreover, we also have the Demo One-click plugin in order to install all the Experience Demos that we have in this link with the one-click functionality.

theme-documentation-demo

However, you can just install the plugins you are going to use. Each of them are explained in detail below.

To install the necessary plugins manually we should go to the Plugins screen and click the Add New button on the top left. Then we will get a new screen with the most popular plugins like when we installed the theme, and we will click again in Upload Plugin on the top. Once we have this done, we will have a “Select file…” button, click and search the location where we downloaded the ZIP file. We should select the plugin to install and click on Install Now.

Finally, we will get a screen informing you that the last plugin has been successfully installed and two options, we will click on Activate Plugin and it will be ready to use. You must repeat these steps for each plugin you want to use.

As in the installation of the theme, if we have problems installing a plugin we can upload it with our FTP. In this case we will copy and paste the plugins folders we want to use in wp-content > plugins.

theme-documentation-install-plugins

Anyway, the Experience theme has a section that automatically handles all plugins. When we install the theme it’ll appear at the top of the Dashboard an option to install all the necessary and recommended plugins with just one click. If we decide to do it through this way ―which is much simpler― we’ll have to mark all plugins and select activate on top (Bulk Actions) then we’ll click on Apply. Thus, all plugins are activated simultaneously.

 

SETTING UP: ESSENTIAL CONFIGURATIONS AND THEME OPTIONS

Most things of the theme that can be customized must be configured within Appearance > Theme Options. By following these steps you’ll be able to tune Experience theme and give it the style you like.

 

Permalinks

Before you configure your theme is very important to use friendly URLs, for both the SEO of your site and the proper functioning of the theme. To configure friendly URLs, we should go to Settings > Permalinks and select Post Name in the Common Settings section. Once we got this, click on Save Changes.

 

Header

The first step to give your first touch is to personalize and configure the header, which as you may remember is always visible at the top of the theme. To do this, we should go to Appearance > Theme Options > Header.

The first thing we can do is to choose the style of it, for that we can choose between the Light Version ―with the text in black and a white background― or the Dark Version ―with the text in white and a black background―.

theme-documentation-header

We can also change the position of the header by choosing a Fixed or a Relative version. The first one remains at the top of the screen overlaping the content, and the other one doesn’t. The Relative version is perfect for large menus with lot of elements because makes the header bigger as we add them.

Next you can choose from displaying the Log In, Log Out, Register and Profile links or not.

Then we should enter the logo of our site in the box enabled for this purpose (Logo) or just type it in the box below, where we can choose the font we like best from among all of the Google Fonts. If you do not know how to change the font, we explain it in detail in the following link.

Finally, when we leave everything as we like, we’ll click on Save and … voila!

 

Creating the navigation menu

It is also important to create the navigation menu that appears on the top right of the header. To do this, go to Appearance > Menus. On this page or section we’ll click on Create a new menu and we’ll get a new screen that allows you to insert, on its left side, pages we had created, links, categories, etc., in our new menu. Simply select what you want to add and drag it up or down in the right side to determine the order in which it appears.

If you have installed the Experiences Plugin or Experience Portfolio they’ll also appear in the left side of the page, so you can add Portfolio Projects or Experiences in the menu too.

Finally at the bottom of the page in Menu Settings we’ll chose the location of the menu, which will be Responsive Menu, then we’ll write the name of the menu and we’ll click on Save Menu.

 

Footer

The footer can be completely customized to our liking. On one hand, we can choose the colors and copyright; Corporate information, logo, text and social networks ―on the left― and finally the content that appears next to this one, particularly on the right.

To configure the global content you must go to Appearance > Widgets. There are shown all WordPress widgets it incorporates, those which are exclusive to Experience and others which have been previously installed (if applicable). Simply drag the widgets you want to add to the tab Horizontal Sidebar ―considering that the footer has three columns and widgets are organized by Masonry script, i.e., from left to right in a grid style―. Nothing else to do, our work is automatically saved!

theme-documentation-footer

In Appearance > Theme Options > Sidebars we can change all the colors of the Footer, but also add the corporate information like logo, description, contact and social networks.

theme-documentation-footer2

Finally we can change the Copyright of the web on the Advanced Options tab of the Theme Options in the Copyright section, as well as its background color which can be different from the main footer background.

theme-documentation-footer3

theme-documentation-footer4

Slider

By default WordPress will always show on the theme the last posts or blog entries as homepage. However we can change it easily by choosing a page that we had previously made with Page Builder for example, and adding if we want the slider.

theme-documentation-slider

If we want to add one of the two available Sliders or the Video Header we should go to Appearance > Theme options > Homepage and we’ll check the radio button in the Slider and Video section. If we have chosen Parallax Slider or Full Height Slider we should have created some Slide previously using the Slider Plugin. For that we should go to the Dashboard of WordPress in Slider > Add New button, then we’ll create it like an entry post, i.e., adding the title, content and a featured image. It’s detailed in this section.

 

Choosing a homepage

If we also want to make disappear the entries or posts of the homepage and we want, for example, the Portfolio page or any other page that we have created, we should go to Appearance > Customize; here we’ll select Static Page and choose from the first dropdown the page you wish for the homepage, while in the second dropdown we’ll choose the page that we want to be the Blog.

theme-documentation-home

Anyway you can also create a page that can be used as the Blog feed. Simply choose the Blog Posts template in the Page Attributes tab and we’ll start seeing our posts when we take a look at our new page. Of course, this page can be shown in the top responsive menu like we explained before in the “Creating the navigation menu” section.

 

Give it your touch: appearance of your pages, Blog and Sidebars

In Appearance > Theme Options > Blog we can choose the design of the blog: the posts position, with sidebar, without, in a grid style… the icons color of the blog and the different colors of the Single page like the categories link color, tags, comments…

To customize the pages we have to go to Appearance > Theme Options > Pages and here we can add or change the headers of the Archives or Categories Page and all their colors.

theme-documentation-blog-pages-side

Moreover, in Appearance > Theme Options > Sidebars we can choose the Vertical Sidebar version which can be Light ―with white background and black texts― or Dark ―with black background and white texts―. We can also modify the WordPress Calendar widget colors in this section, which have been redesigned exclusively for Experience Theme. This calendar to which we refer appears only in the sidebars of the blog, i.e., it’s not the same that appears in the Single Experiences pages on their right side.

 

Advanced Options: fonts, favicon and personal touches

In Appearance >Theme Options > Advanced Settings we’ll find more customization options to give a personal touch to your site. First, it’s possible to change the font of the body or the titles of the whole theme, choosing from all the fonts available in Google Font.

 

Google fonts implementation

Google Fonts shows lists with all fonts that are in their repository, which appear with the sample text that can be changed at the top. Once we choose the font that we like, we press the icon Quick Use, which it is normally the second button.

theme-documentation-fonts

Once this is done, on the next screen we should copy the text of the third section, concretely the @import tab, and paste it in Add the Google Font code of the Theme Options. Then, we’ll copy the text from the fourth section, which displays the family font ― “font-family: ‘Open Sans’, sans-serif;”, for example― and we’ll paste it in the above section of the Theme Options called Google Font. Now we can show off a Google Font to our liking and in our website!

theme-documentation-fonts2

theme-documentation-fonts3

 

Buttons

There are two types of buttons, which appear in several pages and widgets of the theme, the Primary and the Secondary buttons. The first one, has a rose background and a white text by default, and the second one has a rose border with a transparent background and the text is displayed in rose. However, we can easily modify these colors in the Theme Options in their own sections in Advanced Options.

 

Loader GIF

The loader GIF is the animation that appears when the website is loading, which can be changed after the Buttons section of the Theme Options’ Advanced Settings. For that we designed a PSD file which can be easily modified in order to add the icons and color that fits better with our web design. However if you have your own design, you just have to upload it and it will be displayed!

theme-documentation-load

 

Favicon

The favicon of the site can be changed as well in the Advanced Options screen. This is the icon that appears at the top of the browser where the site title is displayed, which must be a square, i.e., 512x512px. This favicon appears only in the front-end, i.e., on your website itself but not in the WordPress Dashboard. If you want the logo also on the Dashboard, you can easily upload it on Appearance > Customize. There are more PSD files with a design example of a favicon.

 

Emails

Below of the favicon, footer and Copyright ―that we have already explained―, we can upload the logo that appears in our automated emails ―these are for example when someone buys an experience― as well as the style of the font like color, size, font…

 

Others

Finally, we can add a header to the 404 page, change the style of the Log In and Register pages, the Pagination color or the label colors of the Become a contributor page form.

 

SLIDER

For creating the Slider of the Homepage you should go to the Dashboard of WordPress in Slider > Add New screen. As you might see the appearance is the same as when we create a post. We must add the title and the text that appears within the slider and the image that constitutes it, which can be added only in the Featured Image on the right side, and not in the content box.

theme-documentation-slider2

In the content box of the slider we can write whatever we want, add a video, and audio, a map or even images. Once we have this, below we can change the title color, add a button and change its style.

IMPORTANT: Keep in mind that the first slide that you create will appear the last and if you want to delete any slide just add it to trash as it were a normal post. We don’t recommend to add the Carousel and slider shortcode to the content box of the slider.

Finally, to configure the slider main appearance we’ll go to the Settings section of the Slider where we can choose from showing or not the bottom search bar, change the slider arrows from all the icons of Font Awesome and its colors.

 

EXPERIENCES

Through the Experiences plugin we can create all kinds of activities, courses, workshops, events or whatever you can imagine that can be booked.

It has its own reservation system created by Anmar Studio, in which can be made both free and paid reservations (with the PayPal payment gateway), one of the safest ways of internet.

However, to provide more security to the theme we have created two new roles for users, the Experience Contributor and Experience Client. Thus the data of all those people who buy and sell experiences are stored.

IMPORTANT: As we explain in the Tips and Tricks section, by default the WordPress toolbar is hidden for new registered users. This can be changed for Experiece Authors in their respective profiles.

 

Experience Contributor

Specifically, the author of the experiences or Experience Contributor is responsible for creating experiences, so they can enter into the WordPress Dashboard but can only view their profiles, their media, options to create an experience, their experiences and the bookings of their experiences. They can create an experience but will be subsequently reviewed by the administrator, which will choose the type or category of the experience.

To create the Experience Contributor, we have to be logged in as an administrator and go to Users in the WordPress Dashboard. Once we are in that screen we have to click on Add New User, and then we will get a new screen where we have to fill in the username and email as required inputs and the name, last name and website as optional. Then click on Experience contributor in the dropdown and click Add New User.

theme-documentation-contributor

If we want to customize this new user the Experience theme also provides the option to add their social networks, profile picture, header, etc. To do this go to Users > All Users and click on the new user created. Here we have all options to customize it from the WordPress user options like Dashboard style, name, how to display the name, biography ―that we recommend to fill in because it appears on his profile and the experiences he create― and the Experience additional info options, these are:

  • Role: the author specialty, like user guide, mentor, teacher, photographer, etc. This input will appear in his profile on the header and it’s totally optional.
  • Profile image: the image that appears on his profile. This image is not the same that appears on the experience single page or in the comments, if you want to add these last ones you must add it through Gravatar. We explain how to do this in this section.
  • Languages: the languages that the user speaks to avoid communication issues with the client who gets the experience.
  • Header image: it’s the image that appears in the header on the profile page.

theme-documentation-contributor2

Finally, we can fill in the social networks the user has. As you may imagine, the ones that we don’t fill in won’t appear.

 

Experience client

The Experience client user is the customer of the experiences and therefore the only one who can book them. To create them we have two options: the administrator creates the user through the WordPress Dashboard as we did in the Experience Contributor or the clients register themselves on the web through the register form.

To register themselves on the web first the Register link has to appear in the header of the web (This step is explained in the Header section), this option can be activated in Appearance > Theme Options > Header checking the box in the Log In and Register section. Once we have this activated we should go to Settings > General and choose Experience Client in the dropdown and check the box for let’s everybody register to this site.

theme-documentation-client

theme-documentation-client2

The Experience Client can’t access to the WordPress Dashboard but they can modify their name, last name, email, password, biography… on their profile. Their personal details are only visible for the authors and administrators, i.e., a page visitor or another site’s client can only see the header image, profile image and the biography.

 

Creating an Experience

Create your first experience is as easy as exciting. Go to the section of Experiences and click Add New, in which we’ll see a similar interface as we saw in the posts editing screen but with a plus: the boxes to configure our experience, located below the text editor.

theme-documentation-exp

First we have the Experience Options where we can find:

  • Experience price: it’s very important to fill in this section, first the price and then in the dropdown the currency. In the case that the experience was free we add a zero on the price and of course, there is no need to choose currency.
  • Experience people: It is the maximum people who can book an experience. This field is full mandatory because the reservation system operates under this input, so if any Experience doesn’t have this filled in, WordPress doesn’t let us create it.
  • Experience Location: simply write the place where the experience will take place, it’s optional.
  • Experience time: The start and end time of the experience, it’s optional.

Secondly we have the Bookings and Specifications that appears beside the experience under the calendar to book and the author of experience. We created it with the idea that the author of the experience could add the specifications of the experience like if the tickets are included, the transport, the availability… Within this section we’ll notice:

  • Experience availability: if you click on any input of this section it appears the calendar to choose the dates from when the experience is available to when it finishes. In addition we can choose in the boxes below if it is available only on weekends or weekdays and write in the next section, if you wish, the dates on which the experience is not available. Here the format is “d-m-y” without any zero before the days of months, i.e., if the date were September 20th, 2017 it will be “20-9-2017”, with the quotation marks (“”) included.
  • Specifications: This section is to clarify a little more the experience but is entirely optional. If they are filled in some icons will appear on the Single Experience page and in the General Experiences pages. This is the duration of the experience, the vehicle or if the entries would be included or not, and if it was the case we would click on Not applicable.

theme-documentation-exp2

You have already configured your first experience, now the only thing left is to choose the featured image and the style of the header (text colors and if you want a filter to the image, and thus to highlight text).

IMPORTANT: The type of experience (category) can only be choosen by the administrator, the Experience contributor can only draw the experience, configure it and present it for review.

 

Experience Pages

As we like variety, Experience Plugin offers three different styles to show all the experiences ―these are the pages where all the available experiences appear―, two of them with a grid style in two columns ―one with the text below the image and one with the text hidden that is displayed only on hover― and other style in a column with some information about the experience, location, etc.

theme-documentation-exp3

In order to add one of these templates to your website you have to create a page on the Dashboard of WordPress, in the editing interface of the page you just have to add a title, give it some style in Options page and choose the template in the Page Attributes tab. The experience templates are Page experiences grid (with the text hidden), Page experiences with text (with the info below the image) and Page experiences full info (with one column with more information than the above templates). It is also possible to add content in the Text Editor, which appears above of the page. This example can be seen in both Grid Experiences pages in the main demo of the theme.

theme-documentation-exp4

 

Additional experiences options

First, note that the categories of experiences are called Types, these will categorize the experiences and will appear on top of each Experience Pages to make it easy for the user to filter the experiences when clicking on any type.

theme-documentation-exp-type

Moreover, all bookings made appear and can be supervised on Experiences > Bookings whether the payment is pending or completed. We can say that every time someone books any experience an email will be sent to the client, to the author of the experience (Experience Contributor) and to the administrator. On this page of bookings you can check if a payment is completed or pending, the customer name, the username, his PayPal email (that can be different from the WordPress user email), the experience booked, the total amount and the payment date.

theme-documentation-exp-book

To delete any booking simply mark the one ―or ones― that you want to delete (please be careful because the booking which you delete can’t be recovered again) and click on Delete button at the bottom of the page.

IMPORTANT: When you delete a booking does not mean that you have canceled it, this will be done only through PayPal. This not applies if the booking is free.

Finally, in the Settings section of the experiences we can finish our fully customization. First we’ll start with PayPal, as it’s very important to receive payments from the experiences with no kind of issues; we have to fill in the Merchant account ID of PayPal, but if we don’t have a Business PayPal account (which has the Merchant account ID) we can simply add the PayPal email in PayPal Email Account, and leave the previous unfilled. Below we can optionally fill in the URL of the page “Thanks for your purchase” and the URL of the page return. The Thank you page is the page in which the buyers are redirected when they purchase any experience and The Return page is the page that the buyers are redirected to when they cancel any purchase. You can create pages with Page Builder, for example, and add the URL of them to these sections of PayPal.

theme-documentation-exp-set

Below there is the Users section, to change the author and customer Settings like their profile image and header image by default and the colors.

Then in the Experiences Archives section we can add header to this page, as well as change the header text, the header image and its colors. The colors of the Page experience full info can be changed too.

We have the Single Experience options below where we can modify the Like color of the header, the style of the top boxes with the experience features, their position, the style of the right side (where is situated the calendar) and the reviews style.

Finally, it remains to modify the color of the icons that appear on each page of the plugin, the secondary icons color and the links on hover.

 

THE PORTFOLIO AND ITS PROJECTS

To set up our portfolio we have to have in mind two factors: First, the design or template in which we will show our projects; secondly, the project itself.

To create our template we’ll go to Pages > Add New and we’ll choose from the section Page Attributes > Template one of the two we have created for Experience Portfolio: Portfolio no text and Portfolio with text. The first page shows only images of projects with its information on hover, and the second one displays the project images with its information at the bottom.

theme-documentation-port

theme-documentation-port2

To create a new project we’ll go to Portfolio > Add new. This page works basically like a blog post, with its title, content, featured image and types or categories. However, we also have the option to show or not the author information of the project (This is the author / user who create the project) and the customer information as the project website, image or logo, and description.

theme-documentation-port3

theme-documentation-port4

 

BLOG AND POSTS

If you decide to put the blog on the homepage, it will appear automatically. If you want the blog to appear on another page instead of the homepage, you must create a page in Pages > Add New and select in Page Attributes > Template > Blog Posts. You should leave the content of the page in blank, but you can write its title and choose to display or not it on the page.

theme-documentation-blog

To create a new entry in your blog you must go to Posts > Add new. Here you should also place the title and content of the post (where you can put text, images, etc.), as well as the Featured Image that will appear on the thumbnail preview of the entry, then the categories and tags.

 

Shortcodes

There are several shortcodes in the Shortcodes Plugin that can be added to the blog posts, Experiences, Portfolio Projects or general pages. If this plugin is installed, it’ll appear an Add Shorcode button on top on the editing screens. If we click on it, we’ll get a new window where are displayed both Experience Shortcodes and WordPress shortcodes. Through this way we simplify the way to include them, we’ll only have to enter the variables you want and click on Add Shortcode.

theme-documentation-blog2

theme-documentation-blog3

Our shortcodes created for the Experience theme are:

  • Primary button: to include a button with text and link with the style of the Primary Buttons of Experience.
  • Secondary button: to include a button with text and link with the style of the Secondary Buttons of Experience.
  • Google Maps embedding: to include a map from Google Maps, just paste the embed code in the text area.
  • Image Slider Gallery: To add a slider with the images of the Media Library and add a link, etc.
  • Image Carousel Gallery: is the same as above but instead of showing the images as a slider they are showing as a carousel.

IMPORTANT: Have in mind that only the administrator has the permission to add Google Maps embedding shortcode, as WordPress is very cautious with all kind of iframes.

 

Posts formats

You can give the format you want to the blog posts, these are Standard, Video, Gallery, Link or Quote.

theme-documentation-blog4

The Standard Format is the default format for all posts. But we have also the Video Format to add a featured video in the Blog instead of an image; the Gallery Format to add a gallery slider instead an image in the blog; the Link Format to highlight a link in the blog; and the Quote Format is similar to the link format, but instead of the link it appears the quote and its author.

In the editing interface when we create a post entry, we have at the bottom of the content box the format options, which are very useful for certain types of post formats, like the gallery, link and quote. For example, if we want to create a post with the gallery format we’ll use a WordPress gallery to be recognized as the format itself and can be displayed in the blog. However, the default WordPress gallery doesn’t have the same style as the Experience theme, so we can check the box on the gallery options to display it in a Slider way with the common style of Experience Theme.

In case the post format is a link we’ll write the URL in the link options, and also we can choose a background color if we want to hide the featured image or hide the bottom information that appear in the blog page. If the post format is a quote, we’ll write also the quote in the options and the author, we can choose the background color if we don’t want to display the featured image and hide the information in the blog page, like in the quote format.

IMPORTANT: If you choose gallery as the post format but we haven’t got any WordPress gallery inside the post, the slider won’t appear on the Blog.

 

Sidebar

Just like when we configured the Footer, we should go to Appearance > Widgets to configure the Sidebar content. We’ll drag the elements that we want to shape our sidebar to the tab Vertical Sidebar and complete them with the information we want to show.

 

CREATING PAGES WITH AND WITHOUT PAGE BUILDER

To create a page we’ll go to Pages > Add New. The first thing to consider is if we want a page with margins or full screen. To do this, in the page editor we’ll go to the Page Attributes tab > Template on the right side, and we’ll choose: Default Template (page with margins) or Full Width (Full screen page).

To create a page without using Page Builder simply use the standard WordPress editor, here we can add shortcodes as well and a header. On the right side in the Options tab of the page there is an option in which we can choose whether we want to show or not the title page and/or the header, the header title, the header text and if we want or not a image filter to highlight the text.

theme-documentation-page

If we want to create the page with the Page Builder just check the top tab called Page Builder. It’s very easy to use, we just have to add widgets, rows, columns, etc., and move them where we want by dragging and dropping them.

theme-documentation-pb

When we click on Add Widget we’ll get a new window with all widgets that we can use like the Page Builder widgets ―we don’t recommend its use because we haven’t adapted its style to the Experience Theme, but we can use the Editor Widget as it works like the custom WordPress content editor―, WordPress widgets and those created exclusively for the theme. If you click on any to add, and then you click on edit, we’ll get an interface with its options, the style we wanto to give it and on the right side, its features, sctructure and design (these options also appear if we click on the Edit button of a row). In the features we can add a class to the widget (on tips and tricks you have classes that can be given to the widgets to change their style) and CSS style; in structure we can add padding to the widget; and in design we can add color to the background, a background image (with parallax or not), as we see in this image, border color and font color (We don’t recommend to change them in this area for Experience widgets, as can be modified in the widget style).

theme-documentation-pb2

 

SEO

Experience is a SEO-friendly theme, which means that it has a several characteristics suitable for your search engine optimization, i.e., the site will be easily on the top positions of the searches. The features that make Experience theme SEO-friendly are:

  • A good code structure. For example the use of tags like <h1> for titles or <p> for paragraphs, etc. This way search engines can crawl the web more easily.
  • A valid code that follows web standards.
  • The internal structure of the web is HTML5, giving semantic content to the website.
  • The lack of Flash or iframes, which are impossible to crawl by search engines.
  • Fully accessible to all kinds of devices, whether mobile, tablets or PCs. Google recommens responsive design.

 

TIPS AND TRICKS

In this section we leave some tips and tricks to help you get the most from Experience. Do not miss anything!

 

WordPress Toolbar

By default the WordPress toolbar is hidden for new registered users. This is because we assume new users are clients and you don’t want them to see the toolbar. However, each user except the Experience Client can activate it in the Dashboard > Users > Profile.

 

Add Gravatar profile image

What is Gravatar? It is the platform that uses WordPress to add profile pictures to different users, that is, when we write comments, evaluations or own profile pictures. To create it go to Gravatar page and click on Create your own Gravatar.

theme-documentation-gravatar

theme-documentation-gravatar2

In this new page we add the email that we also use in WordPress (very important for WordPress syncs), the username and password. Once inside Gravatar we’ll add a picture and presto! In a few minutes we will have our profile picture also in WordPress.

 

Classes for widgets in the Page Builder

In the Experience Widgets there is a class that we can add through the Page Builder. As we have explained above, we can add classes to the widgets on the right side of the edit screen of the same widget as we show in the picture below (it is important to note that this doesn’t apply in widgets that are added to the sidebar).

theme-documentation-tt

The class that can be added is custom-width. Through this class what we are doing is to provide a variable length to the widgets, i.e., we can add the widget to any column with diverse sizes. For example, they perfectly fit with small columns like in a page with three/four columns. We can see the difference with the class and without in the picture below.

 

PayPal recommendations

In case we have in our web a language with special characters like accent marks, diaresis, etc., we recommend using a Business PayPal account to receive payments, as we can change the PayPal encoding with this kind of accounts.

To change the encoding we should go to our Profile in our Business account and then to Selling preferences. In the bottom of this page we have to click Language encoding. A new window will appear and we’ll have to click More options. Here we’ll select UTF-8 in both selectors and we save it. Ready!

 

HTML Structure

Experience is a fluid layout with a full width pages. All of the information within the body content area is nested within a “main” tag with an id of “content-wrapper”. It has a fixed menu on top with the class “experience-header”, where can be added a logo and the menu with a dark or light background.

There is an optional slider or video header below, that can be added to the homepage if the plugin is installed, followed by a fixed layout of 1024px for big screens. Instead of the slider, it can be added a parallax header with the class “page-header”.

Finally, the theme ends with a footer nested by the div with a class “experience-footer”.

Here is the general structure.

theme-documentation-html

CSS files and Structure

The Experience Theme has a general CSS file in the theme folder and some specific CSS files in the scripts > css folder, these are:

  • admin-style
  • animate: it’s used for the fade effects.
  • button: it’s used for the responsive menu in small screens.
  • flaticon: general icons used in the teheme.
  • headers-filters: these filters are used in the page headers.
  • img-hover: it’s used for the hover effects.
  • jquery.sidr.dark: it’s used for responsive menu.
  • login-style: it’s used in log in/register pages.
  • menu-links: it’s used in the responsive menu on hover.
  • responsive
  • superslider: it’s used in the full height slider.
  • unslider: it’s used in the parallax slider.
  • unslider-dots: it’s used in the parallax slider.

The structure of the general CSS file is:

/* =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
// 01. General Style.
//     1.1. Reset.
//     1.2. Transitions Chrome.
//     1.3. Buttons.
//     1.4. Scrollbar & Selection.
// 02. Header.
//     2.1. Logo.
//     2.2. Menu.
//          2.2.1. Top.
//          2.2.2. First Level.
//          2.2.3. Second and Third Level.
//     2.3. Login & register.
//          2.3.1. Login form: thickbox.
// 03. Main.
// 04. Vertical Sidebar.
//     4.1. Recent comments.
//     4.2. Search form.
//     4.3. Calendar.
//     4.4. RSS Feed.
//     4.5. Tag cloud.
//     4.6. Text widget.
// 05. Horizontal Sidebar.
//     5.1. Search form.
//     5.2. Calendar.
//     5.3. RSS Feed.
// 06. Headings.
// 07. Lists.
// 08. Blog.
//     8.1. Normal post loop.
//     8.2. Grid.
//     8.3. Grid sidebar.
//          8.3.1. Grid with right sidebar.
//          8.3.2. Grid with left sidebar.
//          8.3.3. Grid with whithout sidebar.
//     8.4. Normal no sidebar.
//     8.5. Sticky Posts.
//     8.6. More Link.
//     8.7. Post formats.
//          8.7.1. Video.
//          8.7.2. Gallery.
//          8.7.3. Link.
//          8.7.4. Quote.
//     8.8. Blog pagination.
// 09. Single.
//     9.1. Author left.
//     9.2. Author right.
//     9.3. Alignments.
//     9.4. Content.
// 10. Comments.
//     10.1. Comments reply.
//     10.2. Comments navigation.
// 11. Footer.
// 12. Pages.
//     12.1. Meta Box: Pages Header.
//     12.2. Default page.
//     12.3. Full width page.
//     12.4. Archive.
//     12.5. 404 page.
// 13. Misc.
//     13.1. Go to top button.
//     13.2. Screen reader text: Text meant only for screen readers.
//     13.3. Page Builder: Overflow margins.
//     13.4. Header Effects.
// 14. Responsive.
// ========================================================================== */

 

Javascript

In the folder scripts of the theme there are part of the JS files used in Experience, these are:

  • admin-scripts: to use the colorpicker in the settings pages.
  • header.scroll: to make the header effect works on scroll.
  • img.hover: to make the hover effect works on images on small screens.
  • jquery.sidr: to make the menu on small screens works.
  • jquery.stellar.min: to make the parallax works.
  • jquery.viewportchecker: to make the scroll effects work.
  • modernizr.custom
  • page-builder-admin
  • script: all front scripts.
  • ScrollToPlugin.min
  • TweenMax.min
  • unslider: to make the parallax slider works.

The rest of the JS files included in “custom-scripts” folder are custom scripts for adding dynamic styles to the theme.

 

PSD files

There are three PSDs included with Experience theme:

  • Experience Theme Experiences Types Taxonomies
  • Experience Theme Featureds Icons
  • Experience Theme Loading GIF
  • Experience Theme Logos

We hope this PSDs files help you to design your WordPRess site with the Experience Theme.