Blocks

To create pages, you simply select blocks, populate the content and then drag them up and down to reorder the page.

Depending on your version of block builder, the most common blocks you will find are the following

Pure Smiles CMS. Browser size

Text Blocks

Single column text

2 column text

Single Column Text

Double Column Text

These will be your most commonly used blocks. When you select a text block you will see the following Editor. The editor has a variety of buttons of which most should be self explanatory but click here to understand more about our editor here.

The editor has an image function which can be very useful for adding small or simple images within your text areas. However we strongly advise using the image blocks for adding larger images, especially if you want to lay them out as grids. The image blocks are designed to automatically crop and resize on desktop and mobile versions ensuring that your page flows correctly on all devices. Images added via the editor don't always resize perfectly on all devices. Always text your page on desktop and mobile when you add images to the editor.

Text Editor used in our CMS

Text and Image Blocks

These come in 2 styles - left image and right text and right image and left text.

Left image and right text

Right image and left text

Left or Right Image with Text

Image - Simply drag or click to upload your image and the then select the size from Small, Medium or Large. Large images are approx 50% the width of the column. Medium 35% and small 25%. On mobile, the images are all designed to be full width of the screen above the text.

Text - You would use the text editor the same way you would for the Text Blocks.

Image Blocks

Image Grids - 2 images, 3 images and 4 images.

All image blocks follow the same approach when adding content.

2 images in a row

3 Images in a row

4 images in a row

Example of 2 images in a row block.

Using these blocks you can simply drag or upload your image and crop. The image sizes are predefined but you can change the height of the images. If you change the height click the 'Update Image' button.

The width of the images cannot change as the size is calculated based on the width of your site and the spacing between each image is calculated precisely.

Full Width Images - Fixed Height and Adjustable Height

Full Width Image

Fixed Height

Full Width Image

Any Height

Full Width Image Any Height

Full Width Image - Any Height

The block has a predefined height already set but after you've uploaded your image you can change the height of the image by changing the value in the height box. Remember to click Update Images after you've made any changes to the height. The width of the image is predefined based on the size of your websites page.

Full Width Image Fixed Height

Full Width Image - Fixed Height

If you have a big image and you want to show all of it you can use this block. You can change the width of the image and it's alignment based on the layout you want. If you want to display a caption under the image you can add it in the caption field.

Galleries

Gallery with PopUp

Slider Gallery

Gallery with PopUp

Last updated