GFXFree.Net - All For WebMasters... - 20Script

# GFXFree.Net - Download Unique Web Templates And Scripts

## Compatible with: WooCommerce 2.2.x

- created: 10/25/2013
- latest update: 12/10/2014
- by: 8theme

Dear customers!
We strongly recommend to read this documentation attentively to save your time during further setting up of our theme.

### Video tutorials

You may watch our video tutorials for your easy and quick installation of our theme trough WordPress / FTP, import demo pages, slider or dummy products etc.

- Installation Legenda Responsive WooCommerce Theme
- Installation Legenda via FTP
- How to update theme
- How to create menu
- How to create footer
- How to create custom.css file

### Installation & Upgrade

#### Before you start

Current documentation was created to help you with quick installation and configuration of Legenda theme. Please, read it carefully to avoid most of potential problems with incorrect configuration.

Once you will have activated the theme you will need to change some of the pages and settings for optimal performance. That's why, please, do not contact Support center beforehand. Read firstly the documentation, implement all the steps following the instructions and only after that, if the issues persist, contact us.

Before installing Legenda theme, it is assumed that you have a working WordPress already installed. You should also install WooCommerce plugin for the correct work of our theme. The link for the plugin is provided below.

For detailed Wordpress installation instructions visit http://codex.wordpress.org/Installing_WordPress

For detailed WooCommerce installation instructions or for more information visit http://www.woothemes.com/woocommerce/

#### Theme Package

After theme purchase from ThemeForest, please, download the theme from ThemeForest. For that you need to enter Downloads area in your account on ThemeForest, where you will see all your purchased themes. Find Royal theme among them and click on the Download button on the right from the main content. In the provided list you will see the opportunity to download the whole theme package with all additional files or the theme .zip file directly.

If you have downloaded the whole theme package, you will find there such files after extracting:

- Legenda_v2.5.zip file which is the WordPress theme
- Translation files folder
- Documentation folder
- Patterns
- PSD folder
- Files for import

#### Requirements for Legenda:

To use Legenda, you must be running WordPress 3.9 or higher and PHP 5.3 or higher.

#### Theme Installation

You can install the theme in two ways:

#### WordPress

- Navigate to Appearance > Themes > Add New.

- Choose Legenda_v2.5.zip file. Press the Install Now button to upload and install the theme;

#### FTP:

- Connect to your server via FTP software.

- Extract Legenda_v2.5.zip file and upload only extracted legenda folder to /wp-content/themes/ folder on your server.

- Navigate to Appearance > Themes and activate Royal theme.

If you get error:

This usually occurs when either the PHP memory limit or max post size for WordPress has been reached.

The easiest workaround for this is to install theme through FTP (see above).

Alternatively you'll need to change a number of settings either on Wordpress or on your web host.

#### Theme Upgrade

While the theme update the theme files will be rewritten and if you made any changes directly in them, the changes will be lost.

So, if you are planning to customize your template, we insistently advise you to use Child Theme or custom.css file, if your changes affect only css styles. All the detailed information about custom.css file can be found in Legenda Theme Options.

The theme update affects only the theme files and do not influence the data base. But, to avoid any difficulties, please, do the backup of theme files and data base before any update.

##### Follow the steps below to update theme through FTP:

1. Download the zipped package from ThemeForest and extract to your desktop.
2. In the extracted package you will find archive Legenda_v2.5.zip, which is the WordPress theme.
3. Extract zip file and upload only extracted legenda folder to /wp-content/themes/ folder on your server with overwriting.

Please, re-save your Legenda options after upgrading the theme. Navigate to admin panel > Theme Options and hit Save changes.

### External Plugins

#### General information

First of all, we would like to specify that we do not guarantee the compatibility of our theme with all the third-party plugins for WordPress and WooCommerce. Our template is fully compatible only with the plugins that are included in our theme and also WooCommerce, WPML, Contact Form 7, and Mail Chimp plugin. You often (not always) need to customize the extension to make it work properly with your theme. It's impossible for theme author to make the theme compatible with all existing extensions. Please, take that into your consideration and treat with understanding!

#### Included plugins

Royal theme includes a number of perfect third-party plugins that greatly increase the theme opportunities and open new horizons for your blog. The following plugins are attached to Royal theme:

- WPBakery Visual Composer,
- Revolution Slider,
- Screets Live Chat,
- YITH WooCommerce Wishlist

As we are not these plugins developers, you may find on their developers’ web-sites all the set up information and documentation for them.

#### Installation

The installation of every previously mentioned plugins will be required once after the theme activation.

Install them and Activate them.

In case if automatic plugin installation fail (as a rule it is because of your server settings), you can install them manually via your Dashboard: Plugins > Add New > Upload Plugin > Browse plugins archives.

