In this tutorial I change the navigation arrows of the slider widget with other icons from 2 different font libraries that are already loaded in Elementor. Then I replace the arrows with an PNG image and add a hover state.
I hope you find it useful and if you like it feel free to subscribe for tutorials about Elementor and CSS.
THANKS FOR WATCHING!
Timestamps
CHANGE ICON (EICON FONT LIBRARY)
0.49 Find the correct classnames in the reference guide.
1:18 Create both selectors for the slider arrows
2:41 Check cheatsheet Eicons font library for unicodes and classnames
3:25 Complete the CSS rule an add the icon unicode in content to replace the icon
CHANGE ICON (FONT AWSOME LIBRARY)
4:45 Create content, change font family, add font-weight
5:38 Check cheatsheet Font Awesome library for unicodes and classnames
6:46 Complete the CSS rule an add the icon unicode in content to replace the icon
REPLACE ICON WITH IMAGE
9:37 Summary
10:28 Create content and add other properties (display, width, height, background properties)
13:31 Add a hoverstate to a pseudo element
OTHER TIPS
14:48 carousel widget arrow replacements
16:48 bonus tip: add icons anywhere with classnames
LINKS
Elementor Classname reference guide
glyphbox.be/downloads/element...
Eicons font library cheatsheet
elementor.github.io/elementor...
Font Awesome library cheatsheet
fontawesome.com/cheatsheet?fr...
More info about the useage of pseudo elements
css-tricks.com/pseudo-element...
• Before and After pseud...
• CSS Before and After p...
• Front End Developer Tu...
Негізгі бет Тәжірибелік нұсқаулар және стиль Elementor Slider widget - custom styling - change navigation arrows and more
Пікірлер: 24