WIDGET CLASSNAME REFERENCE GUIDE

based on elementor v.2.84 and elementor pro v.2.83

created by Frank Tielemans (2020)
for whom is this guide? understanding the hierachie
In general, this guide is for all Elementor lovers with knowledge of .elementor-widget-icon-list <div>
CSS. For people who want to code more and inspect less.
.elementor-widget-container  <div>
OK, we can style a lot with the regular widget layout & style options, but .elementor-icon-list-items <ul>
not everything. We have the custom CSS field in the advanced options, .elementor-icon-list-item <li>
but still we have to inspect the page to know the widget classnames.
Without these classnames we simply can't target the elements and .elementor-icon-list-icon <span>  <i>
style them with custom CSS. .elementor-icon-list-text <span>
AFAIK, there is no list of all the widget classnames available, so I If you have knowlegde of HTML and CSS, you should understand why these classnames are indented, but if not here it goes…
decided to create one myself. While doing so I took HTML hierachie The indents indicate what element is the parent, the child, the sibling and the ancestor.
into account, because when you write CSS (and HTML) it’s very In this example .elementor-icon-list-item <li> contains .elementor-icon-list-icon <span> and .elementor-icon-list-text <span>
useful to know the parent-child-siblings-ancestor… relationship of the Therefore, .elementor-icon-list-item <li> is the parent of both elements. However , .elementor-widget-icon-list <div> is NOT a parent
HTML elements. of .elementor-icon-list-icon <span> and .elementor-icon-list-text. <span>. Even though it contains both elements, it does not directly
contain them. .elementor-widget-icon-list <div> is the ancestor of all elements. .elementor-widget-container <div> and .elementor-
icon-list-items <ul> are sibling elements because they share the same parent. The <i> element has no classname and is a child from the
document navigation <span> element.

• When searching for an Elementor widget I recommend to use the

TOC (Table of contents) page. The list is sorted alphabetically. This
is an interactive PDF, so you can click on each list item in the TOC understanding the colorcoding
and it will bring you to right page. Not all HTML code is visible at all times. Some widgets have functions and skins that you can choose from and this can create or remove
elements in the DOM, change the tags or even change the order of elements. To adress this I decided to use a colorcoded system. It's self-
• See that Elementor logo at the center bottom of the page? explanatory, just look at the colors in the titles and the code and you immediately see which elements correspond to which functions.
That's a button to navigate to the first page of the TOC page. You can Sometimes the whole HTML structure can change. (eg: media-carousel with the different skins)
find one on each page of the document.

linked with lightbox , with caption

• You can also use the search function of your PDF reader. The PDF
also has bookmarks for every widget page. .elementor-widget-theme-post-featured-image <div>
.elementor-widget-container <div>
.elementor-image <div>
.wp-caption <figure>  <a>  <img>
.wp-caption-text <figcaption

2
 understanding the tags are all classnames listed?
No, some are not listed, because they are not relevant for styling
purposes. The screen-only class for example is not meant to be styled,
.elementor-widget-button <div> it's code only for screen readers.
This is a simple <div> with classname .elementor-widget-button
Some icons, <i> elements in most cases, do have Font-Awesome
classes but I choose not to list them. because in these widgets, you
.elementor-button-icon <span>  <i> can choose for a different icon and this will change that classname
The <span> has classname .elementor-button-icon. The <i> element has no classname and is nested inside the <span>. anyway.
The <span> is the parent and the <i> is the child element

what's next?
.elementor-author-box__name <h1…h6,div,span,p> Before you ask, I'm not planning to do the same for popular elementor
This element could be a <h1>,<h2>,<h3>,<h4>,h5> or <h6>, a <div>, a <span> or a <p> element. plugins like Pionet, Ultimate addons, Happy addons, The Plus addons,…
There are way too many to choose from…

.elementor-widget-container <div>  <…> However, I might do an update in the future for the Woocommerce
This <div> element has class .elementor-widget-container and it's the parent of a dynamic element. plugin. When you install Woocommerce and add some products, new
This tag could be anything. widgets will pop up in the editor, mostly widgets for the single and
archive product pages.

.elementor-blockquote__content <p>
<footer> found something wrong?
.elementor-blockquote__author <cite> I created this reference guide on my own in about 6 days. I tripple
checked it , but there could be some mistakes.
Sometimes a tag is not right aligned. This means that this element has no classname and it's not a child element of the previous element.
If you find some or have other questions, don't hesitate to contact me
Here it is a <p> element. The <footer> is on the same level as .elementor-blockquote__content. Therefore .elementor-blockquote__
on [email protected] and I will fix it in an update.
author is a child from <footer>.
I will upload the updated PDF document in the files section in the
Advanced Elementor Facebook group

I also have a Youtube channel where you can find a few Elementor
tutorials, mostly related to custom CSS coding.
Now I have this guide, so I might make more tutorials about this topic.
Feel free to subscribe and happy editing!

There is some additional info at the very end of this document about
me plus a list with usefull links about learning CSS and stuff.

3
  M  
 TABLE OF
TABLE OF CONTENTS 4 FACEBOOK PAGE
FEATURED IMAGE (part 1)
23
24
single type, linked, no background overlay, no title, no description
single type, linked, with background overlay, no title, no description
48
48

CONTENTS
THE ELEMENTOR WIDGET LIST not linked, no caption, no lightbox 24 GALLERY single (part 2) 49
linked, no caption, no lightbox 24 single type, linked, with background overlay, with title + description 49
ACCORDEON 6 linked with lightbox, no caption 24 GOOGLE MAPS 50
no icon 6 FEATURED IMAGE (part 2) 25 HEADING 51
with icon 6 linked with lightbox, with caption 25 HTML 52
ALERT 7 FLIP BOX (part 1) 26 ICON 53
no dismiss button 7 link applied on whole box 26 ICON BOX 54
with dismiss button 7 FLIP BOX (part 2) 27 not linked 54
ANIMATED HEADLINE (part 1) 8 link applied on the button 27 linked 54
no after text, not linked 8 FORM (acceptance) 28 ICON LIST 55
no after text, linked 8 FORM (checkbox) 29 IMAGE (part 1) 56
ANIMATED HEADLINE (part 2) 9 FORM (date) 30 not linked, no caption, no lightbox 56
with after text, linked 9 FORM (email) 31 linked, no caption, no lightbox 56
AUTHOR BOX 10 FORM (file upload) 32 linked with lightbox, no caption 56
not linked, no archive button 10 FORM (hidden) 33 IMAGE (part 2) 57
linked, with archive button 10 FORM (html) 34 linked with lightbox, with caption 57
BASIC GALLERY 11 FORM (number) 35 IMAGE BOX 58
not linked, no caption 11 FORM (password) 36 not linked 58
linked, no caption 11 FORM (radio) 37 linked 58
linked, with caption 11 FORM (select) 38 IMAGE CAROUSEL (part 1) 59
BLOCKQUOTE 12 FORM (submit button) 39 not linked, no pagination, no caption 59
BUTTON 13 FORM (tel) 40 linked, no pagination, no caption 59
CALL TO ACTION (part 1) 14 FORM (text) 41 IMAGE CAROUSEL (part 2) 60
no ribbon 14 FORM (textarea) 42 linked, pagination dots + arrows, no caption 60
CALL TO ACTION (part 2) 15 FORM (time) 43 linked, pagination dots + arrows, with caption 61
with ribbon 15 FORM (url) 44 IMAGE CAROUSEL (part 3) 61
COUNTDOWN (part 1) 16 GALLERY multiple (part 1) 45 INNER SECTION 62
no action after expire 16 multiple type, not linked, no background overlay, no title, no description 45 MEDIA CAROUSEL carousel skin (part 1) 63
COUNTDOWN (part 2) 17 multiple type, linked, no background overlay, no title, no description 45 skin carousel, not linked, no overlay, no pagination, no arrows 63
message after expire 17 GALLERY multiple (part 2) 46 skin carousel, linked, no overlay, no pagination, no arrows 63
COUNTER 18 multiple type, linked, with background overlay, no title, no description 46 MEDIA CAROUSEL carousel skin (part 2) 64
DIVIDER 19 GALLERY multiple (part 3) 47 skin carousel, linked, with overlay, no pagination, no arrows 64
FACEBOOK BUTTON 20 multiple type, linked, with background overlay, with title + description 47 MEDIA CAROUSEL carousel skin (part 3) 65
FACEBOOK COMMENTS 21 GALLERY single (part 1) 48 skin carousel, linked, with overlay, with pagination fraction + arrows 65
FACEBOOK EMBED 22 single type, not linked, no background overlay, no title, no description 48 MEDIA CAROUSEL carousel skin (part 4) 66

4
When you see this button, click on it and it will bring you back to this page 
 skin carousel, linked, with overlay, with pagination progressbar + arrows 66 POSTS cards skin (part 2) 86 no subitems 108