Or via FTP, by uploading and extracting the plugin zip files into wp-content/plugins folder. You can find the zip files for plugin installation in the theme folder legenda/framework/plugins.

#### Update

Plugins authors regularly release the updates and in order to use all the features or fix already found issues, we recommend you to follow the plugins versions and update them on your installations. To update the plugins, switch to your server with FTP. Copy extracted plugins folders into wp-content/plugins/ folder

#### Activation and Purchase Codes

All the included in our theme plugins are external and we do not have the right to build them into our theme as we purchase the Extended License for each of these plugins. The plugins run perfectly and are fully functional.

Keep in mind, we are constantly including the plugin updated versions and while every theme update you may find the actual plugin version in the theme folder. There is no doubt that you can get the current plugin version directly from us. For that, it will be enough to contact us via contact form on ThemeForest or our site( http://www.8theme.com/contact-us/ ) or create the topic at our Forum ( http://www.8theme.com/forums/ ) and we will send you the necessary zip file ASAP.

These plugins registration is not obligatory! The plugins are functioning perfect without any activation. The plugin activation option was added in the plugin only for the customers to get automatic updates and support directly from plugin developers. Only in case you need this features you will need to purchase and register the plugin. This is not only our practice but all the theme authors from ThemeForest.

### WooCommerce

Our theme is fully compatible with WooCommerce plugin, but it's not included in theme package. You should install WooCommerce plugin before theme installation:

- Go to Plugins > Add New;
- Enter WooCommerce plugin in search field;
- Find and install WooCommerce - excelling eCommerce plugin by WooThemes;
- Activate plugin and install WooCommerce Pages (see screenshot)

- You can also create them manually by using WooCommerce shortcodes.

After succesfull plugin installation you should change some WooCommerce options.

Go to WooCommerce > Settings > General and disable Lightbox.

### Visual Composer

Our theme uses page builder, that provides the composition of your page easy and handy. You may find the main documentation from plugin developers with detailed information about features and functions in Visual_Composer_documentation folder, and also by watching video tutorial.

The installation of Visual Composer would be provided for you after theme activation.

Install and activate plugin.
Go to Settings > Visual Composer and select for which content types Visual Composer should be available during post creation/editing.
In this item we will show only some effects, which were implemented in our theme and most of those you are interested in. They are:

- Parallax effect
- Video background for your page
- Arrangement of the project page content as on our demo
- Enlarge effect for the banner (shown on the Home Page)

#### Parallax effect

Create page (Pages > Add New). Ensure the Visual Composer is enabled and add Row.

Edit the Row you wish to add the parallax background to.

1. Enable Full width section.
2. Enable Parallax if you wish to apply the parallax effect.
3. Go to Design options tab. Add a background color if required.
4. Select a background image from your media library.

#### Video background for page

Ensure the Visual Composer is enabled and add Row. Edit the Row you wish to add the video background to.

1. Enable Full width section.
2. Add links to your video.
3. Select a poster image from your media library.

#### Arrangement of the project page content as on our demo

Frontend:

Backend:

1. Add Row.
2. Select layout 2/3 + 1/3
3. Add Image Gallery element. Select images from media library, set Gallary type > Flex slider fade and other options if required.
4. Add Text Block elements and place neccessary content: text, table.

#### Enlarge effect for the banner (shown on the Home Page)

1. Add Visual Composer Banner element.
2. Select a banner image from your media library.
3. Set Banner size.
4. Scroll down to Hover effect and select Zoom.

### Demo Data Installation

The next step gives the opportunity to install automatically:

- 11 Home pages (special xml file is included in theme for their import);
- 8 additional variants of theme (home pages, sliders, theme settings);
- 5 functional pages: Contacts, Blog, Portfolio, Register, Wishlist;
- 17 additional pages: About us, Blank page, Delivery, FAQ, London, Our office, Our Services, Page 404, Pricing Tables, Sidebar 1/3, Sidebar 1/4, Sidebar 1/6, Sidebar left, Sidebar right, Team Members, Theme Features, Video Section;
- 5 products categories;
- 9 demo products;
- posts & projects.

Go to Theme Options > Import/Export, select desired version and press Install Demo Data button.

Be attentive, such pages as Shop, Cart, Checkout, My account etc are WooCommerce pages and should be provided for you after WooCommerce plugin activation. If you didn't install them automatically, create pages manually using special WooCommerce shortcodes.

You can make installation of some our pages manually as well

Follow the steps below and you will be adding content in no time.

To import one of 8 additional theme variants, you need after main import, import additional Home Pages, sliders and theme settings.

#### How to import Home Page?

- In the theme package you may find XML data folder. There are subfolders with different theme variants with files needed for import inside. You need home.xml

- Next, go to Tools > Import > WordPress > upload chosen home.xml file, press Upload File and import

- Check Download and import file attachments and press Submit button

- Go to Settings > Reading, and change the "Front page displays" setting to "A static page", set the front page to your homepage.

#### How to import slider:

You may get more details about that in SlideShow item.

#### How to import theme settings:

- In the subfolders of XML data folder, find settings.txt file. Code for import is saved there. Copy it.

- Proceed to Theme Options > Import/Export > Import link and paste import code.

- Press Import button and save settings.

#### Blog

Create a page called "Latest News" (or whatever you want your blog called) and leave the page template as default.

Go to Settings -> Reading, set the Posts page to your just created blog page.

You can adjust Blog page layout in Theme Options > Blog Layout.

#### Manual import

You may import XML files, where some demo data from our site are, which can facilitate your work with theme. XML files (Legenda_demo_data.xml and home page examples in Demo_Pages folder) you can find in the archive.

For this you need:

- Navigate to Tools > Import and install WordPress import plugin.

- Select the XML file and upload it.

Do not forget:
- Folder wp-content/uploads should have permissions 777.
- Download and import file attachments should be checked.

### Primary Menu

Legenda supports custom WordPress menu. Navigate to WP Admin > Appearance > Menus page and create menu.

There is possibility to use different menu for desktop (Main menu) and mobile (Mobile menu) versions and for Authorized User (Account menu). Select the newly created menus on the Manage Locations tab as it mentioned on screenshot and press Save button.

#### Menu types

Starting from theme version 1.2 you can use 3 different types of menu in one main menu simultaneously. You should add CSS Class for first level menu item and set what type of menu it will use (see screenshot).

To activate CSS Classes and Description, open Screen Options and select these items.

Allowed CSS Classes:

- menu-full-width
- menu-full-width open-by-click

If any of CSS Casses would not being set, then the menu will be shown in default drop-down style.

#### Colums in menu

If you use full width or open by click menu you need to create subitems. To set different width for subitems you may add special CSS Classes.

Allowed CSS Classes: from et-col1 to et-col12

#### Menu images

Also you can use image in menu.

To add Image add Links subitem to your item. Fill in fields:

URL - destination url of your image;

CSS Classes - should be image-item for image;

Description - insert path to your image.

To add New or Sale label for menu item add CSS Class badge-new, badge-sale or badge-hot:

### SlideShow

Theme supports Revolution Slider, the installation of which would be provided for you after theme activation.

After that you may create the sliders and use them on the site according to the plugin documentation. We have included folder called "documentation_Revolution_Slider" that contains the documentation from the authors of the slider. Please, refer to it for further information about slider settings. Slider can be added to any page.

Revolution Slider

To setup Revolution Slider follow the next steps:

1) If you want, you may use our demo slides by importing the revslider_import.zip and full_width.zip archives, as it mentioned on the screenshot.

