Please comment below if you need any help. You can simply paste this into the Divi Theme Option’s Custom CSS area or WP Customizer Additional CSS area. Here’s the snippet that will do the styling for you. Sometimes you want to make your blurb module read left to right, and not top to bottom. transition-delay: 0s; } .free_impi_blurbs .et_pb_blurb .et_pb_blurb_content .et_pb_blurb_container { But…. Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes. (use any method you use to add custom CSS). Each of these layout locations can use any size image, but a more effective layout would use images that are designed for those locations. Use only text, only images or combine them as you desire. top: 50%; We need to add a class name to each blurb module. ... First of all, add a Blurb Module above the title. The et_pb_blurb_content selector that we’re targeting in the code above contains both the blurb image and the blurb container. }, .free_impi_blurbs .et_pb_blurb .et_pb_main_blurb_image { It is fully compatible with both Divi Classic and Visual Builder and can be used on any website running on Divi 4, Extra theme, and earlier versions of Divi theme. }, .free_impi_blurbs .et_pb_blurb:hover:before { Recently there was an excellent post on the Divi Theme Users Facebook page by the Elegant Themes people about material design with a tutorial that showed how to create the proper look and style associated with it. Divi Blurb Extended is an enhanced form of Divi blurb with added features and functionalities. We are going to hide the description and show it on hover. background-color: #353535; To add a great Divi Hover effect to this blurb, we will have to use a bit of CSS. For now, let’s add only one, and once we’re done with designing it, you can clone that module to the other two columns. Click the section settings icon: Select Advanced tab, and inside the ID and the Class input fields, type this: free_impi_blurbs. On the top of the modal content. }, @media only screen and (max-width: 1390px) { position: static; The issue was that the default Divi blurb image was way too small. Some kind of interactivity is always a nice way to grab your visitor’s attention. opacity: 0; I looked through the module settings, but couldn’t find a way to adjust the image size. Divi Freebies, Webdesign. LIVE DEMO. line-height: 120%; Ok, now we are done with the first step in creating Divi hover effects. If you know a little bit of CSS…, I was just working on a customer site and he wanted to add a simple author box below every blog post. transition: 0.3s; To do so, click the Divi Blurb module settings: Also set the option Use Icon to – Yes and add an icon. Any good advice to have them flip individually? Find the best size and set for all three blurbs. cursor: pointer; It uses Divi’s blurb module to handle the card and icon and the button module to turn the entire card into a link. transition-delay: 0s; Combined Slider & Blurbs with Navigation Free Divi Layout. top: 72px; Circular Impact Hover Blurb – four blurbs surrounding the centre image with the ‘moons’ animating gently. It has many customizable features that can bring your website elements to life. I added ds-blurb for all three. Optionally, change the label name to “Left Line”. Choose from 50+ Footer Layouts and fill the end of your website with all your useful information for your clients. In the module’s Custom CSS tab, give the module the following CSS Class: gq-blurb-hover. lets dive in and see how to create something similar in your own website. Hello guys! Next, click the Use Visual Builder button to launch the builder in Visual Mode. Like this: Add ai-text-overlay in the row’s custom CSS class. Read tips and tricks, tutorials and hacks that can be done with the Divi Builder, the Divi theme or the Extra theme. There are few ways of adding custom CSS to a Divi/WordPress website. In any of the three columns, add a Blurbs module. This is super easy but looks great. Using the Design tab, we want to edit the look of the module, so let’s follow these steps: content: "Say Hello"; Divi theme tips & tricks Latest from the Blog. padding-left: 30px !important; Click the clone icon twice, and two new modules will pop up, drag and drop them to empty slots. Follow along and you will be a Divi master in no time. 5 Creative Divi Blurb Module Designs “In this post, explore 5 creative designs using one of Divi’s most popular features, the Blurb Module. opacity: 0.1; The Divi Builder includes lots of ways to add images to your layouts. padding-top: 63px; transition-delay: 0.4s; That’s how it works basically. I gave 300px as height in my version. Divi Tips and Tricks. top: 70px; You can also click the Use Visual Builderbutton when browsing your website on the fron… Cool Divi Hover Effects: Create ‘Reveal On Hover’ animation on Divi Blurb. Only some tricky finishing touches were needed. This time we will be making a great Divi Theme Blurbs module. By Sam M Updated on November 5, 2020. See the Before box and find the title text there. } Below is what I did. The awesome new Divi feature introduced in Divi 4.3 allows us to add advanced (and fun!) Most in this bundle have square designs with solid or blank backgrounds. This will center the blurb image and blurb container horizontally using the justify-content property but it won’t affect the alignment of the text inside the container. .free_impi_blurbs .et_pb_blurb .et_pb_blurb_content .et_pb_blurb_container .et_pb_blurb_description { transition-delay: 0s; still, they are missing some must-have…, Divi slider is a simple but powerful slider you can use on your website. 6 chambers you can be the list and business code to order your Divi customersWrite print. }, .free_impi_blurbs .et_pb_blurb .et_pb_blurb_content { In Divi 2.7 you can add Custom CSS to individual pages by clicking the hamburger icon at the top of The Divi … transition: opacity 1s; }, .free_impi_blurbs .et_pb_blurb .et_pb_main_blurb_image, .free_impi_blurbs .et_pb_blurb:hover .et_pb_main_blurb_image { If anything not clear enough to you, try the video. Add the custom class to the ROW. Pin. Add a section and a three columns row. transition: 0.3s; If you’d prefer to skip the tutorial, you can download the layout and CSS in one handy little zip file. Same is for the third CTA, just change the class name to: right_line line and “height” to “width’ in Main Element (Advanced Tab). Prior to Divi Booster 3.2.6, the option was located at: Divi > Divi Booster > Modules > Blurb > Make left-placed blurb icons bigger. Duplicate the First Blurb & Move Copies to Other Columns. }, /*Hover*/ overflow: hidden; opacity: 1; Advanced Blurbs adds a custom blurb module that replaces the default Divi icons with the entire Font Awesome collection of over 600 icons. Here I am telling you what I did on my demo version). font-weight: 700; To change the title that appears on hover, go to module settings and select Advanced tab. Then add three blurb modules and style them the way you want. }, .free_impi_blurbs .et_pb_row .et_pb_blurb { .free_impi_blurbs .et_pb_blurb:hover .et_pb_blurb_content .et_pb_blurb_container .et_pb_blurb_description { He was trying to replace the blurb icon from it’s original Elegant Font to a Font Awesome icon. Completely restyling and repositioning the slider dot navigation so it sits over the blurb module and changes opacity when the … Add a section and a three columns row. Change All Colors When Hovering Over The Divi Blurb Add a Section and Category Title to the Top of your Category Pages Divi Blurb Header Sliding Underline Floating Blurb Module With a Radial Shadow It also adds five new icon animations: spin, shake, bounce, flash, and pulse. Your support enables us produce free products and keep our premium products at a low price. Share. Easy to handle. -webkit-backface-visibility: hidden; Posted in Divi Customization, Tips & Tricks, Tutorials, Creative, General know-how, Divi Hacks, Blurb, Modules, Divi Web Designer Resources, Divi Resources, Code Snippets, Solution Repository Average rating ( 0 votes ; 0 ) How to Create Floating Overlapping Images in Divi. Then add three blurb modules and style them the way you want. I am back after a few weeks with a new tutorial. New Lead Magnet Opt-in Page Layout for Divi! 4. This free Divi layout uses the native Divi fullwidth slider and blurb modules in a very unique way. Active Link Color on Single page Site in Divi 13 Comments If you make a single page site using anchor ids in the menu, the active link color set in the customizer won't be reflected as in this case all the links are actually the same page, not the different pages, if you want to … Design tab. Divi Soup is a tutorial website for enthusiasts of the Divi Theme by Elegant Themes. There is no additional charge to you. 4:3 – the older monitor rati… Today I am going to show you how to create a Divi popup window without using any third-party plugins. Do the same in your version. Apply Divi blurb custom icon, set Divi blurb icon on the right, Divi blurbs hover effects and many more customization options. Tips & Tricks. .free_impi_blurbs .et_pb_blurb .et_pb_main_blurb_image { Click to see how you can do it yourself. Where ever the images are placed within your layouts, keep in mind that Divi is optimized for three different aspect ratios (width:height): 1. And paste the CSS code inside the Custom CSS box: Now, let’s clone our blurb to the other two columns. Since the addition of Divi's "Icon Font Size" setting mentioned above, this option is no longer required. Add easy modal popup boxes in Divi. transform: translate(0, 120%); }. Click the row setting icon: Let’s first add some content to it. Is there a way to keep the title and just set the animation to the text? Share. Today I am going to teach you how to add slide-in overlays…. Divi Tutorials | 1 comment. try to play with the CSS. } Let me know. He did some pre-work, so half the credits go to him. Here I am telling you what I did on my demo version). Chances are you will only need to make small edits to your blurb in order to keep consistency throughout the section. We also want to edit couple of the row settings. }, @media only screen and (max-width: 980px) { Premade 50+ Footer Layouts. Such as directional flip and attractive animation effects. opacity: 0; Of course you can use a different icon on hover and animations are combinable with elevations. The designs include squared shapes with multiple icon placements, multiple colors, lots of hover animations, button styles, and more. 1 of 7 Blurbs. Divi sets the blurb module default image width to 64px and there is no way to adjust the width in the settings. But when you do, Divi makes the image minuscule. Yeah, I love all those updates. You can add any…, Hello Divi Lovers!! 2. Lets Get Started On The Divi Blurb Module . With Divi*Spark you can learn each and every aspect of developing a blog or static website using the WordPress platform. position: absolute; Never fear, in this tutorial I … (The best free and open-source CMS which powers 455 million websites). 1. This is the one I’m going to use in this example: Let’s make our blurb look awesome. Your email address will not be published. Pretty amazing. Material Blurb for Divi can be customized in any thinkable way. Affiliate Notice: In some cases when you click external links on this website, and you purchase a product or service from that link, we may receive a small commission. Post categories In Divi, Tips & Tricks, Tutorials; Hey guys, let’s learn how to transform a Divi blurb module into a cool mouse hover block. Select Save & Exit and Update the page. It is significantly the most powerful plugin for design with multiple design tools to pick from. Typography Hover Blurb – four block animation with an image reveal creates a fresh look for your blurbs. Step one – Create the blurb design. top: 50%; }, .free_impi_blurbs .et_pb_blurb .et_pb_blurb_content { The above simple CSS snippet will do the trick ;). Not long ago Font Awesome 5 came out, and there are people who want to switch over. left: 0; In this tutorial, you will discover five different ways to style text with WordPress and Divi.” Go to the Tutorial. Let’s make our blurb look awesome. Divi Blurb Module Bundle 1 (Templates 1-10) is a layout with 10 different blurb designs with multiple styles for each design. (You can do whatever depends on your needs. animations which react to the page scroll. Now simply copy and paste the below CSS code snippet to your website. Required fields are marked *. }, .free_impi_blurbs .et_pb_blurb:hover .et_pb_blurb_content .et_pb_blurb_container h4, transition: 0.3s; Inside the Main element box, paste this: padding-right: 30px !important; read more. .free_impi_blurbs .et_pb_blurb { Founded by Michelle Nunan, a full time Divi educator and child theme developer, Divi Soup aims to bring useful tutorials, tips and tricks to both new and experienced Divi users. Add a specific ID and class for this section. Edit the content as per your needs. 16:9 – the standard monitor ratio, widescreen and great for headers. }, .free_impi_blurbs .et_pb_blurb .et_pb_blurb_content .et_pb_blurb_container h4, Divi WooCommerce layouts, thank you pages, Divi menus and more, 89 Divi Blog Post Templates You Can Customise, Divi Popups & Divi Coming Soon Pages by Divi Den Pro, 21 Divi 404 Templates for Divi Theme Builder – Ragnar by Divi Den Pro, Creating a section and adding the Divi Blurbs module, Download Divi Library .Json Zip File [4kb], Set Use Custom Width to – YES and make it 11170px, Set Use Custom Gutter width to – YES and make it 2, Set the Use Icon font size to YES – make it 60px, Title font: PlayFair Display, Bold, 30px, white, centered, Body font: Lato, Regular, 16px, white, centered. I decided to use the Google Chrome inspect tool and discovered the issue. / Divi Tips and Tricks / Add easy modal popup boxes in Divi. Hi Sampath! 3. I am back with another great tutorial on how to add slide-in promo banners to your Divi powered WordPress site. transition-delay: 0.3s; Free Lead Magnet Opt-in Page Layout Pack for Divi. * Important – Do not forget to give a fixed height for all three blurs, like below. The blurb layouts available in this plugin allows user to create Divi flip box with various animation effects. This is a time saving trick! creating the blurb module design. Only, change the class name to: left_line line. Before you can add a blurb module to your page, you will first need to jump into the Divi Builder. text-align: center; ... Font Awesome for Divi Builder 2.4 become pretty popular and lot of the users also use Font Awesome icons in Blurb modules. As such, I've moved it into the "Deprecated" section of the Divi … Copy this CSS code: /*Fee Impi Blurb*/ Free Lead Magnet Opt-in Page Layout Pack for Divi. I did it with…, Hello Guys! Just in a few mins. Also, to change the blurb module background, change the colour that’s inside the Main Element box, that you can also find in Advanced tab. An icon on the top, the title, and the small description text below. Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder’s modules. transition-delay: 0.3s; Divi Tutorials. width: 90% !important; KERUX is a publication of Northwest Theological Seminary and appears three times each year (May, September, December).Editorial offices are located at 17711 Spruce Way, Lynnwood, WA 98037-7431. If design, it explores just version to love and have items down to get what is. regards, Your email address will not be published. opacity: 0; by KyraP | Aug 6, 2018 | Divi Blurb Module, Download Divi Library .JSON file [4KB]  |   View demo module. Add a standard section, and choose 1/3 + 1/3 + 1/3 structure. Divi Blurb Modules (7) Divi Pricing Table (8) Divi Email Optin & Forms (2) Divi Footer Module (9) Divi Testimonial (9) Divi Content (21) Divi Person Module (5) Divi Shop Module (2) Divi Call To Action (5) Divi Portfolio Module (1) Buy Now; Eclectic Blurbs. New Lead Magnet Opt-in Page Layout for Divi! font-size: 30px; .free_impi_blurbs .et_pb_blurb { That’s it, guys now you can add attractive cool hovering effects to the Divi blurb module yourself. g and Drop File Upload exercise can replace a other signature to make development as a well- home. transform: translate(0%, -50%) scale(3); Preface: I do NOT like mouse hover actions on mobile devices. .free_impi_blurbs .et_pb_row { 0 Shares. How to add Custom CSS to WordPress: Beginner’s guide, Divi Popup: How to create popup contact form without plugins (Update), Add simple slide-in promo banners in Divi, How to make sticky custom headers in Divi 4.0, How to change Divi slider arrows to ‘Next’ and ‘Prev’, Add a simple author box below every blog posts: Divi, How to create slide-in overlays in Divi without plugins, Create a landing page in WordPress: Beginner’s guide for 2021, WordPress migration plugin: Migrate WordPress site to a new hosting, How to make a sticky menu on scroll in WordPress – Any theme, Secure your website by hiding the login page: WPS hide login. If you need more information on adding custom CSS to your WordPress site please read the below article. Also, in Advanced tab, in Main Element box, change “height” to “width”. Right? left: 0; right: 0; But this depends on your content. }, .free_impi_blurbs .et_pb_blurb:hover .et_pb_blurb_content .et_pb_blurb_container { .free_impi_blurbs .et_pb_blurb .et_pb_blurb_content { Using the Design tab, we want to edit the look of the module, so let’s follow these steps: For the icon colour, set #353535. Learn to build blogs or websites with WordPress. Let’s move forward and do the CSS magic happen. List Reveal Hover Blurb – lovely animation that moves the image to reveal the text. An icon on the top, the title, and the small description text below. Tweet. opacity: 1; Create a new section and add the blurb module. Looks cool. width: 100%; Also, scroll down to Sizing section and add top padding: 94px, bottom padding 5px, and 43px of padding to each side of the module. The class. Expanding Possibilities. padding-top: 52px; Thank you for your support. padding-top: 35px; position: relative; Advanced Divi Blurb Module. Hello guys! I thought that other Divi users would be interested in this, so here it comes. The tutorial is going to cover four sections. Hey Divi Nation, available to a order own Divi Use Case interested strip. The Magic of CSS Download Divi layout on the Elegant Themes blog Set a narrow row width so the 2 CTA stack behind the Blurb module; Use z-index to keep the Blurb module sitting above the CTA modules; Use the hover settings for the row to change its width and trigger the animation; Change the width of the row on row hover so there is room for all 3 modules to sit inline. Importantly, without…, ElegantThemes has released Divi 4.0 a few days ago. 2. Join the Divi Newlsetter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. ‘Divi Next Blurb Module’, is the most versatile plugin by Divi Next. }, @media only screen and (max-width: 767px) { (You can do whatever depends on your needs. Save my name, email, and website in this browser for the next time I comment. No extra plugin used. Use icons instead of images or animate the module when hovering. Correspondence should be directed to the editor at this address. huh? transform: translate(0,-50%); Hi Alex, Yes, it must be possible. In the module’s General Settings, upload the image you want to use. font-family: 'Playfair Display',Georgia,"Times New Roman",serif; Divi Theme Tips & Tricks Usefull code snippets, tutorials and Divi tweaks. This is the 2020 updated version of the tutorial of adding cool Divi hover effects to the Blurb Module. It makes no sense. 2. The snippet. transition: all 0.3s; If you are already subscribed simply type in your email address below and click download to access the layout pack. Below is what I did. display: block; Just try to play with the code to target only the description. Instead of going back to step three you can just duplicate what you’ve already made! Hi John, Yes, it must be possible. Free Sigmund Divi Theme Person Module with Free Tutorial, © Copyright WP Den - Divi Den Pro 2021 | Impressum | Terms & Conditions | Privacy Policy and GDPR. Once the Divi Theme has been installed on your website, you will notice a Use Divi Builder button above the post editor every time you are building a new page. position: absolute; Change the title, content box and the icon.