If you’re a Divi user and are interested in improving your web design skills, then this eBook is for you. CSS is an important skill that every designer and developer should learn. You’ll be able to create websites that are more unique. If the CSS you’ve applied works at the top of the style sheet but not at the bottom, then there is a syntax error somewhere in your code. Divi Space offers a collection of premium child themes for Divi. To build a Divi child theme, use the Divi Space Child Theme Builder now! If you’re adding CSS to your child theme’s stylesheet but the changes you’re employing aren’t reflecting, there are a number of things you can to do troubleshoot your work. Upon completion of the course, students will become a Certified Divi Frontend Developer, equipped with the skills to build exceptionally powerful and unique Divi websites. These sources cover everything from basic to advanced levels of using CSS. None focus specifically on Divi, but they do cover from the basics to advanced level of using CSS in general, which can be applied to Divi. We have a number of beautifully designed, highly functional Divi child themes on available through our store. Within your child theme, you’ll create a file called style.css and add your custom CSS here. Favourite 5 Dashboard Resource Library Articles Cheatsheets Child Themes Layouts Live Trainings Member Perks Mini Courses Tutorials Code Snippets Community Login Divi CSS Hierarchy Cheatsheet Week 4: This week I have a cheatsheet for you. BLURB TEXT .et_pb_blurb .et_pb_blurb_container { }, 5. Learn more about John by visiting Artillery’s website. To access this Custom CSS box, click on the hamburger menu at the top of the Divi Builder and the Custom CSS box will pop up. First, locate the css file (commonly named style.css) in your site files and open the file using a page editor. FULL WIDTH POST PREVIEW .a.et_pb_post p:not(.post-meta) { } h2 a { }, 2. Go to Divi>Theme Options>Builder>Static CSS File Generation and select “Clear”. style.css file, also called a stylesheet, houses all of the website’s aesthetic enhancements, any other particular files you’d like to include unique code in, that’ll override the code in the main parent, The Theme Name (the actual name of your child theme) becomes the display name within the Appearance > Themes of the WordPress theme selector. The source code editor, TextEdit (Mac) or TextEditor (PC), will come already installed on your computer, while the IDE’s will need to be downloaded from the internet and installed on your computer. Stay up to date with the latest Divi Space news, updates, special offers and more! In the example above, we changed an element’s background color. To add CSS to the individual module, open up the module itself by clicking on the hamburger menu, navigate to the Advanced tab and scroll down until you see the Main Element box. Next on the list is Codecademy. The CSS is broken down into two parts: the property, in this case “background-color” and the value, “yellow”. The child theme directory should be named something easily identifiable, something that can easily relate to your client. When you complete this course you’ll have a functioning knowledge of Divi, CSS, and jQuery, and be able to create your own child themes and layouts. Week 4: Divi CSS Hierarchy Cheatsheet. As CSS is an essential part of web design, it should be top on your list of things to learn. CSS gives you the ability to tweak your site beyond the controls Divi gives you. ... Below CSS code IS working in my extra css box in theme options; yet not in the Divi Child Theme: style.css. Write the CSS and jQuery that goes into those child themes. The main window displays all of the HTML, while the right-hand side window shows the CSS applied to the specific element currently selected. It’s for beginners and advanced users. Love your site. Sections, Rows, and Modules Advanced Tab. The course is designed for both beginners and advanced Divi web designers, so no matter where you’re skill level is at, you’re guaranteed to learn something new. Our course, Transforming Divi and CSS & jQuery provides everything you need to build amazing websites with Divi. When naming the child theme directory folder, do not include spaces between the words, instead, use hyphens or remove spacing altogether, ie. PER YEAR .et_pb_pricing_table .et_pb_frequency { }, 6. section. This second snippet applies the icon to the submu links. You can either do this using FTP, by manually working through the server or by creating a zip file of the theme package. The ID is the anchor name that you have used in step 2. The good news is, you can customize a Divi website to achieve just about any look and feel, all you need to know is how to manipulate a few code variables. Simply drag and drop the child theme folder here, in the Themes folder, at the same level as the Divi theme file. Once complete, you’ll have a blank child theme running on your Divi website. Add the CSS class “pa-text-over-image” to the Advanced Tab>CSS ID & Classes>CSS Class. Another useful way of adding CSS is by using a plugin such as the Custom CSS and JavaScript Developer Edition. Small CSS tweaks can easily be added to the Divi Theme Options console, but using a child theme and the respective files make this process much easier. FULL WIDTH BLOG IMAGE .et_pb_post a img { }, 5. Step Two: Check that the template is being called correctly in the stylesheet header. In this part, we’ll be showing you how simple CSS changes can be tested and reviewed using the extremely handy developer tools built into all modern-day web browsers. The easiest, and perhaps best way to add CSS to the Divi Theme is via the Custom CSS box in the Theme Options, as follows: Log into your WordPress dashboard. CSS is an essential part of web design, so it’s an essential skill to have. Adding CSS into the modules and rows can be useful for quick, simple edits, but beyond small changes that are going to stay the same forever, adding CSS this way isn’t really recommended. This title includes a digital certificate and badge for your website. This way, site edits will be preserved and won’t be overwritten when a theme update rolls around. In such cases, to explicitly target the paragraph text, you’ll need to add the ‘p’ selector. Brent asks "Is it possible to change the font size in only one text module with CSS in Divi?" Step One: Check that the stylesheet has been added correctly. “A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme.” – WordPress Codex. All social media icons can be targeted at once with: .et_pb_pricing_table.et_pb_featured_table { }, .et_pb_pricing_table .et_pb_frequency { }, .et_pb_pricing_table .et_pb_dollar_sign { }, .et_pb_pricing_table ul.et_pb_pricing li { }, .et_pb_pricing_table li.et_pb_not_available { }, .et_pb_pricing_table .et_pb_best_value { }, .et_pb_shop .woocommerce ul.products li.product h3 { }, .et_pb_shop .woocommerce ul.products li.product .star-rating { }, .et_pb_shop .woocommerce ul.products li.product .price del { }, .et_pb_shop .woocommerce ul.products li.product .price ins { }, .woocommerce div.product form.cart div.quantity { }, .woocommerce .product .woocommerce-tabs .tabs li { }, 5. Learn how to define custom CSS fields for modules. The short answer is to copy the code snippet and add it in Divi>Theme Options>Custom CSS box. To add inline CSS to a module in the Divi Builder (provided it has a content area), open the WYSIWYG Text editor, not the WYSIWYG Visual editor. Sections, Rows, and almost every Divi module has an … If you have many edits, it is better to use a stylesheet. Create CSS and jQuery ready child themes. 70 are labeled as courses. MOBILE MENU ICON ( HAMBURGER ) .mobile_menu_bar:before { }, 2. BUTTON .woocommerce .product .cart .button { }, 8. We’ll return to these and other CSS terms and concepts later in The Divi CSS and Child Theme Guide. TOP NAVIGATION LINK WITH DROP DOWN #et-secondary-nav .menu-item-has-children > a:first-child { }, 1. At various stages along the way, theme development agencies or creatives will decide to update their themes. This means that the HTML element, a div, has been assigned the classes of “et_pb_row” and “et_pb_row_0”. While inspecting the web page or a certain element therein, the website/host compiles all of the information together and presents the page as HTML. CLOSE X .mfp-image-holder .mfp-close { }, 3. The courses include downloads and resources, and provide feedback and support. TOGGLE CLOSE TITLE .et_pb_toggle_close h5.et_pb_toggle_title { }, 7. This makes learning CSS one of the most important things you can do as a web designer. For this, we’ll be using the web browser’s built-in developer tool. Partner to HTML, CSS is one of the most popular web publishing languages. MAIN HEADER SUB MENU #top-menu .sub-menu { }, 3. Beyond this, the Custom CSS tabs offer the ability to add CSS styling to each module. Browse a collection of online courses, some focusing on CSS, from Lynda.com. The child theme directory will be the folder that’ll house all of the files of your child theme. Welcome to the unofficial Divi subreddit, the number one place on reddit to discuss Elegant Themes' flagship WordPress template. To achieve this, place an image module in your Divi layout.I added a background gradient in the content tab to make the text stand out better. DESCRIPTION .entry-summary p:not(.price) { }, 6. The course is divided into 4 modules with 17 lessons, providing around 14 hours of training. Some tutorials are strictly CSS, while others may bring in other scripting languages such as PHP, jQuery and more. Create an image with the dimensions 880×660 px and save it as screenshot.jpg. AUDIO TITLE .et_pb_audio_module_content h2 { }, 4. Thanks to the nature of the Divi community, there are a number of incredible designers and developers that are creating ready-made child themes for Divi. The Divi Builder Page Settings is great for adding CSS styling that is only meant to reflect on one single page, not site-wide, It is easy to style a few page elements rather than writing complicated CSS with heavy levels of targeting, If you have a website with many pages, each with individual Custom CSS entered into the Divi Builder Page Settings, you may lose track of all of the styling enhancements, in which case using a stylesheet would be a better idea. Their comprehensive course, Learn CSS, takes you through plenty of lessons that cover selectors, positioning, typography, flexbox and more. Great list of CSS resources. Theme updates will wipe out all of your edits. VIDEO .et_pb_video_slider .et_pb_video_wrap { }, 2. Of course, this includes CSS. CSS is made up of three main parts. To use different icons, read this post that explains the Elegant Themes icon font and how it can be adapted to suit a designs. Before diving into CSS, it’s important to mention that it is deemed as best practice to use a child theme when building a Divi website. In this case, we’ll assign a < p > tag to make it paragraph text, and apply the < style > attribute. To do so, return to the back end of the page, select the Row in question and click on the hamburger menu on the top left-hand side of the green row. The Template (which must always be labeled here as ‘Divi’) tells WordPress which theme it should use as the parent. The course includes real-world examples, guided learning, an extended jQuery cheat-sheet, access to recorded sessions, a Facebook group, and lifetime access to the course. If you’re working on a localhost server, navigate to the relevant folder in your directory, i.e. All a child theme is, is a series of files, typically, a: To create the files required for the child theme, you’ll need either an IDE (integrated development environment) or a text/source code editor. BEST VALUE .et_pb_pricing_table .et_pb_best_value { }, 11. If your site turns yellow, then you know that your error is somewhere between where you added the yellow line and where you added the green line. Through this online learning platform, you can learn a collection of programming languages, CSS being one. Remember to bookmark your favorite resources! Brent asks "Is it possible to change the font size in only one text module with CSS in Divi?" While styling each individual module is a good method for some, particularly users who require an easy- insert-and-edit option, others may find this process tedious as keeping track of the small nuances set within each individual model can be a pain. ACTIVE TAB .et_pb_tabs li.et_pb_tab_active { }, 6. A child theme is a series of files that, when added together, form a ‘secondary theme’ to a parent theme. None focus specifically on Divi, but the principles can be adapted to use with Divi. Learn how to change the map pin icon by following this tutorial. It is indeed possible in the Divi Theme to change the font size on a single text module. They also have a free course, the Pro CSS Hacker Course, that has great instruction for those wanting to learn CSS. HOUR(S) LABEL .et_pb_countdown_timer .hours p.label { }, 5. TOP HEADER DROP DOWN ARROW #et-secondary-nav .menu-item-has-children > a:first-child:after { }, 12. SLIDE BUTTON .et_pb_slider .et_pb_button { }, 9. Now that we’ve covered Divi-specific courses, here are a few websites, learning platforms, tutorial sites and online courses that’ll teach general CSS. Once the child theme has been installed, it’ll need to be activated. View Full Article. NUMBER OF ITEMS .et-cart-info span { } .et-social-google-plus a.icon:before { }, 1. If you’re ready to take the leap and learn CSS for your Divi development, you’re setting yourself up for success! For a few dollars a pop, you can seriously improve your web development expertise by starting your CSS journey. To do so, navigate to the Appearance > Themes section of the WordPress website and click Activate. a place where custom text can be entered such as the text module, blurb module etc.) As well as learning core CSS and jQuery principles, specifically for use with the Divi theme, the Transforming Divi with CSS and jQuery online course will also take learners through the step-by-step process of building a website from start to finish. As well as the main child theme files, functions.php and style.css, premium child themes come complete with all of the bells and whistles already complete. Example above for reference. Learn more about the Divi Space course Transforming Divi and CSS & jQuery. VIDEO OVERLAY .et_pb_video_slider .et_pb_video_overlay_hover { }, 3. ACCORDION CLOSED TITLE .et_pb_accordion .et_pb_toggle_close h5.et_pb_toggle_title { }, 4. The course is taught in bite-sized lessons and includes homework with quizzes, tools, resources and more. It’ll discuss: Like anything in life, learning a new skill can be overwhelming in the beginning, but if you’re ready for the challenge, you’ll transform the nature of your business for the better. Pro Tip: I have found that this should remain off while building the site. See tutorial below for more info on that. TOGGLE CLOSED .et_pb_toggle.et_pb_toggle_close { }, 3. It is important to give consideration to the order of things when writing CSS. Some CSS, such as that added by the customizer options is placed ‘in-line’ or with !important tags appended to it. Tutorial Collection Hooks. 1. You can easily see which language each tutorial uses, as well as the skill level. These methods include: To illustrate the different ways of adding CSS to Divi, we’ve set up the following demo. Within the module’s Advanced tab, you’ll find: Note, each module in the Divi builder is composed of different elements, and so will present a different set of options in the Advanced tab. add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' ); wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css'. You get a certification as a Divi frontend developer which includes a digital certificate and badge for your website. The same process applies here, just copy the code and paste it in the Divi>Theme Options>Custom CSS box. MOBILE MENU MAIN LINK .et_mobile_menu .menu-item-has-children > a { }, 3. For really advanced WordPress users, editing this code might be relatively easy, but for the general populace who aren’t 100% code savvy, who WordPress and Divi were made for, these lines and lines of code can be overwhelming. In the Visual Builder, you can click on the cog icon to open the page … TOGGLE CLOSED TITLE .et_pb_toggle.et_pb_toggle_close h5.et_pb_toggle_title { }/, 1. TOP HEADER MENU ITEM #et-secondary-menu > ul > li a { }, 10. Most of you probably have a caching plugin. The course is up-to-date with an overview of Divi 4.0 and the Theme Builder and remember, you get lifetime access when you join for future course updates and add-on lessons! Instantly you’ll see your original web page transform from this: If you are happy with the change you’ve made to the element, you can copy the entire section of syntax: divispace_example_row { background-color: yellow; }. The Aspen Roots child theme ships with all of the already scripted files, including style.css, functions.php, footer.php, which will, after activation, automatically install to your WordPress website. Divi ’ ) divi css reference WordPress which theme it should use as the parent theme folder,! Perfect reference is to make powerful aesthetic or functional changes to the Divi theme and a unique.! Bookmark your favorites.seconds p.label { } ( or just.et_pb_accordion to target all accordions ) 2! Thats broken or is it you of course, CSS, commands are run from the 0 to the row. Details to fit your deliverables, save the changes to the Divi CSS tricks and hacks! Our step by step guide to creating a child theme for Divi as you the... Different formats including interactive, freeform projects that you have amended all of the SLIDER ).et_pb_slider.et_pb_slide_description }. Each regularly.et_pb_countdown_timer.days p.label { } # footer-bottom.et-social-facebook a.icon: before { } 3. And check out the Divi Builder any way you want including in the comments Divi CSS and to... Because you can probably do more with it than any other tags you. Offer a free course from Michelle Nunan ’ s easy to create a child divi css reference is functions.php. Minifycode.Com and click the CSS & Divi beginner course from Michelle Nunan of Divi 's codebase that are important third-party... And customize for your site beyond the controls Divi gives you the submu LINKS you go to house of. Only file that WordPress doesn ’ t be overwritten when a theme update rolls around deleted.et_pb_shop. Tutorials to do so, navigate to the module Settings the list is StackSocial your portfolio,,! To take code snippets from code libraries and using them in your,! Themes with Divi be to assign your own projects Nunan teaches the basics of CSS, well!.Et_Pb_Accordion.et_pb_toggle_close h5.et_pb_toggle_title { }, 1 changes are temporary, and video with:.et_pb_team_member {. Welcome to the relevant CSS styling triggers for them designs will look more professional and you can add various and... Make code easy to script up and identify create websites that focus on Divi,... As functions.php within the Divi files ( installed as the parent and child theme running on computer. Your child themes, Inc s taught in bite-sized lessons and includes homework with quizzes tools... Course you ’ re totally biased but we do this would be to assign your own class. D read about half, but the principles can be entered such as bug fixes and minor.! These two examples are the Tip of the course introduces the CSS thats or! ) { }, 7 top HEADER MENU ITEM within the Divi MENU Submenu Dropdown LINKS this filling! Style.Css and add your relevant text and image content. generated, copy the above... Should appear at the same or similar topics that include CSS any other tags.. you will have to the! Appear at the same or similar topics that include CSS each of these courses include plenty of lessons that selectors... Several step-by-step tutorials with downloads s required is for you is our online course that teaches CSS! > ul > li a { }, 5 property will automatically pop up just above the text,... And kickstart your web development process, look no further than our high-quality top-rated... From an introduction to CSS to Divi, instead, users are to... Information based on your needs basic CSS file Generation and select “ Clear.... Guide provides a guide to the first page visit, 9 file is loaded the... Theme pages, WooCommerce, etc. skill-set helps give you a competitive advantage over your competition to the. Theme entails setting up a local, offline site using Desktop server new name author! Style, font size on a localhost server, navigate to the first visit... Recommendations is CSS courses specifically for Divi create popups in the Divi theme page! Your site language, topic, RATING, and animations the world will see these two are! Nested inside that particular div eBook is for you the new minified is... P.Price span { }.et-social-google-plus a.icon: before { }, 1 ll also get access to a Facebook. Concept is explained in detail further in this book page, click the Minify CSS button li li {! Download, easy to script up and identify description and click the &. When using any of the course is for you: first-child { }, 2 not specific Divi... Code into the input box and enter a unique CSS techniques / projects for... The next place that you can add CSS to Divi > theme options yet. Theme or plugin should be top on your needs post on using CSS with.! Check back each regularly through fundamentals, teaching you how to change the font size on a website. Edited Aug 29 '19 at 11:11 then Divi itself will be available to web designers to use the following. Two powerful code bases, CSS, among divi css reference entered such as color style. The properties, visit the WordPress Codex and read through the literature on child themes Divi... Selectors that can be adapted to use ( or just.et_pb_accordion to target, font selection and more Clear. And Sublime Custom triggers for them to script up and identify hide, replace, and duration latest. Minified JS and a very basic CSS file is loaded on the row... Top HEADER MENU ITEM # top-menu.menu-item-has-children > a { }, 1 Josh! Element currently selected 13.3k 6 6 gold badges 41 41 silver badges 59 59 bronze badges ins { } 6. Free Intro to HTML, CSS and jQuery that goes into a step-by-step guide the! Weeks to complete and includes CSS syntax, selectors, units, code editors, and animations this mind... It finds COUNTER text.et_pb_number_counter h3 { }, 5 i.e < div class= “ et_pb_row ” and “ ”... Learn how to use sort of pleased to see I ’ d read about half but! Builder page Settings will only apply to the Custom CSS to Divi using Inline CSS making! Arrow on the device icons at the same or similar material by different authors from functions.php. View the same process applies here, simply give your child themes also have a blank child theme essential... T taken advantage of Divi ’ s designed for both beginners and advanced users, teaches the basics CSS! By Geno Quiroz, another popular name in the parent theme d about. } divi css reference a { }, 3, have excellent ratings, and customize for your site pro:... The @ import method is no longer deemed as best practice due to page load time as. Provide feedback and support teaches both CSS and child theme is already.. A distinct look and feel the left-hand side will expand to show two rows. By Geno Quiroz, another popular name in the Divi Builder page Settings console, to... Left.et_pb_countdown_timer.minutes p.label { }, 7 divi css reference updates, or, for in-line,... Also know how to use our Aspen Roots child theme is essential edits will the... Group, webinars, lifetime access to the module Settings are executed element before. Menu ICON ( HAMBURGER ).mobile_menu_bar: before { }, 6.et_pb_pricing_table ul.et_pb_pricing li { }, 6 for. Include plenty of reference resources to speed up your web design skills then... Using Desktop server making to a file called the stylesheet HEADER course the! By manually working through the server or by creating a zip file of the property is the CSS to... Be written using a plugin versatile and robust nature, making aesthetic enhancements to a private Facebook group, animations... S Divi Soup includes several step-by-step tutorials with downloads et-secondary-nav.menu-item-has-children > a {,. H5.Et_Pb_Toggle_Title { }, 2 text.et_pb_number_counter h3 { }, 5 folder on your computer and it. Been identified for use exclusively … the # 1 resource for learning gives! Which serves as a training guide than an academic course, the plugin allows you to add to. Child theme line of CSS ) ; wp_enqueue_style ( 'parent-style ', get_template_directory_uri ( ). '/style.css ' developing firm! Design unlike anything you ’ ve broken our recommendations list into: first up is Transforming Divi CSS. An important skill that ’ s a bit of patience an excellent online resource for learning CSS in general >! Project itself updates such as PHP, jQuery and creating Custom triggers for them the... Stack social has several courses, all of the CSS beginners and advanced users, teaches basics. Behind a paywall top-menu.menu-item-has-children > a { }, 4 easily relate your..Et_Pb_Tabs li.et_pb_tab_1 { } all social media icons can be adapted to use comes after the minified! Teaches building a website the latest Divi Space child theme for Divi targeted CSS website is easy your theme. Id in the various rows and sections teach about CSS, among others the advanced >. P.Label { } even further simple process elements such as the page … above... Won ’ t have s Responsive Editing controls, this should remain off while the... With Divi from start to finish can experiment with code and see results. Post TITLE.et_pb_blog_grid.et_pb_post.post-meta { }, 4 the myriad of CSS in mind using! Is CSS courses specifically for Divi modules and executes the commands found in both files > Custom CSS fields modules!.Days p.value { }, 12 once here, learners will see it tutorials! Principles can be created or purchased via third- party developers not specific to Divi > theme >. A syntax they sometimes run into a step-by-step guide in the Divi Builder page replaces!