1. Start
  2. Installation
  3. Basic Theme Options
  4. Top Navigation Configuration
  5. Page Options
  6. One Page Configuration
  7. Dynamic Page
  8. Dynamic Elements
  9. ShortCodes
  10. Sliders
  11. Portfolio
  12. Blog Posts
  13. Contact page
  14. Price Table
  15. F.A.Q
  16. Left Navigation
  17. WPML Configuration
  18. Help Videos
  19. Sources and Credits

Magnetic - Responsive & Multipurpose WordPress Theme

Made with KODDE Framework & Visual Composer


Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to open a ticket via support forum . Thanks so much!

Installation


 

Installation With Dummy Data Method 1:
 
1. Unzip the downloaded file.
 
2. In the package you can see some folders, slider, documentation, Magnetic etc
 
3. Open Your FTP Client - Your host - Find wp-content/themes folder.
 
4. Find Themes Folder - Copy folder Magnetic and paste in it.
 
5. Go to wordpress dashboard Appearance > Themes click on Activate link under Magnetic Banner
 
6. After that click on the Magnetic item menu that was showed in left bar.
 
7. You will see the Theme Options Panel with lot of options. If you want to create some pages like in our demo with content included please click on Import Dummy Data button.
8. Please don't forget to install Visual Composer that its required to make the theme works.
You will see a notice in the top of the page that offer the possibility to install visual composer.
9. After set the front page and blog page into Theme Options go to Settings > Reading
and set the same front page an blog page.
 
 
9. Watch the video for the installation 
 
 
 
Installation with Dummy Data Method 2
 
1. Unzip the downloaded package (if you have downloaded the mainpackage)
 
2. Zip again only the Magnetic folder.
 
3. Go to wordpress dashboard Appearances > Themes > Click on Install
 
4. Click to upload
 
 
5. Select the zip Magnetic you created and upload.
 
 
6. Go to Dashboard > Appearaces > Themes > Magnetic click on Activate
 
7. After that click on the Magnetic item menu that was showed in left bar.
 
8. You will see the Theme Options Panel with lot of options. If you want to create some pages like in our demo with content included please click on Import Dummy Data button.
You can import dummy data with images included or not by change the button under: "Import Dummy Data.
9. Please don't forget to install Visual Composer that its required to make the theme works.
You will see a notice in the top of the page that offer the possibility to install visual composer.
10. After set the front page and blog page into Theme Options go to Settings > Reading
and set the same front page an blog page.
 
 

Logo

 
1. Go to Magnetic-> Theme Options -> Logo
2. Upload a logo image, see the screenshot
 
 
 

Menu

 
1. You can manage menus at Appearance -> Menu
 
 
 
 
2. Type menu name and click "Create Menu" button
 
3. Assign "menu" at theme location.
 
 
4. You can create menus at left side of the panel and use drag and drop to sort theme at the right side.
 
5. After you finished create the menu items, click "Save Button"
 
6. You can also change the position of the menu at Theme Options -> Styling -> Header
 
 
7. Also you can change options like Navigation Color
 
 
Change the menu from sticky to normal one
 
Go to Theme Options > Sticky Menu swith on for the menu you see on preview and off for a normal menu
 
 
How to configure Mega Menu
 
 
Select the menu item you want to make as mega menu and activate the mega menu option
 
 
The first item after the the megamenu item will be recognized as mega menu columns the other items under it will be normal menu items.
 
 
 
 

Sidebars & Widgets Area

 
Widgets and sidebar can be accessed on Appearaces > Widgets
You can use predefined sidebars & widget area:
  • Sidebar Blog -> Sidebar that should appear in the blog page
  • Sidebar Pages -> Sidebar that should appear in all pages.
  • Sidebar Portfolio -> Sidebar that should appear in all portfolio pages.
  • Sidebar Bbpress Sidebar can be used for forum sidebar
  • Top Header Left can be used for Top Navigation area if its activated on theme options
  • Top header Right can be used for Top Navigation area if its activated on theme options
  • Footer columns widget area
  • Copyright footer can change easily the copyright on footer
 
Create an unique sidebar/page/category:
 
