Author: ACODA

Portfolio Options

Once the Portfolio plugin is installed – access the Portfolio Options via WordPress Admin > Portfolio > Add New or Edit an Existing Post > Scroll to the Tabs section.

Install Portfolio Plugin

To install the Portfolio plugin, goto WordPress Admin > Appearance > Install Plugins > Locate Portfolio Post Type > Click Install.

To access the global Portfolio options, goto WordPress Admin > Appearance > Customize > Portfolio.

General Tab

The General Tab consists of the following Page Options:

  • Display Title – Use this option to display or disable the Page Title
  • Alternative Page Title – If you wish to display an Alternative Title to the Page Title, use this option ( Ideal for having a different title from the Menu title )
  • Subtitle – Use this option to enter a Sub title for the page. This will appear directly below the Page Title text
  • Breadcrumbs – Override the global Breadcrumb option set in the Theme Options

Share + Related Posts

  • Share Post – Display or Disable Social Icons on this post
  • Related Posts – Display or Disable Related Posts on this post
  • Featured Image – Choose to display the Featured Image on this post

Layout Tab

The Layout Tab consists of the following Page Options:

General

  • Site Layout – Override the global Site Layout option, choose between Default, Wide or Boxed
  • Page Layout – Change the Page Layout for this page only. This overrides the default Page Layout set in the Theme Options
  • Column 1 Sidebar – If you have set a Page Layout to a layout which consists of a Sidebar, use this option to choose which Sidebar Widget Area to use for Column 1 ( Left Column )
  • Column 2 Sidebar – If you have set a Page Layout to a layout which consists of a Sidebar, use this option to choose which Sidebar Widget Area to use for Column 2 ( Right Column )

Header / Menu

  • Dock Bar – Choose to Display or Disable the Dock Bar on this page
  • Header Display – Choose to Display or Disable the Header on this page
  • Sticky Header – Enable or Disable the Sticky Header on this page
  • Horizontal Layout – Override the global Header Horizontal Layout for this page
  • Vertical Layout – Override the global Header Vertical Layout for this page
  • Logo Top Margin – Set the Logo Top Margin for this page ( Space above the Logo )
  • Logo Bottom Margin – Set the Logo Bottom Margin for this page ( Space below the Logo )
  • Menu Top Margin – Set the Menu Top Margin for this page ( Space above the Menu )
  • Menu Bottom Margin – Set the Menu Bottom Margin for this page ( Space below the Menu )
  • Floating Header – Set the Header to Float over the page content. Float + Transparent will remove the Background Color / Image
  • Title / Breadcrumbs Layout – Change the Page Title & Breadcrumbs Alignment for this page
  • Menu – Choose a different Menu for this page

Footer

  • Footer – Enable or Disable the Footer for this page

Social

Choose to Display the Dock Bar Social Icons on this page. Select which icons you wish to display or disable.

Skin

Use this option to display an alternative Skin for this page.

Portfolio

Use the Portfolio tab to set the Parent Portfolio Page for this post. When the “back to Portfolio” page links are clicked – including breadcrumbs, it will take the user back to the page set here. If no parent page is set, it will use the Portfolio Archive page as a parent.

This option will override the global option set via WordPress Admin > Appearance > Customize > Portfolio > Parent Portfolio Page.

Media

Use these options to add a Video or Audio to a post. The Media Tab consists of the following Post Options:

  • Media URL – Enter the URL of the Video or Audio file ( YouTube & Vimeo is supported too ) – use oEmbed and you’ll need to set the Post Format to Video or Audio

Additional

The Additional Tab consists of the following Post Options:

  • Alternative Link – If you require to link the post to another URL, enter an alternative URL here
  • Disable Link – Disable the post from linking anywhere
  • CSS Classes – Enter CSS classes to help with Custom styling

How to Create a Portfolio Page

Learn how to create Portfolio Posts, assign them to Categories and create a Portfolio Page with Filtering.

Creating a Portfolio Page Video Tutorial

Learn how to create a Portfolio Page using this video tutorial.

STEP 1.

Install Plugin
Ensure the Portfolio Plugin is installed – to install the Portfolio plugin, goto WordPress Admin > Appearance > Install Plugins > Locate Portfolio Post Type > Click Install.

