WordPress Installation

To install this theme you must have a working version of WordPress already installed. If you need help installing WordPress platform, please see the WordPress Codex – http://codex.wordpress.org/Installing_WordPress

 WATCH! the instructional video created by WooThemes.

Useful links for WordPress information.

Requirements For Porto

To use Porto, you must be running WordPress 3.1 or higher, PHP5 or higher, and mysql 5 or higher. We have tested it with Mac, Windows and Linux. Below are a list of items you should ensure your host can comply with.

  • Check to ensure that your web host has the minimum requirements to run WordPress
  • Always make sure they are running the latest version of WordPress
  • You can download the latest release of WordPress from official WordPress website
  • Always create secure passwords FTP and Database
Hosting is more secure when PHP applications, like WordPress, are run using your account’s username instead of the server’s default shared username (www or www-data). The most common way for hosting companies to do this is using suPHP. Just ask your potential host if they run suPHP or something similar.

Theme Installation

You can install your theme via WordPress theme uploader or FTP.

Note: We recommend using a child theme if you are going to customize your theme files, as this will make it easier to update your parent theme.

via WordPress Theme

  1. Download the latest version of the theme from ThemeForest account by going to Downloads tab.
  2. Navigate to AppearanceThemes in your WordPress admin dashboard.
  3. Click the Add New button at the top of the page and go for the Upload Themes option.
  4. For the file upload, pick  Theme Files / theme.zip in the theme package downloaded from ThemeForest and click Install Now.
  5. Click Activate once the upload has finished and you are ready for the next steps.

via FTP

You can manually install your theme files via FTP if you are an advanced user.

  1. Log into your hosting space via a FTP software like FileZilla.
  2. Retrieve the ZIP file from your new ThemeForest download and extract the file.
  3. Then simply drag and drop the new theme folder into wp-contentthemes location using FTP application.
  4. To Activate the theme go to your site WordPress Dashboard then to AppearanceThemes.

How to Update the Theme?

You can update your theme via OneClick Auto Upgrade, FTP or WordPress theme uploader.

Before updating your theme, please make sure you have a backup of your site. BackupWordPress or Duplicator is a useful plugin to help you do this. To learn more about backing up your WordPress website please see the Codex here: WordPress Backups

Note: We recommend using a child theme if you are going to customize your theme files, as this will make it easier to update your parent theme.

via Auto Upgrader

The easiest and safest way is to always update through the OneClick Auto Upgrader that comes packed with the theme.

  1. As soon as you activate the theme you will see a form asking for Envato Username, API key and Purchase Code.
  2. Click Verify to connect your ThemeForest account.
Note: An API key can be generated in your ThemeForest account, under My SettingsAPI Keys

via WordPress Theme

  1. Download the latest version of the theme from ThemeForest account by going to Downloads tab.
  2. Navigate to AppearanceThemes in your WordPress admin dashboard.
  3. Click the Add New button at the top of the page and go for the Upload Themes option.
  4. For the file upload, pick  Theme Files / theme.zip in the theme package downloaded from ThemeForest and click Install Now.
  5. Click Activate once the upload has finished and you are ready for the next steps.

via FTP

You can manually update your theme files via FTP if you are an advanced user.

  1. Log into your hosting space via a FTP software like FileZilla.
  2. Go to wp-contentthemes location and backup your theme folder by saving it to your computer, or you can choose to simply delete it, or you can rename it. Your content will not be lost.
  3. Retrieve the ZIP file from your new ThemeForest download and extract the file.
  4. Then simply drag and drop the new theme folder into wp-contentthemes location using FTP application. Choose to “Replace” the current one if you did not delete it or rename it.
 

Plugin Installation

Porto includes 2 plugins that will need to be installed and activated: Revolution Slider and Breadcrumb NavXT. When you install Porto, you will get a notification message in your WordPress admin telling you of the required and recommended plugins.

Plugin Installation & Update Notification

When you install Porto, you will receive a WordPress notification message letting you know to install or update the required and recommended plugins. Please follow the on screen prompts to install, activate or update.
porto-plugin-installation

Required Plugins – With The Porto Theme

  • Revolution Slider – this is a premium slider plugin created by ThemePunch
  • Breadcrumb NavXT – this is an open source plugin for breadcrumb created by John Havlik

Recommended Plugins – We Use On Our Demo

  • WordPress SEO – This plugin is free. This plugin improves your website SEO using the best practices.
  • Contact Form 7 – This plugin is free. If needing to use forms on various pages, we recommend using ContactForm7.

Import Demo Content

With our One-Click Import functionality in our themes you can import all the demo content from our demo sites into your theme easily and quickly.

The importer will import all the pages, posts, custom posts, front page, widgets, theme options, assign menus, etc. from our demo sites for you to look through and modify as you require while building your website.

Importing Content

  1. Navigate to SpyropressTheme OptionsImport/Export Tab.
  2. Click the Import Demo Content button.
  3. This will start importing all content and settings from our demo site. It can take some time to import everything. Please be patient and wait for it all to load.
  4. Once this process is complete you will see a “Success” message and you are ready to begin working.