MEDIA CAROUSEL coverflow skin (part 1) 67 cards skin, with pagination (previous - next + numbers) 86 TABLE OF CONTENTS (part 2) 109
skin coverflow, not linked, no arrows, no pagination 67 POSTS classic skin (part 1) 87 with subitems 109
skin coverflow, linked, no arrows, no pagination 67 classic skin, no pagination 87 TABS 110
MEDIA CAROUSEL coverflow skin (part 2) 68 POSTS classic skin (part 2) 88 TEMPLATE 111
skin coverflow, linked, with arrows, no pagination 68 classic skin, with pagination ( previous / next + numbers) 88 TESTIMONIAL 112
MEDIA CAROUSEL coverflow skin (part 3) 69 POST TITLE 89 not linked 112
skin coverflow, linked, with arrows, with pagination dots 69 PRICE LIST (part 1) 90 linked 112
MEDIA CAROUSEL coverflow skin (part 4) 70 not linked 90 TESTIMONIAL CAROUSEL layout image above/left/right (part 1) 113
skin coverflow, linked, with arrows, with pagination fraction 70 PRICE LIST (part 2) 91 no arrows, no pagination 113
MEDIA CAROUSEL coverflow skin (part 5) 71 linked 91 TESTIMONIAL CAROUSEL layout image above/left/right (part 2) 114
skin coverflow, linked, with arrows, with pagination progressbar 71 PRICE TABLE 92 with arrows, no pagination 114
MEDIA CAROUSEL slideshow skin (part 1) 72 PROGRESS BAR 93 TESTIMONIAL CAROUSEL layout image above/left/right (part 3) 115
skin slideshow, not linked, no arrows 72 REVIEWS (part 1) 94 with arrows, with pagination dots 115
MEDIA CAROUSEL slideshow skin (part 2) 73 not linked, no arrows, no pagination 94 TESTIMONIAL CAROUSEL layout image above/left/right (part 4) 116
skin slideshow, linked, no arrows 73 REVIEWS (part 2) 95 with arrows, with pagination fraction 116
MEDIA CAROUSEL slideshow skin (part 3) 74 linked, no arrows, no pagination 95 TESTIMONIAL CAROUSEL layout image above/left/right (part 5) 117
skin slideshow, linked, with arrows 74 REVIEWS (part 3) 96 with arrows, with pagination progressbar 117
MENU ANCHOR 75 linked, with arrows, no pagination 96 TESTIMONIAL CAROUSEL layout image inline / stacked (part 1) 118
NAV MENU (mobile - dropdown) 76 REVIEWS (part 4) 97 no arrows, no pagination 118
mobile menu, no submenu items 76 linked, with arrows, with pagination dots 97 TESTIMONIAL CAROUSEL layout image inline / stacked (part 2) 119
mobile menu, with submenu items 76 REVIEWS (part 5) 98 with arrows, no pagination 119
NAV MENU 77 linked, with arrows, with pagination fraction 98 TESTIMONIAL CAROUSEL layout image inline / stacked (part 3) 120
desktop menu, no submenu items 77 REVIEWS (part 6) 99 with arrows, with pagination dots 120
desktop menu, with submenu items 77 linked, with arrows, with pagination progressbar 99 TESTIMONIAL CAROUSEL layout image inline / stacked (part 4) 121
PORTFOLIO (part 1) 78 SHARE BUTTONS 100 with arrows, with pagination fraction 121
no title, no filter 78 SHORTCODE 101 TESTIMONIAL CAROUSEL layout image inline / stacked (part 5) 122
with title, no filter 78 SLIDES (part 1) 102 with arrows, with pagination progressbar 122
PORTFOLIO (part 2) 79 no navigation 102 TEXT EDITOR 123
with title, with filter 79 SLIDES (part 2) 103 TOGGLE 124
POST COMMENTS 80 navigation with dots + arrows 103 no icon 124
POST CONTENT 81 SOCIAL ICONS 104 with icon 124
POST EXCERPT 82 SOUNDCLOUD 105 VIDEO 125
POST INFO 83 SPACER 106 no image overlay, no lightbox 125
POST NAVIGATION 84 STAR RATING 107 with image overlay, no lightbox, with play icon 125
with arrows, with labels, with post titles 84 no title 107 with image overlay, with lightbox, with play icon 125
POSTS cards skin (part 1) 85 with title 107
cards skin, no pagination 85 TABLE OF CONTENTS (part 1) 108

5
ACCORDEON
no icon

.elementor-widget-accordeon <div>
.elementor-widget-container <div>
.elementor-accordeon <div>
.elementor-accordeon-item <div>
.elementor-tab-title <H1…H6,div>  <a>
.elementor-tab-content <div>

with icon

.elementor-widget-accordeon <div>
.elementor-widget-container <div>
.elementor-accordeon <div>
.elementor-accordeon-item <div>
.elementor-tab-title <H1…H6,div>
.elementor-accordeon-icon <span>
.elementor-accordeon-icon-closed <span>  <i>
.elementor-accordeon-icon-opened <span>  <i>
<a>
.elementor-tab-content <div>

To target ONLY the accordeon title (and not the icon) use this selector: .elementor-tab-title a

6
ALERT
no dismiss but ton

.elementor-widget-alert <div>
.elementor-widget-container <div>
.elementor-alert-info <div>
.elementor-alert-title <span>
.elementor-alert-description <span>

with dismiss but ton

.elementor-widget-alert <div>
.elementor-widget-container <div>
.elementor-alert-info <div>
.elementor-alert-title <span>
.elementor-alert-description <span>
.elementor-alert-dismiss <button>  <span>

7
ANIMATED HEADLINE (PART 1)
no after text, not linked

.elementor-widget-animated-headline <div>
.elementor-widget-container <div>
.elementor-headline <h1…h6,div,span,p>
.elementor-headline-plain-text <span>
.elementor-headline-dynamic-wrapper <span>
.elementor-headline-dynamic-text <span>
<svg>
<path>

no after text, linked

.elementor-widget-animated-headline <div>
.elementor-widget-container <div>  <a>
.elementor-headline <h1…h6,div,span,p>
.elementor-headline-plain-text <span>
.elementor-headline-dynamic-wrapper <span>
.elementor-headline-dynamic-text <span>
<svg>
<path>

8
ANIMATED HEADLINE (PART 2)
with after text, linked

.elementor-widget-animated-headline <div>
.elementor-widget-container <div>  <a>
.elementor-headline <h1…h6,div,span,p>
.elementor-headline-plain-text <span>
.elementor-headline-dynamic-wrapper <span>
.elementor-headline-dynamic-text <span>
<svg>
<path>
.elementor-headline-plain-text <span>

To target ONLY the after text use this selector: .elementor-headline-plain-text.elementor-headline-text-wrapper

9
AUTHOR BOX
not linked , no archive but ton

.elementor-widget-author-box <div>
.elementor-widget-container <div>
.elementor-author-box <div>
.elementor-author-box__avatar <div>  <img>
.elementor-author-box__text <div>
.elementor-author-box__name <h1…h6,div,span,p>
.elementor-author-box__bio <div>

linked , with archive but ton

.elementor-widget-author-box <div>
.elementor-widget-container <div>
.elementor-author-box <div>
.elementor-author-box__avatar <a>  <img>
.elementor-author-box__text <div>  <a>
.elementor-author-box__name <h1…h6,div,span,p>
.elementor-author-box__bio <div>
.elementor-author-box__button <a>

10
BASIC GALLERY
not linked , no caption

.elementor-widget-image-gallery <div>
.elementor-widget-gallery <div>
.elementor-image-gallery <div>
.gallery <div>
.gallery-item <figure>
.gallery-icon <div><img>

linked , no caption

.elementor-widget-image-gallery <div>
.elementor-widget-gallery <div>
.elementor-image-gallery <div>
.gallery <div>
.gallery-item <figure>
.gallery-icon <div>  <a>  <img>

linked , with caption

.elementor-widget-image-gallery <div>
.elementor-widget-gallery <div>
.elementor-image-gallery <div>
.gallery <div>
.gallery-item <figure>
.gallery-icon <div>  <a>  <img>
.gallery-caption <figcaption>

11
BLOCKQUOTE
.elementor-widget-blockquote <div>
.elementor-widget-container <div>
.elementor-blockquote <blockquote>
.elementor-blockquote__content <p>
<footer>
.elementor-blockquote__author <cite>
.elementor-blockquote__tweet-button <a>  <i>
.elementor-blockquote__tweet-label <span>

12
BUTTON
.elementor-widget-button <div>
.elementor-widget-container <div>
.elementor-button-wrapper <div>
.elementor-button-link <a>
.elementor-button-content-wrapper <span>
.elementor-button-text <span>

13
CALL TO ACTION (PART 1)
no ribbon

.elementor-widget-call-to-action <div>
.elementor-widget-container <div>
.elementor-cta <div>
.elementor-cta__bg-wrapper <div>
.elementor-cta__bg <div>
.elementor-cta__bg-overlay <div>
.elementor-cta__content <div>
.elementor-cta__title <h2>
.elementor-cta__description <div>
.elementor-cta__button-wrapper <div>
.elementor-cta__button <a>

14
CALL TO ACTION (PART 2)
with ribbon

.elementor-widget-call-to-action <div>
.elementor-widget-container <div>
.elementor-cta <div>
.elementor-cta__bg-wrapper <div>
.elementor-cta__bg <div>
.elementor-cta__bg-overlay <div>
.elementor-cta__content <div>
.elementor-cta__title <h2>
.elementor-cta__description <div>
.elementor-cta__button-wrapper <div>
.elementor-cta__button <a>
.elementor-ribbon<div>
.elementor-ribbon-inner <div>

15
COUNTDOWN (PART 1)
no action after expire

.elementor-widget-countdown <div>
.elementor-widget-container <div>
.elementor-countdown-wrapper <div>
.elementor-countdown-item <div>
.elementor-countdown-days <span>
.elementor-countdown-label <span>
.elementor-countdown-item <div>
.elementor-countdown-hours <span>
.elementor-countdown-label <span>
.elementor-countdown-item <div>
.elementor-countdown-minutes <span>
.elementor-countdown-label <span>
.elementor-countdown-item <div>
.elementor-countdown-seconds <span>
.elementor-countdown-label <span>

