Bentobox Demo Content

The frontpage of the BentoBox demo features some example content to give you an idea of some of the things that can be done with the template. While these are just examples, we have listed the code showing how some of the module content layouts were achieved.

Listed below are a couple examples of content presentations with step by step instructions on how to set up similar for your own site using BentoBox.

Rhuk's Mac Goodies - Left Aligned Images with Links and Text

This section features a custom module with left aligned images and links and text wrapped to the side. To set up a module like this one, follow these steps:

- Create the new module from your Admin Control Panel by going to Modules > Site Modules and selecting the "New" button in the top right corner.

- Set the Module Position to your desired location (the "Left" module position is used for this content in the demo).

- Copy and paste in the content code that is listed below in the blue code block into your Custom Output:Content section in the module configuration. This content code is exactly the same code used in that module in the demo.

Be sure to "disable" your WYSIWYG editor before entering the following raw code by going to Site > Global Configuration and set to "No Editor - Editor.

<a href="#"><img src="images/stories/mac_goodies2.jpg" alt="Mac Goodies" 
align="left" style="margin-right:10px;border:0"  /></a><a href="#">
<b>SnapNDrag</b></a><br />Quick and Easy custom screenshots.
<div class='clr'></div><br />

<a href="#"><img src="images/stories/mac_goodies3.jpg" alt="Mac Goodies" 
align="left" style="margin-right:10px;border:0"  /></a><a href="#">
<b>LittleSecrets</b></a><br />The perfect way to store your secrets.
<div class='clr'></div><br />

<a href="#"><img src="images/stories/mac_goodies4.jpg" alt="Mac Goodies" 
align="left" style="margin-right:10px;border:0"  /></a><a href="#">
<b>CSSEdit 2.0</b></a><br />The ultimate in CSS development.
<div class='clr'></div>

Closeout Deals - Centered image with Text Below

This section features a module that contains a centered image with text positioned below. To achieve this effect on your own module content, follow these steps below:

- Create the new module from your Admin Control Panel by going to Modules > Site Modules and selecting the "New" button in the top right corner.

- Set the Module Position to your desired location (the "Left" module position is used for this content in the demo).

- Copy and paste in the content code that is listed below in the blue code block into your Custom Output:Content section in the module configuration. This content code is exactly the same code used in that module in the demo.

Be sure to "disable" your WYSIWYG editor before entering the following raw code by going to Site > Global Configuration and set to "No Editor - Editor.

<center><img src="images/stories/monitor_sale.png" alt="monitor sale" />
</center>
<p>Take advantage of this great closeout deal on the Apple 30" Cinema 
Display, now only <b>$1899</b></p>