- Navigate to Revolution Slider.
- Upload file and next push Import Slider button. You can find archives in Documentation folder of theme package.

2) If you want to create new slider navigate to Revolution Slider > Create New Slider.

- After that you will reach a form where you are prompted to enter the Sliders Basic Settings, a Slider Title and a Slider Alias.
- The next step is creating/editing slides. Insert the slider content.
- Include the Slider in our theme: from the widgets panel (drag the "Revolution Slider" widget to the desired sidebar) or from the post editor (insert the shortcode from the sliders table) or add RevolutionSlider element if you build your page using Visual Composer.

### Legenda Theme Options

#### General

- Site Layout: theme has a boxed or a wide layout. When you have the boxed version activated, you can choose if the background be a custom image, a pattern or a solid color;
- "Back To Top" button: ability to turn on/off the button “Back to top” or select its form;
- Fixed navigation: ability to fix main navigation in header while the rest of the content moves, when users scroll down in a website;
- Nice Scroll: ability to turn on/off modified scroll;
- Show footer demo blocks: you may show or hide demo content in footer. To add your own content go to Appearance > Widgets and add desired widgets to footer areas. You may grab code of examples in Widgets item of our documentation;
- Show products in cart count on the favicon: you may display cart count on favicon;
- Show loader on mobile: shows loader icon until site loading on mobile devices;
- Google Analytics Code: to use google analitics add your code into this filed;

#### Color Scheme

- Main color scheme: general color of your theme (dark or light);
- Main Color: the color used in the most of links, buttons, and other elements;
- Price Color: sets color for price;
- Site Background: you can set background whatever you like;
- Background Image Expanding: ability to expand background image to full screen width;

#### Typography

- Site Font: the font styles used for site content;
- H1, H2, H3, H4, H5, H6: the font styles used for headings;

#### Header