16
COUNTDOWN (PART 2)
message after expire

.elementor-widget-countdown <div>
.elementor-widget-container <div>
.elementor-countdown-wrapper <div>
.elementor-countdown-item <div>
.elementor-countdown-days <span>
.elementor-countdown-label <span>
.elementor-countdown-item <div>
.elementor-countdown-hours <span>
.elementor-countdown-label <span>
.elementor-countdown-item <div>
.elementor-countdown-minutes <span>
.elementor-countdown-label <span>
.elementor-countdown-item <div>
.elementor-countdown-seconds <span>
.elementor-countdown-label <span>
.elementor-countdown-expire--message <div>

17
COUNTER
.elementor-widget-counter <div>
.elementor-widget-container <div>
.elementor-counter <div>
.elementor-counter-number-wrapper <div>
.elementor-counter-number-prefix <span>
.elementor-counter-number <span>
.elementor-counter-number-suffix <span>
.elementor-counter-title <div>

18
DIVIDER
.elementor-widget-divider <div>
.elementor-widget-container <div>
.elementor-divider <div>
.elementor-divider-separator <span>

19
FACEBOOK BUTTON
.elementor-widget-facebook-button <div>
.elementor-widget-container <div>
.elementor-facebook-widget.fb-like <div>  <span>  <iframe>  <…>

20
FACEBOOK COMMENTS
.elementor-widget-facebook-comments <div>
.elementor-widget-container <div>
.elementor-facebook-widget.fb-comments <div>  <span>  <iframe>  <…>

21
FACEBOOK EMBED
.elementor-widget-facebook-embed <div>
.elementor-widget-container <div>
.elementor-facebook-widget.fb-post <div>  <span>  <iframe>  <…>

22
FACEBOOK PAGE
.elementor-widget-facebook-page <div>
.elementor-widget-container <div>
.elementor-facebook-widget.fb-page <div>  <span>  <iframe>  <…>

23
FEATURED IMAGE (PART 1)
not linked , no caption , no lightbox

.elementor-widget-theme-post-featured-image <div>
.elementor-widget-container <div>
.elementor-image <img>

linked , no caption , no lightbox

.elementor-widget-theme-post-featured-image <div>
.elementor-widget-container <div>
.elementor-image  <div>  <a>

linked with lightbox , no caption

.elementor-widget-theme-post-featured-image <div>
.elementor-widget-container <div>
.elementor-image <a>  <img>

24
FEATURED IMAGE (PART 2)
linked with lightbox , with caption

.elementor-widget-theme-post-featured-image <div>
.elementor-widget-container <div>
.elementor-image <div>
.wp-caption <figure>  <a>  <img>
.wp-caption-text <figcaption>

25
FLIP BOX (PART 1)
link applied on whole box

.elementor-widget-flip-box <div>
.elementor-widget-container <div>
.elementor-flip-box <div>
.elementor-flip-box__front <div>
.elementor-flip-box__layer__overlay <div>
.elementor-flip-box__layer__inner <div>
.elementor-icon-wrapper <div>
.elementor-icon <div>  <i>
.elementor-flip-box__layer__title <h3>
.elementor-flip-box__layer__description <div>
.elementor-flip-box__back <a>
.elementor-flip-box__layer__overlay <div>
.elementor-flip-box__layer__inner <div>
.elementor-flip-box__layer__title <h3>
.elementor-flip-box__layer__description <div>
.elementor-flip-box__button <span>

26
FLIP BOX (PART 2)
link applied on the but ton

.elementor-widget-flip-box <div>
.elementor-widget-container <div>
.elementor-flip-box <div>
.elementor-flip-box__front <div>
.elementor-flip-box__layer__overlay <div>
.elementor-flip-box__layer__inner <div>
.elementor-icon-wrapper <div>
.elementor-icon <div>  <i>
.elementor-flip-box__layer__title <h3>
.elementor-flip-box__layer__description <div>
.elementor-flip-box__back <div>
.elementor-flip-box__layer__overlay <div>
.elementor-flip-box__layer__inner <div>
.elementor-flip-box__layer__title <h3>
.elementor-flip-box__layer__description <div>
.elementor-flip-box__button <a>

27
FORM (acceptance)
.elementor-widget-form <div>
.elementor-widget-container <div>
.elementor-form <form>
.elementor-form-field-wrapper <div>
.elementor-field-type-acceptance <div>
.elementor-field-label <label>
.elementor-field-subgroup <div>
.elementor-field-option <span>
.elementor-acceptance-field <input type=”checkbox”>
<label>

To target and style the acceptance text use this selector: .elementor-acceptance-field ~ label

28
FORM (checkbox)
.elementor-widget-form <div>
.elementor-widget-container <div>
.elementor-form <form>
.elementor-form-field-wrapper <div>
.elementor-field-type-checkbox <div>
.elementor-field-label <label>
.elementor-field-subgroup <div>
.elementor-field-option <span>  <input type=”checkbox”>

29
FORM (date)
.elementor-widget-form <div>
.elementor-widget-container <div>
.elementor-form <form>
.elementor-form-field-wrapper <div>
.elementor-field-type-date <div>
.elementor-field-label <label>
.elementor-date-field <input type=”text”>

30
FORM (email)
.elementor-widget-form <div>
.elementor-widget-container <div>
.elementor-form <form>
.elementor-form-field-wrapper <div>
.elementor-field-type-email <div>
.elementor-field-label <label>
.elementor-field-textual <input type=”email”>

31
FORM (file upload)
.elementor-widget-form <div>
.elementor-widget-container <div>
.elementor-form <form>
.elementor-form-field-wrapper <div>
.elementor-field-type-file <div>
.elementor-field-label <label>
.elementor-upload-field <input type=”file”>

32
FORM (hidden)
.elementor-widget-form <div>
.elementor-widget-container <div>
.elementor-form <form>
.elementor-form-field-wrapper <div>
.elementor-field-type-hidden <div>
.elementor-field-textual <input type=”hidden”>

33
FORM (html)
.elementor-widget-form <div>
.elementor-widget-container <div>
.elementor-form <form>
.elementor-form-field-wrapper <div>
.elementor-field-type-html <div>  <…>

34
FORM (number)
.elementor-widget-form <div>
.elementor-widget-container <div>
.elementor-form <form>
.elementor-form-field-wrapper <div>
.elementor-field-type-number <div>
.elementor-field-label <label>
.elementor-field-textual <input type=”number”>

35
FORM (password)
.elementor-widget-form <div>
.elementor-widget-container <div>
.elementor-form <form>
.elementor-form-field-wrapper <div>
.elementor-field-type-password <div>
.elementor-field-label <label>
.elementor-field-textual <input type=”password”>

36
FORM (radio)
.elementor-widget-form <div>
.elementor-widget-container <div>
.elementor-form <form>
.elementor-form-field-wrapper <div>
.elementor-field-type-radio <div>
.elementor-field-label <label>
.elementor-field-subgroup <div>
.elementor-field-option <span>  <input type=”radio”>

37
FORM (select)
.elementor-widget-form <div>
.elementor-widget-container <div>
.elementor-form <form>
.elementor-form-field-wrapper <div>
.elementor-field-type-select <div>
.elementor-field-label <label>
.elementor-select-wrapper <div>
elementor-field-textual <select>  <option>

38
FORM (submit button)
.elementor-widget-form <div>
.elementor-widget-container <div>
.elementor-form <form>
.elementor-field-group <div>
.elementor-button <button>  <span>
.elementor-button-icon <span>  <i>
.elementor-button-text <span>

39
FORM (tel)
.elementor-widget-form <div>
.elementor-widget-container <div>
.elementor-form <form>
.elementor-form-field-wrapper <div>
.elementor-field-type-tel <div>
.elementor-field-label <label>
.elementor-field-textual <input type=”tel”>

40
FORM (text)
.elementor-widget-form <div>
.elementor-widget-container <div>
.elementor-form <form>
.elementor-form-field-wrapper <div>
.elementor-field-type-text <div>
.elementor-field-label <label>
.elementor-field-textual <input type=”text”>

41
FORM (textarea)
.elementor-widget-form <div>
.elementor-widget-container <div>
.elementor-form <form>
.elementor-form-field-wrapper <div>
.elementor-field-type-textarea <div>
.elementor-field-label <label>
.elementor-field-textual <textarea>

42
FORM (time)
.elementor-widget-form <div>
.elementor-widget-container <div>
.elementor-form <form>
.elementor-form-field-wrapper <div>
.elementor-field-type-time <div>
.elementor-field-label <label>
.elementor-time-field <input type=”text”>

43
FORM (url)
.elementor-widget-form <div>
.elementor-widget-container <div>
.elementor-form <form>
.elementor-form-field-wrapper <div>
.elementor-field-type-url <div>
.elementor-field-label <label>
.elementor-field-textual <input type=”url”>

44
GALLERY multiple (PART 1)
multiple t ype , not linked , no background overlay, no title , no description

.elementor-widget-gallery <div>
.elementor-widget-container <div>
.elementor-gallery__titles-container <div>
.elementor-gallery-title <a>
.elementor-gallery__container <div>
.elementor-gallery-item <div>
.elementor-gallery-item__image <div>

multiple t ype , linked , no background overlay, no title , no description

