Shortcodes

Motive is equipped with different type of Shortcodes:

  1. Column Shortcodes
  2. Tabs, Toggles, & Accordions
  3. Buttons & Social Icons
  4. Typography Elements
  5. Layout Shortcodes or Home Blocks

Column Shortcodes

1/2

[columns]
[column size=”1/2″]Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices.[/column]
[column size=”1/2″]Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices.[/column]
[/columns]

1/4

[columns]
[column size=”1/4″]Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. [/column]
[column size=”1/4″]Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante.[/column]
[column size=”1/4″]Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. [/column]
[column size=”1/4″]Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante.[/column]
[/columns]

1/3

[columns]

[column size=”1/3″]Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. [/column]
[column size=”1/3″]Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante.[/column]
[column size=”1/3″]Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. [/column]

[/columns]

1/4

[columns]
[column size=”1/4″]Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. [/column]
[column size=”1/4″]Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante.[/column]
[column size=”1/4″]Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. [/column]
[column size=”1/4″]Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante.[/column]
[/columns]

1/5

[columns]
[column size=”1/5″]Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. [/column]
[column size=”1/5″]Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante.[/column]
[column size=”1/5″]Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. [/column]
[column size=”1/5″]Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante.[/column]
[column size=”1/5″]Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante.[/column]
[/columns]

1/4 and 2/4 – One of the several possible combinations

[columns]

[column size=”1/4″]Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. [/column]
[column size=”1/4″]Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante.[/column]
[column size=”2/4″]Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. [/column]

[/columns]


Tabs, Toggles, & Accordions

Horizontal Tabs

Standard tabs used for grouping content together.

[tabs]

[tab title=”First Tab”]Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. [/tab]
[tab title=”Second Tab”]Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. [/tab]
[tab title=”Third Tab”]Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. [/tab]

[/tabs]

Vertical Tabs

Vertical tabs work great for “tours”.

[tabs type=”vertical”]

[tab title=”First Tab”]Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. [/tab]
[tab title=”Second Tab”]Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. [/tab]
[tab title=”Third Tab”]Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. [/tab]

[/tabs]

Accordions

Accordions, unlike toggles, function as a group. When one accordion is shown, the rest of it is hidden.

[accordions]

[accordion title=”First Section”]Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. [/accordion]
[accordion title=”Second Section”]Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. [/accordion]
[accordion title=”Third Section”]Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. [/accordion]

[/accordions]

Toggles

Toggles functionality is similar but not the same as accordions. Toggles are individual and do not function as a group – i.e. they can toggle individually.

[toggle title=”Lorem Ipsum”]Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. [/toggle]
[toggle title=”Class aptent taciti”]Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. [/toggle]
[toggle title=”Integer euismod lacus”]Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. [/toggle]


Buttons & Social Icons


[columns]
[column size=”1/1″]
[button link=”#”]Button[/button]
[button link=”#” color=”#4b6bab”]Button[/button]
[button link=”#” color=”#74ab4b”]Button[/button]
[button link=”#” color=”#ab4b93″]Button[/button]
[button link=”#” color=”#e8c331″]Button[/button]
[/column]
[/columns]
[columns]
[column size=”1/1″]
[button link=”#” size=”medium”]Button[/button]
[button link=”#” color=”#4b6bab” size=”medium”]Button[/button]
[button link=”#” color=”#74ab4b” size=”medium”]Button[/button]
[button link=”#” color=”#ab4b93″ size=”medium”]Button[/button]
[button link=”#” color=”#e8c331″ size=”medium”]Button[/button]
[/column]
[/columns]
[columns]
[column size=”1/1″]
[button link=”#” size=”large”]Button[/button]
[button link=”#” color=”#4b6bab” size=”large”]Button[/button]
[button link=”#” color=”#74ab4b” size=”large”]Button[/button]
[button link=”#” color=”#ab4b93″ size=”large”]Button[/button]
[button link=”#” color=”#e8c331″ size=”large”]Button[/button]
[/column]
[/columns]


[social backgrounds=”1″]
[social_icon link=”#” title=”Facebook” type=”facebook” /]
[social_icon link=”#” title=”Twitter” type=”twitter” /]
[social_icon link=”#” title=”LinkedIn” type=”linkedin” /]
[social_icon link=”#” title=”Google Plus” type=”google-plus” /]
[social_icon link=”#” title=”Dribble” type=”dribbble” /]
[social_icon link=”#” title=”Pinterest” type=”pinterest” /]
[social_icon link=”#” title=”Instagram” type=”instagram” /]
[social_icon link=”#” title=”YouTube” type=”youtube” /]
[social_icon link=”#” title=”Vimeo” type=”vimeo-square” /]
[/social]

[social backgrounds=”1″ type=”medium”]
[social_icon link=”#” title=”Facebook” type=”facebook” /]
[social_icon link=”#” title=”Twitter” type=”twitter” /]
[social_icon link=”#” title=”LinkedIn” type=”linkedin” /]
[social_icon link=”#” title=”Google Plus” type=”google-plus” /]
[social_icon link=”#” title=”Dribble” type=”dribbble” /]
[/social]

[social backgrounds=”1″ type=”large”]
[social_icon link=”#” title=”Facebook” type=”facebook” /]
[social_icon link=”#” title=”Twitter” type=”twitter” /]
[social_icon link=”#” title=”LinkedIn” type=”linkedin” /]
[/social]

[social backgrounds=”1″ type=”x-large”]
[social_icon link=”#” title=”Facebook” type=”facebook” /]
[social_icon link=”#” title=”Twitter” type=”twitter” /]
[/social]


Media Embed

All the WordPress audio and video embeds are fully supported by the theme. Here’s an example of a responsive Vimeo video.

Add Comment

Click here to post a comment

Your email address will not be published. Required fields are marked *