There are a number of ways that you can display images in Beaver Builder. Here are some of the factors in your decision:
- Do you want to display a single image or multiple images?
- Do you want to animate the display of multiple images, such as a slider?
- Do you want to present content along with the images, other than the image captions?
- Do you want the image to appear in the foreground or background?
Display single images, with a number of options.
Choose the Collage layout to display images in a mosaic. Choose Thumbnails to display the images in a grid. There are options for displaying captions.
Images can either slide or fade in. If you turn off the playback on this module, you can display one image at a time with arrows to cycle through the rest of the gallery.
You can apply basic animations to any module, but some modules are designed to rotate the display of a set of images.
The Slideshow module cycles through a gallery one image at a time, at a speed you choose.
Content sliders are typically used on landing pages with long narrow images, which are displayed in the background so there may be some cropping to fit the row. With the content slider module, you can add a heading, text, and button overlays on the image.
Display your blog posts in a slider. If you have set featured images, the images will display, and you have options on where to place the post summary in relation to the image.
Display your blog posts as a carousel, where you see several posts at a time and advance forward and backward to display more. If you have set featured images on your blog posts, you have options on where to place the post summary in relation to the image.
The Callout module is great for displaying the popular rows of features, popular on landing pages, and you can use this module for many other purposes. A big advantage of this module is that the image-text group stays together as a unit on smaller devices.
Generally, you get more control over your layouts if you put text into Text Editor modules and photos into Photo modules. The exception is if you want to wrap the text around your image. In that case, include the image in the Text Editor module.
You can add images to the backgrounds of rows and columns. A standard image size for row background images on large screens is 1920x1080, which has a 16:9 aspect ratio. Rows also allow backgrounds with image animations, such as slideshows, parallax, and a Ken Burns effect.