Shortcodes

Details about the shortcodes available with the theme

Online Docs Available Looks like you are looking at the offline docs. You can find possibly more up to date docs online here

Shortcodes

Omega comes with a wide variety of cool shortcodes, easily inserted with the Visual Composer editor, without having to edit the code or any text at all!

Global Options

All the shortcodes share these options, which mainly add padding and animation to almost anything! shortcodes

  • Title: The title of the panel.
  • Panel Style: Style of panel to display.
  • Margin Top: Amount of space to add above this element.
  • Margin Bottom: Amount of space to add below this element.
  • Scroll Animation: Animation that will occur when the user scrolls onto the element.
  • Animation Delay: Delay after scrolling onto the element before animation starts.
  • Extra Classes: Add any extra classes you need to add to this element. ( space separated )

Image Shortcode

Setting up the image shortcode should include the following:

  1. Choose the image that you want to use.
  2. Pick the size and whether you want the image to strech or not, in order to fit its container.
  3. Set an alternative text, in case the visitor has images disabled.
  4. Set the overlay type that you want when hovering on the image.
  5. Set the link type to be either Magnific( showing the image zoomed ), Link( linking to a URL on the next step ) or No Link.
  6. Set the URL that the image will link to ( if previous option is set to Link ).
  7. Set if you want the link to open in the same or new tab.
  8. Choose whether you want the image captions to be visible and linkable.
  9. Set the caption text and title.
  10. Set a hover effects filter and when to be applied.
  11. Set the Zoom and Link button text.
  12. Set the alignment of the captions
  13. Set the the animation of the overlay.
  14. Set the overlay grid and icon to be displayed.
  15. Set the global options as described here.

Bootstrap Shortcodes

We have implemented many cool bootstrap components as shortcodes, such as Tabs, Accordion, Panel, Alert, Jumbotron, Progress Bars, Jumbotron, Carousel, Buttons etc. You can get an idea of how to use the bootstrap shortcodes by visiting the Bootstrap website here.

Heading Shortcode

If you want to add a header anywhere in your content, this is the shortcode that you want. Follow these simple steps to do so.

  1. Set the header and the subheader text.
  2. Pick your header type ( i.e h1 ).
  3. Choose the Heading Color, if you select "On" in the Override section swatch option.
  4. Pick the Subheader and Header font sizes.
  5. Pick the header's font weight, alignment and padding.
  6. Decide if you want you header to be underlined and how big the line will be.
  7. Set the global options as described here.

Features List Shortcode

If you want to display a list of features, this is the shortcode that you want.

  1. When you pick the Features List shortcode from Visual Composer, an empty container will be added in your content. If you click inside it to add content, you will see a Feature element.
  2. If you choose to show an icon, pick a Font Awesome or an SVG icon.
  3. Set the icon and background shape color.
  4. Set the hover animation.
  5. Set the Title and the content for your featured item.
  6. Set the global options as described here.
  7. Repeat the steps from 2 to 6 for every featured icon that you wish to add.

Shaped Image Shortcode

Follows almost the same rules as the Image Shortcode, but with an extra option to choose the shape of the image to be either Circle or Square.

Pricing Column Shortcode

Follow these steps to create a Pricing Column.

  1. Set a heading for the column.
  2. Decide whether this column will be a featured one. A featured column stands out from the rest.
  3. Set the background and foreground colors.
  4. Decide whether you want to show a price and pick its colors.
  5. Set a price and pick a price currency( or set a custom one ).
  6. Add some text after the price.
  7. Add items in the list that will be displayed in the column. Separate the list items with linebreaks(Enter).
  8. Decide if you want a button to be shown, and set a text, a link, a background color and a text color for it.
  9. Set the global options as described here.

Recent Posts(Masonry) Shortcode

If you want to display your recent posts anywhere in your pages, this is the shortcode that you want.

  1. Set the number of posts that you wish to be displayed.
  2. Choose a specific category that you want the posts to be shown from.
  3. Pick a swatch for the posts.
  4. Set the padding that you want your post items to have with each other.
  5. Set the animation timing, if you set a scroll animation in the global options to follow. The animation can take place at the same time for all the items, or for each one individually at different times. Feel free to play around with this awesome effect!
  6. Set the global options as described here.

Google Map Shortcodes

If you want to show a Google Map anywhere inside your page this is the shortcode that you want.

  1. Choose the type of map you want Roadmap, Satellite, Terrain, Hybrid.
  2. Set the zoom of the map.
  3. Pick a map style, Black&White or Regular.
  4. Decide if you want the map to be scrollable and if you want a marker to be visible.
  5. Set the label, address, Latitude, Longitude and Section Height of the marker. There is no need to set both address and Latitude-Longitude.
  6. Set the global options as described here.

Pie Chart Shortcode

Here is how to create an awesome pie chart anywhere in your page.

  1. Pick a color for the track of the chart.
  2. Pick a color for the bar of the chart.
  3. Choose an icon for the chart that shows in the middle of the track.
  4. Set an icon animation.
  5. Set the percentage of the chart that you want to fill.
  6. Set the size and the line width of the chart.
  7. Set the global options as described here.

Scroll to button Shortcode

The scroll-to button is really useful when you want to navigate fast and with a smooth effect inside your page's sections. Before you set the options for this shortcode, you need to assign an id to the section that you want the button to take you to. Read here to find out more on how to setup a section. Once you have done that, follow these steps.

  1. Type the id of the section that you want to go to( e.g #link ).
  2. Pick an arrow that you wan to use as an icon for the button.
  3. Decide if you want the button to go to the bottom of the section.
  4. Set the global options as described here.

Social Sharing Icons Shortcode

If you are creating a page that you want to share with friends in social media, this is the shortcode that you are looking for. It can be easily confused with the Social Icons Shortcode.

  1. Set a title that will appear above the social share icons.
  2. Select which social networks you would like to share on.
  3. Pick the size of the icons.
  4. Decide whether you want to have a background and set its shape and color.
  5. Set the global options as described here.

Social Icons Shortcode

The Social Icons shortcode is useful when you want to guide the visitors to your social media profile. It can be easily confused with the Social Sharing Icons Shortcode, which is only used when you want to post a page on your profile. When using this shortcode follow these steps.

  1. Set a title that will appear above the social share icons.
  2. Pick the size of the icons.
  3. Decide whether you want to have a background and set its shape and color.
  4. Decide where the social links will open to.
  5. Set the URLs for each social media website you want to link to.
  6. Set the global options as described here.

Divider Shortcode

Use this shortcode when you want to add vertical space between your elements.

  1. Decide whether you want the divider to be visible or not. If you do, pick a backround color.
  2. Set the height of the space you want to add, one for each screen resolution.

If you want to add a menu anywhere in your page, this is the shortcode that you want. It is strongly advised that you deactivate the main menu from the Appearance->Menus menu, by unticking the Primary Navigation option. Also, it is highly recommended that the section the menu is in should be fullwidth.

  1. Choose the menu that you want to use.
  2. Pick a swatch for the menu.
  3. Choose a header type, based on whether you want your Menu to scroll down with the view, or stick to the top.
  4. Decide whether you want the selected menu items to be underlined.
  5. Select whether you want to capitalize the menu items.
  6. Pick a menu width, Normal or Fullwidth.

Audio Player Shortcode

If you want to add an audio player anywhere in your page, this is the shortcode that you want.

  1. Add a link to the audio that you want to play.
  2. Set the loop to on or off.
  3. Set the autoplay to on or off.
  4. Specify whether you want the audio to load when the page loads.
  5. Set the global options as described here.