Elementor uses the term “Container” to represent both parent containers and child containers (think of these as rows and columns). Originally, Elementor used the terms “Section” and “Column”. Also, the popup layer panel is “Structure”, whereas originally, it was called “Navigator”. If your site is older, it will use the original terms.
Image Element
To change an existing image, click the pencil icon on the existing image on the page. On the left, in the editing side, click the image that pops up. This will take you to the Media Library, where you can either select an image from the library or upload a new image. Note: once an image has been uploaded, you do not need to upload it again to use it elsewhere on your site. The exception is for images pre-sized and uploaded as a “hero image”, slideshow image, or WooCommerce product image. These instances require specific size images, which may not be suitable for use as a regular image. Once you select your image, click the blue “Insert Image” button in the lower right part of the Media Library screen.
In most cases, set the image size to Full, except for instances where you want the image to be cropped, then use Thumbnail. You can also set the image size to Custom and enter the width and height. Do not bother with any of the other image sizes. They don’t work. Set the image alignment to center—this keeps the image centered when your site is viewed on a phone. You can also enter a caption if you want a caption to appear on the page beneath the image, and you can enter a link if you want the image to go to another page or website when the image is clicked.
Basic Gallery Element
To add or delete images from an existing image gallery, click anywhere within the image gallery on the page. You will not, however, change the images on the page itself.
Once you click the gallery on the page, the gallery images will be displayed in an image thumbnail selection box in the Elementor design panel on the left. Click anywhere in the image thumbnail selection box to open the “Edit gallery” screen. From there, you can delete a gallery image by clicking the “X” in the upper right corner of the image. To add new images, click the “Add to gallery” link on the left. You can select images from the Media Library or upload new images. If you want your gallery images to have captions, you can add them on the “Add to gallery” screen (or you can add captions to images in the Media Library). Once you’ve added all the new images, and/or deleted any that you don’t want, click the blue “Insert gallery’ button in the lower right corner of the screen.
In the Elementor design panel on the left, you can set the number of columns for the gallery element. Note: you cannot set a link for each individual image in Elementor. If you want that functionality, let me know as I will need to install a plugin to handle that (in which case, individual links are set on the “Edit gallery” screen).
Image Gallery Element
Elementor has two different image gallery elements: the Basic Gallery, which is essentially the native WordPress image gallery, and the Gallery, which offers a few more bells and whistles.
In the Basic Gallery, the images in the gallery are cropped thumbnails. In the Gallery element, images are not cropped, If you have images of various sizes, you can set the gallery style to masonry and image size to full–but you have to twiddle with the order of the images or the gallery can look messy. Otherwise, you can create a justified gallery, but each image must be the same size.
In the Basic gallery, captions are below the thumbnails. In the Gallery element, captions only appear when the user mouses over the image. Images in the Basic Gallery are loaded at the same time, whereas in the Gallery element, images are loaded as they come into view.
