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

Global Options

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

shortcodes

  • 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 )

Row

One of the great features of Lambda theme is the use of multiple page sections. Think of a section as a partial in your page that you can add any type of content:

Each section can host its own content. Before adding content to a new page, make sure you have created a new row. Turn the Visual composer on by clicking on the Backend editor button: shortcodes

Then you can start adding elements inside a row(section). Press the Add element button.

You have created an empty section. Before adding new elements to that section, try to edit it by clicking on the small pencil icon that is located on the upper right corner of the newly created row. shortcodesA list of options should now appear

shortcodes

Setting the width of the row

In order to set the width of the row follow these steps

  • Edit the row.
  • Scroll down to the Section Width option.
  • Choose an option Paddedor Fullwidth. Padded adds some padding to the sides of the row, whereas Fullwidth captures the whole width of the screen.
  • Save the changes.
  • Update the page.

Setting a row background color

In order to set the row background color follow these steps

  • Edit the row.
  • Scroll down to the Overlay Colour option. Pick the colour that you wish.
  • Set the Overlay Opacity to set the opacity of the color.
  • Set the Overlay Grid to add an overlay pattern image over your row.
  • Save the changes.
  • Update the page.

Setting a row background image

In order to set a row background image follow these steps

  • Edit the row.
  • Scroll down to the Background Image option. Hit on the + sign to load an image from the library, or upload a new one.
  • Save the changes.
  • Update the page.

Adding an image overlay color

In order to set an image overlay color follow these steps

  • Edit the row.
  • Scroll down to the Overlay Colour option. Pick the colour that you wish.
  • Save the changes.
  • Update the page.

Adding an image overlay grid

In order to set an image overlay grid follow these steps

  • Edit the row.
  • Scroll down to the Overlay Grid option.
  • Set the Overlay Grid to add an overlay pattern over your image.
  • Save the changes.
  • Update the page.

Setting up a parallax image background

After you have set a background image for the row, you need to enable the Background Image Parallax Effect option. Then, you need to set the position of the image in pixels that the parallax effect will start from and that will end at. This is set from Parallax Effect Start Position and Parallax Effect End Position options of the row settings respectively.This effect will add an extra sense of interactivity between the user and your fabulous content!

Content Vertical Alignment

A new option of Lambda that makes content building easier is the Section Content Vertical Alignment option. You can edit that option from the row options. Make you content stay at the top of the section by selecting Top, align at the center by selecting Middle or at the bottom by selecting Bottom. That way you no longer have to worry about realigning your content every time you add or remove an element, this will automatically be taken care of by this option.

Keep in mind that the alignment will be applied to all the elements of that section.

shortcodes

Setting a background video

In order to set a background video follow these steps

  • Edit the row.
  • Scroll down to the Background Video mp4 option.
  • Add the full URL of an mp4 file of that video.
  • Scroll down to the Background Video webm option.
  • Add the full URL of an webm file of that video.
  • Save the changes.
  • Update the page.

Making a row full height

In order to set the height of the row follow these steps

  • Edit the row.
  • Scroll down to the Section Height option.
  • Choose an option Normalor Full Height. Normal height just takes up as much space as needed for the elements of the row to show. Full Height takes up the full height of the viewport.
  • Save the changes.
  • Update the page.

Columns

When building a section, before adding any content you should decide on how many columns you want to use. shortcodesThen, click on the small pencil icon as pointed out in the image above to edit the Columns. You should now see the options below shortcodes

  • Column Alignment: Sets the alignment items in the column.
  • Column Background Color: Set the background color of the column.
  • Small screens Column Alignment: Overrides the alignment in the column on small screens.
  • Extra Classes: Add any extra classes you need to add to this column. ( space separated )
  • Top border: Top border on the column.
  • Right border: Right border on the column.
  • Bottom border: Bottom border on the column.
  • Left border: Left border on the column.
  • Scroll Animation: Animation that will occur when the user scrolls onto the element.
  • Animation Delay: Delay after scrolling onto the element before animation starts.

Setting a column background color

In order to set a column background color follow these steps

  • Edit the column. shortcodes
  • Scroll down to the Column Background Color option.
  • Pick the colour that you wish.
  • Save the changes.
  • Update the page.

Aligning column contents

In order to align the contents of the column, follow these steps

  • Edit the column.
  • Locate the Column Alignment option(it should be the first one).
  • Set it to Left, Right, Centeror Defaultif you want your column contents to be aligned left, right, centered or no alignment respectively.
  • Save the changes.
  • Update the page.

Adding borders to columns

In order to add borders to columns follow these steps

  • Edit the column.
  • Scroll down to the Top border option.
  • Set the Top Border option to Onif you want your column to have a top border.
  • Scroll down to the Right border option.
  • Set the Right Border option to Onif you want your column to have a right border.
  • Scroll down to the Bottom border option.
  • Set the Bottom Border option to Onif you want your column to have a bottom border.
  • Scroll down to the Left border option.
  • Set the Left Border option to Onif you want your column to have a left border.
  • Save the changes.
  • Update the page.

Animated Heading

Animated heading is a new shortcode that allows the user to add a heading with a label that animates at the end of the heading. The Heading text is set from the Header Text option. The part of the heading that changes/animates is set from the Labels option. Labels should be separated by | and will be concatinated to the header text. The full list of the shortcode's options is

  • Header Text : Text that will be used for the header. Labels will be added to the text.
  • Labels : Animating labels, separate labels with |. Will be added to the end of the header.
  • Text Animation : Set the animation type for the labels.
  • Text Color : Set the text color of the heading.
  • Header Type : Choose the type of header you want to use.
  • Header Font Size : Choose size of the font to use in your header.
  • Header Font Weight : Choose weight of the font to use in the header.
  • Header Alignment : Align the text shown in the header left, right or center.
  • Extra Classes : Space separated extra classes to add to the heading.
  • 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.
  • Hidden on Large : Hides the element on large devices.
  • Hidden on Medium : Hides the element on medium devices.
  • Hidden on Small : Hides the element on small devices.
  • Hidden on Extra Small : Hides the element on extra small devices.
Animated Headlines shortcode is based on the CSS Animated Headlines gem from Codyhouse