Box

Button - RSTemplate! Box


This plugin allows you to add a customizable box. By clicking on the Box RSTemplate! 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 14 predefined types of boxes. In this article we will describe how each of them needs to be configured:




Top Featured Dark Strong / Medium / Light (Icon, title, text, button)


This type of box includes the following customizable fields:


  • Icon: Choose one icon out of 450
  • Box Title: Set a title for the box
  • Text: Add some text that will be displayed inside the box
  • Button Label: The button's label
  • Button Link: The button's link (URL). Both relative (index.php/mypage) and absolute (http://www.mywebsite.com/index.php/mypage) paths can be used.


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 (generated using the Strong version).


Shortcode:




Back to top

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


This type of box includes the following customizable fields:


  • Icon: Choose one icon out of 450
  • Box Title: Set a title for the box
  • Text: Add some text that will be displayed inside the box
  • Button Label: The button's label
  • Button Link: The button's link (URL). Both relative (index.php/mypage) and absolute (http://www.mywebsite.com/index.php/mypage) paths can be used.

The images in the gallery 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:




Back to top

Full width dark vertical (Title, button, image)


This type of box includes the following customizable fields:



  • Box Title: Set a title for the box
  • Button Label: The button's label
  • Button Link: The button's link (URL). Both relative (index.php/mypage) and absolute (http://www.mywebsite.com/index.php/mypage) paths can be used.
  • Image Url: The path to the image file. Both relative (images/picture.jpg) and absolute (http://www.mywebsite.com/images/picture.jpg) paths can be used.


The images in the gallery 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:




Back to top

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


This type of box includes the following customizable fields:



  • Image Url: The path to the image file. Both relative (images/picture.jpg) and absolute (http://www.mywebsite.com/images/picture.jpg) paths can be used.
  • Box Title: Set a title for the box
  • Text: Add some text that will be displayed inside the box
  • 2 x Button Label: The button's label
  • 2 x Button Link: The button's link (URL). Both relative (index.php/mypage) and absolute (http://www.mywebsite.com/index.php/mypage) paths can be used.


The images in the gallery 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:




Back to top

Full width dark vertical (Icon, text)


This type of box includes the following customizable fields:


  • Icon: Choose one icon out of 450
  • Text: Add some text that will be displayed inside the box


The images in the gallery 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:




Back to top

Vertical (Title, image, text)


This type of box includes the following customizable fields:


  • Box Title: Set a title for the box
  • Image Url: The path to the image file. Both relative (images/picture.jpg) and absolute (http://www.mywebsite.com/images/picture.jpg) paths can be used.
  • Text: Add some text that will be displayed inside the box


The images in the gallery 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:




Back to top

Vertical (Icon, title, text, button)


This type of box includes the following customizable fields:



  • Icon: Choose one icon out of 450
  • Box Title: Set a title for the box
  • Text: Add some text that will be displayed inside the box
  • Button Label: The button's label
  • Button Link: The button's link (URL). Both relative (index.php/mypage) and absolute (http://www.mywebsite.com/index.php/mypage) paths can be used.


The images in the gallery 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:




Back to top

Horizontal (Icon, title, text)


This type of box includes the following customizable fields:



  • Icon: Choose one icon out of 450
  • Box Title: Set a title for the box
  • Text: Add some text that will be displayed inside the box


The images in the gallery 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:




Back to top

Horizontal (Image, title, text)


This type of box includes the following customizable fields:



  • Image Url: The path to the image file. Both relative (images/picture.jpg) and absolute (http://www.mywebsite.com/images/picture.jpg) paths can be used.
  • Box Title: Set a title for the box
  • Text: Add some text that will be displayed inside the box


The images in the gallery 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:




Back to top

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


This type of box includes the following customizable fields:


  • Image Url: The path to the image file. Both relative (images/picture.jpg) and absolute (http://www.mywebsite.com/images/picture.jpg) paths can be used.
  • Box Title: Set a title for the box
  • Subtitle: Set a subtitle for the box (displayed below the title)
  • Text: Add some text that will be displayed inside the box
  • Facebook button: Add a link to your Facebook page
  • Twitter button: Add a link to your Twitter page
  • LinkedIn button: Add a link to your LinkedIn page
  • Google+ button: Add a link to your Google+ page
  • Any website button: Add a link to any page

By clicking on any of the social links icons, a modal containing all of the available icons will be opened, where you can select any of them. Also, you can link these buttons to any webpage, not just to social networks pages like Facebook.


Shortcode:




Back to top

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


This type of box includes the following customizable fields:



  • Box Title: Set a title for the box
  • Price: Set a price for a product that you wish to showcase
  • Text: Add some text that will be displayed inside the box
  • 5x Features: Set some features for the product you wish to showcase. Leaving any of the 5 feature fields empty will remove that feature entirely from the box
  • Button Label: The button's label
  • Button Link: The button's link (URL). Both relative (index.php/mypage) and absolute (http://www.mywebsite.com/index.php/mypage) paths can be used.



The images in the gallery 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:




Back to top

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


This type of box includes the following customizable fields:


  • Box Title: Set a title for the box
  • Price: Set a price for a product that you wish to showcase
  • Text: Add some text that will be displayed inside the box
  • 5x Features: Set some features for the product you wish to showcase. Leaving any of the 5 feature fields empty will remove that feature entirely from the box
  • Button Label: The button's label
  • Button Link: The button's link (URL). Both relative (index.php/mypage) and absolute (http://www.mywebsite.com/index.php/mypage) paths can be used.

The images in the gallery 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:




Back to top

IMPORTANT!:

  • Make sure to publish both the System - RSTemplate! and the Button - RSTemplate! Box plugins in order to have this functionality available in your editor. This can be done in Extensions >> Plugin Manager.
  • For this feature to work correctly, you need to set up your editor to use <br /> tags instead of <p> tags when creating new lines. Also, you should set up the editor to use a raw encoding for HMTL entities.

One person found this article helpful.


Was this article helpful?

Yes No
Sorry about that

You Should Also Read

Carousel

Accordion

Adding Shortcodes within Bootstrap Grid System

Tabs