Box

The System-RSTemplate! plugin brings in some pre-defined, fully customizable stylized containers. It gets installed along with the template, and should be published automatically. If you are to experience any issues with this feature, first make sure to check that the plugin didn't get unpublished for whatever reason.

To access the Shortcodes feature, click on the Shortcodes RSTemplate! button found at the bottom side of the text editor that you are using (available for Joomla! Content articles, Custom HMTL modules, etc. ). This functionality is employed through the Button - RSTemplate! Shortcodes plugin which also gets installed along with the template and is published automatically. If the button does not show up in your editor, make sure that the plugin didn't get unpublished.



There are 3 types of boxes available for use, each having multiple styles to choose from: Icons, Images and Specials. In this article we will provide explanations for each of the styles, including information such as: the elements each style includes (titles, images, buttons, etc.), screenshots with their default appearance, shortcodes examples and how to edit each element.



Article Contents(click to jump to section)





Full width dark horizontal image - Images



  • Title: The box's title
  • Text: A description for the presented item
  • Image: An image of the presented item
  • Button: A linkable button. You can customize its caption and the page it links to


In the text area below you can find a code example for the box presented in this section. The image in the gallery to the right illustrates a preview of the result.


Shortcode:




Back to contents



Full width dark vertical image - Images



  • Title: The box's title
  • Text: A description for the presented item
  • Image: An image of the presented item
  • Button: A linkable button. You can customize its caption and the page it links to


In the text area below you can find a code example for the box presented in this section. The image in the gallery to the right illustrates a preview of the result.


Shortcode:




Back to contents



Simple vertical image - Images



  • Title: The box's title
  • Text: A description for the presented item
  • Image: An image of the presented item
  • Button: A linkable button. You can customize its caption and the page it links to


In the text area below you can find a code example for the box presented in this section. The image in the gallery to the right illustrates a preview of the result.


Shortcode:




Back to contents



Simple horizontal image - Images



  • Title: The box's title
  • Text: A description for the presented item
  • Image: An image of the presented item


In the text area below you can find a code example for the box presented in this section. The image in the gallery to the right illustrates a preview of the result.


Shortcode:




Back to contents



Simple vertical icon - Icons



  • Title: The box's title
  • Text: A description for the presented item
  • Icon: An icon that will be displayed inside the container
  • Button: A linkable button. You can customize its caption and the page it links to


In the text area below you can find a code example for the box presented in this section. The image in the gallery to the right illustrates a preview of the result.


Shortcode:




Back to contents



Simple horizontal icon - Icons



  • Title: The box's title
  • Text: A description for the presented item
  • Icon: An icon that will be displayed inside the container


In the text area below you can find a code example for the box presented in this section. The image in the gallery to the right illustrates a preview of the result.


Shortcode:




Back to contents



Personal - Specials



  • Image / Button: An image + button combination. Set and image and a link that the user will be redirected to when clicking on the image
  • Title: The box's title
  • Text: A description for the presented item
  • 4 x Social buttons: By default, 4 social links buttons are included: Facebook, Twitter, LinkedIn and Google Plus.
  • Plus (+) button: Linkable button


In the text area below you can find a code example for the box presented in this section. The image in the gallery to the right illustrates a preview of the result.


Shortcode:




Back to contents



Featured - Specials



  • Box Background: This is an image displayed as the box's background
  • Title: The box's title
  • Button: A linkable button. Its caption is defaulted to READ MORE


In the text area below you can find a code example for the box presented in this section. The image in the gallery to the right illustrates a preview of the result.


Shortcode:




Back to contents



Price - Specials



  • Title: The box's title
  • Text: A description for the presented item
  • Price: The presented item's price
  • Features 1-5: 5 fields in which you can specify some of the presented product's features
  • Button: A linkable button. Its caption is defaulted to BUY NOW


In the text area below you can find a code example for the box presented in this section. The image in the gallery to the right illustrates a preview of the result.


Shortcode:




Back to contents



Honeycomb images - Specials



  • 10 x Image / Link: 10 linkable images shaped as honeycombs


In the text area below you can find a code example for the box presented in this section. The image in the gallery to the right illustrates a preview of the result.


Shortcode:




Back to contents



How to edit the items


Each item can be edited by right-clicking on it and choosing Edit. The possibility to delete them is also available, by clicking on Remove.


Editing a Title:



Editing a Box Text:



Editing an Image / Background:



Editing a Button:



Back To Top

Note: Although we've only illustrated how editing the items is done for the Full width dark horizontal image container, the very same process is applicable for the rest of the box types as well.

Was this article helpful?

Yes No
Sorry about that

You Should Also Read

Accordion

Carousel

Adding Shortcodes within Bootstrap Grid System

Tabs