Some Customizr layout examples


Note :This snippet works only with the Classical style option. The Classical style option can be enabled in Appearance > Customize > Advanced > Theme Style. More about the theme style option here


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 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 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:

 

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 ... </a> part of the html (or the [caption align= ... [/caption] 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:

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.


Related Snippets you may also like


24 thoughts on “Some Customizr layout examples

  • Andre Schmidt

    Hi, i copy and past the CSS in my Child Theme style.css file, but it do not work.
    Can somewhere help me?

  • Diana

    Hello…thanks for this amazing theme…Im not pretty familiar with the hook stuff but now im learning…so

    Im trying to print different thumbnail sizes in the grids for a different pages.
    So i have a page template for blog, and and archive-product for displaying a grid with products.

    This both using the same sizes for the thumbnail, but I need to customize the sizes for the product page beacouse its becoming too big.

    I think I can add an image_size in my child functions, but how can i achieve that custom size to show in my product page?
    thanks in advanced

  • Sandra Gardiner

    Nicholas, which part of this code, do I need to delete and re-add for images,
    if I want to use this code on my site.

    [caption id="" align="aligncenter" width="600"] A random image[/caption]

    [caption id="" align="aligncenter" width="600"] Another random image[/caption]

    [caption id="" align="aligncenter" width="600"] Another random image[/caption]

    [caption id="" align="aligncenter" width="600"] Another random image[/caption]

    [caption id="" align="aligncenter" width="600"] Another random image[/caption]

    [caption id="" align="aligncenter" width="600"] Yet another random image[/caption]

      • Sandra Gardiner

        Thanks Nicolas, for the response.
        I think I figure out where to delete, in order to add my pictures in the grids code. I am trying to make a featured page that has a link to the categories on my site. I Tried using the featured option in the theme but face the same issues like other users posted. I want if I have a featured image label Pet Toys, when a customer clicks on that image, it takes them to the page with Pet Toys. The featured option in the theme, will only link to the same page. meaning, even though I create four feature image, and all four image are link to four different pages. when that image is click it goes to the same page. You can check it out on my site at http://www.DoggieOutfit.com.

  • Teresa

    Hello, first of all, this template is great …
    I’m trying to replicate the snipet “A responsive row of three images” but the last image is placed below the other.

    I am creating three rows and in the middle column I want to nest a responsive row of three images

    This is the code:



    Column 1
    Column 2

    Columna 3


    I do not know where the error
    Thank you for your help

    • Nicolas

      Hi Teresa,
      Here’s a example of code to create a nested group of columns inside another group :

      Did this help?

      • Teresa

        … is now perfect
        the error was in the div.span12, and I think it was also causing that WP create empty paragraph tags (<p> </p>) automatically

        Thank you very much for your help
        This template has a million of possibilities…

        Regards

  • SHARON SPRAGUE

    Also wanted to add, I wanted this to show up ABOVE my featured pages row on the Front Page, so I added this code through the TEXT widget for the sidebar. If I add it on the page itself, it sends it to the bottom and that’s not what I want. So, keep in mind, I’m adding this via the widget.

  • SHARON SPRAGUE

    Love this theme. Best ever! Great snippet, too. I set up the responsive row of 3, it looks great, but how do I get the images linked to their media file? I just want it to either take it to a certain page or open it for a bigger view. Probably more so the latter. My site is http://www.oksilly.com by the way for reference.

  • zach

    Thenx for replay ElectricFeet. I actuallly ment to keep slider and featured pages where they are, and just to add another picture using wordpress Edit page, Add media.. but just dont know how to make that picture full width.

  • zach

    Hi to all,
    my intention is to add full width (just like slider), responsive single image, trough a post on a static front page, below featured pages.
    Shall I do this using the “Text” tab of my WordPress editor, ot maybe “image details, advanced, image CSS Class…” ??
    Please help

    • ElectricFeet Post author

      Hi Zach. When the slider has just one image, with no call to action or text, it becomes that single image that you want. It only remains to move it below the featured pages … or move the featured pages above the slider. There’s a snippet to move the featured pages above the slider here. You need the section “Case study : switching the positions of the slider and the featured pages on front page”. Read How to Customize Customizr first, if you’ve never set up a functions.php file in a child theme. If you have problems, please post on the WordPress Customizr forum. Comments aren’t a good place for problem solving.

  • Alan

    Is there a way to create page that list out the posts in the format of “More creative layouts: a row of three products, with buttons”
    i.e. each post display itself inside a box and then after 3 post the 4 post goes to the next row?

    So like your example for each new product that I post in a new post it shows up in a grid box….

    Is there any way to do this?

    Thanks in advance

    • ElectricFeet Post author

      Hi Alan. That would require quite a lot of coding I think. You’d need to rewrite some of the functionality in class-content-post_list.php. It’s beyond the scope of this snippet.

  • WEndy Kirkman

    I am designing the above website for a customer. I like the clean feel etc. but I really want my home page to show content above the featured pages images. Is this possible?

  • Geoffrey Hughes

    I just want to know, with this template, how to place an ICON and TITLE together in the header. At the moment, it only permits one or the other, but not both. Thank you.

Comments are closed.