STEP 2.

STEP_2-3.png

Create Post
Let’s create our Portfolio Posts. Goto WordPress Admin > Portfolio > Add New Item > Once the page has loaded Enter a Post title.

For this stage, we need to ensure we see the Visual Composer Editor buttons are displayed.

If you can not see buttons in the diagram above, goto WordPress Admin > Visual Composer > General Settings > Role Manager > Post Types ( assuming you’re administrator ) > Ensure Portfolio is Checked.

STEP 3.

STEP_3-4.png

Adding Content
Next, we need to add content to our Portfolio Post. We’ll use the Visual Composer to do this.

You can use the many Elements to add content to the post – at this stage we have a few choices – see diagram for reference.

  1. Backend Editor – Click the Backend Editor to start adding Elements to the post
  2. Frontend Editor – Click the Frontend Editor button to start adding Elements to the post on the Frontend of your site ( Add / Edit Elements in real-time )
  3. Use Demo Portfolio – Click the Text view button and paste in the HTML from the Classic Demo ( See below ).

Use Demo Portfolio
If you would like to use the format used on the Classic Demo and have not installed the Demo Content ( recommended ) you can use the following steps to paste the HTML from the demo into the post:

  1. To do this, click the Text view button ( see diagram )
  2. Copy all of the following HTML from this File
  3. Paste the HTML into the Editor field ( See arrow in diagram )

Once you have pasted the HTML into the Editor field, follow these steps:

  1. Click the Visual button
  2. Click the Backend Editor button
  3. You should now see all of the content on the Post and you can edit it with your own text and images

 

 

STEP 4.

STEP_4-2.png

Assign Post to Categories
Once we’re happy with our Portfolio Post content, we can assign the Post to a Category. This is essential if you wan to use Animated Filtering to filter your Portfolio posts by Category.

To add a post to a Category, follow these steps, see the diagram above for reference.

  1. Locate the Portfolio Categories section of the post.
  2. Click + Add New Portfolio Category
  3. Enter the Name of your Category
  4. Click the Add New Portfolio Category
  5. Select the Categories you wish to assign this Portfolio Post to
  6. Click Publish

STEP 5.

STEP_5-1.png

Create a Template
If you would like to use the same format for all your other Portfolio Posts, you can save the Portfolio Post you’ve just created as a Template. This will save you time and keep your Portfolio Posts consistent.

To create a Template, follow these steps – see diagram for reference:

  1. Whilst editing the post you wish to create a Template from, click the Templates Icon
  2. Give the Template a Name e.g. My Portfolio Template
  3. Click Save Template

STEP 6.

STEP_6-1.png

Load a Template
If you wish to load a template you’ve created or one of the default templates, create a new Post and follow these steps:

  1. Click the Templates Icon,
  2. Goto the Default Templates tab
  3. Search for your Template e.g. My Portfolio Template
  4. Hover over your Template
  5. Click the + icon or template name to add the template to the post

STEP 7.

STEP_7-2.png

Create the Portfolio Page
Once you have created all of the Portfolio Posts, it’s time to create the Page which displays them all. Follow these steps to create a Portfolio Page and add an element to the page.

  1. Goto WordPress Admin > Pages > Add New > Once the page has loaded Enter a Page title
  2. Enable the Visual Composer Backend Editor or Frontend Editor
  3. Click + Add Element

STEP 8.

STEP_8-1.png

Choosing a Gallery or Slider
We’re going to use the Visual Composer again to create a Gallery or Slider to display our Portfolio Posts. Follow these steps to add a Gallery to the Page.

  1. Once you’ve clicked the + Add Element button, you’ll see all of the Elements within Visual Composer
  2. All of the Elements you can use for a Portfolio page are highlighed in the diagram above
  3. For this example, we’re going to select the Grid Gallery

STEP 9.

STEP_9.png

Select Image / Media Source
Next we need to select the source of our Grid Gallery content, in this case our Portfolio Posts. Follow these steps to select our Portfolio posts and use the diagram for reference:

  1. Select Build Query from the Select Image / Media Source select box
  2. Click the Build Query button
  3. Select Portfolio Post type
  4. Enter All to display all posts
  5. Goto the Taxonomies field,
  6. Start typing the Name’s of the Categories you created in STEP 4. )
  7. Once it finds a match, click the Category Name

