DIVI SELECTORS - PDF document

1 1 DIVI SELECTORS Contents
1 DIVI SELECTORS Contents Forward …….. ……………………………………………….. 3 Using selectors … … … … .. ………………………………. 4 Sections, Rows & Columns ………………………… 5 He ader & Footer ………………………………………… 8 Accordion …………………………………â€

2 ¦â€¦â€¦.. ……… 15 Audio ………
¦â€¦â€¦.. ……… 15 Audio ………………………………………………………….. 17 Bar Counters ……… ……………………………… … …… 1 9 Blog …………………………………………………… … …….. 2 0 Blurb …………………………………………………………… 23 Call to Act ion …………â€

3 ¦â€¦â€¦â€¦â€¦â€¦â€¦â€¦â€¦â€¦â€¦â€¦â€¦â€¦
¦â€¦â€¦â€¦â€¦â€¦â€¦â€¦â€¦â€¦â€¦â€¦â€¦â€¦ 25 Circ le Counter ……………………………………………. 26 Con tact Form …………………………………………….. 27 2 Co untdown Timer ……………………………………… 29 Email Opt In ……………… ……………………………….. 31 Portfolio ………

4 … … … … … … . …………â€
… … … … … … . ……………………………… 32 G allery ………………………………………………………… 34 I mage ………………………………………………………….. 35 Login …………………………………………………………… 37 Map …………………………………………………………

5 …. . 39 Num ber Counter …………
…. . 39 Num ber Counter ……………………………………….. 40 Person ……………………………………………………… … 41 Pric ing Table ………………………………………………. 43 Shop …………………………………………………………… 46 Sl ider ………………………………………………â€

6 ¦â€¦â€¦â€¦.. 50 Tabs ……………â€
¦â€¦â€¦â€¦.. 50 Tabs ………………………………………………………… … 53 Tes timonial ……………………………………………….. 55 T oggle ……………………………………………………….. 57 Vid eo Slider ………………………………………………. 59 3 FORWARD Hey! Thanks for

7 dow nloading your free ‘ DIVI SELECTO
dow nloading your free ‘ DIVI SELECTORS’ eBook . One of the most common CSS issues to come up in the forums and social media groups, is that targeting the elements that make up Divi’s modules can be a little tricky. But struggle no m ore! With this resource, you now have access to the exact selectors needed to change almost every element of the Divi Page Builder.

8 Whether you’re using Divi as a theme
Whether you’re using Divi as a theme or a plugin, this is going to save you so much time! Just so we’re on the same page, w hat exactly is a selector? 4 Using Selectors CSS is made up of three main parts. If you inspect element on any web page you’ll see these straight away… THE SELECTOR The selector is the exac

9 t series of classes, pseudo classes, IDâ
t series of classes, pseudo classes, ID’s and el ements used to target any on - screen elements. It can target lots of things at once, as in the example above where all ‘img’ elements are being targeted, or it can be very specific and target one, or a few things. THE PROPERTY The property is the ‘what’ yo u’d like to change with CSS. It could be one thing, li

10 ke colour. Or it could be lots of thing
ke colour. Or it could be lots of things like height, colour, border - radius, scale, angle and a million other things. THE VALUE The value is the ‘change how?’ of the CSS. You can change the size of an e lement with pixels, percentages or viewport measurements, or the colour etc. A quick Google search for ‘CSS properties’ will show you a number of sites where

11 you can find the properties and values
you can find the properties and values used in CSS, but the selectors used in any theme or plugin are partly created by the developers. So this book is your catalogue of selectors for the Divi Theme and Page Builder. Use them to make CSS edits of your own… 5 Sections, Rows & Columns SECTIONS Sections are the largest part of the page builder . R ow

12 s a nd modules go inside them. .et_pb
s a nd modules go inside them. .et_pb_section { } ROWS Rows make up the content in side a section, top to bottom. .et_pb_row { } COLUMNS Columns make up rows, from left to right. Within the page builder, you’re given the choice of 1, 2, 3 or 4 columns in any row. 6 To target all of t he columns at once you can use: .et_pb_column { }

