Getting Started

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.

Menu

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.

Overview

Learn how to Edit, Create and Apply a Skin to your site. You’ll also learn how to apply different Skins to individual pages.

Editing & Creating Skins

To Customize a Skin or create a new one, you’ll need to access the Skin Editor via WP Admin > Appearance > Skin Editor.

To edit an existing Skin, use the Select a Skin to Edit section to select the Skin you wish to edit. Once you have selected it, click the Load Skin button. Once the page has reloaded, you can begin editing the Skin using the relevant Theme areas.

Apply Skin to Site

This option allows you to apply a Skin to the entire site. If this is left blank, the default Skin will be the current Skin selected in the Select a Skin to Edit area.

Select a Skin to Edit

To Edit an existing Skin, select the Skin from the select menu. Once a Skin has been selected, you have a number of options:

Load Skin

Clicking the Load Skin button will load the selected Skin into the Skin Editor. The page will reload with the Skin that was selected, ready to edit.

Duplicate Skin

To duplicate an existing Skin, select the Skin you wish to make a copy of and click the Duplicate Skin button.

This will present a field to enter the new name for the Skin to be duplicated.  Once you have entered a name, click the Duplicate Skin button below the field.

Delete Skin

To delete a Skin, select the Skin from the Select a Skin to Edit field and click the Delete Skin button. You will be asked to confirm the deletion.

New Skin

To create a new Skin from scratch, click the New Skin button and enter the name of the Skin. Once you have entered a name, click the Create Skin button. This will reload the page with the new Skin selected, ready to edit.

Body

Learn how to change the Body Background Color, Background Image, Button Colors & Form Field Colors.

Body Skin Settings

All options below can be found within:
WordPress Admin > Appearance > Skin Editor > Body

Background Color

Change the Background Color of the Body. This is the main content area between the Header and Footer sections.

Background Image

Use this option to set a Background Image for the main content area. You can position the image using the following settings.

Image Position

  • Center Center
  • Center Top
  • Center Bottom
  • Left Top
  • Left Center
  • Left Bottom
  • Right Top
  • Right Center
  • Right Bottom

Image Repeat

  • Repeat ( Ideal for pattern images )
  • Repeat X – Repeat along the X axis
  • Repeat Y – Repeat along the Y axis
  • No Repeat

Image Size

  • Cover – This option sets the image to cover the entire area
  • Contain – This option sets the image to contain itself within the area

Form Fields, Tables & Elements

Use this option to set the border, font color and background color of Form Fields, Search Forms, Tabs & Accordion ( With Shaded Color selected ), Back to Top Button & Boxed Posts Style.

Background Color

This option controls the Background Color of Form Fields, Search Form, Tabs & Accordion ( With Shaded Color selected ), Back to Top Button & Boxed Posts Style.

Border Color

This option controls the Border Color of Form Fields, Search Form, Tabs & Accordion ( With Shaded Color selected ), Back to Top Button, Dividers & Boxed Posts Style.

Font Color

This option controls the Font Color within Form Fields, Search Form, Tabs & Accordion ( With Shaded Color selected ), Back to Top Button, Dividers & Boxed Posts Style.

Buttons

Use this area to set the button font colors & button background colors.

Button Color

This option changes the default Button Color across the site. This affects Form Buttons and any button that has the Color option set to Skin Button Color. If a Button Color is not specified, it will use the Body Link Color instead.

Button Text Color

This option changes the default Button Text Color across the site. This affects Form Buttons and any button that has the Color option set to Skin Button Color.

Button Hover Color

This option changes the default Button Hover Color across the site. This affects Form Buttons and any button that has the Color option set to Skin Button Color.

Button Text Hover Color

This option changes the default Button Hover Text Color across the site. This affects Form Buttons and any button that has the Color option set to Skin Button Color.

Text Colors & Typography

Learn how to change the main Font Colors & Typopgraphy.

Typography / Font Settings

All options below can be found within:
WordPress Admin > Appearance > Skin Editor > Typography

Body Typography

This section contains the options to set the default Font Family for the entire site. This area will also allow you to set the default font color and link colors.

Page & Post Content Links

Use this section to control the link colors within the main content of a page or post. You can define the link color, link hover color and set an underline color.

Metadata Links

Use this section to control the link colors within the metadata. The metadata area is used within posts to display the publish date, author name and category names. You can define the link color, link hover color.

Headings Typography

Use this section of options to set the H1, H2, H3, H4, H5 & H6 heading tags. The heading colors can also be set for each heading in this section.

Note: It’s recommended to use to as little number of fonts as possible. This will keep the page load speeds down.

Other Typography

