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! Divi Mobile Menu Hamburger Icon. I’m one of the don’t! 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. Thanks! Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Give a title to your blurb that will appear above the body text of the blurb in a bold text style. This will change the label of the module in the builder for easy identification. Locate the blurb module within the list of modules and click it to add it to your page. ETmodules – Divi Icon Font. I've updated the post with details of the icon font size option. Within the advanced tab, you will find options that more experienced web designers might find useful, such as custom CSS and HTML attributes. Text Orientation: Center For this example, I’m going to use the Blurb Module to add four featured services to a homepage. in the "Divi > Theme Options > General > Custom CSS" box): Use Icon: YES These options are separated into three main groups: Content, Design and Advanced. Remember, the Menu module has a few settings like size and color, but the default menu has no settings for this. 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. 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? The code will show up as a weird square symbol after you save but it’s ok. Keep it as is. Preview 110+ Premade Websites & 880+ Premade Layouts. 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! This makes your YouTube Icon or Instagram Icon integration much easier and saves hours of time spent custom coding. To remove a background image, simply delete the URL from the settings field. If you chose “yes” for the “Circle Icon” setting, then this option will appear. Before you can add a blurb module to your page, you will first need to jump into the Divi Builder. Divi’s Built-in Icons Of Divi’s 380 icons, 69 of those are social icons, which includes 23 networks or services with three icons per network. 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. as well as left, center, and right position if you choose to keep your icon on top. 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. 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 This package also includes JSON file with 3 samples that can be imported directly to your Divi library.. 2. By default, Divi uses the Open Sans font for all text on your page. Icons can be enabled or disabled using the Divi theme options. Hi Dan, Great tutorials btw. Since I first wrote this, Divi has added an option which allows you to control the size of the left-positioned blurb icon. 3. Divi > Theme Customizer > General Settings > Site identity > Site Icon. Step 4 – Add Class to Stylesheet or Custom CSS section in Divi If you would like to change the color of your body text, choose your desired color from the color picker using this option. 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. Tried it with divi booster on my own Website. 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. If your blurb is being placed onto a dark background the Text Color should be set to ‘Dark’. To use it: 1. Every Divi module has a long list of design settings that you can use to change just about anything. 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. Select your desired style from the dropdown menu to apply it to your border. Just what I was looking for. For this example, we are keeping the icon fill white with a 80% opacity with a Hover color of white with 50% opacity. Blurb Text will also span the full width of your column up to 550px. Your email address will not be published. Hey Brian, yeah it would be great to see it in Divi. If you chose “yes” for the “Circle Icon” setting, then this option will appear. You can choose to disable your module on tablets, smart phones or desktop computers individually. How can i change it back? Thanks. Download the Icon Font you wish to use. The size of the Icon and text combined can be change at your WordPress Dashboard > Appearance > Customize > Header & Navigation > Text Size. If needed, you can change the Icon Font Size to your desired size by changing Use Custom Icon Size to YES. Once you have activated this free plugin, you will get a list of plugin options to enable icons selectively in your Divi top menu or Divi website footer. New modules can only be added inside of Rows. Add a Divi favicon to your website using the Site Icon feature in the Theme Customizer. (I've just added this link into the post above too). Enable the link icon to control all four corners at once, or disable to define custom values for each. Built to get you more shares and more followers. Hi Dan, Thank you for this awesome feature. Then add a Blurb module to the first column of your row. The WP and Divi Icon plugin comes complete with SVG support, promising pixel perfect designs. The Divi Icon Party plugin adds 40 new social media icons to Divi for use in menus, headers, and footers. The Blurb Module also allows you to turn your Blurb image/icon and title into a link to your service page. Hi elie, thanks for pointing this out. You can also customize the style of your text using the bold, italic, all-caps and underline options. Applying a max width value here will limit the width of the blurb image. Borders support eight different styles, including: solid, dotted, dashed, double, groove, ridge, inset and outset. For example, I searched for home and I get a list of home/house icons, click on the one you like and copy the code. Before you can add a blurb module to your page, you will first need to jump into the Divi Builder. This is useful if you want to use different modules on different devices, or if you want to simplify the mobile design by eliminating certain elements from the page. 1. Thank you so much. Padding is the space added inside of your module, between the edge of the module and its internal elements. You can add multiple classes, separated with a space. This options presents you with a list of available icons that you can use with your blurb text. To remove custom margin, delete the added value from the input field. Border As well as the external font sources and the built-in Elegant Themes icon font set that comes default with the Divi theme, the WP and Divi Icons plugin includes a collection of custom, hand-designed icons too. However, your image will never scale larger than its original upload size. Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder’s modules. To add the four Blurbs to your page, use the visual builder to add a standard section with a four column row. Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder’s modules. As well as the external font sources and the built-in Elegant Themes icon font set that comes default with the Divi theme, the WP and Divi Icons plugin includes a collection of custom, hand-designed icons too. It really makes me question the developers. This dropdown menu allows you to specify the orientation of your text to be Left Justified, Centered, or Right Justified. Unlimited Websites. If you select “yes” for this setting, then you will be presented with additional options for customizing your circle color and border. We offer a 30 Day Money Back Guarantee, so joining is Risk-Free! 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. Switch Divi’s Mobile Logo. If you would like to change the color of your header text, choose your desired color from the color picker using this option. If defined, this image will be used as the background for this module. Access almost 2000 icons from Font Awesome and the Material Icon set, natively in the Divi Builder UI. The quality will remain pixel-perfect! 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. Enable the "Use Icon Font Size" option. If you click the icon, it will open your computer’s default email client. Now add the following CSS to Divi (e.g. Cheers! Leaving this field blank will simply leave your title as a static element. But what if i want to go back to normal size. Wide Icons Selection. 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. Divi Icons PRO adds 2400+ brand new icons directly to your Divi Builder! ... You can change color and size of an icon, add a circle or a border. Toggle icon show state to active and choose one. Change the Icon Color to your desired color and Icon Hover Color desired. URL: [add a URL to the service page] Hi..admin nerdnomads,. These icons are pixel-perfect and can be easily customized to suit every website. Here you can choose whether or not your link opens in a new window. This controls the direction of the lazy-loading animation. The Social Media Follow module by Divi Theme is such a useful module, especially if you or your client has a lot of social media channels. Icon Rounded Corners. 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 also click the Use Visual Builderbutton when browsing your website on the fro… 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). Within the content tab you will find all of the module’s content elements, such as text, images and icons. Anything that controls what appears in your module will always be found within this tab. You can use the following file formats .ico, .png, .jpg. This option allows you to turn on a border for your circle. Where do I position this code? You can change the font of your body text by selecting your desired font from the dropdown menu. To remove custom margin, delete the added value from the input field. CSS input into these settings are already wrapped within style tags, so you need only enter CSS rules separated by semicolons. This is going slightly off the topic of menu, but it’s icon related & hope you can help! ... Get the Best Icon Plugin for Divi Today! First, under the "Advanced" tab of your button module, set a value for the CSS ID. Embedding an Icon Font. The WP and Divi Icon plugin comes complete with SVG support, promising pixel perfect designs. 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. Here you can apply custom CSS to any of the module’s many elements. Step 1 – Copy Your Icon Code. The issue was that the default Divi blurb image was way too small. Here you can adjust the size of your header text. ... You can change color and size of an icon, add a circle or a border. 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. If you do not choose to use an Icon, then you will be prompted to upload an image instead. The quality will remain pixel-perfect! Step 3 – Add Class to Menu. By default, all text colors in Divi will appear as white or dark gray. 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.. Enter an optional CSS ID to be used for this module. ... however the builder is not fully loading and we are only getting a partial load and a spinning icon. This option allows you to customize the color of your Icon. 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. By default these values are measured in pixels, but you can input custom units of measurement into the input fields. Most of the styles of the icons can be modified under the design tab in the Divi Module settings. Update the Blurb Settings with the following: Title: [enter title of service] Here you can adjust the size of your body text. 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 Go to: Blurb Settings > Design > Image & Icon. They’re available in both the theme options, which displays in the header and footer, and in the social media module, which can be displayed anywhere you can display a module. Unfortunately, I have no insight into whether they plan to or not… Hopefully it's on their roadmap! You can also filter icons by style, either solid or outline, to match the look and feel of the site you’re working on. Divi Builder spinning icon. Here you can control the corner radius of the icon. We have some great tutorials about how to use Divi’s row and section elements. If you want to change some settings with the mobile menu hamburger icon, you can do so with CSS. Do the same with any other caching / performance plugins you have installed, and maybe clear your browser history as well. Next, click the Use Visual Builder button to launch the builder in Visual Mode. 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. 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. If you chose “yes” for the “Use Icon” setting, then this option will appear. Your email address will not be published. You can add custom margin values to any of the module’s four sides. Purchase Now. Custom CSS can also be applied to the module and any of the module’s internal elements. Icon Font Size. The World's #1 WordPress Theme & Visual Page Builder. I demarked the feature in divi booster, but the Icons keep their size. Add the following CSS to your child theme’s style.css file. 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. Thanks Gabriel. Use Icon Font Size: YES 1 License. It is probably the most suitable way for making the icon bigger. The icon name is determined by the .css file you upload for the icon set. How to change footer icon’s alignment. Click the Design tab and scroll to the section related to showing the button icon. Place a valid web URL in this field to turn your Blurb Title into a link. Body Line Height: 1.5em. That’s why I thought of doing this tutorial, and I hope this helps you! In this example I'll use "mybutton". 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. Try Out The Drag & Drop Page Builder for FREE! You're right, the CSS is no longer necessary. This option lets you control which devices your module appears on. In WordPress, favicons are called site icons. 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. Prior to Divi Booster 3.2.6, the option was located at: Divi > Divi Booster > Modules > Blurb > Make left-placed blurb icons bigger. Letter spacing affects the space between each letter. I looked through the module settings, but couldn’t find a way to adjust the image size. 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. 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. You icon, in it’s color, will appear inside this a circle with the color you select here. If you are starting a new page, don’t forget to add a row to your page first. - Divi Icon King Divi Plugin by Alex Brinkman - Green Tree Media. Note: currently the filters are only available in the standard Divi Builder. For a more indepth guide, head on over to Adding CSS to the Divi Theme by divibooster.com. The Divi favicon should be 512 x 512 pixels. 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. 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. Divi comes with dozens of great fonts powered by Google Fonts. Now we are going to add icons in your Divi menu. Divi Icons PRO adds 2400+ brand new icons directly to your Divi Builder! 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. Place a valid image url here, or choose/upload an image via the WordPress Media Library. However, if you want to apply some unique styles only to one icon … It also allows the image to be read and recognized by search engines. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface. This option affects the color of your border. You can also customize the style of your text using the bold, italic, all-caps and underline options. 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. Back To Divi Builder Plugin Documentation. Divi Toggles and Accordions use the ETmodules icon font. 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. Blurb modules can be placed in any column that you create. It is so stupid that this has to be done with CSS considering ALLLLL the settings in DIVI. Here you can adjust the color of the circle border. File size: 116.8 KB #1 Joe Bunker, Jan 9, 2021. Since the addition of Divi's "Icon Font Size" setting mentioned above, this option is no longer required. Then adjust the size. Background images will appear above background colors, which means your background color will not be visible when a background image is applied. Here you can choose where you would like your image/icon to be placed. The blurb module is a simple and elegant combination of text and imagery. Here you can change the actual size of the Icon by increasing or decreasing the Icon font size. Once the module has been added, you will be greeted with the module’s list of options. The perfect theme for bloggers and online-publications. An ID can be used to create custom CSS styling, or to create links to particular sections of your page. By default these values are measured in pixels, but you can input custom units of measurement into the input fields. This color is independent from your Icon color selected earlier. In this tutorial we will be using the files from the download above, which contains an icon font we designed and generated with Icomoon. 1) Set the CSS class in the blurb module's advanced / custom CSS tab to: my_blurb. in one easy-to-use plugin. I have to do this every time and each time I shake my head. 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.. 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! It is probably the most suitable way for making the icon bigger. Select your desired icon size using the slider "Icon Font Size" slider. With additional code support for over 200 platforms in the icon set!