STEP 10.

STEP_10.png

Configure the Gallery or Slider
Once we’ve selected the Source, all that’s left to do is configure the Gallery or Slider to suit your content. For this example, I’ve used the settings in the diagram above:

  1. Image Size – large
  2. Content – Title on Hover + Image
  3. Columns – 3 Columns
  4. Animated Filtering – Click to Filter – this displays our Categories at the top of the page which we can click on to filter.
  5. Masonry – Enabled – if you content has different sized content, this option fits the content together with equal spacing

If you’re using the Frontend Editor, you can experiment with the settings to see what works best for you. Once you’re happy with the settings, click Save Settings and click Publish on the page.

STEP 11.

STEP_11.png

Assign to Portfolio Parent Page
Once you’re happy with your portfolio page, you can assign it as a Portfolio Parent Page. This means when the icon above is clicked or Portfolio is clicked in the Breadcrumbs, it will take the user back to the Portfolio Page you’ve created.

Assign the page via WordPress Admin > Appearance > Customize > Portfolio > Portfolio Parent Page.

How to use the Visual Page Builder

Learn how to use the Visual Composer Page Builder plugin.

Installing Visual Composer

If you haven’t already installed the Visual Composer, please install by following these step.

Goto the WordPress Admin > Appearance > Install Plugins > Locate Visual Composer > Click Install

Getting Started with Visual Composer

Getting_Started_with_Visual_Composer.png

To start using Visual Composer, Add New or Edit an existing Page, Portfolio, Post or any other Post type.

Once the Page or Post is loaded, If you can not see buttons in the diagram above, goto WordPress Admin > Visual Composer > General Settings > Role Manager > Post Types ( assuming you’re administrator ) > Ensure the Post type you’re using the Visual Composer on is Checked e.g. portfolio

Backend Editor

BACKEND_EDITOR.png

If you’re creating a new page, clicking the Backed Editor button will display a screen similar to the one in the diagram above.

  1. Clicking these buttons will add an Element to the page.
  2. Clicking these buttons will load or create a Template ( See below )
  3. The Add a Text Block will add a Text Block element to the page, this is one of the most common elements you’ll need
  4. Add Custom CSS to this page only
  5. Enter Full Screen Mode
  6. Enters the Frontend mode

Frontend Editor

Frontend_Editor.png

The Frontend Editor button enters the Frontend editing mode, this allows you to add Elements in real-time.

As you can see from the diagram above, you can now Add / Edit Elements in real-time and see exactly how the page will look once you’re done editing. This removes most of the guess work.

  1. Clicking these buttons will add an Element to the page.
  2. Clicking these buttons will Load or Create a Template ( See below )
  3. The Add a Text Block will add a Text Block element to the page, this is one of the most common elements you’ll need
  4. Add Custom CSS to this page only
  5. Enter Full Responsive Mode – See how the Page will look on a Mobile device
  6. Enters the Backend Editor mode

Editing Elements

Editing_Elements.png

Once you’ve added an Element has been added to a page, to edit that Element, simply rollover it and icons will appear for you to select. See the diagram above for reference:

  1. The Pencil Icon is the Edit Element button
  2. This icon represents Columns ( Only available on Row Elements )
  3. The + icon represents Add Element
  4. This icon represents Duplicate Element
  5. The trash can represents Delete Element
  6. Use this icon to Drag the Element to a new position
  7. Once you click the Edit button, the Element Settings will appear in a new window

Create a Template

Create_a_Template.png

If you have created a series of Elements which you would like to use for other posts or page, you can create a Template from that Page or Post. This will save you time and keep your posts or pages consistent.

To create a Template, follow these steps – see diagram for reference:

  1. Whilst editing the post or age you wish to create a Template from, click the Templates Icon
  2. Give the Template a Name e.g. My Portfolio Template
  3. Click Save Template

Load a Template

Load_a_Template.png

