• Home
  • /Archive by category ' Shortcode Tips '

Archive For: Shortcode Tips

Font Icons

Font icons are icons that are a font instead of an image so they can be scaled and customized using CSS. These tools are built directly into the themes.

Adding a font icon

media_1387203008523.png

1. To add a font icon, choose from the list here and copy the icon name. E.g fa-compass
2. Choose your icon size.
3. Select icon color
4. Enable a background color
5. Alignment
6. CSS Animation

Font icons via shortcode

media_1410285116102.png

To add a font icon via a shortcode please follow these steps:

1. Click the themeva icon
2. Choose Font Icon
3. Alter the shortcode to suit your needs

Take out and add in the parts of the shortcode that you need. This is what the demo shortcode will look like.

[icon name="fa-compass" iconsize="small medium large x-large" iconcolor="" background="true" backgroundcolor="" ]

Here is an example of the shortcode cut down to size with a black background, white icon, medium size and a compass icon.
[icon name="fa-compass" iconsize="medium" iconcolor="#FFFFFF" background="true" backgroundcolor="#333333" ]

Read more →

Quick Shortcodes for Text Editor

In some cases it's easier to place shortcodes within a text editor, the quick shortcode select menu has been implemented to help users build up content quicker within the text editor. The following instructions will give you an insight into how it works and how to use it.

Generate Shortcode

wpid1025-media_1379424010806.png

The Shortcode Generator is located within a text block when editing a page.

Edit page > Add a row > Add a Text Block

1. If the orange themeva logo does not show, click the Kitchen Sink icon.

2. Click the themeva logo to show the Shortcode list.

3. Select a shortcode, they will automatically be placed into the Text Block content area.

Edit the Shortcode

wpid1026-media_1379426023188.png

1. Once the shortcode has been created, remove the options you do not require. (see highlighted options)

2. Leave one option for each function unless otherwise stated. E.g, align="aligncenter, alignleft or alignright" change to align="alignleft"

Colors:
grey-lite
black
blue
blue-lite
green-lite
green
grey
orange-lite
orange
pink-lite
pink
purple-lite
purple
red-lite
red
teal-lite
teal
transparent
white
yellow-lite
yellow

Read more →

Wide Row

How to add a Wide Row

wpid997-media_1375197255943.png
  1. Click to add a row
  2. Click the pencil button to edit the row

 

wpid998-media_1375197495801.png

3. Select Custom Background
4. Check Wide Row
5. Save changes

This will give you a full width row which you can then use to select a background color, Parallax, Font color etc. You can then drag elements into the row to build up the row.

 

Read more →

Buttons

Increase Text Size

To increase the size of your button text, add one of the following classes via the Visual ComposerButtonExtra class name

  • medium-text
  • big-text
  • large-text
  • xlarge-text
  • supersize-text

Read more →

Accordion

Make the Accordion Collapse / Collapsible

wpid913-media_1365501778216.png
  1. Collapse Panels: To collapse the accordion panels, add collapse to the Extra class name field
  2. Make Collapsible: To make the accordion collapisible i.e. close each panel individually, add collapsible to the Extra class name field

Read more →