Create an Image Box

This theme comes with two image box styles, both of which use HTML snippets to get you started with the structure of either one. In your original downloaded theme package is a folder named “Snippets”. Inside this you will find a variety of text files, but this tutorial is for the image box. The two styles we have to work with look like this:

Image Box Style 1 – No background

image box1

Image Box Style 2 – With a Background Colour

image box2

With snippets, you simply copy and paste into the area you plan to showcase them, whether in a page or a text widget.

Adding to Your Page Content

This is a method where you paste your code into your page editor, using the “Text” tab for adding/modifying HTML code of your content. But the first thing we need to do is create a container for our image boxes. So for example, if we want to create a 3 column image box layout, we will be using some “Bootstrap” code because this theme uses Bootstrap to achieve our layouts and responsiveness of our theme.

<div class="row">  <div class="col-md-4">     Your image box snippet code goes here  </div>  <div class="col-md-4">     Your image box snippet code goes here  </div>  <div class="col-md-4">     Your image box snippet code goes here  </div> </div>

The code above will give you the container we need to give us three(3) responsive columns. The col-md-4 class means that our Bootstrap layout is based on 12 columns (grid columns), so if we divide 3 columns into 12 grid columns, we get 4 (which is what the class col-md-4 means). If we wanted to have 4 image box columns, then we would then do 4 into 12 grid columns which gives us 3. So our class would then be col-md-3.

Style 1 Image Box

In the above code, you will see “Your image box snippet code goes here” which is where we will be copying and pasting the following code:

<div class="image-box"> <p><img src="http://path-to-your-image.jpg" alt="Photo" /></p> <div class="image-box-text"> <h3>An Image Box</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore velit esta magna aliquam erat volutpat.</p> </div> </div>

All you need to do now is replace the portions of that code with your own content. Start with the image source which is the full URL link to your image. Make sure you have your image uploaded and make note of it’s File URL, which you can get by clicking on the “Edit” link for the image when uploading.

Next, replace the “An Image Box” with your own caption title. Then, you can change the caption content to your own.

Repeat for each image box you create.

Style 2 Image Box

If you want to use the other style, then use this code:

<div class="image-box-bg"> <p><img src="http://path-to-image.jpg" alt="Photo" /></p> <div class="image-box-text"> <h3>An Image Box</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore velit esta magna aliquam erat volutpat.</p> </div> </div>

The only difference between the two is that the image box div container has a slight different class=”image-box-bg” instead of class=”image-box”.

Using Text Widgets for Image Boxes

If you want to use text widgets for image boxes, which can be easier if you have sidebars available, is to add the image box code to the text widget. In this case, you do not need to use the image box column code as mentioned at the start of this tutorial. You can just add the image box style 1 or 2 code to the widget. So for example, you can put an image box in the Top 1, Top 2, Top 3, and/or Top 4 sidebar positions. The columns are already built into the sidebars, so you just need the image box code.