If you wish to load a Visual Composer Template you’ve created or load one of the default Templates, create a new post or page and follow these steps:

  1. Click the Templates Icon,
  2. Goto the Default Templates tab
  3. Search for your Template e.g. My Portfolio Template
  4. Hover over your Template
  5. Click the + icon or template name to add the template to the post

Using Flexishapes

Learn how to use the Flexishapes Element.

FlexiShapes Video

Watch the video on how to create FlexiShapes.

STEP 1.

STEP_1-3.png

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 2.

STEP_2_1-1.png

We’ll first add a Row Element to the page:

  1. Click + Add Element
  2. Goto the search bar and search Row
  3. Click the Row Element

STEP 3.

STEP_3-3.png

Change Row stretch Setting
Next, we’ll configure the Row Stretch setting, this determines the width of the Flexishape.

  1. Edit the row
  2. Select the General tab
  3. Select Stretch row from the Stretch Row select menu ( Default will limit the Flexishape to the width of your content, any other option will set the Flexishape to full width )

 

STEP 4.

STEP_4-1.png

Add a Background Color to the Row
Next we’ll add a Background Color to the row, this will highlight what how the Flexishape manipulates the content within a Row.

  1. Cick the Design options tab
  2. Add a Background Image or Color e.g. #ffd300
  3. In this example, I’m only using a small amount of conent within the Row, therefore we’ll add some Padding to the Top and Bottom of the Row
  4. Set the Background Image to Cover the entire Row
  5. This part is optional, we can click on the Background Extras tab and enable the Parallax Effect & add a Color Overlay
  6. Click Save Settings

STEP 5.

STEP_5_1.png

Add Some Content to the Row
Next we’ll add some simple content to the Row, this can be anything you like, in this example we’ll add a Text Block.

  1. Click the Add Element Icon
  2. Use the Search bar to search the Text Block Element > Click the Text Block Element > Add Some Text to the Text Block and click Save Settings > Click the Close button

STEP 6.

STEP_6.png

Add a Flexishape
We’re ready to add a FlexiShape, we’re going to add this below the Text Block as it’s going to be placed at the bottom of the Row.

  1. Click the Add Element icon below the Text Block or use the icon highlighted in the diagram above.
  2. Use the search bar to search for the FlexiShape element
  3. Click to add the FlexiShape

STEP 7.

STEP_7-1.png

Configure the FlexiShape
Next, we’ll configure the FlexiShape, using the Frontend Editor, you can get creative with the settings to see what works for you.

  1. In this example we’ve used the Pointed Inverted Shape
  2. We’ve set the Position to the Bottom – this means the FlexiShapes will appear at the bottom of the Row
  3. The Color of the shape has been set to #ffffff ( white ) – it’s been set to white because the color below the row is white
  4. The Height can be any value you like ( within reason )
  5. Once you’re happy with how the FlexiShape looks, click Save changes
  6. As you can see from the diagram above, the FlexiShape has manipulated the content within the Row is complete

STEP 8.

STEP_8.png

Add multiple FlexiShapes
We can “Layer” the FlexiShapes to create different effects. In this example we’re going to add a semi-transparent FlexiShape

  1. Add another FlexiShape – Placing this FlexiShape below the previous one, we want it to appear beneath the pevious FlexiShape
  2. In this example we’ve used another Pointed Inverted Shape
  3. The position is set to Bottom
  4. This time, we’ll use a sem-transparent yellow instead of white, the color used in this example is: rgba(255,211,0,0.5)
  5. We’ll use a bigger Height than the previous FlexiShape this will complete the effect
  6. Click Save changes

Finished Example

Finished_Example-1.png

Using Rows

Learn how to use the Visual Composer Row Element – including: Slider & Video background, Parallax, Color Overlays and more.

Using Rows Video Tutorial

Watch the video tutorial for how to Using Rows here.

Getting Started with Rows

Getting_Started_with_Rows.png

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.

Adding a Row

Adding_a_Row.png

Let’s add a Row Element to the page:

  1. Click + Add Element
  2. Goto the search bar and search Row
  3. Click the Row Element

General Settings

General_Settings.png

