Box

Button - RSTemplate! Box

This plugin allows you to add a customizable box. By clicking on the button found in any editor you might be using, a box configuration modal will be opened.

Here, in the Box Type field, you can choose from 12 predefined types of boxes. In this article we will describe how each of them needs to be configured:

• Full width horizontal Image (Image, title, text, buttons)

• Vertical Image (Image, title, text)

• Vertical Image Small (Text, title, subtitle, image)

• Horizontal Image (Image, title, text, price, button)

• Horizontal Image Small (Image, title, text)

• Full width horizontal Icon (Icon, title, text, button)

• Vertical Icon (Icon, title, text, button)

• Horizontal Icon (Icon, title, text)

• Personal (Image, title, subtitle, text, 5 buttons)

• Featured (title, text, price)

• Pricing (Title, price, text, features, button)

• Pricing highlight (Title, price, text, features, button)

Full width horizontal Image (Image, title, text, buttons)

Customization options:

• Image Url: Provide the path to the image that will be displayed inside the box
• Box Title: Specify the box's title
• Text: Add some text that will be displayed inside the box
• Button Label: Defaulted to REGISTER - Set a label for the button
• Button Link: Defaulted to http://www.rsjoomla.com/ - Set a link (URL) for the button's action
• Button Label: Defaulted to READ MORE - Set a label for the button
• Button Link: Defaulted to http://www.rsjoomla.com/ - Set a link (URL) for the button's action

The images to the right illustrate both a code example and a preview of the box that results from it, as well as the box's configuration fields.

Shortcode:

[box id="Box_Title" boxtype="full-width-horizontal-image" class="rstpl-box-full-horizontal-image"] [image]<img src="https://cdn.rsjoomla.com/RSBaron3x/templates/rsbaron/images/sampledata/images/320x320-3.jpg" alt="" />[/image] [title]Box Title[/title] [text]This is sample content. In order to change this text please type in the text box the content you wish to be displayed.[/text] [button href="http://www.rsjoomla.com/"]REGISTER[/button] [button href="http://www.rsjoomla.com/"]READ MORE[/button] [/box]

Back to top

Vertical Image (Image, title, text)

Customization options:

• Box Title: Specify the box's title
• Image Url: Provide the path to the image that will be displayed inside the box
• Text: Add some text that will be displayed inside the box
• Button Label: Defaulted to Read More - Set a label for the button
• Button Link: Defaulted to http://www.rsjoomla.com/ - Set a link (URL) for the button's action

The images to the right illustrate both a code example and a preview of the box that results from it, as well as the box's configuration fields.

Shortcode:

[box id="Box_Title" boxtype="simple-vertical-image" class="rstpl-box-vertical-image"] [image]<img src="https://cdn.rsjoomla.com/RSBaron3x/templates/rsbaron/images/sampledata/images/320x320-1.jpg" alt="" />[/image] [title]Box Title[/title] [text]This is sample content.[/text] [button href="http://www.rsjoomla.com/"]Read More[/button] [/box]

Back to top

Vertical Image Small (Text, title, subtitle, image)

Customization options:

• Text: Add some text that will be displayed inside the box
• Box Title: Specify the box's title
• Box Subtitle: Add some text that will be displayed below the box's title
• Image Url: Provide the path to the image that will be displayed inside the box

The images to the right illustrate both a code example and a preview of the box that results from it, as well as the box's configuration fields.

Shortcode:

[box id="Box_Title" boxtype="simple-vertical-image-small" class="rstpl-box-vertical-image-small"] [image]<img src="https://cdn.rsjoomla.com/RSBaron3x/templates/rsbaron/images/sampledata/images/180x180-4.jpg" alt="" />[/image] [title]Box Title[/title] [subtitle]Enter the subtitle of this box[/subtitle] [text]This is sample content. In order to change this text please type in the text box the content you wish to be displayed.[/text] [/box]

Back to top

Horizontal Image (Image, title, text, price, button)

Customization options:

• Image Url: Provide the path to the image that will be displayed inside the box
• Box Title: Specify the box's title
• Text: Add some text that will be displayed inside the box
• Price: Specify a price for the displayed item
• Button Label: Defaulted to Read More - Set a label for the button
• Button Link: Defaulted to http://www.rsjoomla.com/ - Set a link (URL) for the button's action

The images to the right illustrate both a code example and a preview of the box that results from it, as well as the box's configuration fields.

