Alternatively you can remove the borders from the actual blurb modules themselves and add them instead to the custom css section in the row for each column with no background colour. If you plan to use CSS on more than a handful of sections, rows, or modules, it’s best to use a method that would allow you to target more elements from a single location. I really like using Divi but sometimes it needs a bit “more”. }. Can you tell me how I can make them scroll to the respective sections? It looks really nice, but for some reason the “Use equal column heights” does not work doing it this way. This allows you to customize just a single page. Open the module and click on the Advanced tab. border: 5px solid #ff6600; We will apply custom design styles to the Divi blurb module to achieve better hover effects and make our module more interactive so … Designed in the style of the new Falkor Bundle, the spring 2018 UI Kit bundle, this blurb module is great for Divi Theme and Divi … I can declare it global, but then all images shown with this border-radius. I tried different margins and padding but the blurb icon remains inside border. I have tried to do min height but it never seams to work for me… any suggestions. Hi Deborah There is a couple of things you need to do to achieve this. You would just need to add this: border: 5px solid #ff6600; (or whatever width and colour you want) And switch on the equalise columns option. Was thinking I may have overlooked something basic, so reached out to you. I just wanted to try making the border round at the top (i used 50px) which worked but now the image is chopped in half and only displays the bottom half. In the WordPress dashboard go to Appearance > Editor. And it still doesn’t seem to make any difference. Add the following code to Divi > Theme Options > Custom CSS: /* -- Blurb Module -- */ .et_pb_main_blurb_image { width: 100px !important; } .et_pb_blurb_container { position: relative; top: 15px; width: 220px; } So, after pasting the CSS above you’ll be able to create a Blurb … border-radius: 50px 50px 0 0; Sorry to have bothered you. A free Divi Blurb Module with a tutorial on how to style the four up blurbs module. In the custom CSS section you would need to just add border-radius: 50%; in the image box. The blurb border goes inside the image (the line goes on top of the image). One problem I regularly have when using borders with any module including the blurb is depending on the device they do not always end up the same length. In the Custom CSS tab, set the CSS Class to “blurb-hover” In each column add a blurb module and a button module. The border-radius: 50%; is what i wont for images in the blurb modul and in the image module. To prepare for that, we’ll add a CSS ID to the Blurb Module’s advanced tab. Your support in purchasing through these links enables me to keep most of the content on this site free. You can work in code tools such as Brackets or any tool you prefer. I have used it on two websites now and it looks great! If you add background colours to the 4 columns from within the row then there will be more symmetry as the actual containers will all be the same height. Let us know in the comments. it show default theme body line height. Hello Michelle, Scroll down a little more until you get to the custom margin and custom padding sections. Also, it doesn’t export if you use the export tool next to the Settings icon. by Michelle | Feb 11, 2016 | Recipes | 85 comments. It will make all the columns equal height, not the content within them if that makes sense. If you want it different to your default setting you can add some inline styles instead like this, Setting on divi seemed to have changed since this soup was created. Thx. This is the easiest one on the list. Thinking of taking up career as a coder and would like to get advice from you. Learn more. Only Divi related updates. It is now possible to add blurb icons directly in Divi, by going into the settings for your blurb module settings and setting "Use Icon" to "No" and then selecting an image to display with your blurb, like so: Note that the Divi option lets you upload a custom icon to a single blurb … Ready? Your tutorials are wonderful. I´ve been looking for a way to do this. Custom Divi Blurb Module Design With Hover & Zoom Effect In this tutorial I will show you how to create a beautiful Blurb module design with hover & zoom effect. This was exactly what I was looking for. In the module’s General Settings, upload the image you want to use. We believe in the quality of our authors' products. Home / Divi Tips and Tricks / Cool Divi Hover Effects: Create ‘Reveal On Hover’ animation on Divi Blurb Divi Tips and Tricks By Sam M Updated on November 4, 2020 Hi Michelle. }, .myblurb et_pb_main_blurb_image img { You can find more information about child themes and use the free Divi Cake Child Theme Generator here at the Divi Cake blog: Divi’s a powerhouse when it comes to custom CSS options. 1. margin-top: -150px; So add a new section with three columns and then add a blurb module into the first column (we will set up the first module and then just duplicate it for speed). Where do you usually add it? I will change it into H3. border: 5px solid #f60; Adding CSS. Next click on the General Settings tab and enter a Title and URL for your blurb module (the image and blurb title link to a url), if you don’t want them to link just leave the url field blank. Posted on July 24, 2018 by Randy A. This seems to depend on the size of the screen, on some small ones it looks fine but on an iPad it doesn’t. Divi Soup is a tutorial website for enthusiasts of the Divi Theme by Elegant Themes. And that’s it, now you should have 3 custom blurb modules as shown in my demo. Subscribe to receive regular emails packed with tips, tricks, tutorials, freebies, product info and promotional offers, and get instant access to 25 completely free awesome Divi resources! Click here to see the live demo and download the XML file. Paste the CSS snippets below into your Divi>Theme Options>Custom CSS box. Go to Custom CSS tab and add blurb-ripple-out CSS Class. Some tricks to resize images, align icons, upload custom icons and more custom CSS styles for a unique side by side layout. In order to do this, when you click links on this site and purchase items, I may receive a referral commission, there is no additional charge to you. Also, this field is wider and easier to use than the Additional CSS field in the Theme Customizer. border: 3px solid #334960; The blurb module has the icon, title and text field, we’ll use the button module to handle the link so the link you place in the blurb module isn’t important. This website is not affiliated with or sponsored by Elegant Themes. After posting a link to the demo and downloadable layout in the group, I asked for people to like the post if they would rather have a tutorial. You can create or paste your code here. This includes multiple methods to add custom CSS to Divi, and where to add custom CSS in Divi. border: #ff6600; in DIVI global custom css area. This is the code to add an image in your Divi header from the ET article 9 Useful Divi CSS Snippets You Can Add To ePanel In Seconds. Customized blurb module layouts you can copy/paste into your Divi website. This CSS field does not include line numbers and formatting. The recipe show where you add the custom class. The methods are in no particular order. So there are few ways in order to customize our Divi Blurb Icons, from manipulate directly the source code ( maybe we’ll see this complex way in a future post ), to using a plugin like Divi Booster; but the easiest and quick way we have is simply by taking advantage of the magic of Css and a web service like Font Awesome. And with just a little bit of CSS magic you can turn the default blurb module into a really cool portfolio item. Designed by Michelle Nunan, https://divisoup.com/custom-blurb-module/#comment-3896, https://www.youtube.com/watch?v=_Uob36vvYTs, F31: Gradient Snakeline Timeline Infographic, R44: An Overview of Divi 3.18 and WordPress 5.0, Q21: Change the Read More Text and Other Elements in Divi, R23: How to Create a Scrolling Image Carousel in Divi, Q8: Vertically center any content in Divi, R25: How to create a 2, 3 or 4 column square blog layout, R22: How to Add Links to the Divi Gallery Module and Show Captions on Hover. Do you have any ideas for me? I first put the CSS callout in the style.css and the image remained within the blurb. Hello Michelle, great recipe. 5. But go ask in the Divi Theme Users Facebook group, I’m sure you will get plenty of suggestions. Do you know how I can fix it? This works great, can we change the background color for the button, The button will take on the settings you have applied for buttons in the theme customiser as it uses the et_pb_button class. You can check out a Divi Quick Tip here from Nathan that explains how to create anchors https://www.youtube.com/watch?v=_Uob36vvYTs. For some reason though when I look at it on my tablet the buttons and borders start getting messed up. I did not understand where you mention add a custom class. margin-bottom: 20px; Hi, I want to do this with the individual blurbs having different colored borders. I have used divi thme, i used some divi theme option like body font size, Background color think is body line height not saved in editor . The download link is at the bottom of the page. If you want to change it to a custom style just change the class to your custom class and it will take on the settings you have applied for that button class. You can the try adding the border to the column rather than the modle. Ive copied it exactly and it works great. }, Hi. If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content. If you need help, check out our complete guide on Where To Add Custom Code In Divi. If you add CSS to the parent theme it will be overwritten when Divi updates. Here it is…. Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. If user 1 and user 2 both open the CSS, then user 1 saves his changes and user 2 later saves hers, the changes made by user 1 would be lost. Made in the Style of the Falkor Bundle! Elegant Themes and Divi are registered trademarks of Elegant Themes, Inc. Everything worked out good except for one part, this code Read More I am grateful to be of service and bring you content free of charge. There are several methods and they all have their advantages. & added a z-index: 10; but it still cuts off the image. 2. This tutorial uses a blurb module with some custom CSS to add a hover effect that changes the color of the background, icon, and title and adds another line of text (which shifts the icon and title upward). Click inside the area for the Main Element. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now. We could also add our CSS to the default WordPress Theme Customizer field. Thanks so much. Are you adding .radius50 img {border-radius: 50%;} in the custom css section of the module? These fields do not include numbering or formatting. Using a child theme stylesheet is the best method overall because of the external tools and the ability to include them in your premium child themes. border-radius: 50%; Deb, That’s great Debby, glad you got it sorted. am I doing something wrong? This field is numbered and will highlight code syntax. So, not knowing anything about what I was doing (also known as “following the bouncing ball”) I decided to try the Theme Options route and it worked :). Clickable Blurb Module in Divi Theme; Creating Fixed Slide-In Header and Navigation in Divi 4; Anthony - Free Divi Layout for an About Me Page. Do you have more training info on divi. This is true if you’re using a standard WordPress theme but, as we’ve seen in this article, with Divi we have many more options. We need Image and Blurb module in each column. Hi Michelle, To access the Custom CSS field go to Divi > Theme Options in the dashboard menu. margin-top: -100px !important; via FTP) or adding CSS via Divi's custom CSS box, I think the effect will be the same. Add in your desired copy and if you want one, a button. Select style.css in the Theme Files list on the right. Love your tutorials Michelle. I’ve been looking for a plug-in like this for quite some time and was hoping maybe you would have some experience with something like this. The narrow field can be difficult to use. Add 100px to the top margin and 20px to the top, right, bottom and left padding. Sometimes I have trouble with line height saving in the editor, I usually set it in the CSS if its for a specific element, Hi Michelle, thanks for the tutorial – it looks amazing on the laptop. Copy this selector and paste it into your CSS to target this specific module. Scroll to the bottom and you’ll see the field. Hi Siddardha It’s my incompetence as a fairly newbie newbie I’m sure. Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder’s modules. Go to Divi Theme Options, then “Integration” and place the lines in the “Add code to the of your blog” 2. }, Hi Michelle, I came across you great tutorial and implemented this but unfortunately I am not able to change the button color using the above code, can you please help. And new content is added EVERY Monday! Create a blurb module, and go to the Advanced Settings . I am using this one for the tutorial: mp_m_blurb_header_switch . Move Divi Blurb Icon To The Top Left. file located in our child theme folder. Hey I know this is off topic but I was wondering if you knew of any widgets I could add to my blog that automatically tweet my newest twitter updates. padding: 50px; Recipe #6 is by VERY popular demand! Now scroll down a little further and select your image/icon animation (I like bottom to top for this one) and set the text orientation to ‘center’. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. I have used it on my sites and it works great. This method is great for just a few CSS customizations. 9 Useful Divi CSS Snippets You Can Add To ePanel In Seconds, How To Create a Child Theme for Your Divi Website, How To Package a Divi Child Theme for Sale. The image still stays firmly sat inside the box I was just looking for this kind of blurbs ! Thanks, I don’t have an ipad to hand right now but can’t replicate the issues you explain in a simulator. I have followed the tutorial to the letter (as far as I can see) 3 times now and I still cannot get the image to sit overlapping into the box and outside. You will need to change the border width and the colour to match what you have set in the blurb module. Thanks in Advance, That code is just for the border. Yes i know – i gone the way you explain too. Custom CSS. That worked the way I wanted. 8. Replace the # with your url and the Read More text with whatever it is you want the button to say. This is so fun and easy to implement! Thanks for such a clear step by step post! I am using Divi 2.6, if you are using an older version of Divi then the css class field will be at the bottom of the General settings tab. This even places the CSS in the Divi Theme Options Panel (as we’ll see later). /* Custom aligned blurb images */ .your_custom_class .et_pb_main_blurb_image img { padding-top: 6px !important; } Where to paste the CSS snippet Navigate to Divi>Theme Options and at the bottom of the default “General” tab, paste the CSS snippet into the “Custom CSS… All of your CSS is in a single location that’s easy to access. Also, we can’t use media queries or pseudo elements. I truly enjoy reading your blog and I look forward to your new updates. 3. The Before and After fields let you use pseudo elements. @stig – I found that if you have a border radius set on the blurb card settings, it causes the top of the image to be chopped off. Creative Divi blurb layouts & custom styles Here are some guides, layouts and tutorials to customize Divi blurb modules. Hi Finn, thanks for your comments Not quite sure what you are trying to do but the equal column heights option is really for use when you have a background colour/image on the column. Randy is a WordPress writer from Tennessee. Thank you so much Michelle. The tutorial includes module settings and provides the CSS that you can copy and paste. You may need to make adjustments for your own individual needs. You can add your CSS to each individual page by selecting settings (the hamburger icon) at the top of the Divi Builder. Yes no problem, just leave the title field blank and add your title into the content are using. Thanks for the great website, one of the best out there of its kind. An interesting this happened when I did this. If we didn’t add this 100px margin, the blurb images would overlap the section above. Just wanted to update you with the news that the six columns blurb coding worked after a bit of forking here and there. Background Clicking this button will launch the portability popup. Blurb Image: margin-bottom: 0px; margin-bottom: 0px; Add Text Module to Column 1 Add H3 Content. Also, it doesn’t export if you use the export tool next to the Settings icon. Michelle Nunan is a multi-award winning marketer & trainer and full time Divi educator as well as a mother of two beautiful girls and two cheeky Black Labradors called Harley & Chaz. Lets Get Started On The Divi Blurb Module . 4. Any module within the Divi theme that has a content area (i.e. Any way to create same effect using built-in blurb icons instead of custom blurb image. If so that won’t work, you need to add it to the epanel or child theme style sheet. Thanks so much. You may need to add some media queries to handle the display differently on smaller screens. it drives me nuts when the bottoms are not level. How to Style a Divi Blurb Module – Free Tutorial & Blurbs . I broke my brain, but it so simple Thanks a lot! I’ve played around with the negative value. This CSS field does not include line numbers and formatting. This WordPress tutorial explains how you can easily style and a CSS to a Divi blurb module. The blurb module is one of the most versatile Divi modules. Although, I did save the best for last. Excellent. What great training. Hi Michelle Next, click the Use Visual Builder button to launch the builder in Visual Mode. I have one challenge though. Create a new section and add the blurb module. 2. You will also need to change the colour of the main border in… Read more ». Worked wonderful. Hoping to listen from you soon. Example of issue: http://imgur.com/a/4m1xr, Note the red background near the top is the section above as I want the blurb to overlay partway…just can’t get the square image to be round like the tutorial shows. Open up the blurb module, click on the custom css tab and give it a custom css class of myblurb. The first thing we need to do is create our module. Scroll down a little further again until you get to the content area. They include CSS ID, CSS Class, Before, Main Element, and After. It is to get more symmetry on the page. Here we will show you how to manually create a Divi blurb with a little custom HTML and CSS in 3 easy steps. Open up the blurb module, click on the custom css tab and give it a custom css class of myblurb.I am using Divi 2.6, if you are using an older version of Divi then the css class field will be at the bottom of the General settings tab. You can play with these values to get your desired affect. I managed to do this with a previous website and it worked fine so am not sure what i’ve done wrong. Please let me know if you run into anything. The one question I have and can’t get any answer on is how do you set the size of the blurb, most examples use the same word count so all boxes are equal in size and button are all on same place. Thank you for a great training video! The blurb module has always been one of the most popular Divi modules and with a little extra custom CSS added to your theme options, page options or child theme you can create some cool hover effects to add a little extra eye candy for your viewer. I am not sure why this wouldn’t be working for you, do you have a link to your site please, you will need to send it to me using the contact form. Where can I add this? Adding Custom Blurb Icons in Divi. Am not able to get the image to be confined to the radius. The CSS stylesheet is the best option for adding CSS to Divi. You need to set the background colour/border in the column css class field in the custom css tab of the row. Thanks for that input Mike, I’ve moved the border radius out from the main card settings and into custom css for .myblurb & this has now solved the issue of the icon being cut off! How to style a Divi blurb module? But after reading this, I was able to get it solved! To access the Custom CSS field go to Divi > Theme Options in the dashboard menu. Step 3: In the “Advanced” tab, add “hover-blurb-arrow” to the CSS class box, then Save & Exit, and publish the page. Or…. You know that the title comes in H4 as standard.