CSS selectors of divi modules are needed to customize the site accordingly, but it sometimes little hard to know about the css selector of particular module. To find out the css selector of any divi module you need to follow given steps.

  • Go to the Module Settings .
CSS Selectors of DIVI Modules

modules settings

  • Click on Custom CSS.
  • Scroll Down and find out the “Main Element”.
  • Click inside the Main Element and You will see a css selector just sided to “Main Element”.

CSS Selectors of DIVI Modules

And even if you finds out yourself unable to find out the css selector then you can find out a selector for any module.

Module CSS Selectors
Accordian Module.et_pb_accordion_0.et_pb_accordion
Audio Module.et_pb_audio_0.et_pb_audio_module
Bar Counters Module.et_pb_counters_0.et_pb_counters
Blog Module.et_pb_blog_0 .et_pb_post
Blurb Module.et_pb_blurb_0.et_pb_blurb
Button Module.et_pb_button_0
Call to Action.et_pb_cta_0.et_pb_promo
Circle Counter.et_pb_circle_counter_0.et_pb_circle_counter
Code Module.et_pb_code_0
Comments Module.et_pb_comments_0
Contact Form Module.et_pb_contact_form_0.et_pb_contact_form_container
Countdown Timer.et_pb_countdown_timer_0.et_pb_countdown_timer
Divider Module.et_pb_divider_0
Email Optin Module.et_pb_signup_0.et_pb_subscribe
Filterable Portfolio.et_pb_filterable_portfolio_0.et_pb_filterable_portfolio
Gallery .et_pb_gallery_0.et_pb_gallery
Image.et_pb_image_0
Login .et_pb_login_0.et_pb_login
Map.et_pb_map_0
Number Counter.et_pb_number_counter_0.et_pb_number_counter
Person.et_pb_team_member_0.et_pb_team_member
Portfolio.et_pb_portfolio_0 .et_pb_portfolio_item
Post Navigation.et_pb_post_nav_0
Post Slider.et_pb_post_slider_0.et_pb_slider
Post Title.et_pb_post_title_0
Pricing Tables.et_pb_pricing_tables_0
Search.et_pb_search_0
Shop.et_pb_shop_0.et_pb_shop
Sidebar.et_pb_sidebar_0.et_pb_widget_area
Slider.et_pb_slider_0.et_pb_slider
Social Media Follow.et_pb_social_media_follow_0
Tabs .et_pb_tabs_0.et_pb_tabs
Testimonials.et_pb_testimonial_0.et_pb_testimonial
Text.et_pb_text_0
Toggle.et_pb_toggle_0.et_pb_toggle
Video.et_pb_video_0
Video Slider.et_pb_video_slider_0
FullWidth Code.et_pb_fullwidth_code_0
FullWidth Header.et_pb_fullwidth_header_0
FullWidth Image.et_pb_fullwidth_image_0
FullWidth Map.et_pb_fullwidth_map_0
FullWidth Menu.et_pb_fullwidth_menu_0.et_pb_fullwidth_menu
FullWidth PortFolio.et_pb_fullwidth_portfolio_0
FullWidth Post Slider.et_pb_fullwidth_post_slider_0.et_pb_slider
FullWidth Post Title.et_pb_fullwidth_post_title_0
FullWidth Slider.et_pb_fullwidth_slider_0.et_pb_slider

In above table you will see a zero in each selector which representing the first particularĀ moduleĀ of any page, and if that particular module will comes second time then the zero will be replaced by one and it goes on.

If you have any question or suggestion please feel free to post comment below.

You May Also Like

Subscribe To Our Newsletter For More Tips & Tricks on Elegant Themes

Subscribe To Our Newsletter For More Tips & Tricks on Elegant Themes

You have Successfully Subscribed!

Share This