Use the various Theme areas in the Skin Editor to control the Typography for that section. I.e. to set a custom font for the Menu, use:
WordPress Admin > Appearance > Skin Editor > Menu > Typography.

Header Colors & Font

Learn how to change the Header Background Color, Background Image, Border Color Font Colors and set a Font Colors for Transparent Floating Header mode. 

Header Skin Settings

All options below can be found within:
WordPress Admin > Appearance > Skin Editor > Header

Header Background Color

Change the Background Color of the Header. This option also allows control of the opacity of the color.

Header Background Image

Use this option to set a Background Image for the Header area.

Use Post / Page Featured Image

This option is useful to place the Featured Image, set on each Post or Page to appear as the Header background image. If no Featured Image is set on the Post or Page, the default image above will be used.

Image Position

  • Center Center
  • Center Top
  • Center Bottom
  • Left Top
  • Left Center
  • Left Bottom
  • Right Top
  • Right Center
  • Right Bottom

Image Repeat

  • Repeat ( Ideal for pattern images )
  • Repeat X – Repeat along the X axis
  • Repeat Y – Repeat along the Y axis
  • No Repeat

Image Size

  • Cover – This option sets the image to cover the entire area
  • Contain – This option sets the image to contain itself within the area

Overlay Color

Set an Overlay Color for the Header background. Setting a semi-transparent Overlay Color is useful to tone down the Image Background.

Header Border

Use this option to set a Border on the Header. Control the thickness and color of the border.

Typography

Header Typography

This option changes the Font & Font Color within the Header area. The Menu and the Dock Bar ( when set to Within Header ) will inherit these settings.

To control the Menu or Dock Bar font setting, use their respective areas within the Skin Editor.

Link Colors

Use this option to change the color of links within the Header. This includes the Menu & Dock Icons when the Dock Bar position is set to Header.

Hover Colors

Use this option to change the hover color of links within the Header. This includes the Menu & Dock Icons when the Dock Bar position is set to Header.

Transparent Floating Header

Font Color

When the Floating Header option is set to Float + Transparent , use this option to set the Header Font Color.

Link Color

When the Floating Header option is set to Float + Transparent , use this option to set the Header Link Color.

Link Hover Color

When the Floating Header option is set to Float + Transparent , use this option to set the Header Link Hover Color.

Title Area Colors & Font

Learn how to change the Title Area Background Color, Background Image, Border, Font Colors & Title Font.

Title Area Skin Settings

All options below can be found within:
WordPress Admin > Appearance > Skin Editor > Title Area

Title Area Background Color

Change the Background Color of the Title Area.

Header Background Image

Use this option to set a Background Image. You can position the following settings to position the image.

Image Position

  • Center Center
  • Center Top
  • Center Bottom
  • Left Top
  • Left Center
  • Left Bottom
  • Right Top
  • Right Center
  • Right Bottom

Image Repeat

  • Repeat ( Ideal for pattern images )
  • Repeat X – Repeat along the X axis
  • Repeat Y – Repeat along the Y axis
  • No Repeat

Image Size

  • Cover – This option sets the image to cover the entire area
  • Contain – This option sets the image to contain itself within the area

Title Area Border

Use this option to set a Border Color on the Title Area.

Typography

Title Typography

Use these options to set the font for the Page & Post titles.

Title Color

This option changes the Font Color for the Page & Post Title.

Subtitle Color

This option changes the Font Color for the Subtitle within the Title Area.

Link Color

Use this option to change the color of links within the Title area. This includes the Breadcrumb Link Color.

Link Hover Color

Use this option to change the hover color of links within the Title area.

Dock Bar Colors

Learn how to change the Dock Bar Background Color, Background Image, Border Color, Font Colors, Dock Bar Icon Colors & Dock Bar Font.

Dock Bar Skin Settings

All options below can be found within:
WordPress Admin > Appearance > Skin Editor > Dock Bar

Background Color

Change the Background Color of the Dock Bar.

Background Image

Use this option to set a Background Image. You can position the following settings to position the image.

Image Position

  • Center Center
  • Center Top
  • Center Bottom
  • Left Top
  • Left Center
  • Left Bottom
  • Right Top
  • Right Center
  • Right Bottom

Image Repeat

  • Repeat ( Ideal for pattern images )
  • Repeat X – Repeat along the X axis
  • Repeat Y – Repeat along the Y axis
  • No Repeat

Image Size

  • Cover – This option sets the image to cover the entire area
  • Contain – This option sets the image to contain itself within the area

Border

Use this option to set a Border for the Dock Bar.

Dock Bar Typography

Use these options to change the Dock Bar font and font colors.