.elementor-widget-gallery <div>
.elementor-widget-container <div>
.elementor-gallery__titles-container <div>
.elementor-gallery-title <a>
.elementor-gallery__container <div>
.elementor-gallery-item <a>
.elementor-gallery-item__image <div>

45
GALLERY multiple (PART 2)
multiple t ype , linked , with background overlay, no title , no description

.elementor-widget-gallery <div>
.elementor-widget-container <div>
.elementor-gallery__titles-container <div>
.elementor-gallery-title <a>
.elementor-gallery__container <div>
.elementor-gallery-item <a>
.elementor-gallery-item__image <div>
.elementor-gallery-item__overlay <div>

46
GALLERY multiple (PART 3)
multiple t ype , linked , with background overlay, with title + description

.elementor-widget-gallery <div>
.elementor-widget-container <div>
.elementor-gallery__titles-container <div>
.elementor-gallery-title <a>
.elementor-gallery__container <div>
.elementor-gallery-item <a>
.elementor-gallery-item__image <div>
.elementor-gallery-item__overlay <div>
.elementor-gallery-item__content <div>
.elementor-gallery-item__title <div>
.elementor-gallery-item__description <div>

47
GALLERY single (PART 1)
single t ype , not linked , no background overlay, no title , no description

.elementor-widget-gallery <div>
.elementor-widget-container <div>
.elementor-gallery__container <div>
.elementor-gallery-item <div>
.elementor-gallery-item__image <div>

single t ype , linked , no background overlay, no title , no description

.elementor-widget-gallery <div>
.elementor-widget-container <div>
.elementor-gallery__container <div>
.elementor-gallery-item <a>
.elementor-gallery-item__image <div>

single t ype , linked , with background overlay, no title , no description

.elementor-widget-gallery <div>
.elementor-widget-container <div>
.elementor-gallery__container <div>
.elementor-gallery-item <a>
.elementor-gallery-item__image <div>
.elementor-gallery-item__overlay <div>

48
GALLERY single (PART 2)
single t ype , linked , with background overlay, with title + description

.elementor-widget-gallery <div>
.elementor-widget-container <div>
.elementor-gallery__container <div>
.elementor-gallery-item <a>
.elementor-gallery-item__image <div>
.elementor-gallery-item__overlay <div>
.elementor-gallery-item__content <div>
.elementor-gallery-item__title <div>
.elementor-gallery-item__description <div>

49
GOOGLE MAPS
.elementor-widget-google_maps <div>
.elementor-widget-container <div>
.elementor-custom-embed <div>  <iframe>

50
HEADING
.elementor-widget-heading <div>
.elementor-widget-container <div>
.elementor-heading-title <h1…h6,div,span,p>

51
HTML
.elementor-widget-html <div>
.elementor-widget-container <div>  <…>

52
ICON
.elementor-widget-icon <div>
.elementor-widget-container <div>
.elementor-icon-wrapper <div>
.elementor-icon <div>  <i>

53
ICON BOX
not linked

.elementor-widget-icon-box <div>
.elementor-widget-container <div>
.elementor-icon-box-wrapper <div>
.elementor-icon-box-icon <div>
.elementor-icon <span>  <i>
.elementor-icon-box-content <div>
.elementor-icon-box-title <H1…H6,div,span,p>  <span>
.elementor-icon-box-description <p>

linked

.elementor-widget-icon-box <div>
.elementor-widget-container <div>
.elementor-icon-box-wrapper <div>
.elementor-icon-box-icon <div>
.elementor-icon <a>  <i>
.elementor-icon-box-content <div>
.elementor-icon-box-title <H1…H6,div,span,p>  <a>
.elementor-icon-box-description <p>

54
ICON LIST
.elementor-widget-icon-list <div>
.elementor-widget-container <div>
.elementor-icon-list-items <ul>
.elementor-icon-list-item <li>
.elementor-icon-list-icon <span>  <i>
.elementor-icon-list-text <span>

55
IMAGE (PART 1)
not linked , no caption , no lightbox

.elementor-widget-image <div>
.elementor-widget-container <div>
.elementor-image <img>

linked , no caption , no lightbox

.elementor-widget-image <div>
.elementor-widget-container <div>
.elementor-image <div>  <a>

linked with lightbox , no caption

.elementor-widget-image <div>
.elementor-widget-container <div>
.elementor-image <a>  <img>

56
IMAGE (PART 2)
linked with lightbox , with caption

.elementor-widget-image <div>
.elementor-widget-container <div>
.elementor-image <div>
.wp-caption <figure>  <a>  <img>
.wp-caption-text <figcaption>

57
IMAGE BOX
not linked

.elementor-widget-image-box <div>
.elementor-widget-container <div>
.elementor-image-box-wrapper <div>
.elementor-image-box-img <figure>  <img>
.elementor-image-box-content <div>
.elementor-image-box-title <H1…H6,div,span,p>
.elementor-image-box-description <p>

linked

.elementor-widget-image-box <div>
.elementor-widget-container <div>
.elementor-image-box-wrapper <div>
.elementor-image-box-img <figure>  <a>  <img>
.elementor-image-box-content <div>
.elementor-image-box-title <H1…H6,div,span,p>  <a>
.elementor-image-box-description <p>

58
IMAGE CAROUSEL (PART 1)
not linked , no pagination , no caption

.elementor-widget-image-carousel <div>
.elementor-widget-container <div>
.elementor-image-carousel-wrapper <div>
.elementor-image-carousel <div>
.swiper-slide <div>
.swiper-slide-inner <figure>
.swiper-slide-image <img>

linked , no pagination , no caption

.elementor-widget-image-carousel <div>
.elementor-widget-container <div>
.elementor-image-carousel-wrapper <div>
.elementor-image-carousel <div>
.swiper-slide <div>  <a>
.swiper-slide-inner <figure>
.swiper-slide-image <img>

59
IMAGE CAROUSEL (PART 2)
linked , pagination dots + arrows , no caption

.elementor-widget-image-carousel <div>
.elementor-widget-container <div>
.elementor-image-carousel-wrapper <div>
.elementor-image-carousel <div>
.swiper-slide <div>  <a>
.swiper-slide-inner <figure>
.swiper-slide-image <img>
.swiper-pagination <div>
.swiper-pagination-bullet <span>
.elementor-swiper-button.elementor-swiper-button-prev<div>
.eicon-chevron-left <i>
.elementor-swiper-button.elementor-swiper-button-next <div>
.eicon-chevron-right <i>

60
IMAGE CAROUSEL (PART 3)
linked , pagination dots + arrows , with caption

.elementor-widget-image-carousel <div>
.elementor-widget-container <div>
.elementor-image-carousel-wrapper <div>
.elementor-image-carousel <div>
.swiper-slide <div>  <a>
.swiper-slide-inner <figure>
.swiper-slide-image <img>
.elementor-image-carousel-caption<figcaption>
.swiper-pagination <div>
.swiper-pagination-bullet <span>
.elementor-swiper-button.elementor-swiper-button-prev<div>
.eicon-chevron-left <i>
.elementor-swiper-button.elementor-swiper-button-next <div>
.eicon-chevron-right <i>

61
INNER SECTION
.elementor-inner-section <div>
.elementor-container <div>
.elementor-row <div>
.elementor-inner-column <div>
.elementor-column-wrap <div>
.elementor-widget-wrap <div>

62
MEDIA CAROUSEL carousel skin (PART 1)
skin carousel , not linked , no overlay, no pagination , no arrows

.elementor-widget-media-carousel <div>
.elementor-widget-container <div>
.elementor-swiper <div>
.elementor-main-swiper <div>
.swiper-wrapper <div>
.swiper-slide <div>
.elementor-carousel-image <div>

skin carousel , linked , no overlay, no pagination , no arrows

.elementor-widget-media-carousel <div>
.elementor-widget-container <div>
.elementor-swiper <div>
.elementor-main-swiper <div>
.swiper-wrapper <div>
.swiper-slide <div>  <a>
.elementor-carousel-image <div>

63
MEDIA CAROUSEL carousel skin (PART 2)
skin carousel , linked , with overlay, no pagination , no arrows

.elementor-widget-media-carousel <div>
.elementor-widget-container <div>
.elementor-swiper <div>
.elementor-main-swiper <div>
.swiper-wrapper <div>
.swiper-slide <div>  <a>
.elementor-carousel-image <div>
.elementor-carousel-image-overlay <div>

64
MEDIA CAROUSEL carousel skin (PART 3)
skin carousel , linked , with overlay, with pagination fr action + arrows

.elementor-widget-media-carousel <div>
.elementor-widget-container <div>
.elementor-swiper <div>
.elementor-main-swiper <div>
.swiper-wrapper <div>
.swiper-slide <div>  <a>
.elementor-carousel-image <div>
.elementor-carousel-image-overlay <div>
.swiper-pagination-fraction<div>
.swiper-pagination-current <span>
.swiper-pagination-total <span>
.swiper-swiper-button-prev <div>
.eicon-chevron-left <i>
.swiper-swiper-button-next <div>
.eicon-chevron-right <i>

65
MEDIA CAROUSEL carousel skin (PART 4)
skin carousel , linked , with overlay, with pagination progressbar + arrows

.elementor-widget-media-carousel <div>
.elementor-widget-container <div>
.elementor-swiper <div>
.elementor-main-swiper <div>
.swiper-wrapper <div>
.swiper-slide <div>  <a>
.elementor-carousel-image <div>
.elementor-carousel-image-overlay <div>
.swiper-pagination-progressbar <div>
.swiper-pagination-progressbar-fill <span>
.swiper-swiper-button-prev <div>
.eicon-chevron-left <i>
.swiper-swiper-button-next <div>
.eicon-chevron-right <i>