Shortcode:

[box id="Box_Title" boxtype="simple-horizontal-image" class="rstpl-box-image-left m-bot-large"] [image]<img src="https://cdn.rsjoomla.com/RSBaron3x/templates/rsbaron/images/sampledata/images/180x180-1.jpg" alt="" />[/image] [title]Box Title[/title] [price]9^.99[/price] [text]This is sample content. In order to change this text please type in the text box the content you wish to be displayed.[/text] [button href="http://www.rsjoomla.com/"]Read More[/button] [/box]

Back to top

Horizontal Image Small (Image, title, text)

Customization options:

• Image Url: Provide the path to the image that will be displayed inside the box
• Link: Set an URL to which the user will be redirected when clicking on the box's title
• Box Title: Specify the box's title
• Text: Add some text that will be displayed inside the box

The images to the right illustrate both a code example and a preview of the box that results from it, as well as the box's configuration fields.

Shortcode:

[box id="Box_Title" boxtype="simple-horizontal-image-small" class="rstpl-box-image-left-small m-bot-small"] [image]<img src="https://cdn.rsjoomla.com/RSBaron3x/templates/rsbaron/images/sampledata/images/100x100-2.jpg" alt="" />[/image] [title]Box Title[/title] [link]http://www.rsjoomla.com/[/link] [text]This is sample content. In order to change this text please type in the text box the content you wish to be displayed.[/text] [/box]

Back to top

Full width horizontal Icon (Icon, title, text, button)

Customization options:

• Icon: Choose one of 450 icons that will be displayed inside the box
• Box Title: Specify the box's title
• Text: Add some text that will be displayed inside the box
• Button Label: Defaulted to GET A QUOTE - Set a label for the button
• Button Link: Defaulted to http://www.rsjoomla.com/ - Set a link (URL) for the button's action

The images to the right illustrate both a code example and a preview of the box that results from it, as well as the box's configuration fields.

Shortcode:

[box id="Box_Title" boxtype="full-width-horizontal-icon" class="rstpl-box-full-horizontal-icon rstpl-padding"] [icon]icon-bubbles2[/icon] [title]Box Title[/title] [text]This is sample content. In order to change this text please type in the text box the content you wish to be displayed.[/text] [button href="http://www.rsjoomla.com/"]GET A QUOTE[/button] [/box]

Back to top

Vertical Icon (Icon, title, text, button)

Customization options:

• Icon: Choose one of 450 icons that will be displayed inside the box
• Box Title: Specify the box's title
• Text: Add some text that will be displayed inside the box
• Button Label: Defaulted to Read more - Set a label for the button
• Button Link: Defaulted to http://www.rsjoomla.com/ - Set a link (URL) for the button's action

The images to the right illustrate both a code example and a preview of the box that results from it, as well as the box's configuration fields.

Shortcode:

[box id="Box_Title" boxtype="simple-vertical-icon" class="rstpl-box-vertical-icon rstpl-padding"] [icon]icon-bubbles2[/icon] [title]Box Title[/title] [text]This is sample content. [/text] [button href="http://www.rsjoomla.com/"]Read more[/button] [/box]

Back to top

Horizontal Icon (Icon, title, text)

Customization options:

• Icon: Choose one of 450 icons that will be displayed inside the box
• Box Title: Specify the box's title
• Text: Add some text that will be displayed inside the box

The images to the right illustrate both a code example and a preview of the box that results from it, as well as the box's configuration fields.

Shortcode:

[box id="Box_Title" boxtype="simple-horizontal-icon" class="rstpl-box-horizontal-icon-left m-bot-large"] [icon]icon-bubbles2[/icon] [title]Box Title[/title] [text]This is sample content. In order to change this text please type in the text box the content you wish to be displayed.[/text] [/box]

Back to top

Personal (Image, title, subtitle, text, 5 buttons)

Customization options:

• Image Url: Provide the path to the image that will be displayed inside the box
• Link: Set an URL to which the user will be redirected when clicking on the box's image
• Box Title: Specify the box's title
• Box Subtitle: Add some text that will be displayed below the box's title
• Text: Add some text that will be displayed inside the box
• Social Links: 4 fully customizable buttons, you can set up an icon, URL and HTML attributes for each of them. Defaulted to Facebook, Twitter, LinkedIn and Google+ (icon + URL). The default additional attributes are target="_blank" title="Social link"

