Xposure

Showcase your vision to the world in style

Photography is an art…

You are here: Home / Shortcodes

Shortcodes

Button Shortcodes

The theme features the following three button shortcodes to help you create call-to-action buttons in no time.

Simple Button: [button][/button]

This is enclosing shortcode which helps you in creating a simple call-to-action button. Here is a list of attributes for this shortcode:

  • id: Adds specific id attribute to the button.
  • class: Adds specific class attribute to the button.
  • link: Adds href attribute to the button.
  • color: Specify one of the predefined colors from this list: button-blue, button-green, button-pink, button-yellow, button-red.
  • type: Specify one of the types: transparent or fill.
  • icon: Specify any icon from FontAwesome icons.
  • round: Adds border-radius, specify yes if you want, defaults to no.
  • newwindow: Specify if you want to open the button link in new window. Defaults to no.

Usage:

[button id="my-id" class="my-class" link="#" color="button-blue" type="transparent" icon="fa-cogs" round="yes" newwindow="yes"]Simple Button[/button]

Output:

Simple Button

Big Button: [big-button][/big-button]

This is enclosing shortcode which helps you in creating a simple call-to-action button. Here is a list of attributes for this shortcode:

  • id: Adds specific id attribute to the button.
  • class: Adds specific class attribute to the button.
  • link: Adds href attribute to the button.
  • color: Specify one of the predefined colors from this list: button-blue, button-green, button-pink, button-yellow, button-red.
  • type: Specify one of the types: transparent or fill.
  • icon: Specify any icon from FontAwesome icons.
  • newwindow: Specify if you want to open the button link in new window. Defaults to no.

Usage:

[big-button id="my-id" class="my-class" link="#" color="button-blue" type="transparent" icon="fa-cogs" newwindow="yes"]This is Big Button[/big-button]

Output:

This is Big Button

White Button: [white-button][/white-button]

This is enclosing shortcode which helps you in creating a simple call-to-action button. Here is a list of attributes for this shortcode:

  • id: Adds specific id attribute to the button.
  • class: Adds specific class attribute to the button.
  • link: Adds href attribute to the button.
  • hovercolor: Specify one of the predefined colors from this list: button-blue, button-green, button-pink, button-yellow, button-red.
  • type: Specify one of the types: transparent or fill.
  • icon: Specify any icon from FontAwesome icons.
  • round: Adds border-radius, specify yes if you want, defaults to no.
  • newwindow: Specify if you want to open the button link in new window. Defaults to no.

Usage:

[white-button id="my-id" class="my-class" link="#" hovercolor="button-pink" type="fill" icon="fa-cogs" round="yes" newwindow="yes"]This is White Button[/white-button]

Output:

This is White Button
View all Xposure button examples

Collapsible Content Shortcode

The theme features a shortcode for creating collapsible content divs for FAQs, etc. It is as simple as using the following shortcode and you get styled collapsible divs in no time.

Shortcode: [collapsible-content][/collapsible-content]

This is an enclosing shortcode which outputs collapsible content. Here is a list of attributes for this shortcode:

  • id: Specify id attribute for your own custom styling purposes.
  • class: Specify class attribute for your own custom styling purposes.
  • caption: Specify the caption for the collapsible content using this attribute.
  • state: Specify the state as open if you want to keep the collapsible content open by default. Defaults to close.

Usage:

[collapsible-content caption="Opened Collapsible Content" state="open"]
Collapsible content goes here...
[/collapsible-content]

Examples:

Opened Collapsible Content

Closed Collapsible Content One

Closed Collapsible Content Two

Closed Collapsible Content Three

The theme defines custom-list shortcode for custom list styles. The theme features 5 custom list styles with 5 color options for each list style.

Shortcode: [custom-list][/custom-list]

This is an enclosing shortcode which outputs custom styles for a list. Here is a list of attributes for this shortcode:

  • id: Specify id attribute for your own custom styling purposes.
  • class: Specify class attribute for your own custom styling purposes.
  • style: Specify one of the following 5 styles: caret, star, check, pencil, cancel.
  • color: Specify one of the following 5 colors: color-blue, color-green, color-red, color-yellow, color-pink.

Usage:

[custom-list style="caret" color="color-blue"]
<ul>
	<li>Lorem ipsum dolor sit amet, consetetur.</li>
	<li>Diam voluptua at vero eos et accusam et justo.</li>
	<li>Duo dolores et ea rebum stet clita kasd gubergren.</li>	
</ul>
[/custom-list]

Examples:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
  • Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
  • Diam voluptua at vero eos et accusam et justo.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
  • Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
  • Diam voluptua at vero eos et accusam et justo.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
  • Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
  • Diam voluptua at vero eos et accusam et justo.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
  • Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
  • Diam voluptua at vero eos et accusam et justo.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
  • Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
  • Diam voluptua at vero eos et accusam et justo.

About Us

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis commodo volutpat condimentum. Morbi lectus erat, egestas et velit id.

Connect With Us

Stay Updated

Sign up for the newsletter and stay updated with the latest on the blog.