66
MEDIA CAROUSEL coverflow skin (PART 1)
skin coverflow , not linked , no arrows , no pagination

.elementor-widget-media-carousel <div>
.elementor-swiper <div>
.elementor-main-swiper <div>
.swiper-wrapper <div>
.swiper-slide <div>
.elementor-carousel-image <div>
.elementor-carousel-image-overlay <div>
.swiper-slide-shadow-left <div>
.swiper-slide-shadow-right <div>

skin coverflow , linked , no arrows , no pagination

.elementor-widget-media-carousel <div>
.elementor-swiper <div>
.elementor-main-swiper <div>
.swiper-wrapper <div>
.swiper-slide <div>  <a>
.elementor-carousel-image <div>
.elementor-carousel-image-overlay <div>
.swiper-slide-shadow-left <div>
.swiper-slide-shadow-right <div>

67
MEDIA CAROUSEL coverflow skin (PART 2)
skin coverflow , linked , with arrows , no pagination

.elementor-widget-media-carousel <div>
.elementor-swiper <div>
.elementor-main-swiper <div>
.swiper-wrapper <div>
.swiper-slide <div>  <a>
.elementor-carousel-image <div>
.elementor-carousel-image-overlay <div>
.swiper-slide-shadow-left <div>
.swiper-slide-shadow-right <div>
.elementor-swiper-button-prev<div>
.eicon-chevron-left <i>
.elementor-swiper-button-next <div>
.eicon-chevron-right <i>

68
MEDIA CAROUSEL coverflow skin (PART 3)
skin coverflow , linked , with arrows , with pagination dots

.elementor-widget-media-carousel <div>
.elementor-swiper <div>
.elementor-main-swiper <div>
.swiper-wrapper <div>
.swiper-slide <div>  <a>
.elementor-carousel-image <div>
.elementor-carousel-image-overlay <div>
.swiper-slide-shadow-left <div>
.swiper-slide-shadow-right <div>
.swiper-pagination <div>
.swiper-pagination-bullet <div>
.elementor-swiper-button-prev <div>
.eicon-chevron-left <i>
.elementor-swiper-button-next <div>
.eicon-chevron-right <i>

69
MEDIA CAROUSEL coverflow skin (PART 4)
skin coverflow , linked , with arrows , with pagination fr action

.elementor-widget-media-carousel <div>
.elementor-swiper <div>
.elementor-main-swiper <div>
.swiper-wrapper <div>
.swiper-slide <div>  <a>
.elementor-carousel-image <div>
.elementor-carousel-image-overlay <div>
.swiper-slide-shadow-left <div>
.swiper-slide-shadow-right <div>
.swiper-pagination-fraction <div>
.swiper-pagination-current <span>
.swiper-pagination-total <span>
.elementor-swiper-button-prev <div>
.eicon-chevron-left <i>
.elementor-swiper-button-next <div>
.eicon-chevron-right <i>

70
MEDIA CAROUSEL coverflow skin (PART 5)
skin coverflow , linked , with arrows , with pagination progressbar

.elementor-widget-media-carousel <div>
.elementor-swiper <div>
.elementor-main-swiper <div>
.swiper-wrapper <div>
.swiper-slide <div>  <a>
.elementor-carousel-image <div>
.elementor-carousel-image-overlay <div>
.swiper-slide-shadow-left <div>
.swiper-slide-shadow-right <div>
.swiper-pagination-progressbar <div>
.swiper-pagination-progressbar-fill <span>
.elementor-swiper-button-prev <div>
.eicon-chevron-left <i>
.elementor-swiper-button-next <div>
.eicon-chevron-right <i>

71
MEDIA CAROUSEL slideshow skin (PART 1)
skin slideshow , not linked , no arrows

.elementor-widget-media-carousel <div>
.elementor-widget-container <div>
.elementor-swiper <div>
.elementor-main-swiper <div>
.swiper-wrapper <div>
.swiper-slide <div>
.elementor-carousel-image <div>
.elementor-swiper <div>
.elementor-thumbnails-swiper <div>
.swiper-wrapper <div>
.swiper-slide <div>
.elementor-fit-aspect-ratio.elementor-carousel-image <div>

72
MEDIA CAROUSEL slideshow skin (PART 2)
skin slideshow , linked , no arrows

.elementor-widget-media-carousel <div>
.elementor-widget-container <div>
.elementor-swiper <div>
.elementor-main-swiper <div>
.swiper-wrapper <div>
.swiper-slide <div>  <a>
.elementor-carousel-image <div>
.elementor-swiper <div>
.elementor-thumbnails-swiper <div>
.swiper-wrapper <div>
.swiper-slide <div>
.elementor-fit-aspect-ratio.elementor-carousel-image <div>

73
MEDIA CAROUSEL slideshow skin (PART 3)
skin slideshow , linked , with arrows

.elementor-widget-media-carousel <div>
.elementor-widget-container <div>
.elementor-swiper <div>
.elementor-main-swiper <div>
.swiper-wrapper <div>
.swiper-slide <div>  <a>
.elementor-carousel-image <div>
.elementor-swiper-button-prev <div>
.eicon-chevron-left <i>
.elementor-swiper-button-next <div>
.eicon-chevron-right <i>
.elementor-swiper <div>
.elementor-thumbnails-swiper <div>
.swiper-wrapper <div>
.swiper-slide <div>
.elementor-fit-aspect-ratio.elementor-carousel-image <div>

74
MENU ANCHOR
.elementor-widget-menu-anchor <div>
elementor-widget-container <div>
.elementor-menu-anchor <div>

75
NAV MENU (mobile - dropdown)
mobile menu , no submenu items

.elementor-widget-nav-menu <div>
.elementor-widget-container <div>
.elementor-menu-toggle <div>
.eicon-menu-bar <i>
.elementor-nav-menu--dropdown <nav>
.elementor-nav-menu <ul>
.menu-item <li>
.elementor-item <a>

mobile menu , with submenu items

.elementor-widget-nav-menu <div>
.elementor-widget-container <div>
.elementor-menu-toggle<div>
.eicon-menu-bar <i>
.elementor-nav-menu--dropdown <nav>
.elementor-nav-menu <ul>
.menu-item-has-children <li>
.elementor-item.has-submenu <a>
.subarrow <span>  <i>
.elementor-nav-menu--dropdown <ul>
.menu-item <li>
.elementor-sub-item <a>

76
NAV MENU
desktop menu , no submenu items

.elementor-widget-nav-menu <div>
.elementor-widget-container <div>
.elementor-nav-menu__container <nav>
.elementor-nav-menu <ul>
.menu-item <li>
.elementor-item <a>

desktop menu , with submenu items

.elementor-widget-nav-menu <div>
.elementor-widget-container <div>
.elementor-nav-menu__container <nav>
.elementor-nav-menu <ul>
.menu-item-has-children <li>
.elementor-item.has-submenu <a>
.subarrow <span>  <i>
.elementor-nav-menu--dropdown <ul>
.menu-item <li>
.elementor-sub-item <a>

To target and style a submenu-item use this selector: .elementor-sub-item

77
PORTFOLIO (PART 1)
no title , no filter

.elementor-widget-portfolio <div>
.elementor-widget-container <div>
.elementor-portfolio <div>
.elementor-portfolio-item <article>
.elementor-post__thumbnail__link <a>
.elementor-portfolio-item__img <div>  <img>
.elementor-portfolio-item__overlay <div>

with title , no filter

.elementor-widget-portfolio <div>
.elementor-widget-container <div>
.elementor-portfolio <div>
.elementor-portfolio-item <article>
.elementor-post__thumbnail__link <a>
.elementor-portfolio-item__img <div>  <img>
.elementor-portfolio-item__overlay <div>
.elementor-portfolio-item__title <H1…H6,div,span,p>

To target the portfolio image use .elementor-portfolio-item__img img

78
PORTFOLIO (PART 2)
with title , with filter

.elementor-widget-portfolio <div>
.elementor-widget-container <div>
.elementor-portfolio-filters <ul>
.elementor-portfolio__filter <li>
.elementor-portfolio <div>
.elementor-portfolio-item <article>
.elementor-post__thumbnail__link <a>
.elementor-portfolio-item__img <div>  <img>
.elementor-portfolio-item__overlay <div>
.elementor-portfolio-item__title <H1…H6,div,span,p>

To target the portfolio image use .elementor-portfolio-item__img img

79
POST COMMENTS
.elementor-widget-post-comments <div>
.elementor-widget-container <div>
.comments-area <section>
.comment-respond <div>
.comment-reply-title <h2>
.comment-form <form>
.logged-in-as <p>  <a>
<a>
.comment-form-comment <p>  <label>
<textarea>
.form-submit <p>
.submit <input>

80
POST CONTENT
.elementor-widget-theme-post-content <div>
.elementor-widget-container <div>  <…>

81
POST EXCERPT
.elementor-widget-theme-post-excerpt <div>
.elementor-widget-container <div>

82
POST INFO
.elementor-widget-post-info <div>
.elemntor-widget-container <div>
.elementor-post-info <ul>
.elementor-icon-list-item <li>  <a>
.elementor-icon-list-icon <span>  <i>
.elementor-icon-list-text <span>

83
POST NAVIGATION
with arrows , with labels , with post titles

