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