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

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

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

with icon

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

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

To target an activated accordion tab use this selector: .elementor-active.elementor-tab-title

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) (PART 1)
date picker not visible

.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 (date) (PART 2)
date picker

.flatpickr-calendar <div>
.flatpickr-month <div>
.flatpickr-prev-month <div>  
<svg>  <path>
.flatpickr-current-month <div>
.cur-month <span>
.numInputWrapper <div>
.numInput.cur-year <input>
.arrowUp <span>
.arrowDown <span>
.flatpickr-next-month <div>  
<svg>  <path>
.flatpickr-next-month <div>  <svg>
.flatpickr-innerContainer <div>
.flatpickr-rContainer <div>
.flatpickr-weekdays <div>
flatpickr-weekday <span>
.flatpickr-days <div>
.dayContainer <div>
.flatpickr-day.prevMonthDay <span>
.flatpickr-day <span>
.flatpickr-day.nextMonthDay <span>

31
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”>

32
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”>

33
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”>

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

35
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”>

36
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”>

37
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”>

38
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>

39
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>

To target and style the confirmation text after the form was send use class .elementor-message.elementor-message-success

40
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”>

41
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”>

42
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>

43
FORM (time) (PART 1)
timepicker not visible

.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”>

44
FORM (time) (PART 2)
timepicker

.flatpickr-calendar <div>
.flatpickr-time <div>
.numInputWrapper <div>
.flatpickr-hour <div>
.arrowUp <span>
.arrowDown <span>
.flatpickr-time-separator <span>
.numInputWrapper <div>
.flatpickr-minute <div>
.arrowUp <span>
.arrowDown <span>
.flatpickr-am-pm <span>

When the timepicker opens, the HTML elements are not created inside the form HTML structure, but at the very end of the HTML page.
The arrows in the timepicker are not an icons but made in CSS, so you can change color and shape, use these 2 selectors

.numInputWrapper span.arrowUp:after
.numInputWrapper span.arrowDown:after

45
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”>

46
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>

47
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>

48
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>

49
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>

50
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>

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

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

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

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

55
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>

56
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>

57
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>

58
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>

59
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>

60
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>

61
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>

62
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>

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

64
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>

65
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>

66
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>

67
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>

68
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>

69
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>

70
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>

71
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>

72
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>

73
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>

74
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>

75
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>

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

77
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>

78
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

79
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

80
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

81
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>

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

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

84
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>

85
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>

86
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

87
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

88
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>

89
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>

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

91
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>

92
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>

93
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.

94
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>

95
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>

96
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>

97
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>

98
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>

99
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>
100
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>

101
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>

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

103
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-duplicate-active <div>
.swiper-slide-duplicate-next <div>
.swiper-slide-prev <div>
.swiper-slide <div>
.swiper-slide-duplicate-prev <div>
.swiper-slide-duplicate-active <div>
.swiper-slide-duplicate-next <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>

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

104
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-duplicate-active <div>
.swiper-slide-duplicate-next <div>
.swiper-slide-prev <div>
.swiper-slide <div>
.swiper-slide-duplicate-prev <div>
.swiper-slide-duplicate-active <div>
.swiper-slide-duplicate-next <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>

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

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

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

108
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

109
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>

110
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>

111
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

112
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

113
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>

114
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>

115
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>

116
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>

117
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>

118
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>

119
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>

120
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>

121
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>

122
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>

123
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>

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


125
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>

126
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>

127
 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  
128