13 Or you could target columns only IF ther
Or you could target columns only IF there are three of them, like this: .et_pb_column.et_pb_column_1_3 { } Or only IF there are two of them like: .et_pb_column.et_pb_column_1_ 2 { } See how it works? The last number in the class changes to the number of columns there are. Simple as that. What if you don’t want your changes to be so broad? I’

14 ll bet that most of the time you don’t
ll bet that most of the time you don’t want changes to a section to affect EVERY sect ion. Or changes to a blurb header to affect EVERY blurb header. This is how you can make your CSS more specific. If you want to limit, the changes you’re making to a single section, just set a new section class in the theme options. 7 Then you can repl ace the ‘secti

15 on selector’ with t he class you have
on selector’ with t he class you have created and your CSS changes will only affect that section. You can place a custom section or row class in front of all of the CSS selectors in this book (with the exception of the header and footer selec tors) to make the changes more specific. So .et_pb_blurb could b e changed to .front - page - blurbs .et_pb_blurb and that

16 would mean only sections where ‘front
would mean only sections where ‘front - page - blurbs’ was added to the custom class options , would be affected. This is worth bearing in min d when using any of the selectors listed in this book. 8 Header and F ooter 1. Main header before scroll #main - header { } 2. Main header after scroll #main - header.e

17 t - fixed - header { } 3. Logo
t - fixed - header { } 3. Logo #Logo { } 4. Top Navigation #et - top - navigation { } 5. Main Menu List Item #top - menu li a { } 6. Main Menu Drop Down Arrow #top - menu .menu - item - has - children � a:first - child:after { } 7. Search icon #et_search_icon:before { } 9 Top Header 8. # top - header

18 Phone Icon 1. #et - info - phon
Phone Icon 1. #et - info - phone:before { } 2. Phone number #e t - info - phone { } 3. Email Icon #et - info - email:before { } 4. Email Address #et - info - email { } 5. Facebook icon .et - social - facebook a.icon:before { } 10 6. Twitter Icon .et - social - twitter a.icon:before { } 7. Google + Icon .et

