Some Customizr layout examples

⚠️ Code snippets might not be compatible with the latest version of your theme. Always use a child theme to customize your theme, and test your code on a staging website before migrating to production.

Nicolas showed you the basics of the Bootstrap 2.3.2 layout here. In this snippet, we’ll show you some concrete examples of layouts—first simple images, then more complex layouts.

 

Simple image layouts

If you have an image gallery to show off, you can use Customizr’s gallery format. However, what if you simply want to put a row of images inside your page or post? Here’s how:

 

A responsive row of four images

This example shows how to add 4 separate images. When they “flow” on smaller screens, each image will stack on top of the others equally. (Try it! Resize your browser window and watch what happens.)

A random image
A random image
Another random image
Another random image
Yet another random image
Yet another random image
A final random image
A final image

The html looks like this:

A random image
A random image
Another random image
Another random image
Yet another random image
Yet another random image
A final random image
A final image

 

A responsive row of three images

This example shows how to add 3 separate images. When they “flow” on smaller screens, each image will stack on top of the others equally.

A random image
A random image
Another random image
Another random image
Yet another random image
Yet another random image

The html looks like this:

A random image
A random image
Another random image
Another random image
Yet another random image
Yet another random image

 

A responsive row of six images

This example shows how to add 6 separate images. When they “flow” on smaller screens, each image will stack on top of the others equally.

A random image
A random image
Another random image
Another random image
Another random image
Another random image
Another random image
Another random image
Another random image
Another random image
Yet another random image
Yet another random image

The html looks like this:

A random image
A random image
Another random image
Another random image
Another random image
Another random image
Another random image
Another random image
Another random image
Another random image
Yet another random image
Yet another random image

 

Instructions for use

 

Where to copy/paste this html? To use these layouts in a post or page, copy and paste the code into the WordPress post/page HTML editor.

Use the “Text” tab of your WordPress editor to do this editing, not the “Visual” tab:

HTML editor

Replace these images with images from your site. For each image:

  1. Delete the <a href="http … part of the html (or the part, if you added an image with captions);
  2. Put your cursor where you have just deleted;
  3. Click the “Add Media” button (just above the editor buttons in your page edit screen);
  4. Set the alignment, the link, and the size of the image as you want them to be in the “Attachment Display Settings” at the bottom-right of the insert media panel. If you are using Customizr’s lightbox function, make sure that the “Link to” dropdown is set to Media file.

Repeat for each image.

Once you have added your own images (rather than links to random pictures, as I have above), Customizr’s lightbox effect will work on them (if you have it activated).

As you can see from the html code used to generate these rows of images, you simply need to make sure that the “span” numbers add up to 12. So for each row, you can have 6 x span2s (for 6 images), 4 x span3s (for 4 images), 3 x span4s (for 3 images) or 2 x span6s (for 2 images). Or you can combine different-sized images with span3 + span9, or span8 + span4, etc.

The possibilities are endless. More info here.

 

More creative layouts: a row of three products, with buttons

As you get the hang of things, you can get more creative. For example, you could create a page that has separate grid elements that are shaded, with product details in each. Again, as they are using the underlying Bootstrap, they are responsive.

Product detail

A random image

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Buy Now More Details

Product detail

A random image

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Buy Now More Details

Product detail

A random image

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Buy Now More Details

The html looks like this:

Product detail

A random image

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Buy Now More Details

Product detail

A random image

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Buy Now More Details

Product detail

A random image

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Buy Now More Details

For the shading, vertical spacing, etc. and a hover effect, you will also need the following CSS:

.my-product-grid [class*="span"] {
  background-color: #eee;
  text-align: center;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
  min-height: 20px;
  line-height: 20px;
  border: 2px solid #ccc;
  margin-top: 0px;
  margin-bottom: 20px;
}
.my-product-grid [class*="span"]:hover {
  background-color: #ddd;
}
.my-product-grid [class*="span"] [class*="span"] {
  background-color: #ccc;
}
.my-product-title {
  font-weight: 600;
  font-size: 1.3em;
  line-height: 2em;
}

All images CC-BY-SA. Author details: here.

Leave a Reply to Diana Cancel reply

Your email address will not be published. Required fields are marked *

24 thoughts on “Some Customizr layout examples”