Do your images have style?  If not, why?  It’s simple in Bronto’s WYSIWYG editor to add styling to your images to give your message that professional feel.  In today’s post, we’ll look at the styling tools we offer and see how to use them to fix a couple of common problems.

A Look at the Image Appearance tab

In order to see what styles you can apply to your images, you’ll need to go to the normal Insert/Edit Image button () in the Bronto WYSIWYG editor. Clicking this button will bring up the standard image inserting dialogue box. If you take a look at this, you’ll notice two tabs at the top, one of which is labeled Appearance.

After clicking on the Appearance tab, you’ll see the editor window below:

Now that we have the Appearance tab pulled up, we’ll walk through what each of the settings does…

The Alignment Setting

The Alignment setting allows you to align your image. You can choose from a number of different alignment options, including the two most commonly used, left and right.  Aligning an image left will cause text to wrap around the image on the right side, and aligning an image right will cause the text to wrap around on the left.  Like the graphic below.

Dimensions

The Dimensions setting allows you to set the size of your image. It will let you define a width and a height for the image you are styling. It also includes a checkbox that will, if checked, keep the image proportions intact so that your image does not distort when it re-sizes.

Vertical and Horizontal space

The Vertical and Horizontal space boxes are great for allowing your images a little breathing room.  If you look back at the alignment example above, you’ll notice that the images and the text are really close together.  If we take the same left aligned image and put a value of 10 in both the vertical and horizontal space boxes, an invisible buffer of 10 pixels in either direction will surround the image. The result will be much nicer, like so:

Border

The Border property allows you to set a border around your image. The border will be solid with a thickness set to whatever number you type into the box. This is not the most useful aspect of the Border property though. Oddly enough, the vast majority of users will set the Border attribute to 0.  Setting it to 0 will eliminate the ugly blue border that appears around images when you place a link on them. This blue border can be quite the eyesore in an otherwise beautiful email marketing message, so it really pays to get rid of it with this simple setting.

Style

The Style box is kind of a catch all that allows you to apply custom styling to your images using CSS. Using this box will require knowledge of CSS syntax and attributes.

So that is our quick and easy look at the image styling options available in the Bronto WYSIWYG editor. The different styles offered here can really help to lend a professional look and feel to your WYSIWYG generated messages, and can hopefully increase your ROI in the process.

Lucas Weber,
Bronto Client Services

Related posts:

1. Setting The WYSIWYG Editor To Basic Mode Bronto’s WYSIWYG editor is a fantastic way to create and...
2. Adding Blocks Of Re-Editable Dynamic Content In the past, the only way for you to edit...
3. Dynamically Adding Values To Conversion Tracking URLs In recent weeks, I have been getting a lot of...