- Enable Top bar: you can enable/disable top bar;
- Enable hidden top panel: you can enable additional top widget area;
- Header Type: ability to select header type which you prefer;
- Enable languages area: ability to turn on/off "Place in header top bar" widget area;
- Use right side panel: the ability to turn on/off additional panel at the right side (Right side panel widget area);
- Logo image: you can upload your logo;
- Favicon: you can upload your favicon;
- Enable top links (Register | Sign In): the ability to turn on/off links in the header;
- Enable cart widget: ability to turn on/off the shopping cart widget;
- Enable search form in header: ability to turn on/off the search box in the header;
- Show wishlist link: ability to show/hide wishlist link in header;
- Breadcrumb Type: ability to choose preferred type of bredcrumbs;

#### Footer

- Footer type: ability to choose preferred type of footer color;

#### Shop

- Just Catalog: ability to turn on/off "Add To Cart" button and shopping cart;
- Checkout page: ability to select type of checkout process view;
- Enable Ajax Filter: filtering products without reloading page, selection of all available values will occur instantaneously;
- Enable Navigation Accordion: add Accordion functionality to categories navigation;
- Enable "Out Of Stock" label: ability to turn on/off "out of stock; label on shop page;
- Enable "NEW" icon: display the "NEW" icon (you can set your own image as its icon in the same place) for products that marked as new ones;
- Enable "Sale" icon: display the "SALE" icon (you can set your own image as its icon in the same place) for products that have special price;
- Product Page Banner: image that is shown on default product page;
- Text for empty cart: enter custom content that displays when cart is empty;
- Text for empty category: enter custom content that displays when category is empty;
- Enable sidebar on "My Account" page: ability to show/hide sidebar on "My Account" page;

#### Products Page Layout

- Products view mode: you can select mode of displaying store items;
- Products per row: you can display products in desirable quantity per row;
- Products per page: you can set number of products to display before numeration appears;
- Layout: sets sidebar position (without sidebar,left or right);
- Product Image Hover: you can change the hover effect for products on grid;
- Number of words for description (hover effect): number of first words that will be taken from short description of product for hover effect "Description";
- Product Images Width: you can set width of image on product page;
- Product Images Height: you can set height of image on product page;
- Image Cropping: you may crop image to specified dimensions;
- Show product name: ability to show/hide product name on shop page;
- Show product categories: ability to show/hide categories of this product on shop page;
- Show Price: ability to show/hide price on shop page;
- Show "Add to cart" button: ability to show/hide "Add to cart" button on shop page;

#### Single Product Page

- Sidebar position: sets sidebar position on single product page;
- Location of upsell products: sets upsell products slider position on single product page;
- Show related products: show/hide Related Products slider;
- Ajax "Add To Cart": you can disable/enable pop up little window on single product page indicating that cart has been updated, and then lets the user choose between “Go to Checkout” and “Continue Shopping”;
- Show Product Name: ability to turn on/off product name;
- Zoom effect: ability to choose preferred zoom effect or disable this function;
- Product Thumbnails Width: you can set width of thumbnails images on single product page;
- Product Thumbnails Height: you can set height of thumbnails images on single product page;
- Enable Lightbox for Product Images: ability to turn on/off Lightbox feature for product image (to use our lightbox feature go to WooCommerce > Settings > General > Styles and Scripts > Scripts and disable WooCommerce Lightbox);
- Tabs type: ability to choose preferred type of tabs;
- Show share buttons: you can disable/enable share buttons;
- Custom Tab Title: enter custom tab title for all products;
- Custom Tab content: enter custom content you would like to output to the product custom tab (for all products);

#### Quick View

- Enable Quick view: ability to turn on/off quick view feature on grid;
- Product images: you can change the hover effect for product image in quick view window;
- Product name: show products name in quick view window;
- Price: show price in quick view window;
- Product star reting: show product star reting in quick view window;
- Product code: show product code in quick view window;
- Short description: show short description in quick view window;
- Add to cart: show add to cart button in quick view window;
- Share icons: add share icons in quick view window;

#### Promo Popup

- Enable promo popup: ability to enable Promo Popup;
- Popup content: enter content you would like to output to Promo Popup;
- Popup width: sets popup width;
- Popup height: sets popup height;
- Popup background: ability to upload background image or set bg color of popup;

#### Blog Layout