The images to the right illustrate both a code example and a preview of the box that results from it, as well as the box's configuration fields.

Shortcode:

[box id="Box_Title" boxtype="personal" class="rstpl-box-personal m-bot-large"] [image]<img src="https://cdn.rsjoomla.com/RSBaron3x/templates/rsbaron/images/sampledata/images/200x200-4.jpg" alt="" />[/image] [title]Box Title[/title] [link]http://www.rsjoomla.com/[/link] [subtitle]Enter the subtitle of this box[/subtitle] [text]This is sample content. [/text] [social href="http://www.facebook.com/" target="_blank" title="Social link"]icon-facebook2[/social] [social href="http://www.twitter.com/" target="_blank" title="Social link"]icon-twitter2[/social] [social href="http://www.linkedin.com/" target="_blank" title="Social link"]icon-linkedin[/social] [social href="https://plus.google.com/" target="_blank" title="Social link"]icon-google-plus3[/social] [/box]

Back to top

Featured (title, text, price)

Customization options:

• Price: Specify a price for the displayed item
• Box Title: Specify the box's title
• Text: Add some text that will be displayed inside the box
• Link: Set an URL to which the user will be redirected when clicking on the box's title

The images to the right illustrate both a code example and a preview of the box that results from it, as well as the box's configuration fields.

Shortcode:

[box id="Box_Title" boxtype="featured" class="rstpl-box-featured rstpl-padding"] [title]Box Title[/title] [link]http://www.rsjoomla.com/[/link] [price]9^.99[/price] [text]This is sample content. In order to change this text please type in the text box the content you wish to be displayed.[/text] [/box]

Back to top

Pricing (Title, price, text, features, button)

Customization options:

• Box Title: Specify the box's title
• Price: Specify a price for the displayed item
• Text: Add some text that will be displayed inside the box
• Feature 1: Specify a characteristic of the displayed item. Leave blank to remove from the box.
• Feature 2: Specify a characteristic of the displayed item. Leave blank to remove from the box.
• Feature 3: Specify a characteristic of the displayed item. Leave blank to remove from the box.
• Feature 4: Specify a characteristic of the displayed item. Leave blank to remove from the box.
• Feature 5: Specify a characteristic of the displayed item. Leave blank to remove from the box.
• Button Label: Defaulted to Buy Now - Set a label for the button
• Button Link: Defaulted to http://www.rsjoomla.com/ - Set a link (URL) for the button's action

The images to the right illustrate both a code example and a preview of the box that results from it, as well as the box's configuration fields.

Shortcode:

[box id="Box_Title" boxtype="price" class="rstpl-box-pricing"] [title]Box Title[/title] [price]9^.99[/price] [text]This is sample content. [/text] [button href="http://www.rsjoomla.com/"]Buy Now[/button] [feature]Feature 1[/feature] [feature]Feature 2[/feature] [feature]Feature 3[/feature] [/box]

Back to top

Pricing highlight (Title, price, text, features, button)

Customization options:

• Box Title: Specify the box's title
• Price: Specify a price for the displayed item
• Text: Add some text that will be displayed inside the box
• Feature 1: Specify a characteristic of the displayed item. Leave blank to remove from the box.
• Feature 2: Specify a characteristic of the displayed item. Leave blank to remove from the box.
• Feature 3: Specify a characteristic of the displayed item. Leave blank to remove from the box.
• Feature 4: Specify a characteristic of the displayed item. Leave blank to remove from the box.
• Feature 5: Specify a characteristic of the displayed item. Leave blank to remove from the box.
• Button Label: Defaulted to Buy Now - Set a label for the button
• Button Link: Defaulted to http://www.rsjoomla.com/ - Set a link (URL) for the button's action

The images to the right illustrate both a code example and a preview of the box that results from it, as well as the box's configuration fields.

Shortcode:

[box id="Box_Title" boxtype="price-highlight" class="rstpl-box-pricing highlight"] [title]Box Title[/title] [price]9^.99[/price] [text]This is sample content. [/text] [button href="http://www.rsjoomla.com/"]Buy Now[/button] [feature]Feature 1[/feature] [feature]Feature 2[/feature] [feature]Feature 3[/feature] [/box]

Back to top

---

One person found this article helpful.

---

You Should Also Read

Accordion

Adding Shortcodes within Bootstrap Grid System

Carousel

Tabs