.elementor-widget-post-navigation <div>
.elementor-widget-container <div>
.elementor-post-navigation <div>
.elementor-post-navigation__prev <div>  <a>
.post-navigation__arrow-prev <span>  <i>
.elementor-post-navigation__link__prev <span>
.post-navigation__prev--label <span>
.post-navigation__prev--title <span>
.elementor-post-navigation__separator-wrapper <div>
.elementor-post-navigation__separator <div>
.elementor-post-navigation__next <div>  <a>
.elementor-post-navigation__link__next <span>
.post-navigation__next--label <span>
.post-navigation__next--title <span>
.post-navigation__arrow-next <span>  <i>

84
POSTS cards skin (PART 1)
cards skin , no pagination

.elementor-widget-posts <div>
.elementor-widget-container <div>
.elementor-posts-container <div>
.elementor-post <article>
.elementor-post__card <div>
.elementor-post__thumbnail__link <a>
.elementor-post__thumbnail <div>  <img>
.elementor-post__badge <div>
.elementor-post__avatar <div>
.avatar <img>
.elementor-post__text <div>
.elementor-post__title <H1…H6,div,span,p>
.elementor-post__excerpt <p>
.elementor-post__read-more <a>
.elementor-post__meta-data <div>
.elementor-post-date <span>
.elementor-post-avatar <span>
<a>

img.avatar
To target the avatar use selector

85
POSTS cards skin (PART 2)
cards skin , with pagination (previous - next + numbers)

.elementor-widget-posts <div>
.elementor-widget-container <div>
.elementor-posts-container <div>
.elementor-post <article>
.elementor-post__card <div>
.elementor-post__thumbnail__link <a>
.elementor-post__thumbnail <div>  <img>
.elementor-post__badge <div>
.elementor-post__avatar <div>
.avatar <img>
.elementor-post__text <div>
.elementor-post__title <H1…H6,div,span,p>
.elementor-post__excerpt <p>
.elementor-post__read-more <a>
.elementor-post__meta-data <div>
.elementor-post-date <span>
.elementor-post-avatar <span>
.elementor-pagination<nav>
.page-numbers.prev <a,span>
.page-numbers <a,span>
.page-numbers.current <a,span>
.page-numbers.next <a,span>

To target the avatar use selector img.avatar

86
POSTS classic skin (PART 1)
classic skin , no pagination

.elementor-widget-posts <div>
.elementor-widget-container <div>
.elementor-posts-container <div>
.elementor-post <article>
.elementor-post__thumbnail__link <a>
.elementor-post__thumbnail <div>
.elementor-post__text <div>
.elementor-post__title <H1…H6,div,span,p>
.elementor-post__meta-data <div>
.elementor-post-date <span>
.elementor-post-avatar <span>
.elementor-post__excerpt <div>  <p>
.elementor-post__read-more <a>

87
POSTS classic skin (PART 2)
classic skin , with pagination ( previous / next + numbers)

.elementor-widget-posts <div>
.elementor-widget-container <div>
.elementor-posts-container <div>
.elementor-post <article>
.elementor-post__thumbnail__link <a>
.elementor-post__thumbnail <div>
.elementor-post__text <div>
.elementor-post__title <H1…H6,div,span,p>
.elementor-post__meta-data <div>
.elementor-post-date <span>
.elementor-post-avatar <span>
.elementor-post__excerpt <div>  <p>
.elementor-post__read-more <a>
.elementor-pagination <nav>
.page-numbers.prev <a,span>
.page-numbers <a,span>
.page-numbers.current <a,span>
.page-numbers.next<a,span>

88
POST TITLE
.elementor-widget-heading <div>
.elementor-widget-container <div>
.elementor-heading-title <h1…6,div,span,p>

89
PRICE LIST (PART 1)
not linked

.elementor-widget-price-list <div>
.elementor-widget-container <div>
.elementor-price-list <ul>
.elementor-price-list-item <li>
.elementor-price-list-image <div>  <img>
.elementor-price-list-text <div>
.elementor-price-list-header <div>
.elementor-price-list-title <span>
.elementor-price-list-separator <span>
.elementor-price-list-price <span>
.elementor-price-list-description <p>

90
PRICE LIST (PART 2)
linked

.elementor-widget-price-list <div>
.elementor-widget-container <div>
.elementor-price-list <ul>  <li>
.elementor-price-list-item <a>
.elementor-price-list-image <div>  <img>
.elementor-price-list-text <div>
.elementor-price-list-header <div>
.elementor-price-list-title <span>
.elementor-price-list-separator <span>
.elementor-price-list-price <span>
.elementor-price-list-description <p>

91
PRICE TABLE
.elementor-widget-price-table <div>
.elementor-widget-container <div>
.elementor-price-table <div>
.elementor-price-table__header <div>
.elementor-price-table__heading <h3…h6>
.elementor-price-table__subheading <span>
.elementor-price-table__price <div>
.elementor-price-table__currency <span>
.elementor-price-table__integer-part <span>
.elementor-price-table__after-price <div>
.elementor-price-table__fractional-part <span>
.elementor-price-table__period <span>
.elementor-price-table__features-list <ul>
.elementor-repeater-item-****** <li>
.elementor-price-table__feature-inner <div>  <i>  <span>
.elementor-price-table__footer <div>
.elementor-price-table__button <a>
.elementor-price-table__additional_info <div>
.elementor-price-table__ribbon <div>
.elementor-price-table__ribbon-inner <div>

****** It seems that the classnames of the feature list items got created dynamically.

92
PROGRESS BAR
.elementor-widget-progress <div>
.elementor-widget-container <div>
.elementor-title <span>
.elementor-progress-wrapper <div>
.elementor-progress-bar <div>
.elementor-progress-text <span>
.elementor-progress-percentage <span>

93
REVIEWS (PART 1)
not linked , no arrows , no pagination

.elementor-widget-reviews <div>
.elementor-widget-container <div>
.elementor-swiper <div>
.elementor-main-swiper <div>
.swiper-wrapper <div>
.swiper-slide <div>
.elementor-testimonial <div>
.elementor-testimonial__header <div>
.elementor-testimonial__image <div>  <img>
.elementor-testimonial__cite <div>
.elementor-testimonial__name <span>
.elementor-star-rating <div>
.elementor-star-**** <i>
.elementor-testimonial__title <div>
.elementor-testimonial__icon <div>
.elementor-testimonial__content <div>
.elementor-testimonial__text <div>

94
REVIEWS (PART 2)
linked , no arrows , no pagination

.elementor-widget-reviews <div>
.elementor-widget-container <div>
.elementor-swiper <div>
.elementor-main-swiper <div>
.swiper-wrapper <div>
.swiper-slide <div>
.elementor-testimonial <div>
.elementor-testimonial__header <a>
.elementor-testimonial__image <div>  <img>
.elementor-testimonial__cite <div>
.elementor-testimonial__name <span>
.elementor-star-rating <div>
.elementor-star-**** <i>
.elementor-testimonial__title <div>
.elementor-testimonial__icon <div>
.elementor-testimonial__content <div>
.elementor-testimonial__text <div>

95
REVIEWS (PART 3)
linked , with arrows , no pagination

.elementor-widget-reviews <div>
.elementor-widget-container <div>
.elementor-swiper <div>
.elementor-main-swiper <div>
.swiper-wrapper <div>
.swiper-slide <div>
.elementor-testimonial <div>
.elementor-testimonial__header <a>
.elementor-testimonial__image <div>  <img>
.elementor-testimonial__cite <div>
.elementor-testimonial__name <span>
.elementor-star-rating <div>
.elementor-star-**** <i>
.elementor-testimonial__title <div>
.elementor-testimonial__icon <div>
.elementor-testimonial__content <div>
.elementor-testimonial__text <div>
.elementor-swiper-button-prev<div>
.eicon-chevron-left <i>
.elementor-swiper-button-next <div>
.eicon-chevron-right <i>

96
REVIEWS (PART 4)
linked , with arrows , with pagination dots

.elementor-widget-reviews <div>
.elementor-widget-container <div>
.elementor-swiper <div>
.elementor-main-swiper <div>
.swiper-wrapper <div>
.swiper-slide <div>
.elementor-testimonial <div>
.elementor-testimonial__header <a>
.elementor-testimonial__image <div >  <img>
.elementor-testimonial__cite <div>
.elementor-testimonial__name <span>
.elementor-star-rating <div>
.elementor-star-**** <i>
.elementor-testimonial__title <div>
.elementor-testimonial__icon <div>
.elementor-testimonial__content <div>
.elementor-testimonial__text <div>
.swiper-pagination  <div>
.swiper-pagination-bullet <div>
.elementor-swiper-button-prev <div>
.eicon-chevron-left <i>
.elementor-swiper-button-next <div>
.eicon-chevron-right <i>

97
REVIEWS (PART 5)
linked , with arrows , with pagination fr action

.elementor-widget-reviews <div>
.elementor-widget-container <div>
.elementor-swiper <div>
.elementor-main-swiper <div>
.swiper-wrapper <div>
.swiper-slide <div>
.elementor-testimonial <div>
.elementor-testimonial__header <a>
.elementor-testimonial__image <div>  <img>
.elementor-testimonial__cite <div>
.elementor-testimonial__name <span>
.elementor-star-rating <div>
.elementor-star-**** <i>
.elementor-testimonial__title <div>
.elementor-testimonial__icon <div>
.elementor-testimonial__content <div>
.elementor-testimonial__text <div>
.swiper-pagination-fraction <div>
.swiper-pagination-current <span>
.swiper-pagination-total <span>
.elementor-swiper-button-prev<div>
.eicon-chevron-left <i>
.elementor-swiper-button-next <div>
.eicon-chevron-right <i>
98
REVIEWS (PART 6)
linked , with arrows , with pagination progressbar