import-demo-data

Common Issues and Questions

1. Slider Alias or ID Not Found For Layer or Revolution Slider

If you already have sliders made, its possible that our demo sliders may not be applied to the pages. You may see an error such as Revolution Slider Error: Slider with alias homepage not found or LayerSlider cannot be found. Sliders are applied by the Slider ID and each slider gets its own unique ID and they are given in numerical order. If you open up a page after importing the content, and you see an error like that.

Solution: You only need to edit the page and assign the slider to the page. To verify you have the sliders, go to the Layer or Revolution Slider section of your admin to see them listed. If you do not see them, then you can import them separately

2. Demo Import Fails or Times Out

Whenever that happens its due to low server memory or execution time, and your host should definitely be willing to adjust that, they have it very low if the content will not import. Contact them and explain the issue, they should raise it for you. Please see some important links below dealing with this.

3. Demo Content Duplicated

When you import our demo content it can take several minutes depending on the speed of your server. Each time the button is clicked it will import the content, so if it is clicked twice it will import everything two times. There are two ways to get rid of duplicate content.

WP Reset Plugin – This plugin is the fastest way to get rid of content. However, it will remove all content from your database and leave the default theme activated. It does not remove plugins, but will deactivate them and remove all pages, posts, menus, sliders, widget data, theme options, etc. Basically it removes all the content that you imported from our theme. Only do this if you are able to start over. Click Here To Download.