Font Color

This option changes the Font Color within the Dock Bar. Use this option to change the text color of any widgets that are set to “Inline”.

Link Colors

Use this option to change the color of links within the Dock Bar. This includes the Dock Icons.

Link Hover Color

Use this option to change the hover color of links within the Dock Bar. This includes the Dock Icons.

Dock Bar Icons

Icon Color

Use this option to set a Dock Icon color.

Icon Hover Color

Use this option to set a Dock Icon hover color.

Icon Background Color

Use this option to set a Dock Icon Background color.

Dock Bar Form Fields, Tables & Elements ( Inline Widgets )

Background Color

Use this option to change the background color of Form fields of widgets that are set to “Inline” wihin the Dock Bar.

Border Color

Use this option to change the border color of Form fields of widgets that are set to “Inline” wihin the Dock Bar.

Font Color

Use this option to change the font color of Form fields of widgets that are set to “Inline” wihin the Dock Bar.

Dock Flyout Windows

When the Dock Bar widgets are set to “Flyout Window” use these options to control the Flyout Window Background Color, Font Colors & Form Fields.

Background Color

Use this option to change the Background Color of Dock Bar Flyout Window.

Font Color

Use this option to change the Font Color of the Dock Bar Flyout Windows.

Link Color

Use this option to change the Link Color of the Dock Bar Flyout Windows.

Link Hover Color

Use this option to change the Link Hover Color of the Dock Bar Flyout Windows.

Dock Flyout Window Form Fields, Tables & Elements

Background Color

Use this option to change the background color of Form fields of widgets that are set to “Flyout” within the Dock Bar.

Border Color

Use this option to change the border color of Form fields of widgets that are set to “Flyout” within the Dock Bar.

Font Color

Use this option to change the font color of Form fields of widgets that are set to “Flyout” within the Dock Bar.

Footer Colors & Font

Learn how to change the Footer Background Color, Background Image, Footer Font & Font Colors.

Footer Skin Settings

All options below can be found within:
WordPress Admin > Appearance > Skin Editor > Footer

Footer Background Color

Change the Background Color of the Footer.

Footer Background Image

Use this option to set a Background Image. You can position the following settings to position the image.

Image Position

  • Center Center
  • Center Top
  • Center Bottom
  • Left Top
  • Left Center
  • Left Bottom
  • Right Top
  • Right Center
  • Right Bottom

Image Repeat

  • Repeat ( Ideal for pattern images )
  • Repeat X – Repeat along the X axis
  • Repeat Y – Repeat along the Y axis
  • No Repeat

Image Size

  • Cover – This option sets the image to cover the entire area
  • Contain – This option sets the image to contain itself within the area

Footer Typography

Use these options to change the Footer font and font colors.

Font Color

This option changes the Font Color within the Footer.

Link Colors

Use this option to change the color of links within the Footer.

Link Hover Color

Use this option to change the hover color of links within the Footer.

Footer Widget Title Typography

Use this option to change the Footer Widget Titles within the Footer.

Widget Title Background Color

Use this option to change the Footer Widget Title Background Color within the Footer.

Widget Title Border Color

Use this option to change the Footer Widget Title Border Color within the Footer.

Footer Form Fields, Tables & Elements

Background Color

Use this option to change the background color of Form fields of widgets that are set to “Inline”within the Footer.

Border Color

Use this option to change the border color of Form fields of widgets that are set to “Inline”within the Footer.

Font Color

Use this option to change the font color of Form fields of widgets within the Footer.

How to Create a One Page

Learn how to create One Page sites easily, including 3d pages.

Creating a "One Page" Video Tutorial

Learn how to create a One Page site using this video tutorial.

Creating a "One Page" Site

Creating_a_One_Page_Site.png

Creating a One-Page is very simple, using the Visual Composer, each Row you add to the page will act as a Slide / Page ( depending on how you want to describe it ). In this example, we’re going to create 3 Rows ( Slides ).

If you want ready made One-Page content, it’s recommended to import one of the demos that use a One Page setup.

To create one from scratch – ensure that the Visual Composer plugin is installed and active, then Edit or Create a new Page.

Once the page has loaded, if it hasn’t got a title, enter one and then click the Frontend Editor button.

STEP 1.

STEP_1-5.png

