This tutorial shows you how you can restyle the regular icon list widget into a pretty button with some overlay effects. First we gonna add a second line to the text, and style it with custom CSS.
We also gonna give the icon container some dimensions and add 2 backgrounds to it with 2 pseudo elements. One is the background of the icon container, the second is an overlay background that animates on hover.
see it live on this page
franktielemans.be/blog/icon-l...
The CSS can be downloaded here
glyphbox.be/downloads/icon_li...
Timestamps
0:00 - Introduction
0:15 - What we are going to make
0:49 - Add a second line to the text
2:23 - Understanding the HTML structure of the widget via the reference guide.
3:14 - Style the second line with custom CSS
4:38 - Give the iconbox some dimensions and center the icon vertically and horizontally
5:39 - Add two background to the iconbox via 2 pseudo-elements
9:38 - Create the hoverstate so the overlay background animates to full width
11:33 - Add a border and margin-bottom to seperate the list items a little.
13:34 - Give the widget a custom width (optional)
Thanks for watching!
Feel free to subscribe my channel for more video's about Elementor and CSS.
My widget classname reference guide can be downloaded here
glyphbox.be/downloads/element...
You can also buy me a beer as a token of appreciation for the effort I took in these tutorials via this link: kzitem.info?redi...
Негізгі бет Ойын-сауық iconlist widget restyling
Пікірлер: 6