.elementor-widget-reviews <div>
.elementor-widget-container <div>
.elementor-swiper <div>
.elementor-main-swiper <div>
.swiper-wrapper <div>
.swiper-slide <div>
.elementor-testimonial <div>
.elementor-testimonial__header <a>
.elementor-testimonial__image <div>  <img>
.elementor-testimonial__cite <div>
.elementor-testimonial__name <span>
.elementor-star-rating <div>
.elementor-star-**** <i>
.elementor-testimonial__title <div>
.elementor-testimonial__icon <div>
.elementor-testimonial__content <div>
.elementor-testimonial__text <div>
.swiper-pagination-progressbar <div>
.swiper-pagination-progressbar-fill <span>
.elementor-swiper-button-prev <div>
.eicon-chevron-left <i>
.elementor-swiper-button-next <div>
.eicon-chevron-right <i>

99
SHARE BUTTONS
.elementor-widget-share-buttons <div>
.elementor-widget-container <div>
.elementor-grid <div>
.elementor-grid-item <div>
.elementor-share-btn <div>
.elementor-share-btn__icon <span>  <i>
.elementor-share-btn__text <div>
.elementor-share-btn__title <span>

100
SHORTCODE
.elementor-widget-shortcode <div>
.elementor-widget-container <div>
.elementor-shortcode <div>  <div>

101
SLIDES (PART 1)
no navigation

.elementor-widget-slides <div>
.elementor-widget-container <div>
.elementor-swiper <div>
.elementor-slides-wrapper <div>
.elementor-slides <div>
.swiper-slide <div>
.swiper-slide-bg <div>
.swiper-slide-inner <div>
.swiper-slide-contents <div>
.elementor-slide-heading <div>
.elementor-slide-description <div>
.elementor-slide-button <div>

102
SLIDES (PART 2)
navigation with dots + arrows

.elementor-widget-slides <div>
.elementor-widget-container <div>
.elementor-swiper <div>
.elementor-slides-wrapper <div>
.elementor-slides <div>
.swiper-slide <div>
.swiper-slide-bg <div>
.swiper-slide-inner <div>
.swiper-slide-contents <div>
.elementor-slide-heading <div>
.elementor-slide-description <div>
.elementor-slide-button <div>
.swiper-pagination-bullets<div>
.swiper-pagination-bullet <span>
.elementor-swiper-button-prev <div>
.eicon-chevron-left <i>
.elementor-swiper-button-next <div>
.eicon-chevron-right <i>

To target and style the bullet of the active slide use this selector: .swiper-pagination-bullet-active

103
SOCIAL ICONS
.elementor-widget-social-icons <div>
.elementor-widget-container <div>
.elementor-social-icons-wrapper <div>
.elementor-social-icon <a>  <i>

104
SOUNDCLOUD
.elementor-widget-audio <div>
.elementor-widget-container <div>
.elementor-soundcloud-wrapper <div>  <iframe>

105
SPACER
.elementor-widget-spacer <div>
.elementor-widget-container <div>
.elementor-spacer <div>
.elementor-spacer-inner <div>

106
STAR RATING
no title

.elementor-widget-star-rating <div>
.elementor-widget-container <div>
.elementor-star-rating__wrapper <div>
.elementor-star-rating <div>
.elementor-star-**** <i>

with title

.elementor-widget-star-rating <div>
.elementor-widget-container <div>
.elementor-star-rating__wrapper <div>
.elementor-star-rating__title <div>
.elementor-star-rating <div>
.elementor-star-**** <i>

****
Each star gets it’s own dynamic classname. For example, when rating is 2.5/5 you will have 5 <i> elements with these classes:

2x .elementor-star-full,
1x .elementor-star-5
2x .elementor-star-empty

107
TABLE OF CONTENTS (PART 1)
no subitems

.elementor-widget-table-of-contents <div>
.elementor-widget-container <div>
.elementor-toc__header <div>
.elementor-toc__header-title <h2…h4,div>
.elementor-toc__toggle-button--expand <div>  <i>
.elementor-toc__toggle-button--collapse <div>  <i>
.elementor-toc__body <div>
.elementor-toc__list-wrapper <ol,ul>
.elementor-toc__list-item <li>
.elementor-toc__list-item-text-wrapper <div>  <i>
.elementor-toc__list-item-text.elementor-toc__top-level <a>

108
TABLE OF CONTENTS (PART 2)
with subitems

.elementor-widget-table-of-contents <div>
.elementor-widget-container <div>
.elementor-toc__header <div>
.elementor-toc__header-title <h2…h4,div>
.elementor-toc__toggle-button--expand <div>  <i>
.elementor-toc__toggle-button--collapse <div>  <i>
.elementor-toc__body <div>
.elementor-toc__list-wrapper <ol,ul>
.elementor-toc__list-item <li>
.elementor-toc__list-item-text-wrapper <div>  <i>
.elementor-toc__list-item-text.elementor-toc__top-level <a>
.elementor-toc__list-wrapper<ol,ul>
.elementor-toc__list-item <li>
.elementor-toc__list-item-text-wrapper <div>  <i>
.elementor-toc__list-item-text <a>

109
TABS
.elementor-widget-tabs <div>
.elementor-widget-container <div>
.elementor-tabs <div>
.elementor-tabs-wrapper <div>
.elementor-tab-title <div>  <a>
.elementor-content-wrapper <div>
.elementor-tabs-content <div>

On mobile the tab title can be targeted with .elementor-tab-mobile-title which is a child element of .elementor-content-wrapper

110
TEMPLATE
.elementor-widget-template <div>
.elementor-widget-container <div>
.elementor-template <div>
.elementor-**** <div>  <…>

The template classes are dynamically generated by it’s ID number

111
TESTIMONIAL
not linked

.elementor-widget-testimonial <div>
.elementor-widget-container <div>
.elementor-testimonial-wrapper <div>
.elementor-testimonial-content <div>
.elementor-testimonial-meta <div>
.elementor-testimonial-inner <div>
.elementor-testimonial-image <div>  <img>
.elementor-testimonial-details <div>
.elementor-testimonial-name <div>
.elementor-testimonial-job <div>

linked

.elementor-widget-testimonial <div>
.elementor-widget-container <div>
.elementor-testimonial-wrapper <div>
.elementor-testimonial-content <div>
.elementor-testimonial-meta <div>
.elementor-testimonial-inner <div>
.elementor-testimonial-image <div>  <a>  <img>
.elementor-testimonial-details <div>
.elementor-testimonial-name <a>
.elementor-testimonial-job <a>

112
TESTIMONIAL CAROUSEL layout image above/left/right (PART 1)
no arrows , no pagination

.elementor-widget-testimonial-carousel <div>
.elementor-widget-container <div>
.elementor-swiper <div>
.elementor-main-swiper <div>
.swiper-wrapper <div>
.swiper-slide <div>
.elementor-testimonial <div>
.elementor-testimonial__content <div>
.elementor-testimonial__text <div>
.elementor-testimonial__cite <div>
.elementor-testimonial__name <span>
.elementor-testimonial__title <span>
.elementor-testimonial__footer <div>
.elementor-testimonial__image <div>  <img>

113
TESTIMONIAL CAROUSEL layout image above/left/right (PART 2)
with arrows , no pagination

.elementor-widget-testimonial-carousel <div>
.elementor-widget-container <div>
.elementor-swiper <div>
.elementor-main-swiper <div>
.swiper-wrapper <div>
.swiper-slide <div>
.elementor-testimonial <div>
.elementor-testimonial__content <div>
.elementor-testimonial__text <div>
.elementor-testimonial__footer <div>
.elementor-testimonial__image <div>  <img>
.elementor-testimonial__cite <div>
.elementor-testimonial__name <span>
.elementor-testimonial__title <span>
.elementor-swiper-button-prev<div>
.eicon-chevron-left <i>
.elementor-swiper-button-next <div>
.eicon-chevron-right <i>

114
TESTIMONIAL CAROUSEL layout image above/left/right (PART 3)
with arrows , with pagination dots

.elementor-widget-testimonial-carousel <div>
.elementor-widget-container <div>
.elementor-swiper <div>
.elementor-main-swiper <div>
.swiper-wrapper <div>
.swiper-slide <div>
.elementor-testimonial <div>
.elementor-testimonial__content <div>
.elementor-testimonial__text <div>
.elementor-testimonial__footer <div>
.elementor-testimonial__image <div>  <img>
.elementor-testimonial__cite <div>
.elementor-testimonial__name <span>
.elementor-testimonial__title <span>
.swiper-pagination <div>
.swiper-pagination-bullet <span>
.elementor-swiper-button-prev<div>
.eicon-chevron-left <i>
.elementor-swiper-button-next <div>
.eicon-chevron-right <i>

115
TESTIMONIAL CAROUSEL layout image above/left/right (PART 4)
with arrows , with pagination fr action

