Elementor Slider widget - custom styling - change navigation arrows and more

Elementor Slider widget - custom styling - change navigation arrows and more

Frank Tielemans

4 года назад

8,978 Просмотров

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
https://glyphbox.be/downloads/elementor_widgets_classname_reference_1.1.pdf

Eicons font library cheatsheet
https://elementor.github.io/elementor-icons/

Font Awesome library cheatsheet
https://fontawesome.com/cheatsheet?from=io

More info about the useage of pseudo elements

https://css-tricks.com/pseudo-element-roundup/
https://www.youtube.com/watch?v=zGiirUiWslI
https://www.youtube.com/watch?v=xoRbkm8XgfQ
https://www.youtube.com/watch?v=jXkK5QBg0zQ

Тэги:

#Elementor #Slider_widget #Custom_CSS
Ссылки и html тэги не поддерживаются


Комментарии:

@Prasanthi1403
@Prasanthi1403 - 03.09.2023 10:20

Thanks alot for the video. I have been searching for the custom arrows icons change method. Now i got it. It is really helpful.

Ответить
@bitwissendtechnologies431
@bitwissendtechnologies431 - 27.08.2023 17:22

is there any way to reduce the thickness of the default icon

Ответить
@larsbrofgunordgrafisk2271
@larsbrofgunordgrafisk2271 - 21.08.2023 23:55

Hi Frank
Is there a way to make the slider widget scale proportionally?
If the (background) images are all square and I want them to remain square when the widget is scaling on different (all) devices (I hope it makes sence ;-)
Thanks from Copenhagen / Lars

Ответить
@agoldenhita
@agoldenhita - 19.07.2023 18:39

thanks thanks many thanks

❤ from iran

Ответить
@waleedahmedkhan7868
@waleedahmedkhan7868 - 18.01.2023 00:37

thanks

Ответить
@BrianNovak1
@BrianNovak1 - 03.08.2022 17:04

Great video and links! Thanks!

Ответить
@AngelicaMartinez-kd3ck
@AngelicaMartinez-kd3ck - 25.07.2022 15:41

this helped me a lot. Thank you very much!

Ответить
@imkeyi
@imkeyi - 20.05.2022 10:23

Great tutorial and very chill to learn

Ответить
@skoy21
@skoy21 - 03.03.2022 15:59

This works in the elementor preview but not in the front end. Also, it works for my image sliders and sliders but not for the image carousel, despite having the same class.

Ответить
@Miguelonxgramage
@Miguelonxgramage - 10.02.2022 11:11

Great tutorial, it has been very helpful. Thanks!!

Ответить
@TheFlyingCork
@TheFlyingCork - 15.01.2022 13:48

This helped a lot thank you so much

Ответить
@chriss.182
@chriss.182 - 03.12.2021 13:50

Thank you very much!

Ответить
@louiscurtil5586
@louiscurtil5586 - 13.09.2021 23:33

after i did the CSS, the slider stoped working. No reaction anymore. Any idea?
If i test it in editor of elementor it's fine. But once I open a real preview it doesn't work. Not in safari nor in chrome.

Ответить
@hallowstylestudio2315
@hallowstylestudio2315 - 25.08.2021 23:26

This is fabulous! You are an Elementor rockstar!

Ответить
@florenciacalvet4375
@florenciacalvet4375 - 23.05.2021 01:15

Great tutorial!! Thanks!!!!

Ответить
@w3ict988
@w3ict988 - 06.10.2020 11:10

I have used this code
selector .eicon-chevron-right:before{
content:"\f0da";
font-weight: 700;
font-family: "Font Awesome 5 Free"
}
selector .eicon-chevron-left:before{
content:"\f0d9";
font-weight: 700;
font-family: "Font Awesome 5 Free"
}

It Shows fIne in Elementor Dashboard But When I preview or logout it does not show in the Browser (Mozilla And Chrome)

Ответить