- Blog page layout: select layout which is suited for your blog;
- AJAX Infinite Posts Loading: allows you to load more posts without reloading page. (for Grid Layout only!;
- Enable Lightbox For Blog Posts: ability to turn on/off Lightbox feature for post images;
- Enable Sliders for posts images: ability to turn on/off slider for images uploaded to your post;
- Post Thumbnail Width: you can set width of thumbnails images of posts;
- Post Thumbnail Height: you can set height of thumbnails images of posts;
- Image Cropping: you may crop image to specified dimensions;
- Show Previous and Next Posts links: you can disable/enable previous and next links;
- Show share buttons: you can disable/enable share buttons;
- Sidebar position: sets sidebar position on blog page;
- Sidebar width:sets sidebar width on blog page;
- Sidebar position for responsive layout: you can set where will the pages sidebar on mobile version be;

#### Portfolio

- Items per page: you can set number of projects on page;
- Columns: you can display projects in desirable quantity per row;
- Show Project names: you can show/hide project name;
- Show ByLine: you can show/hide post info on Portfolio page;
- Show Excerpt: you can show/hide excerpt;
- Show Recent Projects: ability to show/hide your Recent Works on project page;
- Enable Comments For Projects: you can enable/disable the ability to leave comments for project.
- Enable Lightbox For Projects: ability to use lightbox on portfolio and project page;
- Project Images Width: you can set width of project images;
- Project Images Height: you can set height of project images;
- Image Cropping: you may crop image to specified dimensions;

#### Contact Form

- Enable Google Map: ability to show/hide map on contact page;
- Choose contact page layout: ability to select contact page layout which you prefer;
- Your email for contact form: you can enter your e-mail here to receive letters sent via contact form;
- Longitude and Latitude for google map: you can mark your location on Google map;

#### Responsive

- Enable Responsive Design: you can turn on/off theme responsive design;
- Large resolution from: specifies the starting width when the full width design will be activated;

#### Custom CSS

All the CSS styles placed in this file will not be lost after upgrading the theme in the future!

- Enable Custom CSS file: When you need to make some changes in the theme design, you can enable additional CSS file "custom.css", in which you can override the default styling of the theme. To create "custom.css" you can rename the file "default.custom.css" which is located in theme directory.

#### Import/Export

- Import or Export your theme configuration: use this function for creating backup of the settings and possibility to come back to them, if the future changes be unsuccessful.

### Newsletters

There is no such functionality by default in our theme as Newsletters.

But you can use additional plugin to implement it. We recommend MailChimp for WP http://wordpress.org/plugins/mailchimp-for-wp/

Step 1: install MailChimp for WP plugin

Step 2: create custom sidebar (Apearance > Widgets) and add MailChimp Sign-Up Form widget

Step 3: use Widgetized Sidebar visual composer element to add it on page. Extra class name should be back-white.

### Static blocks

Static blocks are a great Legenda theme feature that makes adding content to your site easy and convenient. Static blocks allow you to add additional content for product, create footer layout, facilitate creation of promo popup etc. Static blocks can be used anywhere on your site to display text, images, sliders, widgetised sidebars etc. Below is a simple tutorial on how to create promo popup window.

#### Promo Popup

To recreate such popup window on your site, you will need first to create Static Block (content for this area actually), next - enable this function in Theme Options (Theme Options > Promo popup) and specify that we will show just created block. So go to Static block > Add new.

1. Add row and select custom row layout 2/3+1/3.
2. Add Text Block element to first column. We have used following code for this element:

       <h4><span class="active">Merry Christmas</span> from 8theme</h4>
       May the wonder of Christmas shine in your hearts and bring warmth to those you love.[contact-form-7 id="7863" title=""]

Keep in mind: to create form for this window we have used additional plugin Contact Form 7

Once static block was created go to Theme Options > Promo popup:

1. Enable promo popup
2. Add your static block by using shortcode [block id= " "].
3. Save changes.

### Single Product Page

Single product page has such features as:

- Video in product image gallery
- Brands
- Our offers slider
- Social icons
- Size guide
- Custom tab
- Additional information block

#### Video in product image gallery

While create your products just upload your Video in 3 formats: MP4, OGG and WEBM in Product Video section. Or you can use YouTube or Vimeo iframe code.

#### Brands

Go to Products > Brands and create necesary brands.

While create your products just select desired brands at the Brands section

#### Our offers slider

This is upsell products. Add up-sells for your product when you are editing the product data on a “Linked Products” tab:

Then go to Theme Options > Single product page > Location of upsell products and select desired location.

#### Social icons

To enable social icons on Single Product Page go to Theme options > Singe Product Page > Show share buttons > On.

#### Size guide

You can upload size guide image in Additional product options area and it wil appear on frontend.

#### Custom tabs

You may create two additional custom tabs for product:

- one tab is common for all products (in Theme Options > Single Product Page > Custom Tab Title & Return content fields);
- the other one is separate for each product (Additional product options area > Title for custom tab & Text for custom tab).

#### Additional information block

Besides Product description and Additional tabs you can add other additional information such as details, video, images etc and display it below product tabs by using Additional Information Block feature.
Navigate to Static Blocks and create block where place all desired content. Then edit your product and in Additional product options area > Additional information block select necessary static block.

### Registration Page

First of all allow the registration. Navigate to Settings > General > Membership and mark Anyone can register. Then create Register Page and set the page template (under page attributes) to Custom Registration Page.

### Contacts page

If you want to receive feedback from your visitors, having a Contact Us page on your site is an easy way to achieve that.

Go to Pages > Add new and create a page called "Contact Us" (or whatever you want your contacts page called) and set the page template (under page attributes) to Contact Page. It inserts form for feedback on page.

There are two variant of contacts page: default and custom. You can select it in Theme Options > Contact Form > Contact Page layout.

Add other content for page. We have used the following (add code on Text tab in Classic Editor mode):

Default Contact Form

    <h3>Place for nice title</h3>
    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
    <h6>Contact informations</h6>
    30 South Park Avenue
    San Francisco, CA 94108
    USA
    <strong>Phone:</strong> (123) 456-7890
    <strong>Fax:</strong> +08 (123) 456-7890
    <strong>Email:</strong> <a href="#">contact@companyname.com</a>
    <strong>Web:</strong> <a href="#">companyname.com</a>

Custom Contact Form

    [vc_row][vc_column width="1/2"][vc_gmaps type="m" zoom="13" link="https://maps.google.com/?ll=51.513331,-0.125557&spn=0.001923,0.005405&t=m&z=19" size="300" bubble="1"][vc_column_text]
    <h3>London store</h3>
    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born.
    <h6>Contact informations</h6>
    30 South Park Avenue
    San Francisco, CA 94108
    <strong>Phone:</strong> (123) 456-7890
    <strong>Fax:</strong> +08 (123) 456-7890
    [/vc_column_text][/vc_column][vc_column width="1/2"][vc_gmaps type="m" zoom="12" link="https://maps.google.com.ua/maps?hl=uk&ll=34.060797,-118.249463&spn=0.002551,0.005405&t=m&z=19&layer=c&cbll=34.060797,-118.249463&panoid=aqQH-JKCWE3KL-2Qw5OAKQ&cbp=12,232.53,,0,9.81" size="300" bubble="1"][vc_column_text]
    <h3>Los Angeles store</h3>
    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born.
    <h6>Contact informations</h6>
    30 South Park Avenue
    <strong>Email:</strong> <a href="#">contact@companyname.com</a>
    <strong>Web:</strong> <a href="#">companyname.com</a>
    [/vc_column_text][/vc_column][/vc_row]

To add your email for contact form, navigate to Theme Options > Contact Form.

### Portfolio

You may also use our theme as a Portfolio. It is the perfect way to share your artwork, photography, or anything visual you want to show off.

Create Portfolio Page and set the page template (under page attributes) to Portfolio. It will be the main page where will be displayed all your projects.

Then go to Theme Options -> Portfolio and set necessary options.

You may create New Projects at Portfolio -> Add New.

### Legenda Shortcodes

There are several shortcodes which can be used in Legenda theme inside posts and pages. You can look at examples, grab the code and learn more on each shortcode’s individual page of our demo here.

- [alert] insert the alert block with custom title and message;
- [base_url] the path for WordPress folder;
- [block id= " "] inserts statick block;
- [dropcap] inserts dropcap;
- [button] inserts the button;
- [blockquote] inserts the blockquote;
- [counter init_value=" " final_value=" "] displays counter;
- [etheme_products title=" " ids="" skus="" type=" " products=" " limit=" " columns=" " categories="" desktop="" notebook="" tablet="" phones=""] displays products. Depending on attributes displays products as slider or grid (read more here);
- [gmaps] inserts map with assigned attributes;
- [googlechart] inserts chart with assigned attributes;
- [googlefont] shortcode to set google font for headings;
- [hr] shortcodes to add divider;
- [icon] inserts the icons;
- [checklist] inserts the unordered list. Should be used together in a specific order;
- [portfolio] inserts Recent Projects slider;
- [qrcode] inserts the qrcode;
- [recent_posts] inserts the slider of recent posts;
- [row][column] insert a column. You can put any content inside column, using opening and closing shortcode. Should be used together in a specific order. Attribute size specifies size of column (one_half, one_third, one_fourth, two_third, three_fourth);
- [share] inserts social icons (facebook, twitter, mail, pinterest, google+);
- [testimonials] inserts the testimonials;
- [template_url] the path for template folder;
- [title subtitle=""] inserts the title and subtitle line;
- [toggle_block][toggle]shortcodes to create block with toggles. Should be used together in a specific order;
- [vimeo], [youtube] inserts the video from vimeo or youtube.

Pricing tables

To create pricing tables you may add following code:

    <div class="pricing-table columns4">
    	<ul>
    		<li class="row-title">Free</li>
    		<li class="row-price">$19</li>
    		<li>512 mb</li>
    		<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    		<li><a href="#" class="button">Add to Cart</a></li>
    	</ul>
    	<ul>
    		<li class="row-title">Econom</li>
    		<li class="row-price">$29</li>
    		<li>1 gb</li>
    		<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    		<li><a href="#" class="button">Add to Cart</a></li>
    	</ul>
    	<ul class="selected-column">
    		<li class="row-title">Premium</li>
    		<li class="row-price">$59</li>
    		<li>2 gb</li>
    		<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    		<li><a href="#" class="button">Add to Cart</a></li>
    	</ul>
    	<ul>
    		<li class="row-title">Advanced</li>
    		<li class="row-price">$79</li>
    		<li>4 gb</li>
    		<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    		<li><a href="#" class="button">Add to Cart</a></li>
    	</ul>
    </div>

Key lines of code are explained below:

<div class="pricing-table columns4"> - general view of your table: namber of culumn, design. You may also use: columns3, columns5, style3, style2.

<ul class="selected-column"> - hightlights column.

<li class="row-title"> - add this class to set title for your column.

<li class="row-price"> - add this class to add row with price.

You can also use Visual Composer element Pricing Table , select desired style and following code as content:

    <ul>
    <li class="row-title">Free</li>
    <li class="row-price"><sup class="currency">$</sup>19<sup>00</sup><sub>per month</sub></li>
    <li>512 mb</li>
    <li>0.6 GHz</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li><a class="button" href="#">Add to Cart</a></li>
    </ul>

### Custom widget areas

You can create additional sidebars to add your own content and functionality and to use different sidebars on different pages (posts). Navigate to Appearance > Widgets. Fill in Custom Sidebar title and press Add Sidebar button. See screenshot.

Place necessary widgets into newly created sidebar. Then create page (Pages > Add New) and on the right side of the Page Layout area choose Sidebar Position, necessary Sidebar Width and desired Widget Area.

### Widgets

There are 10 default widget areas, which you can use to add your own content and functionality. There are 8 widgets in the sidebars, 10 in the footer areas.

##### Main sidebar:

- Categories
- 8theme - Recent Posts
- 8theme - Recent Comments

##### Shop sidebar:

- WooCommerce product categories
- Text widget with content
- WooCommerce - Price filter
- WooCommerce Layered Nav Filters
- WooCommerce Layered Nav (Attribute: color; Display Type: List)
- WooCommerce Layered Nav (Attribute: size; Display Type: List)
- 8theme - Recent Products
- 8theme - Static Block

##### Hidden top panel widget area:

- 8theme - Static Block:

##### Single Product Page sidebar:

- 8theme - Static Block
- WooCommerce Top Rated products

##### Right Side Panel area:

- Text widget with content
- 8theme - Recent Posts

##### Prefooter Row:

- Text widget with following code:

    <div class="custom-info-block a-left"><span>Follow Us:</span>
    <a href="#"><i class="icon-youtube"> </i></a>
    <a href="#"><i class="icon-twitter"> </i></a>
    <a href="#"><i class="icon-facebook"> </i></a>
    <a href="#"><i class="icon-rss"> </i></a></div>
    <div class="custom-info-block a-center"><a href="#">Check Out Our New Wordpress Theme !</a></div>
    <div class="custom-info-block a-right"><a href="#">Our Support Is Online 24/7 <span>Support Chat</span></a></div>

##### Footer 1:

- 8theme - Static Block

##### Footer 2:

- 8theme - Static Block

How to add Twitter and Facebook like buttons read here:

- Twitter
- Facebook

##### Footer Copyrights:

- Text widget with following code:

    <img src="YOUR_PATH/wp-content/themes/legenda/images/logo-small.png" class="logo-small">

##### Footer Links:

- Text widget with following code:

    <p>Wordpress DEMO Store. All Rights Reserved.</p>

##### Twitter Feed widget

You may display your Twitter feed in the sidebar to bring more dynamic content into site, promote your Twitter feed and get new followers by using "8theme - Twitter Feed" widget.

- Go https://dev.twitter.com/apps and sign in with your own twitter ID.
- Click on the Create A New Application button;
- Fill out the required fields;
- After creating the app, click Create My Access Token button to generate the necessary codes;
- Then will appear all 4 items you need: consumer key, consumer secret, access token, access token secret
- Copy and paste each of those items along with your Twitter ID into the appropriate Twitter widget fields in Appearance > Widgets;
- Push Save button.

If you get an error on frontend, please, check permissions on your wp-content/themes/legenda/code/cache folder, it should be 777 with recursion.

### Footer

To create footer we have used Static Blocks - a great feature implemented in Legenda theme to facilitate compositing of sidebars, footer, and other areas.

You can add it using 8theme - Static Block widget or with the help of shortcode [block id=" "].

Below we'll explain how to use Static Blocks in terms of Footer areas (Footer 1 and Footer 2 widget areas).

First Footer row

Go to Appearance > Widgets and create custom widget areas:

1) Random Products - add WooCommercee Random Products widget;