1. Go to theme Options -> Sidebars
 
2. You can create an unique sidebar for a specific category or page.
 
3. If you want to add more click the + button.
 
4. If you want to remove one click the "cross" button
 
5. Select a PAGE that you want to have a individual sidebar. or Select a CATEGORY that you want to have a individual sidebar.
 
 
6. After you saved the changes go to "Appearaces > Widgets" look for the new widget area you created with the name you specified.
 
7. Add a widget in this new area and check the page you attached with this page. You will see the new sidebar created.
 
// Magnetic Widget Shortcode is a very functional, you can add any shortcode as a widget!!!
 
 

Footer

1. The first thing to do is to select the numbers of columns to use. Go to Theme Options -> Layout -> Select the number of columns.
 
 
2. After that you can see at Appearance -> Widgets that are created as much sidebars as columns you have selected.
 
3. Drag and drop the widget you want to use in the Footer Columns (widget area)
 
 
 
Footer Style:
1. Go to Theme Options -> Styling -> Footer
Footer Bg Color
Footer Copyright Bg Color
Footer Text Color
 
 
How to add the footer logo
 
1. Go to Appearances > Widgets
 
2. Drag and Drop Footer and Logo Description widget on Footer 1 Columns
 
3. Type the lines you want in the description and the button shortcode:

 

Donec volutpat, mi vel egestas dolor arcu iaculis nunc. Fusce gravida tortor felis, ac dictum risus

 

Donec volutpat, mi vel egestas dolor arcu iaculis nunc. Fusce gravida tortor felis, ac dictum risus

 

[button type="only_border" target="_self" bordercolor="#fff" size="default" icon="none" fontcolor="#fff"]Learn More[/button]

 

 
After the widget before you have to add the Magnetic Social Widget
 
4. In Footer 2 Columns we have added Recent Posts widget
 
5. Footer 3 Columns was set the Tag Cloud Widget
 
6. Footer 4 Columns we have added the Magnetic Flickr Widget.
 
 
 

Basic Theme Options


 

 

Import Dummy Data:

With the dummy data installation you can configure the theme as our demo page.
Select the type of dummy data installation with or without images
Go to Theme Options -> Click Dummy Data Import button, wait some seconds, and take a look to your website :)
 
 
 
Select a page as Homepage:
1. After you have created a home page go to Theme Options -> Select FrontPage and select your page.
 
Select a page as Blog:
2. After you have created a blog page go to Theme Options -> Select Blog page and select your page.
 
 
 

Change Font Type:

1. Theme Options -> Styling -> Font Type
2. Select one of the google fonts listed below:
 
 

Change Colors or backgrounds at Styling

You can select a predefined skin or, you can edit the colors manually.
 
 
 

Layout Styles:

Go to Theme Options -> Layout
 
 

Top Navigation Configuration

 
First you have to go to Theme Options > Header > Top Widgetized Area switch the button to yes.
 
After that go to Appearances > Widgets
 
In the Top Header Left Area we have added Magnetic Social Icons Widget
 
You can also add Language Selector in the top header widgets areas, keep in mind that before you have to install wpml plugin.
 

Page Options

 
 
Take a look how to configure the page headers:
 

One Page Configuration

 
To create One Page its so easy:
 
Step 1: Create a new page in Pages > Add New
 
Step 2: Add a Row Element with visual composer and edit it. Find the field Section Name and type a unique name
 
 
Step 3: Section name have to be added into Custom Link in the Appeareances > Menu Item with this link #section_name
 
Step 4: After you have setup all the rows with respective section names and have created all the menus
Go to the bottom of the page editor and find the option "One Page Options" switch it to ON
 
 
 

Dynamic Pages, How to create pages with VISUAL COMPOSER


 

Visual Composer (How to create dynamic pages)

 

Dynamic Elements


 
All the elements below can be found on visual composer in Add element button.
 
 
If you click on Add Element you will see this window with all the elements
 
 

Row Element

 
 
Row element its one of the most important because serve as container for all other elements. So lets take a look:
 
