You can add an image component in a predefined section you included in the page, or in a blank section you are creating from scratch.
Click on the blue sign next to Section, in the upper part of the Customizer menu. You will open the list of components.
In the category of Basic Components, find the Image component.
Use drag-and-drop to put a new image to the section you are modifying.
New image added to a page section:
To customize the image you included in a page section, you need to have the settings category for Image open in Customizer.
In the Content tab, you’ll set the image properties. Upload an image of your choice from your device and customize it:
- Choose the optimal size of the image (thumbnail or full size, or set it as responsive image whose display adapts to any type of device – mobile, tablet, desktop)
- Choose the best alignment for the image (to the left, at the center or to the right)
- You can enable the option to show caption for that image (the caption is a small descriptive text that is attached to an image to better explain what it represents). Fill in the blank area under Caption with your text description for the image
- You can place a link over the image. You only need to fill in the blank space under Link with the complete URL of the destination page
The Style options include the following:
For the image
- Image opacity (smaller values mean a more transparent image, while higher values mean an opaquer image)
- Box Shadow – if you enable this option, you’ll enhance the expressiveness of the image, by using a shadow effect for the image box. Click on the pencil icon next to Box Shadow to open the panel with settings for the box shadow (set values for how much the shadow is spread around the image, and define the horizontal/vertical deviation of the shadow from the image box)
- Border for the image – you can create a solid border for the image (different shapes are possible). It will only be visible if you give values greater than 0 for its thickness. Choose the color of the border so it matches the image box, and adjust the roundness of the corners for the image border (the higher the value for Border Radius, the rounder the border corners will be)
For the caption
The descriptive text associated to the image (the caption) can be adjusted as follows:
- Find its best alignment (to the left, at the center or to the right)
- Choose an appropriate color for the caption text, from the color picker
- Typography – make adjustments to the text typography for the caption (font, weight and size of the font, style and decoration, line height, letter spacing, etc.)
- Determine the distance of the caption from the image itself, by selecting values on the slider under Space
Enable the option to show a frame for the image, and click on the pencil icon next to Frame Option, to open the panel with settings for the frame:
- The element can take the form of a solid frame or a border frame
- Choose a color for the frame, from the color picker
- Determine the horizontal distance over which the frame is deployed
- Define the horizontal deviation of the frame, by selecting a value on the slider under Offset Left
- Define the vertical deviation of the frame, by selecting a value on the slider under Offset Top
- To bring the frame to the front of the image, enable the option to Show frame over image
The overlay is a semi-transparent color that can be applied on top of the image to obtain a nice visual effect. Enable the option for Image Overlay and click on the pencil icon next to it to open the panel with settings for the overlay:
Choose the overlay type:
- Simple color
- Shape only
Choose the color of the overlay, from the corresponding color picker.
Set values for the overlay opacity (smaller values mean a more transparent overlay, while higher values mean an opaquer overlay).
For overlays that include shapes, you have to select the geometrical forms of the shapes, and the luminosity for those shapes.
In the category of advanced option, you have the possibility to make further adjustments for the image itself, the caption attached to the image or the container of the image.