2) On Sale - add WooCommerce On-Sale widget;

3) Flickr - add 8theme Flickr Photos.

Navigate to Static Block > Add new. Name it as Footer Top or whatever you want. Using Visual Composer add row with custom layout 1/4 + 1/4 + 1/4 + 1/4.

Add Widgetised Sidebar element into columns and select newly created custom widget areas: Random Products, On Sale, Flickr Photos and Recent Posts visual composer element.

Publish your Static Block.

Then go to Appearance > Widgets, add 8theme - Statick Block widget to Footer 1 area and select Footer Top block from drop-down list.

Second Footer row

Go to Appearance > Widgets and create 2 custom widget areas.The first one - About Company - includes Text widget with following content:

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod aliqua.</p>
    <h6>Contact information</h6>
    30 South Park Avenue
    San Francisco, CA 94108
    Phone: +78 123 456 789
    <br><br>
    <ul class="links hidden-phone pay-icons">
       <li><a href="#"><img alt="" src="[template_url]/images/assets/paypal.png" /></a></li>
       <li><a href="#"><img alt="" src="[template_url]/images/assets/mastercard.png" /></a></li>
       <li><a href="#"><img alt="" src="[template_url]/images/assets/visa.png" /></a></li>
       <li><a href="#"><img alt="" src="[template_url]/images/assets/discover.png" /></a></li>
    </ul>