1. First lets add the Row elements in a page.
 
 
2. Edit the row and let take a look to the respective options:
 
 
 
 
 
 
  • -In Container option let you the possibility to create a row that elements can be fixed in the center of the page, like the example:
     
     
  • - Full Width Background option offer the possibility to create sections full width with background color, background image, parallax and video background
     
     
  • - FullWidth Content option its very usefull in case of usage of full width content that will fill all the page like the portfolio element example:
     
     
  •  

    - Background Image

    => Add an image for the Full Width Background Type
     

    - Background Color

    => Add color to the row background
     

    - Color Overlay

    => its so usefull for adding ann overlay to background image or video background with any color you want and with transparency too
     
     

    - Enable Video background

    => This options gives you the possibility to add video background to a row
     

    - Text Color

    => This option its so important for any element that will be added into the row. If you select the light option
    every element into the row will change font color and some other parameters, so if you will change this to Dark you will see an another
    text color and style for an element.
     
    See the difference:
     
    Light
     

     
    Dark
     

     
     

    - Padding Top & Padding Bottom

    This option can be used to change the space between each row from the top and the bottom
    by adding the px value. (without px). So you can customize as you want to space between elements
     

    - Transparency Section to be used with Slider

    Check this if you want to use this section as a transparent section on the slider.
    Take a look to the home page on the demo with services standard on the slider.
     
     

    - Remove Borders

    Check this option if you want to remove the border top and bottom from this section
     

    - Top Arrow & Bottom Arrow

    This option offer the possibilities to add the decoration arrow in any row in top or in the bottom
     
     

    - Separate section

    Check to seperate sections vertically
    After check you can select options like background, overlay and video for the second section
     
    See the example:
     
     
     

    - Extra Class

    This option offfer the possibility to customize a single row element with style you want by adding an specific class
     

    - Section Name

    Use this name as id for menu in 'One Page', take a look to the One page Configuration
     

    Now let see how to configure One Staff Element

     
     

    Shortcodes


     

    1. Create a page at Pages -> New page
     
     
    2. Add a name of the page, you can use this for the menu
     
     
     
    3. To add Shortcodes:
     

     

     

    See our shortcodes:

     

     
    All these shortcodes can be generated through the button "T".
     
    Keep in mind that these shortcodes are extras from the elements
    you can find on Visual Composer. This unlimited options made the theme the most powerfull one ever created.
     
     

    Sliders


     

    Take a look to our sliders:
     
     
     
    Add Slider to page:
     
    1. Go to the created page:
     
    2. Select the type of slider.
     
    3. Select the layout of slider 
     
    4. If you select LayerSlider, a new select field should appear with the sliders you have created.
     
    For create sliders for Layerslider and Revolution you have to create into their respective panels
     

     

    Configure LayerSlider Video Tutorial

     

     

    Configure Revolution Slider Video Tutorial
     
     

    Portfolio


     

    1. To create a portfolio page, first go to Pages -> Add New Page
     
    2. Insert the name of the page.
     
    3. Go to Theme Options -> Portfolio
     
    4. Select the categories for this portfolio page.
     
    5. Select a Dynamic Template that you want to use at the bottom of this portfolio
     
    6. Select the page that should be show this portfolio
     
    7. Select the portolio number of columns
     
    8. Portfolio single page type
     
    9. Page Layout
     
    10. You can add as much portfolio pages as you want.
     
    * 5- The page for the dynamic template can be created with visual composer so you can add any element you want.
     

    Blog Posts


     

    How to Configure blog:

     

    1. Set the blog page go into Theme Options > Select Blog Page (Set the page that will be the blog page)
     
    2. Go to Theme Options > Layout > Select the sidebar position on the single blog post (left, right sidebar)
     
    3. Select blog page sidebar position (left, fullwidth, right sidebar position on main blog page)
     
    4. Select Blog Style Type (Second style, Grid, Masonery see examples on our theme preview http://newthemes.themeple.co/magnetic/)
     
    5. You can also configure some options for example
    Show Author Avatar on Posts ?, Show sharing buttons on posts ?, Show meta tags on posts ?.
    This options was explained before in the Theme Options section too.
     
     
     
     

    Blog Post Types:

     
     

    Video Post Type:

    1. Insert the video link as excerpt
     
    2. At the right side select "Video" Type
     

    Gallery Post Type:

    1. Add Images or video as media.
     
    2. At the right side select "Gallery" Type
     
     
     

    Contact Page


     
    How to create contact page like in our preview with visual composer: See the demo
     
    1. Go to Theme Option > Contact
     
    2. Fill the fields
    -- Your email address (Add the email address that will recieve the emails sent with contact form)
     
    -- Autoresponder Subject (The email subject that contact from will send to any user use it. Optional)
     
    -- Autoresponder (The email content that contact from will send to any user use it. Optional)
     
    -- Form Element Label (This element will add input fields that you will use for the contact forms)
    Use "+" sign to add more fields Use "x" sign to remove the input fields.
     
    3. After fill the fields Click on save.
     
    4. Go and create a Page with and with visual composer add these elements
    -- Google Map
    -- Contact Form
    -- Contact Info
     
    5. Edit the Google Map to add the address in this format:
    https://maps.google.com/maps?q=New+York,+NY,+United+States&hl=en&sll=37.0625,-95.677068&sspn=75.017851,122.783203&oq=new+york&hnear=New+York&t=m&z=11
     
    6. Edit the Contact Form Element and add the Title, Description (Optional), Success Message, Submit Button Title
     
    In the right side on the row you created add Element Header and Text Block the visual composer page have to look like:
     
    8. Save changes
     
     

    Price Table


    The Price Table can be added with the page builder element and extensive one only with shortcode.
    Let see the shortcode used for the Extended Price List:
     
    [contentrow][price_table_1_container col="5" type="extended"][price_table_1 type="level-one" header_bool="no" footer_bool="no"][price_table_1_row type="None"]Users[/price_table_1_row][price_table_1_row type="None"]Voters & Votes[/price_table_1_row][price_table_1_row type="None"]Ideas[/price_table_1_row][price_table_1_row type="None"]Comments[/price_table_1_row][price_table_1_row type="None"]Moderation Tools[/price_table_1_row][price_table_1_row type="None"]Sign-in / singup options[/price_table_1_row][price_table_1_row type="None"]Widget Tracking[/price_table_1_row][price_table_1_row type="None"]Admin/Moderations[/price_table_1_row][price_table_1_row type="None"]Products[/price_table_1_row][price_table_1_row type="None"]Private Forums[/price_table_1_row][price_table_1_row type="None"]Semi-private forums[/price_table_1_row][price_table_1_row type="None"]Domain aliasing[/price_table_1_row][price_table_1_row type="None"]Photoshop[/price_table_1_row][price_table_1_row type="None"]WordPress Users[/price_table_1_row][/price_table_1][price_table_1 type="level-one" header_bool="yes" title_bg="#2c2c2c" price_bg="#3a3a3a" header_title="Standard Plan" header_money="$9.99" period="per month" footer_bool="yes" footer_button_text="Sing Up Now" footer_link="#"][price_table_1_row type="None"]50[/price_table_1_row][price_table_1_row type="None"]Unlimited[/price_table_1_row][price_table_1_row type="None"]Unlimited[/price_table_1_row][price_table_1_row type="None"]500[/price_table_1_row][price_table_1_row type="None"]Unlimited[/price_table_1_row][price_table_1_row type="Not"][/price_table_1_row][price_table_1_row type="Tick"][/price_table_1_row][price_table_1_row type="None"]Unlimited[/price_table_1_row][price_table_1_row type="None"]Unlimited[/price_table_1_row][price_table_1_row type="Tick"][/price_table_1_row][price_table_1_row type="None"]Unlimited[/price_table_1_row][price_table_1_row type="None"]30 day trials[/price_table_1_row][price_table_1_row type="None"]Yes[/price_table_1_row][price_table_1_row type="Not"][/price_table_1_row][/price_table_1][price_table_1 type="level-one" header_bool="yes" header_title="Premium Plan" header_money="$19.99" period="per month" footer_bool="yes" footer_button_text="Sign Up Now" footer_link="#"][price_table_1_row type="None"]200[/price_table_1_row][price_table_1_row type="None"]Unlimited[/price_table_1_row][price_table_1_row type="None"]200[/price_table_1_row][price_table_1_row type="None"]Unlimited[/price_table_1_row][price_table_1_row type="Tick"][/price_table_1_row][price_table_1_row type="Tick"][/price_table_1_row][price_table_1_row type="Tick"][/price_table_1_row][price_table_1_row type="Not"][/price_table_1_row][price_table_1_row type="None"]Unlimited[/price_table_1_row][price_table_1_row type="None"]Unlimited[/price_table_1_row][price_table_1_row type="None"]Included[/price_table_1_row][price_table_1_row type="Not"][/price_table_1_row][price_table_1_row type="None"]Yes[/price_table_1_row][price_table_1_row type="None"]Unlimited[/price_table_1_row][/price_table_1][price_table_1 type="level-max" header_bool="yes" title_bg="#f1663a" price_bg="#fcdbad" header_title="Best Plan" header_money="$39.9" period="per month" footer_bool="yes" footer_button_text="Sign Up Now" footer_link="#"][price_table_1_row type="None"]5000[/price_table_1_row][price_table_1_row type="None"]Unlimited[/price_table_1_row][price_table_1_row type="Tick"][/price_table_1_row][price_table_1_row type="Tick"][/price_table_1_row][price_table_1_row type="None"]Unlimited[/price_table_1_row][price_table_1_row type="Tick"][/price_table_1_row][price_table_1_row type="Tick"][/price_table_1_row][price_table_1_row type="Tick"][/price_table_1_row][price_table_1_row type="Tick"][/price_table_1_row][price_table_1_row type="None"]Unlimited[/price_table_1_row][price_table_1_row type="Tick"][/price_table_1_row][price_table_1_row type="None"]Unlimited[/price_table_1_row][price_table_1_row type="Tick"][/price_table_1_row][price_table_1_row type="Tick"][/price_table_1_row][/price_table_1][price_table_1 type="level-one" header_bool="yes" header_title="Super Plan" header_money="$300" period="life time" footer_bool="yes" footer_button_text="Sign Up Now" footer_link="#"][price_table_1_row type="None"]Unlimited[/price_table_1_row][price_table_1_row type="None"]Unlimited[/price_table_1_row][price_table_1_row type="Tick"][/price_table_1_row][price_table_1_row type="Tick"][/price_table_1_row][price_table_1_row type="Tick"][/price_table_1_row][price_table_1_row type="None"]Unlimited[/price_table_1_row][price_table_1_row type="Tick"][/price_table_1_row][price_table_1_row type="Tick"][/price_table_1_row][price_table_1_row type="Tick"][/price_table_1_row][price_table_1_row type="None"]Unlimited[/price_table_1_row][price_table_1_row type="Tick"][/price_table_1_row][price_table_1_row type="Tick"][/price_table_1_row][price_table_1_row type="Tick"][/price_table_1_row][price_table_1_row type="Tick"][/price_table_1_row][/price_table_1] [/price_table_1_container][/contentrow]
     
    Please try to use our Shortcode Generator "T" > click on Price List and customize your price list
     
     
     
     

    F.A.Q


    The F.A.Q was made with the visual composer. 

     

    Left Navigation Page


     

    How to create features overview page template

    1. Create a page with name you want (Page Overview exapmle)

    2. Edit page and on the right of page edit you will find an block page template

    3.Select in the template section Left Navigation

    4. Now go and create another page, edit it in the right block select Parent: Page Overview and Select Left Navigation too as Page Template.

    5. Save the page, and create how parent pages you want.

    6. Take a look to the Page Overview Page you have created you must see something like the video below:

     

     

    .......................................................................................

     
    Watch the video on how to make a left navigation page template
     

    Wpml Configuration

     
    Please go to the Dashboard > Wpml > Languages and make this customization:
     

    Help Videos


    We have made 8 Videos To help you make your website and understand how we did our demo website.The Videos will show you step by step how we made our demo site. 

    PLAYLIST:Our Video Tutorials

     

     

     

     

    Sources and Credits


     


    Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

    Themeple