Manual Removal – This method will take longer and simply involves manual removing of duplicate items. For example, go to the Appearance;Menus['labels] and delete duplicate items one by one. Same goes for pages, post, sliders, etc.

Setup Home and Blog Page

To setup the home and blog page, navigate to SettingsReading, select “A static page” and choose your “Home” page as the Front page and “Blog” page as the Posts page.
setting-home-blog-page

Watch the Creating a static front page for your blog video from WordPress.tv.

 

Header Setup

The Porto is equipped with 7 different styles of headers having different and unique characteristics to be chosen from.

The header is probably one of the first things you will want to setup. The header consists of pretty much everything above and including the menu, and we are also going to include the top bar in this section. There are many different elements to the header and many ways to customize it including colors, content, design and more. All of this is done via our ThemeOption Panel.porto header customization

To setup header

  1. Navigate to SpyropressTheme OptionsHeader Customization to access Header Options.
  2. Header 1 will be selected by default you can choose the rest 6 as per the desire.
  3. Simple Header: if you choose Header 2 & 7 it will show simple header without any Secondary Bar and Social Identities.
  4. Header below Slider: if you choose Header 7 you can have slider above the menu and you can also embed the video above it.
  5. Search Form: if you choose Header 1, 5 & 6, these contains search form for your user and you can also Enable/Disable it.
  6. Secondary Bar: if you choose Header 1, 3, 4, 5 & 6, these contains settings for Teaser text, phone number, email address and secondary menu as well.
  7. Social Identities: if you choose Header 1, 2, 3, 4, 6 & 7, in these you can add your social identities as many as you want.

Social Connectivity in Header

Porto includes a set of social icons. These social icons are a custom font icon so will always be super crisp and not require any images. The header social icons options are located in SpyropressTheme OptionsHeader Customization The options allow you to set the icons to display social icon.

To display social icons in the header, you need to first select Header design 1, 2, 3, 4, 6 and 7 because these header designs can accommodate social icons. The social icon panel will be available as you select the design mention above.

  1. Click Add New to add new social identity.
  2. Select the network from dropdown which you want to link.
  3. Insert the Social Identity profile link in the URL field.

porto search option

Search Box Customization

To display search box in the header, you need to first select Header design 1, 5 and 6 because these are the designs with search box. Search box option allows you to Enable or Disable the Search Box as required by the user.

Further a user you change the Placeholder text for the search input field as per requirement.

porto top bar settings

How to Interact with Top Bar Settings

There are two different variation available for TopBar.

  1. Header 1: contains the secondary menu location to make the user able to set another menu item beside the primary menu location of the theme.
  2. Header 3,4,5 and 6: contain the contact information i.e. a teaser text, phone number and email address.

Setting Secondary Menu

You can add or customize the menu by going to AppearanceMenus screen. After having your menu ready you have to assign it to the Secondary location of the theme.porto-secondary-menu-location

Setting Up The Menu

porto-setting-up-the-menuPorto supports custom WordPress menus, with multiple levels of dropdown support for the primary menu. There are 5 areas of the theme where you can assign a menu; the primary menu, the secondary menu, the footer, the 404 useful pages menu and the sitemap menu. Each of these menu locations can have a custom menu assigned.

Porto Offers 5 Different Menu Locations

Primary Navigation: this is the main menu that shows in the header area.
Secondary Navigation: this is the top secondary menu that can be assigned with headers 2.
Footer Navigation: this is the footer menu that can be assigned with footer 1.
Page-404 Navigation: this is the menu that can be assigned to the 404 page.
Sitemap Navigation: this is the menu that can be assigned with Sitemap module to make a customized Sitemap Navigation.

Read! How to create the Menu.

Using Mega Menu

Follow The Steps Below To Create A Mega Menu

  1. Navigate to AppearanceMenus section of your admin and select to create a new menu, or edit a current menu that you already have.
  2. Only first level items can enable the Mega Menu. Click the arrow icon next to any parent level menu item to expand the option box. You will see an option to “Enable Mega Menu”, check the box.
  3. Second level menu item will show the title text above each column. To add a second level item inside the Mega Menu, select one of your pages on the left hand side and click Add to Menu, or add a post or a custom link from the left hand side. To make it a second level, drag the menu item into place, below and to the right of the first parent level.
  4. The Third level will be the smaller menu items in each column. To add a third level, repeat step 3 above and drag and drop the new menu item into place, below and to the right of the second level.
  5. After setting up your menu, scroll down to the bottom of the page to assign the menu to the Primary location in the Theme Locations box. Once its all done, make sure you click the Save button.

general-mega-menu-structure

 
 

The SpyroBuilder

the-spyrobuilder-introSpyropress Brings the revolutionary Drag-and-Drop Builder. Create elegant and complex layouts through our advanced visual interface. Be free to add anything in any place you want and be in control of everything.

Modules

It is backed by Modules comes with Developer API to let you create unlimited modules according to your need. The Modules API is similar to the WordPress Widget API, so easy to learn nothing new.

Integrated into WordPress Core

Yes! Now you can use your favorite widgets, shortcodes, wordpress sidebars and wordpress menus while building your content using the SpyroBuilder, build freely whatever you want.

Video Demo

Builder Modules for Porto

Porto includes 30 Modules, that you can use with The SpyroBuilder to create the page layout as you want.

porto-spyropress modules

About Me – display biography of you team mate and shows it extendedly in a manner to show full information of the user and its related profile

Accordions– display your content using beautiful accordion styles and generates desired results in a planned phase

Blog – display your latest post and shows it all contents with this module with respect to all the post in artical form and post highlighting all the data that shows the relevancy of the post. It shows the whole profile of the post regarding its data history and when the post is layed out in the formats.

Bucket– display any bucket which you have created for re-using of content and re-utilize in a positive way and also they are reusable piece of content. They can be placed in the middle of another content area of posts, pages, custom post types or even inside another bucket. Bucket module let you select the created bucket and display the content where inserted

Call of Action – let your visitor take some immediate action on your website depending on the call of action requirements

Divider –this module let you separate sections, the module have different divider styles to select i.e Small Border

FAQs – display your website FAQs easily and elegantly and covers that are required information relating the subject and also give details about the frequently asked questions depending on the product and service types relating the domains at which it should be answered to each query as asked by the customer

Features– display your services/product features with 3 different styles easily shows different views on each clicks

Flickr Feed – display your flickr feed with this module in gird style and also provides a number of data feeds in variety of formats.

Google Map– embed a google map with zoom option and multi-marker functionality indicates to the location that is marked according to users

Heading – create heading into the page layout wherever needed depending on the post types and the quality of the data emphasized on the data entered. This module have three different styles to choose and you can also select the HTML tag to render for the heading for better SEO

Home Concept – this is a special designed module for homepage to present your work process in such layouts that it looks presentable and attractive creating a catchy outlook for the consumer in such a way that not only a consumer can get the products and services out of that but also get inspired by the company layouts by which they are offering the services with caring in each perspectives in there menu sections

HTML – add raw html unfiltered by the_content filters and also you can apply standard wordpress formatting for adding the contents and also you can apply standard WordPress formatting to the content for the module

Icon List – create a ul list with icon same or different per item as given in the various different options

Our Client – create a beautiful carousel of your client and allows it to be customized on customer preferences as the customer desires

Our Team – let you display your staff with their name and photos according to the the designated possibility on job based qualities

Portfolio– let you display your latest work that is done in ethical dominion in grid way and carousel

Progress Bars – let you display your stats as progress bars depending on the quality of work executed to a level desired to reach a benchmark for the bars set

Rich Text – provides a WYSIWYG editor to create rich text content into page

Recent Posts – let you display your recent posts in carousel with showing the details of the posts within the timeline of the work created

Sidebar – let you display your sidebar be highlighted in an amazing way anywhere on the page with superb presentation

Sitemap – display your website sitemap easily with this module with clear visuals without creating any hindrances in the image profiles and portfolios

Skills– display your set of skills in beautiful knob with different colour per skill and can also be shown in choosing from a different variety of colors

Stats Counter – display your numbers of statistics of the data inserted with a counter effect

Tabs – display your content with beautifully designed tab and it can be further given shown in various tabs on different clicks

Teaser Content – display your important text in prominent way so that it gives the clear idea of the content is going to show up as its been clicked

Testimonials– list your clientèle testimonials in columns or carousel enabling to see n review the data

Timeline – display your company history in timeline component and shows the whole details from its origination of the firm

Toggle Content– display your content with toggle headers within the time schedule and display all the details of data done in that time zone

 

Pages

Pages are the backbone of your website, and most likely you will setup several of them. Pages are a blank canvas that allow you to add content with our Spyropress Buider. There are different page options to choose from, each serving a purpose to help you build a finished site. The following sections will cover these different topics.

Create a New Page

To start adding pages to your website, navigate to PagesAdd New. You can create any number of pages with content. Once you’re on the Add New Page screen:

  1. Input a new name for your page, then find the Page Attributes box on right side.
  2. Set your Parent page; it’s usually set to No Parent.
  3. Set your template from the dropdown list. See list of page templates below.
  4. Select any number of page options in the Page Options box.
  5. Content for your page goes in the editing field, use the Visual editor or Text editor or Spyropress Builder. Page content is mainly built using Spyropress Builder. You can also use our demo content.

Page Options

1. Slider

Porto comes with 2 slider types Nivo Slider and Revolution Slider.
porto-page-slider-type
Select the slider you want to use on the Current Page another dropdown box will show accordingly. If you have chosen Revolution Slider, for it there are 5 different skins available to choose from.

porto-rev-slider-skins
porto-page-header-type

2. Page Header or Title bar

Porto comes with 3 different variations for the Page Header i.e. No Header, Default Header and Custom Header

None: will remove the title bar completely from the page.

Default Header: will show the breadcrumb and Page title in the title bar.

Custom Header: comes with various options and you can design your page header as you want.

3. Custom Header

  1. When you select Custom Header you have option to use the content from a Bucket or you can use the Text Editor below to enter the content you want to have.
  2. You can use the Shortcode in the editor.
  3. Custom Header comes with some default styling and background image which you can customize from the option available for Custom Header i.e. background image, top border color, bottom border color.

porto-page-custom-header

Setting up OnePage

Porto comes with OnePage parallax scrolling menu template as well, Porto is all about Multi-Purpose usage. You can easily add multiple OnePage pages into the website without any technicality required. Most sites are traditionally setup with individual pages, each page with its own content. A OnePage site allows you to put all the content on one page, and the menu items will link to each different section of the page. Think of it as a full site but all on one page. Each OnePage has its own menu which is configurable from the Page Screen.

1. Create Menu For One Page

general-create-new-menugeneral-page-attributes

  1. Navigate to AppearanceMenus screen.
  2. Click Create a new menu link and assign it Menu Name.
  3. Click Create Menu to save it.

2. Next Create A New Page

  1. Navigate to the PagesAdd New screen.
  2. Select OnePage template from the Template dropdown in the Page Attributes box.
  3. Scroll down to find the Page Options box and choose your newly created menu from the OnePage Navigation Menu dropdown.

3. Its time to add your content and anchor points using the Spyropress Builder

  1. Insert a Row, add content modules in it.
  2. Goto Row Options, select the newly created menu and assign it a Menu Label.
  3. Click Save.

4. If you want to reorder your menu

  1. Navigate to AppearanceMenus screen.
  2. Reorder menu items.
  3. Click Save Menu.
 

How to Create a new Post

Posts are entries that display in reverse order on your home page. Posts usually have comments fields beneath them and are included in your site’s RSS feed.

Creating a Post

  1. Navigate to PostsAdd New
  2. Start filling in the blanks: enter your post title, write your actual body content in the main post editing box below it.
  3. As needed, select a category, add tags, and make other selections from the sections below the post.
  4. When your post is ready, click Publish

Since creating and editing posts is basic WordPress knowledge, we won’t cover it in detail. If you’re new to WordPress, you may find the following resources valuable:

Post Formats Supported

Post Formats can spice up your blog posts by making them stand out and change the design (look and feel) of your blog posts accordingly.

You can select post formats while editing or creating a post. Each post format comes with it’s own unique set of options. Here’s a list of all the post formats that are available with Porto:

  • Standard – Your normal, average, everyday blog post. This is the default styling for your theme.
  • Gallery – The gallery format allows you to include a set of images.
  • Image — An image post format in WordPress is used to display a single image or photograph.
  • Link – A link post format contains a link to a web location. Ideally it is used when a user just want to share a link instead of writing a post.
  • Video — A video post format usually contains a video either embedded from a third party video hosting service like YouTube or uploaded and played directly.

You can select your format from Format section When ever you select one of these formats, automatically the options related to that format appears.
porto-post-formats

Blog Settings

porto-blog-settingsThe blog is the basis of all WordPress sites, let’s go over some of the options for the blog available in Porto. To start customizing navigate to SpyropressTheme optionsPost Options.

1. Layout

This section has 3 option to let you decide the layout of your blog.

  • Blog Layout: theme contains 4 different layout for your blog i.e. Full Width Layout, Large Image Layout, Medium Image Layout and Timeline.
  • Sidebar Position: is available for Large and Medium Image Layout. This let you decide the sidebar position either on left or right.
  • Single Sidebar Position: let you decide the sidebar position on the single post page.

2. Excerpt Settings

  • With this you can set a word count that all posts will be cut off at. You can set the counter either by words or by characters.
  • You can also set the cur off character which will be appended at the end of the text.
  • You can also Enable/Dis bale the Read More link and change the text for the button over here.

3. Author Box

This section allows you to Enable/Disable the author box at the end of the post. It also allow you to set the Author box title.

4. Social Sharing

This section allows you to Enable/Disable the social sharing functionality for the post section and you can also change the heading for the section which display on the front of the website.

 

Portfolio

Porto let you showcase your work beautifully. Porto is loaded with extremely versatile and powerful portfolio with tons of options. It offers many different formats for you to present your portfolio posts, along with several different layouts. In addition there are numerous theme options and modules that allow you to customize how posts are displayed. Each portfolio post offers several ways to add categories and skills/services. Categories are the filters you see above the post that allow the viewer to filter the posts. Services are used to add additional meta info to the post.

Creating A Portfolio Post

  1. Navigate to PortofoliosAdd New.
  2. Start filling blanks; enter title for the portfolio item, write your actual body content in the main post editing box below it.
  3. As needed, select category/es for each portfolio post, it will be used to filter through the portfolio filtering system.
  4. You can also add Services/Skills which you have provided for the project this will be additional meta info for the portfolio item.

Portfolio Details

You can also add some more additional information to the post by using the Portfolio Details Metabox i.e Live Preview URL of the item and Client name. You can also add Client Testimonial to the item, so your users can know what your client thinks about your work.

In Portfolio Details there is an option Showcase Type which let you display your work as Image, Gallery or Video. If you don’t select any it will go for the Featured Image.
general-featured-image

Feature Image (Cover Image)

You Must set this image, this is the Cover Image. Cover Image will be displayed on your portfolio listing.

For best result, the original image should be minimum 600px in width.

Portfolio Previews

You can upload and add several images as Portfolio Previews. These images will be used in the slider area of the Portfolio Detail Page, if you choose Gallery as Showcase Type.

Notice: For best result, original images should be minimum 940px in width

Creating Portfolio Listing

Porto includes advanced portfolio options that allows users to create as many portfolio pages as they wish. Each portfolio page you create can have a different set of categories, options, layouts and more. Now we assume that you have added several portfolio items, Let’s get started!

  • Navigate to Pages and create new page or edit any previous one.
  • Add/Expand a Row in which we gonna add the Portfolio Listing Module.
  • Click Add Module Button and select Portfolio Module
  • Portfolio Module have 5 layout style available i.e Carousel, Full Width, Lightbox, Listing, and Timeline. These layout have their options accordingly.
  • Give it a Title, set the number of items you want to display and set other options available for the selected layout.
  • Check Show portfolio filters if you want to enable filtering functionality for the portfolio posts.
  • Click Save.

porto-portfolio-module

Portfolio Settings

Let’s go over some of the options for the portfolio available in Porto. To start customizing navigate to SpyropresTheme OptionsPortfolio Options.

porto portfolio options slug

1. Portfolio Slug

Portfolio slug is used in the URL rewriting for the portfolio post type. i.e if you used product it will be yoursite.com/product/your-item-slug


Note: After changing the slug please go to Settings;Permalinks and click Save changes

2. Header Style

Porto comes packed with 2 different header style for portfolio item:

  • Title with Buttons – Showing the post title with Next/Previous Item Button and Back to Portfolio Button.
  • Title Only – as option mention it will only show the post title.

porto portfolio options related work

3. Related Work

You can set different option if you want to show related work section on single portfolio post page. The options are:

  • You can Enable/Disable the section.
  • You can change the Section Title as well.
  • You can set the number of items you want to show in the section i.e. 4, 8 or 10.
  • You can query the related work item either by Category or Services you gave for the project.

4. Social Sharing

This section allows you to Enable/Disable the social sharing functionality for the post section and you can also change the heading for the section which display on the front of the website.

 

Staff/Team

Porto is designed with Staff content type you can introduce your team to the world elegantly and beautifully.
Set general- staff featured image

Adding A Staff Member

  1. Navigate to StaffsAdd New.
  2. Enter member name in the name field.
  3. Write member biography in the main post editing box below it.
  4. Add as many social identities as you want for the member using the social section on the screen.
  5. By using Link to Page dropdown you can link the member to its full profile page which will be something like this: About Me
  6. You Must set Feature Image, this image will be used as profile photo for the member. Profile photo will be used while listing the team member on the website.
  7. As needed, select the designation for each member post, it will be used to filter through the member filtering system.
  8. Click Publish
Feature Image also appears in staff listing page. For best result, the original image should be minimum 600px in width.

Adding Staff Listing to Page

Porto includes advanced staff options that allows users to create as many team pages as you want. Each team page you create can have a different set of categories, options, layouts and more. Now we assume that you have added several team member items, Let’s get started!

  • Navigate to Pages and create new page or edit any previous one.
  • Add/Expand the Row in which we gonna add the Team Module.
  • Click Add Module Button and select Our Team Module.
  • Team Module have 2 layout style available i.e. Columns and Carousel. These layout have their options accordingly.
  • Give it a Title, set the number of items you want to display and set other options available for the selected layout.
  • Select an Animation if you want to animate your Title.
  • Check Show filters if you want to enable filtering functionality for the team members.
  • Click Save

Pricing Table

Do you want to display and compare your services/products? Pricing Table is the answer. This theme comes with a great tool name Price Table Builder, by this tool you can build Price table with any number of columns, rows and style with simple clicks in minutes.

Creating a Price Table

porto-options-pricing-table

  1. Navigate to Pricing TablesAdd New
  2. Once you’re on the Add New Price Table screen, you will then be able to add the Title which is for internal use.
  3. Now start adding columns by clicking Add New Table which contains Title, Price, Rows and other options for the column.
  4. Add any number of rows by clicking Add New Features.
  5. For removing row or column click Remove.
  6. You can also set Title, Price and Button URL for each column.
  7. If you want to highlight a column, check Most Popular for that column

Watch the video tutorial !

Price Table Options

Here you can set Price Table Option available for the theme like

  • Number of Columns to display the tables
  • Currency sign for the price
  • Button text for the button display at the bottom of each column
  • Popular text displayed for Most Popular column

Shortcode

Pricing Table shortcode can be used to display specific Price Table into a post, page, widget or custom post types.
[pricing_table id="" /]

FAQs

Porto offers Frequently Asked Questions With FAQ content type, you can add unlimited number of FAQs(Frequently Asked Questions) and categorize them as per your need and display them beautifully on your website.

Adding A FAQ

  1. Navigate to FAQsAdd New
  2. Add the question in the question field.
  3. Write your answer body in the main post editing box below the question field.
  4. As needed. select category/ies for each faq post, which can be used to display specific category posts on pages.
  5. When your post is ready, click Publish

Adding FAQ Listing Page

Now we assume that you have added several faq items, lets make a faq page.

  • Navigate to Pages and create new page or edit any previous one.
  • Click Add Module Button and select FAQs Module.
  • Give it a Title, set the number of items you want to display on the page.
  • Select FAQs Category if you want to display specific FAQ from specific category.
  • Click Save.

porto-faq-module

Testimonials

Porto comes packed with Testimonial post type so you can add customer’s testimonial and let the world know how good you are.

Adding A Testimonial

general-featured-image

  1. Navigate to TestimonialsAdd New
  2. Add the name in the name field.
  3. Enter the Designation and company for the customer.
  4. Write your testimonial body in the main post editing box below the name field.
  5. As needed. select category/ies for each testimonial post, which can be used to display specific testimony on pages.
  6. You Must set Feature Image, this image will be used as customer photo.
  7. When your testimonial is ready, click Publish.
Feature Image also appears in listing. For best result, the original image should be minimum 60px in width.

Adding Testimonial Listing to Page

Now we assume that you have added several testimonials, lets display them on some page.

  • Navigate to Pages and create new page or edit any previous one.
  • Click Add Module Button and select Testimonials Module.
  • Testimonial Modules comes with 2 layout styles i.e. Columns and Carousel. These layout have their respective options.
  • Give it a Title, set the number of items you want to display and set other options available for the selected layout.
  • Select Testimonial Category if you want to display specific Testimonies from specific category.
  • Click Save.

Buckets

spyropress-bucketsBuckets are reusable piece of content. They can be placed in the middle of another content area of posts, pages, custom post types or even inside another bucket.

Advantages of Using Buckets

  • Buckets make use of SpyroBuilder for creating content! That means you can design the complex bucket layout as well.
  • Content is reusable in any area of the website – post, pages, sidebars, etc.

Creating A Bucket

  1. To start adding buckets, navigate to BucketsAdd New
  2. Start filling in the blanks: enter your post title, write your actual body content in the main post editing box below it or you can use SpyroBuilder.
  3. When your bucket is ready, click Publish

Shortcode

[bucket id="" /] Bucket shortcode can be used to display specific bucket into a post, page, widget or custom post types.

 

Revolution Slider

Spyropress includes the popular Revolution slider created on WP. This slider is a beautifully animated slider that is 100% responsive and has some amazing options. We cannot cover everything here but we outline how to setup a slider and how to add slides to it.

To Create A New Revolution Slider.

  1. Click on the Revolution Slider sidebar item in your admin section, then click the Create New Slider button.
  2. Insert a slider name and alias. The alias text will generate a shortcode that can be used in the editing field of pages or posts.
  3. Then select the Source Type. If you choose Posts or Specific Posts, please refer to the Revolution Slider Docs for information on how to set that up.
  4. Then select the Slider Layout type, each type will have its own settings. Set the Grid and Responsive settings here also. View the layout example diagram below this area to understand what each section is.
  5. On the right hand side are many other options you can set. All are self explanatory with descriptions. Test them
  6. Once you are done, click Create Slider and your new slider will be made.

Creating New Slide

  1. Click the Edit Slides button in the Rev Slider settings.
  2. Click the New Slide or New Transparent Slide button.
  3. When done, you will see a new slide box, click Edit Slide to open the slide editing section. This is where you add all your slide content.
  4. The slide editing section has many different sections that allow you to customize the slide. We cannot cover them all, but please do check out each one.
  5. To add a text layer, click the Add Layer button that sits below the slider preview window. Enter your text in the Text/HTML field that shows in the Layer General Parameter box. To style it, select one of the styles from the dropdown or make your own by clicking Edit Style.
  6. To add an image or video, click the Add Layer: Image or Add Layer: Video.
  7. Below the slide preview box on the left hand side are 3 sections; Layer Parameters, Layer Animations, Layer Links & Advanced Parameters. Select the settings you wish to have, and click Preview Slide to see a preview of what will happen.
  8. On the right hand side below the slider preview box is the Layers Timing & Sorting box where you set the time it takes for each layer to show on the screen.
  9. When finished, click Update Slide to save it. Repeat process for more slides.

create-rev-slider-slides

How To Export/Import Your Revolution Sliders

The Revolution Slider allows you to easily export/import your slides. It’s always a good idea to backup your slides so you can easily import them again if you ever need to. Making animated slides takes a lot of time, make sure you export the data so you don’t ever lose the time you’ve spent on them. The Revolution Slider requires you to export each slider individually. Export each slide you have made and it will give you an individual zip file that contains all the necessary files.

How To Export Revolution Sliders

Method # 1: Goto the Revolution Slider main page and click Export Slider against the slider you want to export and you will receive a zip file with all the needed files inside.

Method # 2: Open the slider settings page and find the import/export section below the main settings. Click the Export button and you will receive a zip file with all the needed files inside.

How To Import Revolution Sliders

On the Revolution Slider main page find the Import Slider Button click it then click Choose File button and select your zip file then click Import.
revolution-slider-import-export

Nivo Slider

The Nivo Slider is world renowned as the most beautiful and easy to use image slider on the market. There is literally no better way to make your website look totally stunning.

To Create A New Slider

  1. Click on the Sliders sidebar item in your admin section, then click the Add New Slider button.
  2. Insert a slider name in the editing field of screen.
  3. Then select the slider type Nivo Slider.
  4. Once you are done, click Publish and your new slider will be made.

Creating New Slide

  1. Click the Add New Slide button.
  2. Click the Upload button to open the Media Manager to either upload the image or select from already uploaded images.
  3. When finished, click Update to save it.

 

create-new-nivo-slider

 

Theme Options

Porto contains hundred of theme options so you can customize your website the way you want to without touching any code of line. Most of the options are explored in details in their respective sections the remaining which are worth explaining are below according to their tabs:

General Options

  • Tracking Code: insert any tracking code snippet e.g. of Google Analytic here.
  • AddThis Publisher ID: insert the AddThis Publisher here which will be used for the sharing snippet for blog and portfolio.
  • Search Options: let you decide what you want to use the Custom Google Search Engine or WordPress default search functionality.

Skins and Layout

  • Theme Layout: let you decide wether your website is on Full Width or Boxed. If you select Boxed layout you can select from the pre-packed patterns to set your background of the website and also you are presented to the background control which let you upload your background image or either you are willing to use the solid color only.
  • Theme Scheme: you can select the website scheme either dark or light according to your need here.
  • Responsiveness: you can deactivate the responsiveness of your website by checking the box.
  • Custom CSS: you are a developer or a designer and you want to do some of the stuff to change the styles on the website no need for FTP or any editor just do it right here.

custom-css

Create New Skin

porto-skin-create
Porto comes with the powerful Skin option. Yes you can have your website into your brand color. The steps are given below.

  1. Give skin a name
  2. Select a color from Colorpicker
  3. Check Gradient if you don’t want your website only be flat colored.
  4. When done, click Create Skin button and wait for the page to get refreshed.
  5. Now the newly created skin appeared under Skin Option select the skin and click Save Changes.

 

Translations

Porto come with a bunch of included translation features for different kind of purposes. It is possible to translate every single string that the theme outputs on the frontend to any language you like. This can be done without an additional plugin. The theme also supports full translation capability for backend. This means that our Theme Options panel can be translated to your preferred language.

Apart from the already built-in functionality, Porto also supports the use of the best and most widely used multi language plugins, like WPML, Polylang and qTranslate (mqTranslate).

This amazing set of features makes Avada ready for every kind of project that include different languages you can think of. The following sections will cover the different areas of translating the theme and using multilanguage plugins.

Translation Basics

If you are new to translating WordPress, this is the right point to start. In general, internationalization and localization (commonly abbreviated as i18n and l10n respectively) are terms used to describe the effort to make WordPress available in languages other than English, for people from different locales. The actual localization is done using the GNU gettext framework, which is used by WordPress itself including the themes and plugins.

In order to make WordPress recognize the language to which you want to translate the core WordPress, the theme or the plugins, you have to define the language within the wp-config.php file or change a setting within the dashboard. The process is dependent on the WordPress version and is described below:

For Pre-WordPress 4.0 Users

  1. Login to your FTP account and edit the wp-config.php file. In the wp-config.php file, look for WPLANG constant which looks like the following code:
  1. Define the WPLANG constructor by adding the ISO language code of your language. The names consist of locals, a combination of language and regional dialect. Examples: de_DE, nl_NL, es_ES (for more info see here: ISO language codes) e.g. for translating to Deutsch language, change the WPLANG constant will look like the following code:

For WordPress 4.0 or 4.0+ Users

  1. After the wp-config.php file is edited, login to WP-admin dashboard and navigate to SettingsGeneral Settings page. Make sure Site Language option is set correctly.

Translating The Theme

Our themes are 100% translatable and multi-lingual ready and we recommend that you use the very popular WPML plugin. But if you are not using WPML or any translation plugin and want to setup your native language for that you need to edit .PO files. There are different editors out there for the purpose but I recommend POEdit. POEdit is easy to use, it is available for all platforms and it is freeware. You can get it here: Download POEdit

  1. Goto folder wp-contentthemes{our_theme}languages.
  2. Open the en_US.po in POEdit and you will find all English text strings in the left column (Source Text). Once you add translations those will show up in the right column (Translation).
  3. Choose the line you want to translate and then check the lower part of the POEdit window where you will find a textarea to add the correct translation.
  4. When you are done translating all needed strings save the file with your language code, for example: de_DE.po. The corresponding .mo file will be auto created. Make sure both are in {Theme}/languages folder. Everytime you update the .po file, make sure to upload both .po and the compiled .mo file in {Theme}/languages folder.
The language files can also be used if you only want to translate a small portion of the theme, or one specific area. You do not have to translate the entire theme, you can choose what you translate inside the Avada.po file. This is the preferred method for translation.

Help Translating

We use OneSkyApp, a localization platform to help us manage the translation contributions sent in by our amazing users. please follow the steps below to help us translate Porto. The steps to contribute are given below:

  1. Please visit to our collaboration page: http://translate.spyropress.com and then click on Sign in to Help Translate for signing up to OneSkyApp.
  2. After signing up, visit our OneSkyApp project page again and follow the steps below to help us contribute Porto.
  3. For using the OneSkyApp Web UI to translate the strings.

Read the tutorial for using the OneSkyApp Web Ui to translate the strings.

 

CSS Files

assets/css/custom.css – used to have custom styling if required and you can override it in Child Theme.

assets/css/dynamic.css – used by Spyropress Framework to generate dynamic styles based on theme options.

assets/css/ie.css – contains IE fixes for the theme load conditionally.

assets/css/theme.css – main css for the theme, which includes the layout and styling for all aspects of the theme.

assets/css/theme-animate.css – contains all the animation provided in the theme based on CSS3 Animations.

assets/css/theme-blog.css – contains all blog and single post styles/skins.

assets/css/theme-elements.css – contains styles for all the elements comes with the theme i.e. tabs, accordions, pricing tables.

assets/css/theme-responsive.css – contains all the media queries to make site looks good on mobile.

LESS Files

assets/less/mixins.less – contains all the mixins used in generating skin for the theme.

assets/less/skin.less – contains all the styles to generate a skin for the theme.

JavaScript Files

assets/js/contactform-script.js – ContactForm7 plugin modified script file.

assets/js/custom.js – a blank files can be used for custom javascripting

assets/js/theme.js – contains many jQuery plugins like scrollToTop, BrowserSelector, smoothScroll, Count To..

assets/js/theme.js – this is where all the custom magic happens. Feel free to edit any of this code, but make sure to keep a backup in case anything goes wrong!

Vendors

Bootstrap Framework – The powerful framework for HTML/CSS and also packed with cool javascript components

Isotope Jquery plugin – an exquisite jQuery plugin for magical layouts. Find out more here: http://isotope.metafizzy.co/

Modernizr – is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser. Find out more here: http://modernizr.com/

Jquery gMap 2 – a jQuery plugin for integrating Google Maps easily. Find out more here: http://hpneo.github.com/gmaps/

Owl Carousel – Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.

Twitter JS Api – a jQuery plugin used to fetch twitter feed for the username supplied using API 1.1

Respond.js – a jQuery responsive design toolkit for HTML5 and Mobile-first optimized

Jquery Flickr Plugin – a jQuery plugin used to fetch flickr feed for the username supplied

Jquery Easing – a jQuery plugin from GSGD to give advanced easing options. Find out more here: http://gsgd.co.uk/sandbox/jquery/easing/

Magnific Popup – a jQuery plugin for responsive lightbox & dialog script. Find out more here:  http://dimsemenov.com/plugins/magnific-popup/

Jquery Validate – a jQuery plugin for form validations

Jquery Cookie – a simple, lightweight jQuery plugin for reading, writing and deleting cookies

Stellar.js – a plugin used to turn nodes into parallax effect

Flipping Circular Slideshow – A simple circular slideshow where we flip the image in order to navigate. Find out more here : http://tympanus.net/codrops/2013/01/28/flipping-circle-slideshow/

Nivo Slider – an awesome, fully responsive jQuery slider plugin. Find out more here: http://dev7studios.com/plugins/nivo-slider/

jQuery Appear – a jQuery plugin to call a function when an element appears