The second one - Twitter - includes 8theme - Twitter Feed (read more about in Widget item of this documentation).

Now go to Static Block > Add new. Name it as Footer Bottom or whatever you want. Using Visual Composer add row with custom layout 1/4 + 1/6 + 1/6 + 1/6 + 1/4.

Add Widgetised Sidebar element into first column and select our About Company custom widget area.

Add Widgetised Sidebar into last column and select Twitter custom widget area.

Into second, third and fourth columns you may add text blocks with following content:

    <h3 class="widget-title">OUR STORES</h3>
    <ul class="footer_menu">
    	<li><a href="#">London</a></li>
    	<li><a href="#">Singapore</a></li>
    	<li><a href="#">Paris</a></li>
    	<li><a href="#">Moscow</a></li>
    	<li><a href="#">Berlin</a></li>
    	<li><a href="#">Milano</a></li>
    	<li><a href="#">Amsterdam</a></li>
    </ul>

Publish your Static Block.

Then go to Appearance > Widgets, add 8theme - Statick Block widget to Footer 2 area and select Footer Bottom block from drop-down list.

Take a look on frontend. You got the same footer as on our demo.

### WishList

Your customers can browse through your store and add items to list to compile an itemization of goods or services they desire.

Firstly create WishList page if it's not created yet using following shortcode [yith_wcwl_wishlist]

