CSS Styled Columns
Breaking web page content into blocks with contrasting background, header and border is a well proven method of making sites look visually attractive while separating the elements with white space to make them easy to focus on and read.
Large chunks of text are kind of daunting and most vistors won't read them unless the content is particularly riveting. Breaking them up into contrasting columns or blocks makes them appear much more manageable and looks a lot better.
This widget enables columns and text blocks with contrasting backgrounds to be inserted without the use of images.
When these widgets replace blocks created from images they will speed up the webpage download time quite noticeably - especially when there are several of these on a page.
The widget background color, border color and corner radius are user adjustable.
The main heading block uses an H3 heading. The font family, size, text align, color, background color, font style and font weight can all be specified as can be seen in the screenshot of the widget controls to the right.
In this example, the h4 sub heading is created using the web safe HTML heading widget and the rest of the text is in a standard text boxed set on top of the widget.
Images can be inserted by either dragging them onto the page and adjusting them to fit or using any of the image insert widgets to add Alt and Title text for the benefit of the SEO spiders.
Once all the items have been inserted, drag over all of them to select them and then use the Arrange menu to Group them or do: option + command + G
The overall widget size is adjust simply by using the drag handles or by inserting specific dimensions via the Metrics inspector.
The advanced version of this widget is a little more versatile since it can handle text wrap around images although it does require some basic knowledge of HTML to use it successfully.
H4 Heading Using The HTML Heading Widget
Image inserted using the Photo widget to add alt text for SEO.