Enter optional CSS classes to be used for this module. Thank you very much. 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. If you chose “yes” for the “Use Icon” setting, then this option will appear. 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). If you chose “yes” for the “Use Icon” setting, then this option will appear. You can also click the Use Visual Builderbutton when browsing your website on the fro… Hey Brian, yeah it would be great to see it in Divi. Here you can choose where you would like your image/icon to be placed. Access almost 2000 icons from Font Awesome and the Material Icon set, natively in the Divi Builder UI. To remove custom margin, delete the added value from the input field. 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. Then add a Blurb module to the first column of your row. Blurb Images will always appeared centered within their columns and will span the full width of your column up to 550px. To remove a background image, simply delete the URL from the settings field. Enable the "Use Icon Font Size" option. New modules can only be added inside of Rows. We offer a 30 Day Money Back Guarantee, so joining is Risk-Free! 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.. 3. By default, Divi uses the Open Sans font for all text on your page. When using Blurbs, you can choose to either use an Icon or and Image with your text. Divi Builder spinning icon. This only affects blurbs that are not in icon mode. If you select “yes” for this setting, then you will be presented with additional options for customizing your circle color and border. By default these values are measured in pixels, but you can input custom units of measurement into the input fields. 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. I've updated the post with details of the icon font size option. This border can be customized using the following conditional settings. The WP and Divi Icon plugin comes complete with SVG support, promising pixel perfect designs. Thank you so much. I see you're using Cachify – I'd suggest going into that plugin's settings and clearing it's caches. 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. If you chose “yes” for the “Circle Icon” setting, then this option will appear. This color is independent from your Icon color selected earlier. The Divi Theme blurb module allows you to add an icon with text to your page. Use Icon: YES Divi comes with dozens of great fonts powered by Google Fonts. If you uploaded a favicon size of 512×512 pixels WordPress will generate the approximal size for each case needed. Go to the Font Awesome website and choose the icon(s) that you want to use. Unlimited Users. Hi..admin nerdnomads,. 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. By default, the icons are set to your theme accent color. That’s why I thought of doing this tutorial, and I hope this helps you! To use it: 1. Icons can be enabled or disabled using the Divi theme options. 1. File size: 116.8 KB #1 Joe Bunker, Jan 9, 2021. 2. Icon Rounded Corners. 1 License. The quality will remain pixel-perfect! Custom CSS can also be applied to the module and any of the module’s internal elements. ... Get the Best Icon Plugin for Divi Today! How can i change it back? Just what I was looking for. Once you have entered the Visual Builder, you can click the gray plus button to add a new module to your page. Try Out The Drag & Drop Page Builder for FREE! Applying a max width value here will limit the width of the blurb image. Within the content tab you will find all of the module’s content elements, such as text, images and icons. For a more indepth guide, head on over to Adding CSS to the Divi Theme by divibooster.com. Now duplicate the Blurb Module you just created three times and drag each of the duplicated blurbs over to the other three columns. Wide Icons Selection. Here you can apply custom CSS to any of the module’s many elements. A CSS class can be used to create custom CSS styling. Text Orientation: Center If you would like to change the color of your body text, choose your desired color from the color picker using this option. If you click the icon, it will open your computer’s default email client. 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 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. Divi comes with dozens of great fonts powered by Google Fonts. 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. Divi Icons PRO adds 2400+ brand new icons directly to your Divi Builder! To add the four Blurbs to your page, use the visual builder to add a standard section with a four column row. Preview 110+ Premade Websites & 880+ Premade Layouts. Step 2 – Add Code to Navigation Label in Menu. Hi Dan, Great tutorials btw. Now we are going to add icons in your Divi menu. I’m one of the don’t! These icons are pixel-perfect and can be easily customized to suit every website. 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. Here you can adjust the size of your body text. Enter an optional CSS ID to be used for this module. The Blurb Module also allows you to turn your Blurb image/icon and title into a link to your service page. Choose any icon from the ET Icon list. Hi Dan, Thank you for this awesome feature. 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. I have to do this every time and each time I shake my head. The ultimate email opt-in plugin for WordPress. Icon Font Size. Letter spacing affects the space between each letter. Unlimited Websites. To fix this copy the CSS code below and paste it at your WordPress Dashboard > Divi > Theme Options > General > Custom CSS. If you chose “yes” for the “Circle Icon” setting, then this option will appear. By default, Divi uses the Open Sans font for all text on your page. Note: currently the filters are only available in the standard Divi Builder. Hi elie, thanks for pointing this out. First, under the "Advanced" tab of your button module, set a value for the CSS ID. Once the module has been added, you will be greeted with the module’s list of options. You can add custom margin values to any of the module’s four sides. If you chose “yes” for the “Use Icon” setting, then this option will appear. It is probably the most suitable way for making the icon bigger. 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. Header Font Size: 24px What’s more aspect ratio is important when optimizing images for small screens, especially 11 inch laptops. Divi Toggles and Accordions use the ETmodules icon font. 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. The issue was that the default Divi blurb image was way too small. The quality will remain pixel-perfect! By default, all text colors in Divi will appear as white or dark gray. 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. Cheers! Choosing The Icons For The Divi Menu. The perfect theme for bloggers and online-publications. We have some great tutorials about how to use Divi’s row and section elements. Go to: Blurb Settings > Design > Image & Icon. 1) Add the Button module in your design and go to settings. Prior to Divi Booster 3.2.6, the option was located at: Divi > Divi Booster > Modules > Blurb > Make left-placed blurb icons bigger. You can also customize the style of your text using the bold, italic, all-caps and underline options. If selected, an additional option will appear to select your border color. I Appreciate your time. Border Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder’s modules. This plugin is 100% compatible with both the Visual Builder and standard Divi Builder as of version 1.5 of the plugin. However, if you want to apply some unique styles only to one icon … 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! 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. 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. (I've just added this link into the post above too). 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. Step 3 – Add Class to Menu. Content: [enter a short description of the service] This option allows you to customize the color of your Icon. Enabling this option will place a border around your module. Now add the following CSS to Divi (e.g. It’s a plugin from Divi Space that adds over 30 new icons to Divi. 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 change the font of your header text by selecting your desired font from the dropdown menu. as well as left, center, and right position if you choose to keep your icon on top. It can either appear above the text, or to the left of the text. 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). 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.. The size of the Icon and text combined can be change at your WordPress Dashboard > Appearance > Customize > Header & Navigation > Text Size. You can change the font of your body text by selecting your desired font from the dropdown menu. Enable the link icon to control all four corners at once, or disable to define custom values for each. Switch Divi’s Mobile Logo. Here you can choose whether or not your link opens in a new window. Thanks! 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. These icons are pixel-perfect and can be easily customized to suit every website. Next, click the Use Visual Builder button to launch the builder in Visual Mode. Before you can add a blurb module to your page, you will first need to jump into the Divi Builder. Borders support eight different styles, including: solid, dotted, dashed, double, groove, ridge, inset and outset. Hopefully that will clear it up, but let me know if not. This option allows you to turn on a border for your circle. The code will show up as a weird square symbol after you save but it’s ok. Keep it as is. ... You can change color and size of an icon, add a circle or a border. If you did not choose to use an Icon, then this setting will appear. The Divi Icon King plugin comes with a few built in filters to allow you to quickly switch between icon sets. Step 1 – Copy Your Icon Code. I decided to use the Google Chrome inspect tool and discovered the issue. Select your desired icon size using the slider "Icon Font Size" slider. This options allows you to place your icon within a colored circle. Divi Booster has an option for increasing the left-positioned blurb icon to 96px, to match the default top-positioned icon size. Define a custom background color for your module, or leave blank to use the default color. Leaving this field blank will simply leave your title as a static element. In this tutorial we will be using the files from the download above, which contains an icon font we designed and generated with Icomoon. Select your desired style from the dropdown menu to apply it to your border. How to change footer icon’s alignment. With additional code support for over 200 platforms in the icon set! This option affects the color of your border. If you want to change some settings with the mobile menu hamburger icon, you can do so with CSS. By default, borders have a width of 1 pixel. 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? Click the Design tab and scroll to the section related to showing the button icon. ... however the builder is not fully loading and we are only getting a partial load and a spinning icon. Tried it with divi booster on my own Website. Blurbs are a great way to showcase small bits of important information, and are often used in rows to display skills or features. in the "Divi > Theme Options > General > Custom CSS" box): Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder’s modules. Download the Icon Font you wish to use. Purchase Now. It really makes me question the developers. Thanks Gabriel. Within the advanced tab, you will find options that more experienced web designers might find useful, such as custom CSS and HTML attributes. Here you can change the actual size of the Icon by increasing or decreasing the Icon font size. 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. This dropdown menu allows you to specify the orientation of your text to be Left Justified, Centered, or Right Justified. The World's #1 WordPress Theme & Visual Page Builder. Blurb Text will also span the full width of your column up to 550px. If needed, you can change the Icon Font Size to your desired size by changing Use Custom Icon Size to YES. Is it possible to have the icon/image on the right rather than the left? To remove custom margin, delete the added value from the input field. Embedding an Icon Font. CSS input into these settings are already wrapped within style tags, so you need only enter CSS rules separated by semicolons. The Icon Inserter Button. Back To Divi Builder Plugin Documentation. 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. The icon name is determined by the .css file you upload for the icon set. This will change the label of the module in the builder for easy identification. We’ll use this class to style the icon. However, your image will never scale larger than its original upload size. In WordPress, favicons are called site icons. 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. Background images will appear above background colors, which means your background color will not be visible when a background image is applied. 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. 1) Set the CSS class in the blurb module's advanced / custom CSS tab to: my_blurb. You can use the following file formats .ico, .png, .jpg. in one easy-to-use plugin. If defined, this image will be used as the background for this module. The obvious step here is to replace the icon (or keep the arrow if you like it). If you would like to change the color of your header text, choose your desired color from the color picker using this option. 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. 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. 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. 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. 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. 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. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface. Enable the "Use Icon Font Size" option. 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. You can add custom padding values to any of the module’s four sides. These options are separated into three main groups: Content, Design and Advanced. 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. Here you can adjust the size of your header text. Simply click on the con that you would like to use and it will appear in your blurb. But what if i want to go back to normal size. If your blurb is being placed onto a dark background the Text Color should be set to ‘Dark’. Visa versa, if your blurb is being placed onto a light background, the Text Color should be set to ‘Light’. 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.