Images play a big role in content. Without an image, your whole content will be nothing but a boring article to read. And no one loves boring articles unless you make it appealing to them. To use this element, follow these steps.
- Select Add New Element from column
- An elements list modal will open
- From there select Image element
Here you’ll find three tabs - General, Styles, & Advanced.These tabs will help you to modify the element in your own way. You can add new fields, edit settings, apply animations etc. The details are given below.
The general tab holds the basic settings of an image. You can do the following changes here:
- Image - To insert an image select the image from media manager. You can upload, an image and use it too. Moreover, you can use icons too from media manager. And if you want to use images from Google, just use the unsplash tab from media manager.
- Alternate text - Sometimes images don’t show up in every browser or site. In that case, you can use an alternate text and let your visitor know what was the image about.
- Caption - Captions are the texts provided under image. This text describes the details of the image.
- Link - Allows you to add a link to the image. If you want, you can set a link to the image moving to another page. This is optional.
Styles tab will help you to style up the image. Here you’ll find two editing tabs- Image and Border. The editing options are are described in details below.
- Alignment - You can set the image alignment via this field. You can set either left, center or right.
- Width - You can set the width of the image using the scroll bar provided in this field. You can set in pixel or percentage.
- Height - You can set the height of the image by this field. You can set the height in pixel or percentage.
- Opacity - The opacity-level describes the transparency-level. With the given scroll bar, you can set the transparency of the image.
- Border Type- There is a border option for image. You can set borders for images as there are 4 types available - solid, double, dotted, and dashed.
- Border Color- Set the color of the border matching with the image.
- Border Radius- Border radius gives the corners of a border a round shape. If you want you can make the sharp corners a smooth round shape.
The advanced tab has the advanced level of settings. You can edit them if you find it necessary or just leave it just the way it is. Here you’ll find six fields : Element styles, Background, Border & Box Shadow, Animation, Custom CSS, and Identifier. These fields are described below in details.
- Element style - Here you’ll find the margin, padding and z-index option. Margin will help you to add space in accordance with page. Padding will help you to add space in accordance with the column. Z-index will work if you have 2 elements overlapping and you want to display the below element on top. Increment the z-index value and the below element will appear on top.
- Background - Background field will allow you to set a background in the column. You can set an image, a solid color or gradient effect of multiple colors.
- Border & Box Shadow - You can give a nice designed border and box shadow to your column. Set a border type, border radius if you want a bit of round shape in the corner. And box shadow effect will give your column a floating effect. You can set color to it, spread the color or add blur it.
- Animation - Animation field will allow you to add a transition effect to the element. Select the entrance animation from the given effects, set the delay time and enable the repeat option (this is optional).
- Custom CSS - This field is available only on PRO version If you are a developer then you can add CSS code of your own to the site by using this operation. Just write the code and click the apply button. You’re CSS code will be added to the content and it won't affect the existing css effect..
- Identifier - This field holds the CSS id of every specific content. This will help you to edit the CSS section if you want to bring any changes in css style.