Once the Row has been added to the page, we’ll need to edit it to access the settings.

  1. Hover over the Row and click the “Pencil” icon to access the Row Settings
  2. Click the General tab
  3. Row Stretch – this option Stretches the Row background or Row Background & Content. Set to Row Stretch to make a background color / image that spans the width of the site
  4. Row Height – this option sets the minimum height of the row. Use the 100% option combined with the Row Stretch option above to create a full screen effect
  5. Content Position – this works in combination with the Row Height option, position your content within the Row. The Row Height has to be set to 25% or more
  6. Anchor Link Name – use this option for One Page setups, it will allow you to link the menu to this Row
  7. Font Color – set the default Font Color for this Row
  8. Extra class name – only use this option if you’re familar with using CSS to customize the Theme

Design Options

Design_Options.png

The Design Options tab allows you to set Background Images, Colors, Borders, Background Position and more.

  1. Click the Design options tab
  2. Border Color – set a Border color for the Row
  3. Border style – set a Border style
  4. Border radius – use this option to add curved edges to a Row
  5. Background Color – add a Background Color to a Row
  6. Background Image – add a Background Image to a Row
  7. Background Image Control – set the image to Repeat or Cover to stretch the image across the Row background
  8. Background Horizontal Position – use this option to Position the Image Horizontally ( will not work with Cover )
  9. Background Vertical Position – use this option to Position the Image Vertically ( will not work with Cover )
  10. CSS – use these fields to control the Row Margins, Row Padding & Row Border ( be sure to check your site on Mobile device if using Margin values )

Background Extras

Background_Extras.png

The Background Extras tab allows you to add a Slider background, set a Color Overlay, add Video background & add Parallax Effect

  1. Click Background Extras tab
  2. Parallax – enable the Parallax Effect on the Row ( Ensure you have an image set in the Design Options tab )
  3. Slider Images – add images to create a Slider background on the Row ( Parallax will not work with this option )
  4. Slider Effect – choose a transition Effect for the Slider
  5. Slider Timeout – set the timeout between each image change in seconds
  6. Video URL – add a Video Background to the Row, you can use self-hosted .mp4 formats or YouTube and Vimeo Videos
  7. Overlay Color – add a Color Overlay to your background image or video

 

Using Typewriter

Learn how to use the ACODA Typewriter Element to create 3d & Typewriter style animated text.

Install Typewriter Plugin

Please ensure the Typewriter plugin is installed. To install the plugin, goto the WordPress Admin > Appearance > Install Plugins > Locate ACODA Typewriter > Click Install.

STEP 1.

STEP_1-1.png

To add a Typewriter Element to a page, Edit or Create a Page and click on Backend Editor or Frontend Editor to activate the Visual Composer.

STEP 2.

STEP_2-2.png

Add the Typewriter Element
Next, we’ll add the Typewriter element to the page.

  1. Click + Add Element
  2. Goto the search bar and search Typewriter
  3. Click the Typewriter Element

STEP 3.

STEP_3-1.png

Configure the Typewriter
Next, we’ll now configure the Typewriter. By default the Typewriter will use the settings shown in the diagram above.

  1. Animate Type – Choose between the Rotate 3d or Typewriter animation
  2. Lead Text – If you wish to display some static text ( lead text ) before the animated text, you can add it here, in most cases, this isn’t needed
  3. Font Color – Choose the Color of your Typewriter text
  4. Align – Set the alignment of the Typewriter
  5. Formatting – Set the format of the text. Only use the Heading 1 if there are no other Heading 1 tags on the page ( this is for SEO purposes )
  6. Font Weight – Choose the Font Weight of the Typewriter text
  7. Font Size – Set the Typewriter Font Size – the size differs depending on what formatting you’ve selected
  8. Duration – The Duration is the time the word is visible for, longer words require more time
  9. Delay – This value is the Delay time between each word animation – smaller values are recommended
  10. Pause – The Pause value is the Pause time at the end after all the words have been animated – use this to pause on the last word
  11. Text to Animate – These are the words you’re going to Animate, each line is animated at a time. You can use small sentences too. It’s not recommended to use the Typewriter to animate large sentences.
  12. Once you’re happy with the settings, click Save changes and Close

Theme Widget Areas

Learn about the different Theme Widget areas.

Accessing the Widget Areas

