Try ShortPoint nowIn this tutorial, we will show you an example of how Custom CSS can change the look and feel of an Image List element. In the end of this tutorial, you will be able to add a border to your list items, as well as a coloured shadow and make rounded corners. Here is an example of what you can achieve:
Step 1: Prepare the Custom CSS code
Border
Code for adding the border:
.shortpoint-listitem-wrap {
border: 1px solid #dadada;
}*change 1px to a greater value if you would like a thicker border;
**change solid to dotted or dashed if you prefer another style. Look up the list of all border styles here.
*** change #dadada to any other color you prefer (HEX color reference here)
Shadow
Code for adding the shadow:
.shortpoint-listitem-wrap {
box-shadow: 4px 4px 5px #dadada;
}* first value in px will make the shadow stretch 4px to the right of the box. Use -4px to put it on the left;
** second value in px will make the shadow go 4px down. Use -4px to make it go up;
*** third value in px makes the shadow blurred. If you don't use it the shadow will have no opacity;
**** change #dadada to any other color you prefer (HEX color reference here)
Rounded corners
Code for making rounded corners for the item box:
.shortpoint-listitem-wrap {
border-radius: 10px;
}* try out greater or smaller px values to control the curve of corners.
Code for making rounded corners for the image:
.shortpoint-listitem-img {
border-radius: 10px;
}* try out greater or smaller px values to control the curve of corners.
All together
You can use the codes above together or separately. All together they will look like below. This is the look that was shown in the beginning of this article. Feel free to be creative and modify all the parameters you want.
.shortpoint-listitem-wrap {
border: 1px solid #dadada;
box-shadow: 4px 4px 5px #dadada;
border-radius: 10px;
}
.shortpoint-listitem-img {
border-radius: 10px;
}Step 2: Paste the code into the element
Open the settings of the element and switch to Cusom CSS tab. Paste your code there:
You can find more info on Custom CSS in Page Builder elements in this article: How to Insert Custom CSS into the Page Builder Element (Basic Tutorial)
Happy customizing!
Related articles:
