EverWebFreebiesResponsive WebsiteSoftwareTips and TricksWeb DesignWebsite Design 101

EverWeb Image and Text Wrap Widget Shootout

Text and image content are core components of most of the pages in your website. Integrating these two elements in your pages in EverWeb is usually straightforward – you just drag and drop your text and images where you want them and you’re done! In some instances, though, you may want to have your text wrap around your images and include specific styling as well. If you’re using a centered or left aligned page layout, you could place TextBoxes around your image to mimic text wrapping. The only problem with this is that you’ll break the flow of the text and editing the text and maintaining the image wrapping could become tedious and time consuming to do. If you’re using a Responsive Page Layout, wrapping TextBoxes around images in this way will not work as the nature of the responsive page makes this almost prohibitive to do.

The good news is that there are solutions to this problem – either using EverWeb’s built in Text Section widget or by using third party widgets.

In this review, we take a look at three widgets: The aforementioned Text Section widget, EverWeb Garden‘s Advanced Image Wrap widget and EverWeb Widgets‘ Responsive Text Wrap Image Widget.

All of the widgets we’ve reviewed below do all of the basics that you would expect to be able to wrap text around your images. Each widget allows you to align the image left or right, let you add padding between the image and the text and let you alter the size of the image. All widgets let you set the maximum widget content width too. You can also add background colors to the widgets either within the widget itself or by using the Fill section of the Shape Options tab. Our review, therefore, will focus on the unique aspects of each widget.We start with what comes with EverWeb itself, The Text Section widget.

EverWeb’s Text Section Widget
EverWeb’s built in Text Section widget is primarily used in responsive websites, but can also be used in fixed width sites. Once you have dropped the widget on to the page, the first setting to check out in the Widget Settings is the Alignment dropdown menu. This is set at ‘Center’ by default. Depending on your native language, you may want to set Alignment to either left or right instead. This option is important to consider as Alignment will align all objects in the Text Section widget accordingly and may overwrite the alignment settings in the widget’s Styled Text Editor. So, if your text will go from left to right, set Alignment to Left. When adding text in to the widget’s Styled Text Editor, its own left, center, right and justified settings will then work as expected.

All of the widgets reviewed allow for a color background but the Text Section and Advanced Image Wrap widget also allow for an image background via the Fill section of the Shape Options tab.

Unique to this widget is that you can set the image to be left, right or top aligned. You can also add one or more buttons to the widget if you want. There are also five different image styling options available.

EverWeb Garden’s Advanced Image Wrap Widget
The Advanced Image Wrap Widget from EverWeb Garden comes with a unique feature: an Assets List built in so that you can create separate, multiple paragraphs or text blocks within the widget. If you just want text without an image, you can also do this by setting the Image Width, Height and Padding options all to zero. As with the Text Sections Widget, you style your text within the Styled Text Editor.

Check out the EverWeb Garden website for this and over 60 other widgets that are, at the moment, absolutely free!

EverWeb Widgets’ Responsive Text Wrap Image Widget
From Roddy McKay’s EverWeb Widgets. the Responsive Text Wrap Image Widget is the most fully featured widget in our review. The widget allows you to add Alt Text to the image, as well as a caption as well as internal and externalURL links. You can even have the link open in a new browser window if you want. The widget uses separate header and text fields that you style using the options in the widget settings rather then the WYSIWYG Styled Text Editor used by the other two widgets. However, the widget really shines with unique options to add a shadow around the widget’s text and image ‘container’ and a background to the wrapper around the widget. You can even set the opacity of the background color here too which provides a great call out effect. Additionally you can add vertical spacing to the widget.

The Responsive Text Wrap Image Widget is available as one of 12 widget in EverWeb Widgets’ Responsive Elements Widget Collection.

Which Widget to Use?
When choosing a widget for wrapping text around an image, your choice depends on what you need to achieve the design goal of your site. The Text Section widget comes bundled with EverWeb and gives you plenty of functionality together with the option of combining text, images and buttons. The Advanced Image Wrap widget from EverWeb Garden gives you an Assets List so that you can compartmentalize text and images into their own sections making bespoke formatting much easier and flexible. EverWeb Widgets’ widget gives you the most customizable widget, with captions, Alt Text, URL linking and fantastic border styling options as part of a 12 widget set.

Wrapping text with your images is now even more flexible than ever with these three widgets!

You may also like

Comments

Leave a reply

Your email address will not be published.

More in EverWeb