Go to WooCommerce > Settings > WishList and select "Use shortcode" for Position option.

Then check Use buttons instead of a simple anchors to display wishlist button in the form of heart.

Other settings you may adjust at your option.

### How to translate

The translation file default.pot you can find in Languages_PO_files folder in theme package. Edit the .po file using POEdit, use the translation field to make replacements. Read here how to do it right.

From the file menu, save file with your language name e.g de_DE.po. It will generate both a .po and .mo file for your translation. Place these files into languages folder /wp-content/themes/legenda/languages.

Next edit wp-config.php located in the root folder of WordPress and use the $locale with prefix with your language name which should be similar to the translation file name. For example: $locale='de_DE';

### Child Theme

Legenda fully supports Child Theme.

A WordPress child theme is a theme that inherits the functionality of the parent theme. With child theme you can make modification or add additional functionality to parent theme. A child theme is the safest and easiest way to modify an existing theme, whether you want to make a few tiny changes or extensive changes.

You may read how to create child theme here http://codex.wordpress.org/Child_Themes

### Additional questions & support

Didn't find necessary information in our documentation? Check our KNOWLEDGEBASE, you may find some solution there.

We aim to help our clients if they have any unresolved difficulties. For this reason, if you still have questions we will be happy to answer them. You can contact us in any way you like: submit ticket or create topic on forum. Our support center 8theme.com/support/ is at your service.

Our working hours (GMT, London)
Monday-Friday: 8.30 a.m. - 5.30 p.m.
Saturday: 9.00 a.m. - 2.00 p.m.
Sunday - Closed