Accessing_the_Widget_Areas.png

To view the Theme widget areas, follow these steps:

  1. Goto your WordPress Admin and click Appearance
  2. Click the Widgets menu item
  3. The diagram above indicates the default Widget areas that come with the Theme
  4. You can create more Sidebar widgets via Appearance > Theme Options > General > Number of Sidebars

Sidebar Widgets

Sidebar_Widgets.png

The Sidebar widgets are using for the Page Layout that have a column layout selected. See Page Options for setting a Page Layout with a Sidebar

Footer Column Widgets

Footer_Column_Widgets.png

Footer Column Widgets are used for the Footer area of the Theme. You can set how many column widgets you require via Appearance > Theme Options > Footer > Footer Columns.

Information Panel

Information_Panel.png

This widget area is reserved for the Dock Bar depending on what setting you have in Appearance > Theme Options > Dock Bar > Info Dock Panel, will determine how the Widget is displayed.

  1. Appearance > Theme Options > Dock Bar > Info Dock Panel – Set to Static
  2. Appearance > Theme Options > Dock Bar > Info Dock Panel – Set to Dock Icon

Docked Menu Panel

Docked_Menu_Panel.png

This widget area is reserved for when the Appearance > Theme Options > Main Menu > Move to Dock Bar is enabled. This widget area will sit below the Main Menu when the Menu Icon is clicked. The above diagram shows a Rich Text Editor Widget with Social Icons shortcode added.

Header Panel

Header_Panel.png

This widget areas is reserved for the Header area – See diagram above to see where the widget will be placed. You can control the width of the area via Appearance > Theme Options > Header > Header Widget > Width.

This Widget area is ideal for ad banners.

Rich Text Editor Widget

The Rich Text Editor Widget allows you to format text and easily add images & shortcodes into Widget areas.

Add the Rich Text Editor

Add_the_Rich_Text_Editor.png

To add the Rich Text Editor to one of the Widget areas, follow these steps:

  1. Goto the WordPress admin
  2. Click Appearance
  3. Click Widgets
  4. Scroll to locate the Rich Text Editor Widget ( shown in the diagram above )
  5. Drag the widget to the Widget area you wish to use
  6. Enter a Title if one is needed ( you’ll need to clck the Output title to display it )
  7. Click the Edit content button to start adding content to the widget

Using the Rich Text Editor

Using_the_Rich_Text_Editor.png

The Rich Text Editor has all the capability of the WordPress Post or Page editor.

  1. Insert common ACODA shortcodes like Social Icons. This makes it easy to place shortcodes & social icons in the Footer or Sidebar
  2. Format text like the normal Editor
  3. Use the ACODA format classes to style your text
  4. Easily add images to the Sidebar, Footer or any other Widget area
  5. Click Save and close when you’re done editing

You Child Theme

Learn how to use the You – Child Theme.

What is a Child Theme?

A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme.

Download the Child Theme

Download_the_Child_Theme.png

Download the Child Theme from your ThemeForest downloads section.

  1. Goto Your ThemeForest Account
  2. Click on Downloads
  3. Locate the Theme and click Download
  4. Click All files & Documentation
  5. This will now download the the Main zip file to your computer
  6. Unzip the downloaded file. Locate the Child Theme within You-WordPress > You-Child.zip

Upload the Child Theme

Follow these steps to upload the zip file to your WordPress Themes area.

  1. Goto your WordPress Admin
  2. Click the Appearance Menu Item
  3. Click Themes
  4. Click Add New
  5. Click Upload Theme
  6. Click Choose File
  7. Locate the You-Child.zip file you’ve downloaded
  8. Click Install Now
  9. Click Activate

Customizing Your Child Theme

This Article is a great way to get started with Customizing your Child Theme. Read from the Customizing Your Child Theme section.

Set a Home Page

Learn how to set a specific page as your home page.

STEP 1.

STEP_1.png

Using the WordPress Admin, goto

  1. Click the Settings menu item
  2. Then click the Reading menu item

STEP 2.

STEP_2.png
  1. Select the A static page ( select below ) option
  2. Choose the page you want to display as a home page from the Front page: select menu
  3. Click Save Changes