Welcome to the DynamiX Theme, this section will give you an overview of the theme and how to get the best out the documentation.
Introduction to the DynamiX Theme
To familiarize yourself with the You theme, watch this video.
Help Center
If you can’t find what you’re looking for within the Documentation, head over the Help Center – it takes seconds to sign-up and you’ll have access to the ACODA community.
Learn how to install the Theme using the most popular methods.
Envato Market Plugin ( Recommended )
The simplest method to install the theme is to use the Envato Toolkit Plugin. This option is the preferred method as it allows you to easily create backups and update to future versions.
Learn how to update the Theme to the latest available version.
Envato Market Plugin ( Recommended )
If you have not already installed the Envato Toolkit Plugin, please see guide to install it here.
Login to your WordPress Admin
Click Envato Market from the WordPress Admin Menu
Click the Themes tab
Locate the Theme and click Update Available
FTP Client
Use this method if you’re experiencing issues with the other methods or if you simply prefer FTP.
Please note. Only use this option if you have experience using FTP.
STEP 1.
Download the Theme from your ThemeForest downloads area by following these steps:
Goto Your ThemeForest Account
Click on Downloads
Locate the Theme and click Download
Click Installable WordPress File Only
This will now download the the Theme zip file to your computer
Unzip the downloaded file. This should reveal the Theme folder.
STEP 2.
Next, follow these steps to upload the Theme folder to your Server:
Open your FTP client and connect to your web server.
Locate the downloaded Theme folder ( ensure it is unzipped first )
If you wish to make a backup of the current version, locate the current version of the Theme within your_server/wp-content/themes/ and download this to your computer in a safe area
When you’re read to update, upload the new version of the Theme folder to your_server/wp-content/themes/
Once it’s uploaded, login to your WordPress Admin
Click the Appearance Menu Item
Click Themes
Locate the Theme, hover over it and click Theme Details to check you are now using the latest version.
Learn how to install & update plugins which are bundled with the Theme.
Install & Update Messages
Pay close attention to your WordPress admin, it will alert you when plugins need installing or updating.
Installing Bundled Plugins
You can check what plugins you need to install via the WordPress Admin,by following these steps:
Click Appearance
Click Install Plugins
Click Install on the plugins you wish to install
Updating Bundled Plugins
Follow these steps to check what plugins need updating:
Click Appearance
Click Install Plugins
Click Update on the plugins that require updating
Updating Visual Composer
Updating Visual Composer is a little different from all other plugins. Please follow these steps.
Click on the Plugins menu item
Locate the Visual Composer plugin and click Deactivate
Click the Delete option
Next, follow the steps in the “Installing Bundled Plugins” section above to install the latest version bundled with the theme.
DO NOT PURCHASE a Visual Composer license. Despite their instructions encouraging you to purchase a license, it’s not required. However, if you wish to take advantage of easier, auto-updating, buying a license is recommended.
Updating Revolution Slider
Updating Revolution Slider is a little different from all other plugins. Please follow their instructions here.
DO NOT PURCHASE a Revolution Slider license. Despite their instructions encouraging you to purchase a license, it’s not required. However, if you wish to take advantage of easier, auto-updating, buying a license is recommended.
Learn how to import demo content into your WordPress site via Theme Options or Manual Import.
Import Demo Content via Theme Options
Importing demo content via Theme Options, will import theme options, sliders, images, pages, posts and other content to replicate the selected demo. To import the demo content via the Theme Options, do the following:
Login to your WordPress Admin and click Appearance
Click Theme Options
Click the Install Demos tab
Locate the demo you wish to install and click the Install button. Alternatively, you can preview the demo using the Preview button.
Upon clicking Install, read the notice carefully before proceeding, activate the required plugins via the WordPress Admin > Appearance > Install Plugins, click OK to continue.
Import Demo Content Manually
The alternative method to importing demo content is to do it manually. Follow the steps below to achieve this.
STEP 1.
Goto the WordPress Admin and click Tools
Click Import
Click WordPress
STEP 2.
You maybe required to install the WordPress Importer plugin. If not, move onto STEP 3.
Click the Install Now button
Click Activate Plugin & Run Importer
STEP 3.
Follow these steps to download the Theme from your ThemeForest downloads section ( If you haven’t already ).
Goto Your ThemeForest Account
Click on Downloads
Locate the Theme and click Download
Click Installable WordPress File Only
This will now download the the Theme zip file to your computer
Unzip the downloaded file. This should reveal the Theme folder
STEP 4.
Next, follow these steps to locate the downloaded Theme folder and navigate to the demo you wish to install:
Go back to the WP Admin > Tools > Import > WordPress > Click Choose File
Locate the downloaded you folder
Locate the demos folder
Select which demo you want to import e.g. demo_1 for Demo 1 ( check the preview.png image for each demo to see which number correlates to which demo ).
Locate the demo.xml and click Open
Click Upload file & Import
Theme Options
If you wish to import the Theme Options, you’ll need to do the following:
Go to the WP Admin > Appearance > Theme Options > Import / Export > Import from File
Locate the downloaded Theme folder
Locate the demos folder
Select which demo you want to import e.g. demo_1 – check the preview.png image for each demo to see which number correlates to which demo.
Locate the theme_options.json
Open the file within a text editor, copy the contents of the entire file.
Paste into the Import from File field > Click the Import button
STEP 6.
The demo you want to install may contain a Revolution Slider ( or you wish to install a slider from another demo ). You can import the Slider this by doing the following ( Assuming you’ve completed STEP 3. ):
Go to the WP Admin
Click Revolution Slider ( If Revolution Slider isn’t installed, goto Appearance > Install Plugins and click Install on Revolution Slider ).
Hover over New Slider
Click Import Slider
Click Choose File
Locate the downloaded Theme folder
Locate the demos folder
Select which demo you want to import e.g. demo_1 – check the preview.png image for each demo to see which number correlates to which demo.
Check if the demo you have selected contains a revslider_X.zip file e.g. you/demos/demo_1/plugins/revslider/revslider_demo_1.zip
If the demo you’ve selected contains a revslider_X.zip file, click Open.
Click Import Slider
The Slider should now appear within the Revolution Sliders list
Learn how to configure the Theme using the Theme Options admin panel.
Accessing Theme Options
This Theme allows for extensive customizing. You can configure the Theme via the main Theme Options panel within the WordPress Admin > Appearance > Theme Options area.
Most Theme Options have a correlating Page or Post option, which can be accessed via each individual Page or Post.
This means you can set a global setting via Appearance > Theme Options and if you wish to customize a particular Page / Post differently, you can override the global options via the correlating Page / Post options.
Customize Skins
To Customize the Colors, Typography, Background Images of the Theme, you can use the Skin Editor. Use this admin area to Customize existing Skins or Create New Skins. Access the Skin Editor via WordPress Admin > Appearance > Skin Editor.
If you wish to set a “Custom Skin” for an individual Post or Page, you can set your “Custom Skin” via the Page or Post options.
Access the Layout Theme Options via Appearance > Theme Options > Layout
Site Layout
Site Layout sets the layout of the site to Wide ( stretches across the browser ) or Boxed ( confined to the Max Site Width setting )
Max Site Width
Set the Maximum Width of your site on Desktops. This will confine the site content within this width value. The default value is 1200px.
Site Margin
Set a Margin for main site area on Desktops.
Element Border Radius
Element Border Radius controls the edges of various elements throughout the site. Here are some examples of this setting in use:
0px, this sets the elements to have straight edges
10px, this sets elements to have a 10px curved edge
100px, this sets elements that can allow 100px and those elements that can’t, default to the maximum border radius of 15px.
Body Width
Set the main Body width ( does not include the Header or Footer ). Choose between Site Width which is the width set within the Maximum Site Width option or Browser Width which is the full width of the browser.
Default Page Layout
This option sets the default Page Layout for each page created. You can override this setting within the Options of each Post or Page.
Maximum Page Width
The the Default Page Layout is set to full width ( Layout One ), you can set the maximum content width.
Sticky Sidebar
When the Default Page Layout is set to an option with a Sidebar, you can use this option to make the Sidebar Sticky. i.e. The Sidebar follows as the user scrolls down the page.
Number of Widget Areas
If you wish to create more Sidebars or Widget Areas, enter the number you wish to create here.
Breadcrumbs
This Breadcrumbs option is a global option that controls the display of Breadcrumbs acrsoss the site. You can override this setting within the Options of each Post or Page.
Widget Title HTML Tag
This option allows you to set the HTML Tag for Widgets. This is useful for SEO purposes.
Search Placeholder
Use this option to change the text that appears within the Search Field.
Advanced Layout
Sidebar Width
Use this option in conjunction with a Page / Post layout with a single Sidebar to set the Sidebar Width. Enter any valid CSS unit, e.g. 25%
Dual Sidebar Width
Use this option in conjunction with a Page / Post layout with a Dual Sidebar to set the Sidebar Widths. Enter any valid CSS unit, e.g. 25%
Content Padding
Use this option to add padding to the Page content area. This is useful to create extra space between the Page content and the Header, Footer & Sidebar areas.
Sidebar Padding
Use this option to add padding to the Sidebar area.
Access the Dock Bar Theme Options via Appearance > Theme Options > Dock Bar
What is the Dock Bar?
The Dock Bar can contain a number of Custom Widgets within or above the Header area of the site. It can also contain Social Media Icons set via the Social Media Theme Options.
Dock Bar Position
This option controls the position of the Dock Bar. Set the Dock Bar to appear within the Header ( next to the menu ) or above the Header area.
Dock Bar Padding
Set the Dock Bar padding on Desktops.
Flyout Window Style
This option sets the style of the Flyout Window for Dock Widgets that are set to Flyout Window Format.
Search Widget
The Search Widget is a default Widget that can be enabled to display the Search Bar within the Dock Bar ( Inline ) or an icon that when clicked, displays the Search Bar ( Flyout Window ).
Custom Icons
The Theme allows you to add your own Custom Dock Icons or Widgets.
To add a Custom Dock Icon follow these steps:
Choose an Icon
Select which Widget Area to use ( Set via the WordPress Admin > Appearance > Widgets ).
Choose to display Inline ( Directly Show the Widget within the Dock Bar ) or Flyout Window ( Show the Widget when the Icon is clicked ).
Access the Header Theme Options via Appearance > Theme Options > Header.
To Customize the Header Color, Header Fonts and Background Image, goto Appearance > Skin Editor > Header.
Header Position
Choose to display the Header on the Left or the default Top position.
Header Style
Choose to display the Header in different Styles.
Inline: The default is Inline, the logo and menu are displayed horizontally inline. Control the alignment of both Logo and Menu Vertically and Horizontally.
Stacked: This option displays the Logo stacked on top of the Menu. Control the alignment of both Logo and Menu.
Logo in Middle of Menu: This option allows for the Logo to appear in the center of the menu.
Header Width
Set the Header width to the Site Width, defined by the the Maximum Site Width value ( Theme Options > Layout ) or the width of the Browser using the Browser Width option.
Header Padding
Set the Padding of the Header area.
Header Height
Set the height of the Header area. Use any valid CSS unit, e.g. 400px or 30vh.
Sticky Header
The Sticky Header option will allow the Header to follow the user as they scroll down the page.
Sticky Header Mode
Display to allow both the Logo and Menu to appear in the Sticky Menu or just the Menu.
Menu
Menu Item Margin
Set the Margin values for the Menu Items when the Sticky Header is activated.
Menu Item Padding
Set the Padding values for the Menu Items when the Sticky Header is activated.
Sticky Menu Font Size
Set the Font Size of the Menu Items when the Sticky Header is activated.
Logo
Logo Margin
Set the Margin values for the Logo when the Sticky Header is activated.
Sticky Logo Height
Set the Height of the Logo when the Sticky Header is activated. It’s recommended to set the Logo Height smaller than the normal size to maximise real estate on the page when scrolling down the page.
Access the Menu Theme Options via Appearance > Theme Options > Menu.
If you wish to customize the Menu Colors and Menu Font, goto Appearance > Skin Editor > Menu.
Setup the Main Menu via Appearance > Menus.
Menu Position
Set the position of the Menu. If this option is set to Inline, it will appear like a standard menu, listing the menu items, with drop down menus for child menu items.
If this option is set to Dock Bar Widget it will appear within the Dock Bar as a Menu Icon and the menu items will display when the Menu Icon is clicked.
Menu Margin
Set the Menu Margin values to control the position of the Menu.
Menu Items
Use these settings to control the Menu Items within the main Menu.
Menu Item Margin
Set the Margin values for the Menu Items. This will allow you to increase or decrease the spacing between the menu item.
Menu Item Padding
Set the Padding values for the Menu Items. This option is useful if you have a Menu Item border or background set via Appearance > Skin Editor > Menu.