Content block types in detail

This page demonstrates the use of all the different types of "content blocks" which you can use to build the pages or news posts on your website. On this page the different block types always start with a numbered heading so you can see where one block ends and the next begins.

1. Text only

This type of content block is a "text only" content block. It contains only text, with no space for images. It's the default content block, and is for use whenever you just have a single block of text to add.

This is my foot.
This is my foot.

2. Image right

This type of content block is an "image right" content block. It contains an area for text (in the same way that the "text only" block does) but it also has space for a single image to be uploaded. This image is presented to the right of the column of text. The image is automatically resized to 340px wide.

It's possible to give the image a "caption" and a "hyperlink". The caption appears below the image. The "hyperlink" is a location that the user is sent to if they click the image.

Text in the content area that extends below the image will wrap slightly beneath an image right.

3. Image left

This is an "image left" block. Like an image right block there is space for text to be entered as well as for an image to be uploaded.  It's possible to give the image a "caption" and a "hyperlink". The caption appears below the image. The "hyperlink" is a location that the user is sent to if they click the image. This example does not have a caption or a hyperlink set for the image.

In an "image left" block the image appears to the left of the text. The image is resized automatically to be 220px wide, this is slightly smaller than the image used for an "image right" block.

4. Blockquote

This is blockquote block. It is particularly useful to draw attention to a quotation or testimonial.

5. One image

Images in a one image block can have a caption and optional hyperlink.
Images in a one image block can have a caption and optional hyperlink.

6. Two image

This was a nice waterfall
This was a nice waterfall
This lake was very flat!
This lake was very flat!

7. Three image

A waterfall.
A waterfall.

8. Image right (small)

An "image right (small)" block is very similar to a normal "image right" block, however the image is smaller - only 220px wide rather than 340px wide. This is sometimes a better choice, depending on the size and nature of the picture.

9. One image (large)

A "one image (large)" is bigger than a normal "one image"
A "one image (large)" is bigger than a normal "one image"

10. HTML block

An "HTML block" can be used to paste any custom HTML content. For example it can be used if you wish to embed a YouTube video (as demonstrated below):

More information

  • Useful for bullet points,
  • Feature lists,
  • Overviews,
  • Blocks where information is more important that the images.

11. This is a block right

A "block right" block is a way of presenting information alongside the main body of text. A "block right" block has a main content area and a secondary content area which appears to the right of it.

These blocks are particularly useful for presenting additional information, or for highlighting key points from within the main body of text.

These blocks are extremely effective when used correctly.

12. Hero Image (fader)

This block allows you to add hero images which then rotate. This is the perfect block for adding some more impact to your home page - especially when combined with a 'full width' page style.

This is a hero fader imageThese images are great for the homepageYou can scroll through them

13. Two column text

Two column text blocks allow for two parallel columns of text.

Really there has to be a fair bit of information for this to make sense, otherwise the columns have a tendency to look empty... so this is really just filler text because there's not a lot else to say. Perhaps you should look at the other column now?

Has two columns

They're nice for presenting certain information.

If you've got this far in reading I'm afraid it's just filler text again. I didn't have anything interesting to put in the two column block so i just put this instead. It does the job; it has letters and spaces and words and all the things that a sentence should have... it just misses a 'point' really.

14. Three column text

This is much like the two column block, only it has three columns.

This filler text is also just like the two column text filler text. It needs some content to make it look like it's not a silly block format (because it's not).

Has three columns

Except it has three columns not two!

Sometimes text is just text. This is one such time. There is no point to this text except to fill the space above it... it's just a demonstration of content and therefore it needs to be here. Alas, there's just not enough to say about three column text to fill three sensible sized columns.

Like this!

Very nice for homepage blocks.

Some more content to go here really...  I suppose in time I could rewrite this block and add some slightly less random text, but for now this is really all that there needs to be to make the point.

We're done!

That overview concludes the different block types that are available in your User Friendly Website. Hopefully this has given you a good indication of how you can use this system for building very visually appealing pages or news posts, with no programming knowledge required!

Loading... Updating page...