.elementor-widget-testimonial-carousel <div>
.elementor-widget-container <div>
.elementor-swiper <div>
.elementor-main-swiper <div>
.swiper-wrapper <div>
.swiper-slide <div>
.elementor-testimonial <div>
.elementor-testimonial__content <div>
.elementor-testimonial__text <div>
.elementor-testimonial__footer <div>
.elementor-testimonial__image <div>  <img>
.elementor-testimonial__cite <div>
.elementor-testimonial__name <span>
.elementor-testimonial__title <span>
.swiper-pagination-fraction <div>
.swiper-pagination-current <span>
.swiper-pagination-total <span>
.elementor-swiper-button-prev <div>
.eicon-chevron-left <i>
.elementor-swiper-button-next <div>
.eicon-chevron-right <i>

116
TESTIMONIAL CAROUSEL layout image above/left/right (PART 5)
with arrows , with pagination progressbar

.elementor-widget-testimonial-carousel <div>
.elementor-widget-container <div>
.elementor-swiper <div>
.elementor-main-swiper <div>
.swiper-wrapper <div>
.swiper-slide <div>
.elementor-testimonial <div>
.elementor-testimonial__content <div>
.elementor-testimonial__text <div>
.elementor-testimonial__footer <div>
.elementor-testimonial__image <div>  <img>
.elementor-testimonial__cite <div>
.elementor-testimonial__name <span>
.elementor-testimonial__title <span>
.swiper-pagination-progressbar <div>
.swiper-pagination-progressbar-fill <span>
.elementor-swiper-button-prev <div>
.eicon-chevron-left <i>
.elementor-swiper-button-next <div>
.eicon-chevron-right <i>

117
TESTIMONIAL CAROUSEL layout image inline / stacked (PART 1)
no arrows , no pagination

.elementor-widget-testimonial-carousel <div>
.elementor-widget-container <div>
.elementor-swiper <div>
.elementor-main-swiper <div>
.swiper-wrapper <div>
.swiper-slide <div>
.elementor-testimonial <div>
.elementor-testimonial__content <div>
.elementor-testimonial__text <div>
.elementor-testimonial__footer <div>
.elementor-testimonial__image <div>  <img>
.elementor-testimonial__cite <div>
.elementor-testimonial__name <span>
.elementor-testimonial__title <span>

118
TESTIMONIAL CAROUSEL layout image inline / stacked (PART 2)
with arrows , no pagination

.elementor-widget-testimonial-carousel <div>
.elementor-widget-container <div>
.elementor-swiper <div>
.elementor-main-swiper <div>
.swiper-wrapper <div>
.swiper-slide <div>
.elementor-testimonial <div>
.elementor-testimonial__content <div>
.elementor-testimonial__text <div>
.elementor-testimonial__footer <div>
.elementor-testimonial__image <div>  <img>
.elementor-testimonial__cite <div>
.elementor-testimonial__name <span>
.elementor-testimonial__title <span>
.elementor-swiper-button-prev <div>
.eicon-chevron-left <i>
.elementor-swiper-button-next <div>
.eicon-chevron-right <i>

119
TESTIMONIAL CAROUSEL layout image inline / stacked (PART 3)
with arrows , with pagination dots

.elementor-widget-testimonial-carousel <div>
.elementor-widget-container <div>
.elementor-swiper <div>
.elementor-main-swiper <div>
.swiper-wrapper <div>
.swiper-slide <div>
.elementor-testimonial <div>
.elementor-testimonial__content <div>
.elementor-testimonial__text <div>
.elementor-testimonial__footer <div>
.elementor-testimonial__image <div>  <img>
.elementor-testimonial__cite <div>
.elementor-testimonial__name <span>
.elementor-testimonial__title <span>
.swiper-pagination<div>
.swiper-pagination-bullet <span>
.elementor-swiper-button-prev <div>
.eicon-chevron-left <i>
.elementor-swiper-button-next <div>
.eicon-chevron-right <i>

120
TESTIMONIAL CAROUSEL layout image inline / stacked (PART 4)
with arrows , with pagination fr action

.elementor-widget-testimonial-carousel <div>
.elementor-widget-container <div>
.elementor-swiper <div>
.elementor-main-swiper <div>
.swiper-wrapper <div>
.swiper-slide <div>
.elementor-testimonial <div>
.elementor-testimonial__content <div>
.elementor-testimonial__text <div>
.elementor-testimonial__footer <div>
.elementor-testimonial__image <div>  <img>
.elementor-testimonial__cite <div>
.elementor-testimonial__name <span>
.elementor-testimonial__title <span>
.swiper-pagination-fraction <div>
.swiper-pagination-current <span>
.swiper-pagination-total <span>
.elementor-swiper-button-prev <div>
.eicon-chevron-left <i>
.elementor-swiper-button-next <div>
.eicon-chevron-right <i>

121
TESTIMONIAL CAROUSEL layout image inline / stacked (PART 5)
with arrows , with pagination progressbar

.elementor-widget-testimonial-carousel <div>
.elementor-widget-container <div>
.elementor-swiper <div>
.elementor-main-swiper <div>
.swiper-wrapper <div>
.swiper-slide <div>
.elementor-testimonial <div>
.elementor-testimonial__content <div>
.elementor-testimonial__text <div>
.elementor-testimonial__footer <div>
.elementor-testimonial__image <div>  <img>
.elementor-testimonial__cite <div>
.elementor-testimonial__name <span>
.elementor-testimonial__title <span>
.swiper-pagination-progressbar<div>
.swiper-pagination-progressbar-fill <span>
.elementor-swiper-button-prev<div>
.eicon-chevron-left <i>
.elementor-swiper-button-next <div>
.eicon-chevron-right <i>

122
TEXT EDITOR
.elementor-widget-text-editor <div>
.elementor-widget-container <div>
.elementor-text-editor <div>  <…>


123
TOGGLE
no icon

.elementor-widget-toggle <div>
.elementor-widget-container <div>
.elementor-toggle <div>
.elementor-toggle-item <div>
.elementor-tab-title <H1…H6,div>  <a>
.elementor-tab-content <div>

with icon

.elementor-widget-toggle <div>
.elementor-widget-container <div>
.elementor-toggle <div>
.elementor-toggle-item <div>
.elementor-tab-title <H1…H6,div>
.elementor-toggle-icon<span>  <i>
.elementor-toggle-icon-closed <span>  <i>
.elementor-toggle-icon-opened <span>  <i>
.elementor-tab-content <div>

124
VIDEO
no image overlay, no lightbox

.elementor-widget-video <div>
.elementor-widget-container <div>
.elementor-fit-aspect-ratio <div>
.elementor-video-iframe <iframe>  <html>  <…>

with image overlay, no lightbox , with play icon

.elementor-widget-video <div>
.elementor-widget-container <div>
.elementor-fit-aspect-ratio <div>
.elementor-video-iframe <iframe>  <html>  <…>
.elementor-custom-embed-image-overlay<div>
.elementor-custom-embed-play <div>
.eicon-play <i>

with image overlay, with lightbox , with play icon

.elementor-widget-video <div>
.elementor-widget-container <div>
.elementor-open-lightbox <div>
.elementor-custom-embed-image-overlay<div>  <img>
.elementor-custom-embed-play <div>
.eicon-play <i>

125
 Flexbox-

who am i? learning is my middle name

My name is Frank Tielemans, 47 years old and living in Belgium, Ternat, I highly recommend to learn HTML and CSS and these are the sources I've used (and still do):
(near Brussels). I 'm an experienced (+ 30 years) printdesigner and
a self-taught webdesigner/developer. I own a local print-webdesign ESSENTIAL LEARNING RESOURCES
agency named Glyphbox (Dutch only). HTML https://www.w3schools.com/html/
CSS https://www.w3schools.com/css/
I've learned HTML, CSS and bit Javascript & Jquery back in 2016 and I JS https://www.w3schools.com/js
made a few websites just with pure code. Printdesign & branding is still JQUERY https://www.w3schools.com/jquery/default.asp
my core business, I just started with webdesign out of intrest, because
learning is one of my favorite hobbies. VIDEO TUTORIALS HTML, CSS, JS (YOUTUBE CHANNELS)
Layout Land Online tutorials Coding Tech
In 2018 (better late than never huh?) I've started with Wordpress and LearnWebcode Kevin Powell Keyframers
Elementor and my knowledge of HTML & CSS now came in very handy. Online Web Ustaad DesignCourse Traversy Media
Wes Bos CSS grid Red Stapler Amazing Techno tutorials
The net Ninja Codegrid Divinector

did you know… GAMES TO LEARN CSS THE FUN WAY

…that I created this document with only my left hand? (while I'm right- CSS Diner Learning CSS selectors
handed) Why? Because I had a silly accident and I hurt my right hand. FlexboxFroggy Learning Flexbox the fun way
I had to undergo surgery and now I have to wear that stupid plaster Grid Garden - Learning CSS Grid the fun way
bandage for two weeks. I couldn't work, I was bored and I decided to
spend my time useful by compiling this list. VIDEO TUTORIALS ELEMENTOR & CSS
Am I autistic? No I am not, I'm just very dedicated :) Oooh Boi Sniffle valve Unlimited Elements
Flint Skin Templatemonster Elementor Codes
…I created this document in Adobe Indesign? I needed 20 paragraph Avro The design Creative
styles, 15 character styles, 6 nested styles and 3 GREP styles.
ONLINE CSS GENERATOR TOOLS
Fancy Border-Radius Blobmaker (SVG) Gradientmagic
Brumm.af - smooth box shadow generator Animista (CSS animations) cssgradient.io
Neumorphism.io keyframes.app (CSS animations) gradpad
CSS clip-path maker Bounce.js (CSS animations) gradient-animator

  M  
126