The “Dawn Image” module can be added as a module to your row columns.

For more info on working with images, also see the section on images in the Creating content class, and the class Working with Images, where we explain how to crop and resize your images. It is very important to not upload huge images to your site, but to resize them and optimize them first. We explain in the Working with Images Class how to do this.

On the general Tab of the image module you can upload your image,  on the design tab there are settings such as Sizing and  Alignment.

It is also possible to make the image a link. Place the link in the “Link URL” field, and in the “URL Opens” field you can specify whether the link should open in a new window or in the same window.

With the field “Open in Lightbox” you can create a lightbox effect when the image is clicked.

Your images will automatically resize according to the width of the column you place them in. Sometimes you may want to show a smaller image than the column width creates. At the top of the Design Tab of the Image module you’ll find Sizing. Here you can specify the width for your image, and you can also tweak the size for tablet and mobile viewing by clicking the smartphone icon (visible when you hover over the slider). Once you reduce the width, you can select  Module Alignment below, this works usually best as centered. The image on the right is the same image module as the image at the top, but it has a Max Width set to 180 px.

You can set an ALT text ((“Image Alternative Text” – important for search engines) and image title on the Advanced Tab > under Attributes. 

[divi_help]

The Round Image module  can be added as a module to your row columns. It has special settings that result in a circle image. These settings have been made on the Design Tab > Border > round corners; we have set a very high corner ratio.

To create round images you’ll need to make sure you use a square image to start with, otherwise the image will become an oval.

It consists of several modules combined into a column – a title which is a text editor module, an image module and a text editor module for the caption.  Then, 3 of these are placed next to each other.

Good to know:  We have combined these modules into this element because to make it look good together it was necessary to create some special code to move the title, image and caption closer together then they would be if you simply inserted the modules underneath each other within one column. To move the elements closer together the CSS Class imagerow is applied to all modules in the section. This is why this element needs to be inserted as a section if you want to use it like this.

If you’d like to add a fourth element, you can change the column structure on the row to 4 columns and duplicate the modules to the 4th column.

If you’d only like to not use a title or caption you can remove those modules.

It works very much the same way as the “Dawn 3 images in a Row” element described above, so please see there for further explanation.

If you’d like to create a row of images next to each other, make sure the images all have the same dimensions.

With this module you can only enlarge one image at a time, even if they are presented in a row, as in the example strip below.

If you are trying to create a lightbox where you can click through the images in the lightbox as in a slideshow please look at the “Dawn Gallery” module.

Replace the individual images in the individual image modules. Make sure the images all have the same dimensions.

If you’d like to use 3 images instead of 4, you can change the column structure from 4 columns to 3 columns and delete the 4th image module.