19 - social - google - plus a.icon:before {
- social - google - plus a.icon:before { } 8. RSS Icon .et - social - rss a.icon:before { } 9. Top Header Menu Item #et - secondary - menu � ul � li a { } 10. Top Header Drop Down Arrow #et - secondary - nav .menu - item - has - children � a:first - child:after { } 11. Cart .et - cart - info span:before { } 12. Num

20 ber of Items . et - cart - info span {
ber of Items . et - cart - info span { } 11 1. Top Navigation Sub Menu #et - secondary - nav .sub - menu { } 2. Top Navigation Drop Down Link #et - secondary - nav li li a { } 3. Top Navigation link with Drop Down #et - secondary - nav .menu - item - has - children � a:first - child { } 12 1. Main Menu Drop D

21 own Link #top - menu .menu - item - h
own Link #top - menu .menu - item - has - children � a:first - child { } 2. Main Header Sub Menu Link #top - menu li li a { } 3. Main Header Sub Menu #top - menu .sub - menu { } 13 1. Footer Info Text #footer - info p { } 2. Footer Links #footer - info a { } 3. Facebook Icon Footer #footer - bottom

22 .et - social - facebook a.icon:before {
.et - social - facebook a.icon:before { } 4. Twitter Icon Footer #footer - bottom .et - social - twitter a.icon:before { } 5. Google + Icon Footer #footer - bottom .et - social - google - plus a.icon:before { } 6. RSS Icon Footer #footer - b ottom .et - social - rss a.icon:before { } 7. Icon Container Footer .et - social - icons { } 14

23 8. Bottom Links Container #fo
8. Bottom Links Container #footer - bottom .container { } 9. Mobile Menu Icon ( Hamburger ) .mobile_menu_bar:before { } 10. Mobile Menu Main Link .et_mobile_menu .menu - item - has - children � a { } 11. Mobile menu Normal Link .et_mobile_menu li a { } 12. Mobile Menu .et_mobile_menu { } 15 Accordion

24 1. Open Accordion .et_pb_accordion
1. Open Accordion .et_pb_accordion .et_pb_toggle_open { } (or just .et_pb_accordion to target all accordions) 2. Closed Accordion .et_p b_accordion .et_pb_toggle_close { } 3. Accordion Closed Title .et_pb_accordion .et_pb_toggle_close h5.et_pb_toggle_title { } 4. Accordion Open Title .et_pb_accordion .et_pb_toggle_open h5.et_pb_toggle_titl

25 e { } 16 5. Accordion C
e { } 16 5. Accordion Content .et_pb_accordion .et_pb_ toggle_content { } 6. Accordion Plus Icon .et_pb_accordion .et_pb_toggle_title:before { } 17 Audio 1. Cover Art .et_pb_audio_cover_art { } 2. Audio Module .et_pb_audio_module { } 3. Audio Title .et_ pb_audio_module_content

26 h2 { } 4. Controls Co ntainer .
h2 { } 4. Controls Co ntainer .et_pb_audio_module .mejs - container .mejs - controls { } 5. Play Button .et_pb_audio_module .mejs - controls .mejs - play button { } 18 6. Timer Control .et_pb_audio_module .et_audio_container .mejs - controls .mejs - time - rail .mejs - time - handle { } 7. Time Sl ider .et_pb_audio_module .et_aud

27 io_container span.mejs - time - total.me
io_container span.mejs - time - total.mejs - time - slider { } 8. Time Display .et_pb_audio_module .et_audio_container .mejs - container .mejs - controls .mejs - time span { } 9. Mute Button .et_pb_audio_module .mejs - controls .mejs - mute bu tton { } 10. Current Volume Bar .et_pb_audio_module .mejs - horizontal - volume - current { } 11. Volu

28 me Bar Background { } .et_pb_audio_mo
me Bar Background { } .et_pb_audio_module .et_audio_container .mejs - controls .mejs - horizontal - volume - slider .mejs - horizontal - volume - total { } 1 9 Bar Counters 1. Full bar .et_pb_counters .et_pb_counter_container { } 2. Amount .et_pb_counters .et_pb_counter_amount { } 3. Title .et_pb_counters .et_pb_counter_titl

29 e { } 4. Counter Amount .et_pb
e { } 4. Counter Amount .et_pb_counters span.et_pb_counter_amount_number { } 5. Entire Module .et_pb_cou nters { } 20 Blog 1. Post .et_pb_blog_grid .et_pb_post { } 2. Post Image .et_pb_blog_grid .et_pb_image_container img { } 3. Post Title .et_pb_blog_grid .et_pb_post h2 a { } 21 4. Post Meta .et

30 _pb_blog_grid .et_pb_post .post - meta {
_pb_blog_grid .et_pb_post .post - meta { } 5. Post Meta Links .et_pb_ blog_grid .et_pb_post .post - meta a { } 6. Post Preview Text .et_pb_blog_grid .et_pb_post p:not(.post - meta) { } 22 1. Full Width Blog .et_pb_post { } 2. Full Width Blog Image .et_pb_post a img { } 3. Post Title .et_pb_post h2 a { } 4. Post m

31 eta Links .et_pb_po st .post - meta a
eta Links .et_pb_po st .post - meta a { } 5. Full Width Post Preview .et_pb_post p:not(.post - meta) { } 23 Blurbs 1. Entire Blurb .et_pb_blurb { } 2. Blurb Icon .et_pb_blurb .et - pb - icon { } 3. Blurb Text .et_pb_blurb .et_pb_blurb_container { } 4. Blurb Title .et_pb_blurb h 4 { } 5. Blurb

32 Icon Border .et_pb_blurb .et - pb - i
Icon Border .et_pb_blurb .et - pb - icon - circle - border { } 24 6. Blurb Icon Circle .et_pb_blurb .et - pb - icon - circle { } 7. Blurb Image .et_pb_main_blurb_image { } 25 Call t o Actions 1. Entire CTA Module .et_pb_promo { } 2. CTA Title .et_pb_p romo_description h2 { } 3. Description .

33 et_pb_promo_description p { } 4.
et_pb_promo_description p { } 4. CTA Button .et_pb_promo_button { } 5. CTA Button on Hover .et_pb_promo_button:hover { } 6. CTA Arrow on Hover .et_pb_promo .et_pb_button:after { } 26 Circle Counter 1. Circle Counter . et_pb_circle_counter { } 2. Circle Counter Value .et_pb_circle_counter .percent p { } 3. Circ

34 le Counter Title .et_pb_circle_counter
le Counter Title .et_pb_circle_counter h3 { } NOTE: Wondering why the circle and the colour aren’t included here? Those values are set with JS using the ‘data - bar - bg - color’ and ‘data - number - value’ attributes. That’s beyond my skill level… 27 Contact Form 1. Contact Form Title .et_pb_contact_main_title { } 2. Name

35 .et_pb_contact_name { } 3. Email
.et_pb_contact_name { } 3. Email Address .et_pb_contact_email { } 4. Message .et_pb_contact_message { } 5. Captcha sum span.et_pb_contact_captcha_question { } 28 6. Answer .et_pb_contact_captcha { } 7. Submit Button .et_pb_contact_submit.et_pb_button { } 8. Container .et_pb_contact_form_container { }

36 29 Countdown T
29 Countdown Timer 1. Title .et_pb_countdown_timer .t itle { } 2. Days Left .et_pb_countdown_timer .days p.value { } 3. Day(s) label .et_pb_countdown_timer .days p.label { } 4. Hour(s) label .et_pb_countdown_timer .hours p.label { } 5. Minute(s) label .et_pb_countdown_timer .minutes p.label { } 6. Seco

37 nd(s) label .et_pb_countdown_timer .se
nd(s) label .et_pb_countdown_timer .seconds p.label { } 30 7. Hours Left .et_pb_countdown_timer .hours p.value { } 8. Minutes Left .et_pb_countdown_timer .minutes p.value { } 9. Seconds Left .et_pb_countdown_timer .seconds p.value { } 10. Separators .et_pb_countdown_timer .s ep { } 11. Entire Module . et_pb_countdown_timer {

38 } 31 Email
} 31 Email opt - In 1. Module .et_pb_newsletter.et_pb_subscribe { } 2. Title .et_pb_newsletter_description h2 { } 3. Description .et_pb_newsletter_description:not(h2) { } 4. Name .et_pb_newsletter.et_pb_s ubscribe #et_pb_signup_firstname { } 5. Email Address .et_pb_newsletter.et_pb_subscribe #et_pb_signup_

39 email { } 6. Button .et_pb_news
email { } 6. Button .et_pb_newsletter.et_pb_subscribe .et_pb_newsletter_button { } 32 Portfolio 1. Overlay .et_pb_portfolio_image .et_overlay { } 2. Image . et _pb_portfolio_image img { } 3. Portfolio Icon .et_pb_portfolio_image .et_overlay:before { } To override the current logo you need to find a new one and place it betwe

40 en speech marks using the content prope
en speech marks using the content property like this: .et_pb_portfolio_image .et_overla y:before { content: “code here” } To find the different icon codes look here . 33 4. Title .et_pb_portfolio_image h3 { } 5. Portfolio Meta .et_pb_portfolio_image p.post - meta { } 6. Mo dule .et_pb_fullwidth_portfolio { } /** For full - width

41 portfolio **/ .et_pb_portfolio_grid
portfolio **/ .et_pb_portfolio_grid { } /** For grid portfolio **/ 34 Gallery 1. Overlay icon .et_pb_gallery_image .et_overlay:before { } 2. Gallery Grid Title .et_pb_gallery_grid .et_ pb_gallery_title { } 3. Overlay .et_pb_gallery_image .et_overlay { } 4. Image .et_pb_gallery_image { }

42 35 Image 1. Image backgr
35 Image 1. Image background in lightbox .mfp - bg { } 2. Image in lightbox img.mfp - img { } 3. Close X .mfp - image - holder .mfp - close { } 36 4. Image .et_pb_i mage { } 37 Login 1. Login Module .et_pb_login { } 2. Title .et_pb_login h2 { } 3. Descri

43 ption .et_pb_login .et_pb_newslette
ption .et_pb_login .et_pb_newsletter_description:not(h2) { } 4. Username .et_pb_login #user_login { } 38 5. Password .et_pb_login #user_pass { } 6. Forgot P assword Text .et_pb_login .et_pb_forgot_password { } 7. Submit Button .et_pb_login .et_pb_newsletter_button { } 39 Map 1. Ma

44 p Module .et_pb_map_container { }
p Module .et_pb_map_container { } 2. Map Pin The pin styling is not set with CSS. You can learn how to change it usin g this pretty cool article by Dan Mossop . 40 Number Counter 1. Number Counter .et_pb_number_counter { } 2. Number .et_pb_number_counter span.percent - value { } 3. Number Counter Text .et_pb_number_

45 counter h3 { } 4. With Percentage
counter h3 { } 4. With Percentage .et_pb_number_counter .percent { } 41 Person 1. Person Module .et_pb_team_member { } 2. Image .et_pb_team_member_image img { } 42 3. Name .et_pb_team_member_description h4 { } 4. Position .et_pb_ member_position { } 5. Description .et_pb_team_member_description {

46 } 6. Facebook .et_pb_team_memb
} 6. Facebook .et_pb_team_member .et_pb_facebook_icon { } 7. Twitter .et_pb_team_member .et_pb_twitter_icon { } 8. Google + .et_pb_team_member .et_pb_google_icon { } 9. LinkedIn .et_pb_team_mem ber .et_pb_linkedin_icon { } All social media icons can be targeted at once with: .et_pb_team_member .et_pb_font_icon { } 43 Pricin

47 g Table 1. Header Section .et_
g Table 1. Header Section .et_pb_pricing_heading { } 2. Featured Table .et_pb_pricing_table.et_pb_featured_table { } 3. Prici ng Section .et_pb_pricing_content_top { } 44 4. Price .et_pb_pricing_table .et_pb_sum { } 5. Per Year .et_pb_pricing_table .et_pb_frequency { } 6. Dollar Sign .et_pb_pricing_table .et_pb_dollar_

48 sign { } 7. List Item .et_pb_pr
sign { } 7. List Item .et_pb_pricing_table ul.et_pb_pricing li { } Or when not available .et_pb_pricing_table li.et_pb_not_available { } 8. Button .et_pb_pricing_table_button { } 9. Pricing Title .et_pb_pricing_heading h2 { } 10. Best Value .et_pb_pricing_table .et_pb_best_value { } 45 11. Pricing Top .et_pb_pricing_c

49 ontent_top { } 12. Standard pric
ontent_top { } 12. Standard pricing Table .et_pb_pricing_table { } 46 Shop 1. Product .et_pb_shop .product { } 2. Overlay .et_pb_shop .product .et_overlay { } And Image .et_pb_shop .product img { } 3. Sale .et_pb_shop .woocommerce span.onsale { } 47 4. P rice .et_pb_sho

50 p span.amount { } 5. Title .et_
p span.amount { } 5. Title .et_pb_shop .woocommerce ul.products li.product h3 { } 6. Star Rating .et_pb_shop .woocommerce ul.products li.product .star - rating { } 7. Deleted price .et_pb_shop .woocommerce ul.products li.product .price del { } 8. New Price .et_pb_shop .woocommerce ul.prod ucts li.product .price ins { } 48 1. P

51 roduct Image img.attachment - shop_sin
roduct Image img.attachment - shop_single { } 2. Product Title .product_title { } 3. Shop Price .entry - summary p.price span { } 4. Description .entry - summary p:not(.price) { } 5. Prod uct Meta .product_meta { } 6. Quantity .woocommerce div.product form.cart div.quantity { } 7. Button .woocommerce .product .cart .button

52 { } 8. Tabs .woocommerce .produ
{ } 8. Tabs .woocommerce .product .woocommerce - tabs .tabs li { } 49 9. Tab Titles .wc - tab h2 { } 10. Tab description .wc - tab p { } 11. Tabs ALL .wc - tabs - wrapper { } 50 Slider 1. Previous Slide .et_p b_slider .et - pb - arrow - prev { } 2. Next Slide .et_pb_slide

53 r .et - pb - arrow - next { } 3.
r .et - pb - arrow - next { } 3. Active Slide .et_pb_slide.et - pb - active - slide { } 4. Slide Image .et_pb_slider .et_pb_slide _image img { } 5. Slide Description (This usually controls the height of the slider) .et_pb_slider .et_pb_slide_description { } 51 6. Slide Title .et_pb_slide_title a { } 7. Slide Text .et_pb_slide_co

54 ntent { } 8. Slide Button .et_p
ntent { } 8. Slide Button .et_pb_slider .et_pb_button { } 9. Act ive Slide Dot .et - pb - active - control { } 10. All dots .et - pb - controllers a { } *It is possible to target the dot navigation individually like so… .et - pb - controllers a:nth - child(1) { } .et - pb - controllers a:nth - child(2) { } .et - pb - controllers a:nth

55 - child(3 ) { } 52 It
- child(3 ) { } 52 It is also possible to target the slides individually like so… .et_pb_slide.et_pb_slide_1 { } .et_pb_slide.et_pb_slide_2 { } .et_pb_slide.et_pb_slide_3 { } 53 Tabs 1. Tabs Module .et_pb_tabs { } 2. All tabs (inside) .et_pb_ tabs .et_pb_all_tabs { } 3. Tab

56 Controls .et_pb_tabs .et_pb_tabs_cont
Controls .et_pb_tabs .et_pb_tabs_controls { } 4. Tabs content .et_pb_all_tabs .et_pb_active_content { } 5. Active Tab .et_pb_tabs li.et_pb_tab_active { } 54 6. Tabs List .et_pb_tabs li.et_pb_tab_0 { } .et_pb_tabs li.et_pb_tab_1 { } .et_pb_tabs li.et_pb_tab_2 { } Tabs are ordered from the 0 to the last, even if you have two or thre

57 e on one page. So if you had two tab mo
e on one page. So if you had two tab modules on a page and the first one had three tabs then the first tab of the second one would be ‘tab_3’. Make sen se? 55 Testimonials 1. Testimonial Module .et_pb_testimonial { } 2. Testimonial Portrait .et_pb_testimonial_portrait { } 3. Description .et_pb_test

58 imonial_description_inner { } 4.
imonial_description_inner { } 4. Author .et_pb_testimonial_author { } 56 5. Meta .et_pb_testimonia l_meta { } 6. Meta Links .et_pb_testimonial_meta a { } 57 Toggle 1. Toggle Open .et_pb_toggle.et_pb_toggle_open { } 2. Toggle Closed .et_pb_toggle.et_pb_toggle_close { } 3. T

59 oggle Open Title .et_pb_toggle.et_pb_t
oggle Open Title .et_pb_toggle.et_pb_toggle_open h5.et_pb_toggle_ti tle { } 4. Toggle Text .et_pb_toggle_content p:last - of - type { } 5. Toggle to close .et_pb_toggle.et_pb_toggle_open .et_pb_toggle_title:before { } 58 6. Toggle Close Title .et_pb_toggle_close h5.et_pb_toggle_title { } 7. Toggle Closed Title .et_pb_toggle.et_pb_t

60 oggle_close h5.et_pb_toggle_title { }
oggle_close h5.et_pb_toggle_title { } 59 Video Slider 1. Video .et_pb_video_slider .et_pb_video_wrap { } 2. Video Overlay .et_pb_video_slider .et_pb_video_overlay_hover { } 3. Carousel Item .et_pb_video_slider .et_pb_carousel_item { } 60 4. Car ousel .et_pb_video_slider .et - carousel -