Layout

Column Heights & Adding Background Classes

To create a nice neat layout, adjacent columns in the "Boutique" theme will match eachothers height.
You can still add "white", "black" or "highlight" classes to your columns to end up with the coloured backgrounds and keep their equal heights:

add-class.jpg

Tweaking Image Behaviour

Images can remain at their full size in all responsive views, or shrink to fit the columns on smaller screen sizes.  To make images flexible with column width, simply add the class of "flex".  See an example in the four column template.

add-flex-class.png

Centred Images

To align an image in an image block centrally, you can use add the .centred class to it by clicking on the block, choosing "Design" and adding the "centred" CSS class in the last tab along the top:

Centred Image

Coloured Boxes

To create an area with a coloured background and white text like this one, simply:

  1. Add your content block
  2. Click on the block in edit mode and choose "Design"
  3. In the popup, click the CSS tab top right
  4. Enter the CSS class "highlight"

Page Types

The Boutique theme supports various page types which allow you to have left and right sidebars and one, two, three or four column pages etc

Please see the page types section for more information.

White Boxes

You can create a white box with black text simply by adding the class of "white" in a similar way to the coloured box.

Black Boxes

You can create a black box with white text simply by adding the class of "black" in a similar way to the coloured box.