Create Row ( Slide ) 1
Go ahead and create the first Row – if you’re not sure on how to add Rows, check out the Using Rows section.

  1. Row Height If you’re creating a Normal One-Page ( Not 3d or Snap Single Page ), you’ll need to set the Row Height to 100%, otherwise set this to Default
  2. Anchor Link Name – this option is important for the Menu later on in the section, enter intro for the first slide ( this needs to be a unique name to describe the Slide )
  3. Design Options – click the Design options tab and add a Background Image or Color ( example #ffd300 )
  4. Click Save changes and Close
  5. Add some content within the Row e.g. Text Block element e.g. Slide 1 ( You can add more content later once the setup is complete )

STEP 2.

Create Row ( Slide ) 2
Go ahead and create the second Row. The same process as STEP 1. – this time we need to enter a different Anchor Link Name and add a Different Background Color

  • Row Height If you’re creating a Normal One-Page ( Not 3d or Snap Single Page ), you’ll need to set the Row Height to 100%, otherwise set this to Default
  • Anchor Link Name – enter services for the second slide
  • Design Options – click the Design options tab and add a Background Image or Color ( example #E0E0E0 )
  • Add some content to the Row e.g. Text Block element e.g. Slide 2

STEP 3.

STEP_3-5.png

Create Row ( Slide ) 3
Go ahead and create the third Row. The same process as STEP 1. – this time we need to enter a different Anchor Link Name and add a Different Background Color

  • Row Height If you’re creating a Normal One-Page ( Not 3d or Snap Single Page ), you’ll need to set the Row Height to 100%, otherwise set this to Default
  • Anchor Link Name – enter contactus for the last slide
  • Design Options – click the Design options tab and add a Background Image or Color ( example #ffd300 )
  • Add some content to the Row e.g. Text Block element e.g. Slide 3

As long as we’ve kept the Row Height as default, it should look similar to the diagram above.

Once we’re happy with the content, click Update and then click the Backend Editor button

STEP 4.

STEP_4-3.png

Choose what Type of Singe Page
Now we’re back in the Backend Editor, scroll down to the bottom of the Page and goto the Single Page tab.

  1. Animate Type – Choose the Animate Type – let’s use 3d Vertical for this example
  2. Bullet Navigation – enabling this option will show Bullet point icons to navigate through the Slides ( Does not work with Normal )
  3. Directional Navigation – If you’re having trouble with the visibility of the Directional Navigation, use the Icon + Background ( Only in rare circumstances is it recommended to disable them ).

STEP 5.

STEP_5-2.png

Configure the Header
To configure the Header, there are a number of options we can use to setup the page. For this example we’ll keep it simple and not make many changes, but I’ve provided some information about each option that’s relevant.

  1. Click the Layout tab
  2. If we’re not going to use a Menu or Logo, we can choose to disable the Header using this option
  3. If you’re using any of the Horizontal Animate Types, I’d recommend setting the Sticky Header option to Off
  4. Set the Horizontal Layout of the Logo & Menu for this page ( For a Horizontal layout like the Restaurant demo – use Menu Center + Logo Center )
  5. Set the Vertical Layout for the Logo & Menu for this page ( For a Header layout like the Restaurant demo – use Middle + 100% )
  6. If we want to change the Logo and Margin position for this Page only, we can use these fields to set the Margin values of the Logo and Menu
  7. Set the Floating Header option to Float + Transparent ( For a Header layout like the Restaurant demo – use Float + Transparent ) Please Note: Only set this option to Float or Float + Transparent if you want First Row ( Slide ) to have a Header Floating Over it.

STEP 6.

STEP_6_1.png

Create a Menu
Although a Menu is not essential, we’ll create one for this example.

To create a Menu, follow this guide:

  • Save the current page
  • Goto WordPress Admin > Appearance > Customize > Menus
  • Click Add a Menu button
  • Give the Menu a name e.g. One-Page
  • Click Create Menu
  • Once it’s created, assign the Menu to a location i.e. Main Navigation
  • Click Add Items
  • Click Custom Links and do the following for each Slide you’ve created:

            1. Enter the URL using the # character and the Anchor Link Name we assigned earlier. e.g. #contactus
            2. Enter the Link Text – this is the name that appears on the Menu e.g. Contact us
            3. Click Add to Menu
            

  • Click Save & Publish

STEP 6.

STEP_6-2.png

Assign the Menu
Once the Menu has been created, go back to the Single Page you’ve created.

  • Scroll down to the Page Option tabs
  • Locate and click the Layout tab again ( See STEP 5. )
  • Scroll down to the Menu option and select the menu you’ve just created e.g. One-Page

STEP 7.

STEP_7-3.png

Disable the Title & Breadcrumbs
It’s rare the Title & Breadcrumbs will be needed and in this example we’re going to disable them.

  1. Click the General tab
  2. Set the Display Title to Disable
  3. Set the Breadcrumbs to Disable

That’s it, we can now Save the page and checkout the result.

Finished Example

Finished_Example-2.png