Getting Started
Hello and thankyou for purchasing a Variant enabled WordPress theme from TommusRhodus. This documentation will give you an understanding of how Variant works and guide you in performing common functions. If you require further assistance not covered in this documentation, please contact us on our support forum via the button in the top right-hand corner.
1. Quick Start - An overview of how Variant for WordPress works
Open Variant
To begin editing your page with the Variant Page builder simply click the Variant link available in your WP page editing area or the 'Edit with Variant' link in your WP Admin bar.
Add Content
You will notice that the available sections panel has opened. Add some sections to your page by clicking on the section thumbnail. You will see that once a section is added to the page, it also gets added to your layout map in the sidebar. Try adding some different content sections and reordering them by dragging their titles up and down in the layout map on the sidebar.
Add a navigation by clicking the 'Navigation Styles' button in the sidebar, select your desired style from the list to add it to your page.
Save Your Changes
Once you have added sections to your page and edited content. Click the Save icon in the menu and you will see a 'Saved' promt pop up to confirm your new page is ready to go.
2. Managing Sections
2.1 Adding Sections:
To add a section, click the circular plus button on the 'Content' tab in the sidebar. This will open the 'Add Sections' panel. From here, add sections to your page by clicking on their thumbnail (see figure 2.1.1). You will notice that section types are categorised and are filterable by clicking on the appropriate filter button at the top (eg. 'Dividers' will show sections that have full width background images)
figure 2.1.1 Click a thumbnail to add that section to your layout
2.2 Reordering Sections:
To reorder sections on the page, simply drag and drop the title of the section up or down (see figure 2.2.1) in the layout map in the sidebar.
figure 2.2.1 Drag sections up and down to rearrange the order of your layout
2.3 Renaming Sections:
Renaming sections is useful when creating a page that has a 'one page navigation' style. To rename a section, click on its title in the sidebar and change the text (see figure 2.3.1). You will notice that a navigation icon appears when you make this change, this is to signify that this section is now 'linkable' as an inner page navigation option (more on this in section 4.1)
figure 2.3.1 Click on a section title to rename it - doing this makes it available for in-page navigation in the "Edit Link" panel
2.4 Removing Sections:
To remove a section, hover over its title in the layout map on the sidebar and you will see a red cross icon on the right. Click the icon to remove the section.
3. Editing Content
3.1 Editing Text
Click on any text element on the page and you will see a cursor appear where you can edit the text of the element (see figure 3.1.1). You are free to paste text into any element.
figure 3.1.1 Click any text on the page to edit the text
3.2 Editing Images
Many elements within Variant have editable images. To edit the image, hover over the element and click the image icon (See figure 3.2.1), from here, you can use WPs media manager to select and upload your custom image.
Click 'Save' when done to commit changes - you will see your image appear immediately.
Please note: Variant does not automatically resize or crop your images, see the image sizes of the supplied imagery as a guide.
figure 3.2.1 Right click an image to edit the image path
3.3 Editing Icons
To edit an icon, right click on it and select 'Edit Icon' from the context menu (see figure 3.3.1)- the icon chooser panel will appear. From here, select the icon you wish to use and click 'done' (see figure 3.3.2).
figure 3.3.1 Right click an icon to edit the image path
figure 3.3.2 Right click an icon to edit the image path
3.4 Editing Links
To edit a link, right click on it and select 'Edit Link' from the context menu (see figure 3.4.1) - the Edit Link panel will appear. From here you can edit the 'href' value of the link and also the 'target' value. Make your changes and click 'save' to commit. (see figure 3.4.2)
figure 3.4.1 Right click a link to edit the link path
figure 3.4.2 Enter your desired href value and select a target. If you have in-page links (see figure 2.3.1), they will be selectable at the top of this box
3.5 Cloning Content
Variant enables you to clone content by right-clicking on an element and selecting 'Clone' from the context menu (see figure 3.5.1). This will make an exact copy of the element and is especially useful for sections such as 'services' (where you may require more than the section initially shows).
figure 3.5.1 Right click an element to clone it
3.6 Trashing and recovering content
Variant enables you to remove content from the page by right clicking and selecting 'Remove' from the context menu (see figure 3.6.1). This content is always recoverable by clicking the red 'Show Trash' button in the bottom left-hand corner of the layout map (see figure 3.6.2). You will see your trashed content re-appear on the page greyed-out with a red border (see figure 3.6.3). To recover this content, simply click on it - you will notice it now appears on the page as normal.
Be sure to click the trash button again once you're finished recovering removed content to avoid strange positioning. All trashed content will be saved with your page but is removed in the final HTML document.
figure 3.6.1 Right click an element to remove it
figure 3.6.2 Click "Show Trash" button to reveal your deleted items.
figure 3.6.3 With your trashed items shown, left-click the faded deleted items to un-delete them
3.7 Adjusting Column Widths
Most elements such as services, pricing tables, text, etc. allow you to edit the column-width. This is especially useful if you have a specific number of elements you want that differs from the original layout. To adjust the width of an element, right click it and select either 'Increase Columns Width' or 'Decrease Column Width' from the context menu as appropriate.
Power User Tip: Use ctrl + [ key to decrease column width and ctrl + ] to increase column width
4. Social Features
4.1 Adding an Instagram feed:
Some Variant templates come with an integrated Instagram feed section. To change which feed is displayed, first add the section to your page, then right-click it and select 'Edit Instagram Feed', then type in the desired Instagram username you wish to display.
figure 4.1.1 Enter the name of the Instagram user you wish to display and hit 'Save'
4.2 Adding a Twitter feed:
Some Variant templates come with an integrated Twitter feed section. To change which feed is displayed you will need to create a Twitter widget in your settings page on Twitter account.
Do this by going to the 'Settings' page of your Twitter account and clicking 'Widgets'. Click 'Create New' and then 'Create Widget'. One done, go back to the 'Widgets' page and click 'Edit' on your newly created widget. From here you need to copy the widget id out of the url bar. The widget id is the long numerical string after /widgets/ and before /edit and paste it into the 'Widget ID' box of the 'Edit Twitter Feed' modal.
figure 4.2.1 Enter your Twitter widget ID in this box to link the feed to your account
4. Managing Navigation
5.1 Header Style Overide:
Although you can set your sites overall (gloabal) navigation style in the theme options (Appearance > Customize) - you may wish to change the menu style for a particular page, this is where the Header Overrides come into play.
Using this section (see figure 5.1.1) you can simply select an alternative menu style to be used on the page your creating, simply make your selection via the dropdown box provided and your all set.
figure 5.1.1 The header override section
6. Managing Footers
Managing footers works in a similar way to navigation. You can use the Footer override area (see figure 5.1.1) to control the footer layout on your current page - simply select an alternative footer style to be used on the page your creating, simply make your selection via the dropdown box provided and your all set.
7. Saving & Editing Pages
7.1 Saving Pages
To save your creations, simply click the save icon in the main menu (see figure 7.1.1). Once saved you will see a confirmation notification and your new page will be published and ready for use.
figure 7.1.1 Save your page for later use
7.2 Editing
Editing pages with varitan is a breeze, to begin, simply hit the Variant button in your backend WP editor or the handy link within the admin menu.