How to add, configure and customize the Divi blurb module. This option allows you to customize the color of your Icon. Border 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. The code will show up as a weird square symbol after you save but it’s ok. Keep it as is. Aspect ratio is the ratio of width to height of an image or a screen and this is a much better measure to determine the size of your image for your Divi website. ... Get the Best Icon Plugin for Divi Today! I demarked the feature in divi booster, but the Icons keep their size. Step 3 – Add Class to Menu. This field is where you can enter the body content of your blurb. In this tutorial we will be using the files from the download above, which contains an icon font we designed and generated with Icomoon. 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. Enable the link icon to control all four corners at once, or disable to define custom values for each. Access almost 2000 icons from Font Awesome and the Material Icon set, natively in the Divi Builder UI. Enable the "Use Icon Font Size" option. Unlimited Users. This only affects blurbs that are not in icon mode. 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. File size: 116.8 KB #1 Joe Bunker, Jan 9, 2021. A CSS class can be used to create custom CSS styling. Step 4 – Add Class to Stylesheet or Custom CSS section in Divi This includes an RSS icon, the standard social sharing icon, and a socializing people icon, so the number of actual networks is closer to 20. You icon, in it’s color, will appear inside this a circle with the color you select here. 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 Divi Icon Party plugin adds 40 new social media icons to Divi for use in menus, headers, and footers. Before you can add a blurb module to your page, you will first need to jump into the Divi Builder. The WP and Divi Icon plugin comes complete with SVG support, promising pixel perfect designs. Choosing The Icons For The Divi Menu. This option lets you control which devices your module appears on. The height of the blurb image is determined by the aspect ratio of your original image, so making all of your blurb images the same height is a good idea if you are placing them side by side. The quality will remain pixel-perfect! This will change the label of the module in the builder for easy identification. 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). Thanks. Blurb modules can be placed in any column that you create. By default, all text colors in Divi will appear as white or dark gray. If you chose “yes” for the “Use Icon” setting, then this option will appear. To remove custom margin, delete the added value from the input field. Icon: [select an icon that illustrates your service], Icon Color: #42bb99 (make sure color compliments the site design) First, under the "Advanced" tab of your button module, set a value for the CSS ID. Anything that controls what appears in your module will always be found within this tab. The quality will remain pixel-perfect! To adjust Divi theme’s footer icons’ size, go to Divi >> Divi Theme Customizer >> Footer >> Bottom Bar >> Social Icon Size, and move the slider or input the value. URL: [add a URL to the service page] By default, Divi uses the Open Sans font for all text on your page. Switch Divi’s Mobile Logo. 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. 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. You can add custom margin values to any of the module’s four sides. It is so stupid that this has to be done with CSS considering ALLLLL the settings in DIVI. Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. Hi..admin nerdnomads,. For a more indepth guide, head on over to Adding CSS to the Divi Theme by divibooster.com. If you would like to increase the space between each letter in your body 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. If you’re not using a child theme or you prefer, you can add CSS to the Divi Theme Options panel (look for Custom CSS at the bottom of the General tab). This options presents you with a list of available icons that you can use with your blurb text. The Icon Inserter Button. Unfortunately, I have no insight into whether they plan to or not… Hopefully it's on their roadmap! Where do I position this code? 1) Add the Button module in your design and go to settings. By default these values are measured in pixels, but you can input custom units of measurement into the input fields. It’s a plugin from Divi Space that adds over 30 new icons to Divi. If you chose “yes” for the “Show Circle Border” setting, then this option will appear. Hi, i could set the image on the left with divi booster plugin, but is there a way to increase the space between the image and the text? Now add the following CSS to Divi (e.g. If you are starting a new page, don’t forget to add a row to your page first. 3. Here is where you get to choose an icon from either the built-in Divi ETModules icon font family or the Font Awesome icon font family.. Borders support eight different styles, including: solid, dotted, dashed, double, groove, ridge, inset and outset. However, if you want to apply some unique styles only to one icon … Since I first wrote this, Divi has added an option which allows you to control the size of the left-positioned blurb icon. ... however the builder is not fully loading and we are only getting a partial load and a spinning icon. Harness the power of Divi with any WordPress theme. Change the Icon Color to your desired color and Icon Hover Color desired. Add a Divi favicon to your website using the Site Icon feature in the Theme Customizer. Within the content tab you will find all of the module’s content elements, such as text, images and icons. 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. If you chose “yes” for the “Use Icon” setting, then this option will appear. This dropdown menu allows you to specify the orientation of your text to be Left Justified, Centered, or Right Justified. Icon Font Size: 68px (this adjusts the size of your icon) Here you can adjust the size of your header text. To use it: 1. You can also click the Use Visual Builder button when browsing your website on the front end if you are logged in to your WordPress Dashboard. That’s why I thought of doing this tutorial, and I hope this helps you! Divi Toggles and Accordions use the ETmodules icon font. This controls the direction of the lazy-loading animation. If defined, this image will be used as the background for this module. Here you can control the corner radius of the icon. Blurb Text will also span the full width of your column up to 550px. You can add multiple classes, separated with a space. Toggle icon show state to active and choose one. Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder’s modules. The Divi Icon King plugin comes with a few built in filters to allow you to quickly switch between icon sets. Hi Dan, Great tutorials btw. 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. With Divi Icon Party, you can add an email icon anywhere: to the header, menu, footer or the page content (with the Divi Social Media Follow Module). You can use the following file formats .ico, .png, .jpg. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface. If you want to change the size of just the icon, leaving the button text at its usual size, you can do so with some CSS code. Letter spacing affects the space between each letter. Choose any icon from the ET Icon list. Unlimited Websites. Since the addition of Divi's "Icon Font Size" setting mentioned above, this option is no longer required. ... You can change color and size of an icon, add a circle or a border. Enter optional CSS classes to be used for this module. Letter spacing affects the space between each letter. ETmodules – Divi Icon Font. When using Blurbs, you can choose to either use an Icon or and Image with your text. There are several great choices for icons to add to your Divi menu Module. Includes 40 extra social media icons; Add more social media icons in the Divi menus, headers, and footers; Enable or disable social media icons in the Divi theme options The URL option below the Title Field will allow you to make your Title a hyperlink. Hi elie, thanks for pointing this out. If you select “yes” for the “Use Icon” option, then you will be presented with the following options to customize your icon. Icons can be enabled or disabled using the Divi theme options. Your email address will not be published. If you did not choose to use an Icon, then this setting will appear. The size of the Icon and text combined can be change at your WordPress Dashboard > Appearance > Customize > Header & Navigation > Text Size. Most of the styles of the icons can be modified under the design tab in the Divi Module settings. Place a valid image url here, or choose/upload an image via the WordPress Media Library. If enabled, you can input a custom size for the icon that is displayed above or two the left of your blurb text. 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. I’m one of the don’t! Update the Blurb Settings with the following: Title: [enter title of service] The issue that I found with it is the sizes of the icons aren’t as easy to adjust. It also allows the image to be read and recognized by search engines. 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. By default, borders have a width of 1 pixel. By default, the icons are set to your theme accent color. 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. Go to: Blurb Settings > Design > Image & Icon. To make it easier for visitors to get in touch with you, the email icon is clickable. Here you can choose where you would like your image/icon to be placed. If you chose “yes” for the “Circle Icon” setting, then this option will appear. Icon Rounded Corners. Simply click on the con that you would like to use and it will appear in your blurb. 3. Hi Christian, it sounds like it's probably a caching issue (where a caching plugin stores and uses old version of Divi Booster's CSS file). 2. These icons are pixel-perfect and can be easily customized to suit every website. Body Font Size: 18px Leaving this field blank will simply leave your title as a static element. Here you can adjust the size of your body text. Visa versa, if your blurb is being placed onto a light background, the Text Color should be set to ‘Light’. In WordPress, favicons are called site icons. You can also customize the style of your text using the bold, italic, all-caps and underline options. If needed, you can change the Icon Font Size to your desired size by changing Use Custom Icon Size to YES. New modules can only be added inside of Rows. 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. Line height affects the space between each line of your body 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. Preview 110+ Premade Websites & 880+ Premade Layouts. Here you can apply custom CSS to any of the module’s many elements. By default, all text colors in Divi will appear as white or dark gray. These icons are pixel-perfect and can be easily customized to suit every website. Back To Divi Builder Plugin Documentation. If you uploaded a favicon size of 512×512 pixels WordPress will generate the approximal size for each case needed. The World's #1 WordPress Theme & Visual Page Builder. Hopefully that will clear it up, but let me know if not. Enter an optional CSS ID to be used for this module. Step 1 – Copy Your Icon Code. 1) Set the CSS class in the blurb module's advanced / custom CSS tab to: my_blurb. To add the four Blurbs to your page, use the visual builder to add a standard section with a four column row. 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. Download the Icon Font you wish to use. By default, Divi uses the Open Sans font for all text on your page. 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. CSS input into these settings are already wrapped within style tags, so you need only enter CSS rules separated by semicolons. We’ll use this class to style the icon. This is a free font made by Elegant Themes, and you can see the list of all available icons inside this blog post.I recommend keeping this link in your bookmarks, you can use these icons in many different places, not just the Blurbs and Buttons! This post explains how to add CSS code to Divi: https://divibooster.com/adding-css-to-the-divi-theme/. This border can be customized using the following conditional settings. Divi Builder spinning icon. 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. The obvious step here is to replace the icon (or keep the arrow if you like it). If your blurb is being placed onto a dark background the Text Color should be set to ‘Dark’. We offer a 30 Day Money Back Guarantee, so joining is Risk-Free! Thanks! 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. Hi Dan, Thank you for this awesome feature. These classes can be used in your Divi Child Theme or within the Custom CSS that you add to your page or your website using the Divi Theme Options or Divi Builder Page Settings. Divi Booster has an option for increasing the left-positioned blurb icon to 96px, to match the default top-positioned icon size. Thank you so much. Custom CSS can also be applied to the module and any of the module’s internal elements. You're right, the CSS is no longer necessary. Thanks! In this example I'll use "mybutton". This package also includes JSON file with 3 samples that can be imported directly to your Divi library.. 2. 2) Add the following code into the main Divi Custom CSS box (Divi > Theme Options > General > Custom CSS): The first of the two blocks of code moves the icon to the right. To fix this copy the CSS code below and paste it at your WordPress Dashboard > Divi > Theme Options > General > Custom CSS. If you click the icon, it will open your computer’s default email client. These options are separated into three main groups: Content, Design and Advanced. Divi sets the blurb module default image width to 64px and there is no way to adjust the width in the settings. Blurb Images will always appeared centered within their columns and will span the full width of your column up to 550px. ... You can change color and size of an icon, add a circle or a border. 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. Hey Brian, yeah it would be great to see it in Divi. New Plugin: Divi Show / Hide Button Module, This post may contain referral links which may earn a commission for this site. Remember, the Menu module has a few settings like size and color, but the default menu has no settings for this. Click the Design tab and scroll to the section related to showing the button icon. Go to the Font Awesome website and choose the icon(s) that you want to use. Content: [enter a short description of the service] thanks for this helpful article about change logo size.. but, could u give me information.. how to change your header menu like yours… because header menu divi so standard.. how could u change this and give a icon picture like yours.. Go to: Blurb Settings > Design > Image & Icon, 2. Here you can choose whether or not your link opens in a new window. We have some great tutorials about how to use Divi’s row and section elements. You can also customize the style of your text using the bold, italic, all-caps and underline options. However if you want to set a different font size for the Icon compared to the text of the menu then copy the CSS code below and paste it at your WordPress Dashboard > Divi > Theme Options > General > Custom CSS Reading though the comments in ET’s Divi Icon list article you linked to, it seems like people either know how to do it or don’t! The issue was that the default Divi blurb image was way too small. Note: currently the filters are only available in the standard Divi Builder. You can also filter icons by style, either solid or outline, to match the look and feel of the site you’re working on. This option affects the color of your border. It can either appear above the text, or to the left of the text. To remove a background image, simply delete the URL from the settings field. Blurbs are a great way to showcase small bits of important information, and are often used in rows to display skills or features. Then add a Blurb module to the first column of your row. header .et-pb-icon { font-size: 24px; vertical-align: middle; } If you want to set a different color for your Icons from the menu items then you can use the code below. Select your desired icon size using the slider "Icon Font Size" slider. Here you can change the actual size of the Icon by increasing or decreasing the Icon font size. 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 Select your desired icon size using the slider "Icon Font Size" slider. By default footer icons of Divi theme are aligned in the right. Built to get you more shares and more followers. To use it: 1. If you chose “yes” for the “Circle Icon” setting, then this option will appear. Finally, click save button I decided to use the Google Chrome inspect tool and discovered the issue. If you did not choose to use an Icon, then this setting will appear. Every Divi module has a long list of design settings that you can use to change just about anything. Select your desired style from the dropdown menu to apply it to your border. (I've just added this link into the post above too). Select a custom color from the color picker to apply it to your border. Body Line Height: 1.5em. However, your image will never scale larger than its original upload size. How can i change it back? Header Font Size: 24px By default these values are measured in pixels, but you can input custom units of measurement into the input fields. If you select “yes” for this setting, then you will be presented with additional options for customizing your circle color and border.