Body Line Height: 1.5em. In this tutorial we will be using the files from the download above, which contains an icon font we designed and generated with Icomoon. By default, there are two options for the position of the image/icon in the Divi blurb module, left and top. Divi Blurb Extended Examples. We have some great tutorials about how to use Divi’s row and section elements. As such, I've moved it into the "Deprecated" section of the Divi Booster settings: Divi > Divi Booster > Deprecated > Divi 4, Hundreds of new features for Divi To lay your hands on the free blurb icon background examples, you will first need to download them using the button below. Since the Blurb module combines both imagery and text to showcase certain features, you can use it to add a list of your company’s services on your homepage. However, your image will never scale larger than its original upload size. The new icons can be used in any core Divi module that has icon selection, not just blurbs. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. 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. Go to: Blurb Settings > Design > Image & Icon, 2. For this example, I’m going to use the Blurb Module to add four featured services to a homepage. Visa versa, if your blurb is being placed onto a light background, the Text Color should be set to ‘Light’. By using its blurb layouts, you can easily create blurb designs with a custom icon, add a button to the blurb, set blurb icon on the right, and many customizations. To remove custom margin, delete the added value from the input field. You can replace the default Divi icons by adding classes to the module that the icon is in. Update the Blurb Settings with the following: Title: [enter title of service] Use Icon: YES Placing the image/icon to the left of your text will cause the image to be smaller than if it were placed at the top. These options are separated into three main groups: Content, Design and Advanced. By default, the icons are set to your theme accent color. The padding is optional. Blurb modules can be placed in any column that you create. This Divi blurb plugin will enhance your level to use the default Divi theme blurb module and designing the blurbs. You can increase this value by dragging the range slider or by inputting a custom value into the input field to the right of the slider. Custom units of measurements of supported, which means you can change the default unit from “px” to something else, such as em, vh, vw etc. Unlimited Websites. Alternate text provides any necessary information if the image does not load, appear properly, or in any other situation where a user cannot view the image. Enabling this option will place a border around your module. The Divi Theme blurb module allows you to add an icon with text to your page. Thanks. If your blurb is being placed onto a dark background the Text Color should be set to ‘Dark’. Q: What are the unique features of Divi Blurb Extended compared to default Divi Blurb Module? Step Two: Add CSS to create the Divi hover effect. You will most probably need to adjust the font-size of the icon. This option affects the color of your border. It really makes me question the developers. It should even work for many 3rd party plugins as well, providing they follow Divi’s coding practices. Divi sets the blurb module default image width to 64px and there is no way to adjust the width in the settings. 1 License. Ok, now we are done with the first step in creating Divi hover effects. Enable the "Use Icon Font Size" option. The Divi Theme blurb module allows you to add an icon with text to your page. This options presents you with a list of available icons that you can use with your blurb text. You can add multiple classes, separated with a space. The perfect theme for bloggers and online-publications. New Plugin: Divi Show / Hide Button Module, This post may contain referral links which may earn a commission for this site. 3. I demarked the feature in divi booster, but the Icons keep their size. Every Divi module has a long list of design settings that you can use to change just about anything. The only changes I made with the colors and size of the icon. Since the Blurb module combines both imagery and text to showcase certain features, you can use it to add a list of your company’s services on your homepage. Since your design settings have carried over to your duplicated modules, all you have to do is change the content (heading, content, icon, url, etc…) and tweak colors to fit each of your services. Where do I position this code? You can of course use different values if you want to. Do the same with any other caching / performance plugins you have installed, and maybe clear your browser history as well. An out-of-the-box Divi uses 48px for the icon on top and 16px for the icon on the left. as well as left, center, and right position if you choose to keep your icon on top. Blurb Images will always appeared centered within their columns and will span the full width of your column up to 550px. Add the class front in the Blurb Module. Within the content tab you will find all of the module’s content elements, such as text, images and icons. However, the default icon size differs significantly between the two options, like so: Since I first wrote this, Divi has added an option which allows you to control the size of the left-positioned blurb icon. Divi Booster has an option for increasing the left-positioned blurb icon to 96px, to match the default top-positioned icon size. This hack allows you to add over 1,000 icons from Font Awesome. Custom CSS can also be applied to the module and any of the module’s internal elements. The only changes I made with the colors and size of the icon. If I went smaller the circle remained the same size while the icon … Choose your icon in the icon settings. If you chose “yes” for the “Use Icon” setting, then this option will appear. I replaced the blurbs in the Doctor’s Office layout pack with Divi Blurb Extended modules. Back To Divi Builder Plugin Documentation. Since the addition of Divi's "Icon Font Size" setting mentioned above, this option is no longer required. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. Prior to Divi Booster 3.2.6, the option was located at: Divi > Divi Booster > Modules > Blurb > Make left-placed blurb icons bigger. You icon, in it’s color, will appear inside this a circle with the color you select here. New modules can only be added inside of Rows. For this example, I’m going to use the Blurb Module to add four featured services to a homepage. The input fields supports different units of measurement, which means you can input “px” or “em” following your size value to change its unit type. Now duplicate the Blurb Module you just created three times and drag each of the duplicated blurbs over to the other three columns. Leaving this field blank will simply leave your title as a static element. Enter optional CSS classes to be used for this module. Download The Blurb Icon Background Examples for FREE. Method . The Divi Builder includes lots of ways to add images to your layouts. Repeat this Step 4 for each of these Blurb Modules. Each of these layout locations can use any size image, but a more effective layout would use images that are designed for those locations. Blurbs are a great way to showcase small bits of important information, and are often used in rows to display skills or features. Text Orientation: Center If you would like to increase the space between each letter in your header text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. This will change the label of the module in the builder for easy identification. Content Options. You should be able to do it with CSS like this: Hope it helps, but let me know if you're unsure how to apply it, etc. The module list is searchable, which means you can also type the word “blurb” and then click enter to automatically find and add the blurb module! You can also customize the style of your text using the bold, italic, all-caps and underline options. Set up the rest (icon color, circle and border, icon placement, animation) as you want. Line height affects the space between each line of your header text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. Icon List module is like the Divi Blurb Module but more enhanced and well-aligned. 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 … // Theme Options > General > Custom CSS): The first of the two blocks of code moves the icon to the right. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. Thanks Gabriel. This dropdown menu allows you to specify the orientation of your text to be Left Justified, Centered, or Right Justified. Here you can adjust the size of your header text. Some icons are not square, for example the plane icon. Required fields are marked *, Change the Blurb Module Icon / Image Placement on Mobiles, Make the Divi Theme Options Header Sticky, Adblock Extension for Chrome blocking Divi Icons. 16:9 – the standard monitor ratio, widescreen and great for headers. You're right, the CSS is no longer necessary. Preview 110+ Premade Websites & 880+ Premade Layouts. This controls the direction of the lazy-loading animation. 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. Then add a Blurb module to the first column of your row. This option allows you to customize the color of your Icon. If you chose “yes” for the “Circle Icon” setting, then this option will appear. //]]>. Classic layout has option to show icon on right in blurb. css is no longer necessary.. whether you place the icon on top or on the left, there is an option to turn on icon font size and a slider to match. Elegant Themes’ Divi 3 is great in many ways, creating a horizontal blurb with a large image is not one of them — unless of course you customize the CSS. Icon Font Size: 68px (this adjusts the size of your icon) The Blurb Module also allows you to turn your Blurb image/icon and title into a link to your service page. This is the support forum for Divi Ultimate Child Theme. If you chose “yes” for the “Circle Icon” setting, then this option will appear. It is probably the most suitable way for making the icon bigger. For this example, I’m going to use the Blurb Module to add four featured services to a homepage. This option allows you to turn on a border for your circle. Besides the Title and Body Text content being different, the only styling difference is the phone number in the third Blurb Module is a larger text size. Thanks! Header Font Size: 24px Place a valid web URL in this field to turn your Blurb Title into a link. 1) Set the CSS class in the blurb module's advanced / custom CSS tab to: my_blurb. If you would like to change the color of your header text, choose your desired color from the color picker using this option. 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. Hey Brian, yeah it would be great to see it in Divi. Maybe it is not as popular, but I have seen layouts from other WordPress builders that use these very nicely, and I have needed it on client sites. It is available in other layouts as well. Adding Custom Blurb Icons in Divi. The issue was that the default Divi blurb image was way too small. The blurb layouts available in this plugin allows user to create Divi flip box with various animation effects. Let’s move forward and do the CSS magic happen. Now in the first Blurb settings. Unfortunately, I have no insight into whether they plan to or not… Hopefully it's on their roadmap! Within the advanced tab, you will find options that more experienced web designers might find useful, such as custom CSS and HTML attributes. Use Icon Font Size: YES I see you're using Cachify – I'd suggest going into that plugin's settings and clearing it's caches. Here is a quick tutorial to right align the Divi blurb image/icon and reverse the module. The ultimate email opt-in plugin for WordPress. Then add a Blurb module to the first column o… window.__mirage2 = {petok:"f3bdc47f07794fe959f976e85f68c5bb5c11a6d8-1613318257-259200"}; [CDATA[ Blurb Text will also span the full width of your column up to 550px. CSS input into these settings are already wrapped within style tags, so you need only enter CSS rules separated by semicolons. If you chose “yes” for the “Use Icon” setting, then this option will appear. You can also apply custom CSS classes and IDs to the module, which can be used to customize the module within your child theme’s style.css file. The Blurb Module also allows you to turn your Blurb image/icon and title into a link to your service page. Margin is the space added outside of your module, between the module and the next element above, below or to the left and right of it. Place a valid image url here, or choose/upload an image via the WordPress Media Library. To remove a background image, simply delete the URL from the settings field. The blurb module is a simple and elegant combination of text and imagery. To remove custom margin, delete the added value from the input field. It should look like this. Select the Gear Icon in one of the Blurb modules (in the third Row from top) to open Blurb Settings. An ID can be used to create custom CSS styling, or to create links to particular sections of your page. I set it to 16. Here you can adjust the size of your body text. Background images will appear above background colors, which means your background color will not be visible when a background image is applied. The input fields supports different units of measurement, which means you can input “px” or “em” following your size value to change its unit type. You can add custom padding values to any of the module’s four sides. You can choose to disable your module on tablets, smart phones or desktop computers individually. How can i change it back? in one easy-to-use plugin. This border can be customized using the following conditional settings. Most websites need a well-designed feature section to display the features of products or services. This post explains how to add CSS code to Divi: https://divibooster.com/adding-css-to-the-divi-theme/. Hi elie, thanks for pointing this out. Apply Divi blurb custom icon, set Divi blurb icon on the right, Divi blurbs hover effects and many more customization options. Prior to Divi Booster 3.2.6, the option was located at: Divi > Divi Booster > Modules > Blurb > Make left-placed blurb icons bigger. (I've just added this link into the post above too). New modules can only be added inside of Rows. 2. 2. 1. Unlimited Users. Positioning Blurb Icon #1. It contains an options to choose between placing the icon above the text or to the side. Here you can adjust the color of the circle border. Locate the blurb module within the list of modules and click it to add it to your page. Now simply copy and paste the below CSS code snippet to your website. Thank you so much. If you are starting a new page, don’t forget to add a row to your page first. If you did not choose to use an Icon, then this setting will appear. The URL option below the Title Field will allow you to make your Title a hyperlink. Cheers! This is the tab you will use to change how your module looks. I Appreciate your time. The second right aligns the text / title (so you may want to leave the second block out if you don't want to do that). If you want to create a list with icons then this module is helpful. Enter an optional CSS ID to be used for this module. However, the icon size differs significantly between the two options. I've updated the post with details of the icon font size option. Icon: [select an icon that illustrates your service], Icon Color: #42bb99 (make sure color compliments the site design) This package also includes JSON file with 3 samples that can be imported directly to your Divi library.. 2.