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
Another random image
Yet another random image
A final image
The html looks like this:
A random image
Another random image
Yet another 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
Another random image
Yet another random image
The html looks like this:
A random image
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
Another random image
Another random image
Another random image
Another random image
Yet another random image
The html looks like this:
A random image
Another random image
Another random image
Another random image
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:
Replace these images with images from your site. For each image:
Delete the
part of the html;
Put your cursor where you have just deleted;
Click the “Add Media” button (just above the editor buttons in your page edit screen).
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
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
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
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
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
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
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:
All images CC-BY-SA. Author details: here.
The post Some Customizr layout examples appeared first on Themes & Co.