The ultimate email opt-in plugin for WordPress. If you chose “yes” for the “Use Icon” setting, then this option will appear. 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. This option lets you control which devices your module appears on. Letter spacing affects the space between each letter. In this post, we will show you how to go a step further and get creative with the blurb icon background. Background images will appear above background colors, which means your background color will not be visible when a background image is applied. It can either appear above the text, or to the left of the text. I need to use very small size of image to make it fit inside the row container. The URL option below the Title Field will allow you to make your Title a hyperlink. 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. Like I said, the icon and image each are differnt, so we need to do something similar but with a few key differences. If your blurb is being placed onto a dark background the Text Color should be set to ‘Dark’. You can change the font of your header text by selecting your desired font from the dropdown menu. Alex Lp on December 3, … Applying a max width value here will limit the width of the blurb image. 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. In the case of the Divi Blurb, that’s the et_pb_content selector which has a position property of relative. I was recently working on a Divi WordPress theme project that required a few blurbs with images. 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. Divi Person module image: 3:4 – 600 x 800 (recommended for portraits), 16:9 – 600 x 338, 4:3 – 600 x 400. They don’t serve a responsive image. This field is where you can enter the body content of your blurb. Unlimited Users. Divi Shop module product images (WooCommerce): Hope this helps! We will be using a combination of blurb modules, text modules and call to action modules. By default, Divi uses the Open Sans font for all text on your page. How to add, configure and customize the Divi blurb module. When using Blurbs, you can choose to either use an Icon or and Image with your text. 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. Vote Up 0 Vote Down Reply. 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! Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder’s modules. 1/4 column: 225px by 170px. Save my name, email, and website in this browser for the next time I comment. Use Icon Font Size: YES To remove a background image, simply delete the URL from the settings field. Expanding Possibilities. Force Divi Blurb Module Images to a Uniform Size Force Divi Footer to the Bottom of the Screen Displaying Page Loading Animation on Divi Websites. By default, borders have a width of 1 pixel. Leaving this field blank will simply leave your title as a static element. You can change the font of your body text by selecting your desired font from the dropdown menu. Try Out The Drag & Drop Page Builder for FREE! Icon Font Size: 68px (this adjusts the size of your icon) This options allows you to place your icon within a colored circle. If enabled, you can input a custom size for the icon that is displayed above or two the left of your blurb text. The Blurb Module also allows you to turn your Blurb image/icon and title into a link to your service page. In Spacing section, change Custom Margin TOP to 0px, and Custom Padding TOP to 40px. 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. Icon: [select an icon that illustrates your service], Icon Color: #42bb99 (make sure color compliments the site design) Preview 110+ Premade Websites & 880+ Premade Layouts. Body Font Size: 18px June 27, 2016 6:14 pm. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface. If you chose “yes” for the “Show Circle Border” setting, then this option will appear. 1/2 column: 510px by 384px. The World's #1 WordPress Theme & Visual Page Builder. This option allows you to customize the color of your Icon. Blurb Text will also span the full width of your column up to 550px. For this project, I only wanted to adjust the blurbs on a single page, so I added the CSS just to that page. Harness the power of Divi with any WordPress theme. By default, Divi uses the Open Sans font for all text on your page. Divi includes a fullsize and regular image module. You can also click the Use Visual Builderbutton when browsing your website on the fron… If you would like to change the color of your body text, choose your desired color from the color picker using this option. Divi Blurb module gives a huge possibilities, and with a bit of customization and custom code we can achieve a really nice and interactive effects, that will look amazing on our websites. You icon, in it’s color, will appear inside this a circle with the color you select here. ... because the images you are using are smaller then the column widths so the module size isn’t being inherited from the size of the image as intended. 2/3 column: 700px by 526px. Obviously, not quite the effect I was hoping for. Once you have entered the Visual Builder, you can click the gray plus button to add a new module to your page. Prev: Questions to Ask When Vetting a Web Developer. 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. CSS input into these settings are already wrapped within style tags, so you need only enter CSS rules separated by semicolons. 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. 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. These options are separated into three main groups: Content, Design and Advanced. To align the Divi Blurb image to the top left, go to the Blurb Module Advanced tab and find the “Blurb Image” box.Add the code “display: block; width: 96px;” If you select “yes” for the “Use Icon” option, then you will be presented with the following options to customize your icon. But it’s a lot easier to remedy the issue by applying a little CSS love. Blurbs are a great way to showcase small bits of important information, and are often used in rows to display skills or features. For this one, I’ve added more content to the blurb on the right. Anything that controls what appears in your module will always be found within this tab. This only affects blurbs that are not in icon mode. Body Line Height: 1.5em. Text Orientation: Center The browser decides the best image size to render. Visa versa, if your blurb is being placed onto a light background, the Text Color should be set to ‘Light’. When you place Divi Blurb modules in the same row that contain different size images, it looks bad. 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. 25 Comments. You can also customize the style of your text using the bold, italic, all-caps and underline options. If you’re working with portraits on your website, the person module is the best divi image size to use. Blurb Images will always appeared centered within their columns and will span the full width of your column up to 550px. Required fields are marked *. An ID can be used to create custom CSS styling, or to create links to particular sections of your page. Match the image size to the space where it will display. Divi Blurb Extended is an enhanced version of Divi Blurb which comes with Advanced Flip Box module and a number of design elements that can be used to create nice page sections in Divi and Extra theme. Enter optional CSS classes to be used for this module. Ending Thoughts. Also, using the sizing option of the module, you can easily adjust the sizing. 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. Simply click on the con that you would like to use and it will appear in your blurb. Images sizes in Divi are recommended in terms of image width in pixels and these image widths are based on the number of columns being used in the layout. Move Divi Blurb Image To The Top Left. If you define an URL in Blurbs Module general settings tab, like this: The part of the Blurb, which actually’s going to be clickable is an icon and the title.You can see it on the demo page I’ve set up.. First, Add the right Module. 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. Divi Blurbs are not blog posts. 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. If you did not choose to use an Icon, then this setting will appear. The blurb module is a simple and elegant combination of text and imagery. Before you can add a blurb module to your page, you will first need to jump into the Divi Builder. Therefore, a safe bet would be to insert images with a … There is no limit on what size or type of the image you can use to create Divi image hotspots. That’s our quick look at how to equalize the column heights in Divi. Prior to Divi Booster 3.2.6, the option was located at: Divi > Divi Booster > Modules > Blurb > Make left-placed blurb icons bigger This tutorials work well unless the image size overflow from main content. They’re often used for links to pages, descriptions for services, call to action, food menu categories, links to team member pages, links to events, a weekly schedule, links to store categories, portfolios, and much more. In this tutorial I will show you how to customize the Blurb Module, add a nice hover effect that will open our blurb with mouse direction and show image. Fortunately, it’s relatively easy to do. You can solve the problem by photoshopping all the images to be the same identical size. You can add custom padding values to any of the module’s four sides. Select a custom color from the color picker to apply it to your border. It’s a one-size-fits-all. Only use 1920 x 1080 where that size is needed. 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. 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. If you select “yes” for this setting, then you will be presented with additional options for customizing your circle color and border. À présent, si vous observez les fichiers de votre site, via FTP (Filezilla), à l’arborescence www > wp-content > uploads > dossier année > dossier mois… Divi Booster has an option for increasing the left-positioned blurb icon to 96px, to match the default top-positioned icon size. The issue was that the default Divi blurb image was way too small. This options presents you with a list of available icons that you can use with your blurb text. 3:4 – 600 x 800 (recommended for … Place a valid image url here, or choose/upload an image via the WordPress Media Library. Question: I’m looking for a possibility to change the size of the icon font set by elegant themes on blurb module. I’m sure other people have had this issue as well. If defined, this image will be used as the background for this module. Your email address will not be published. Here you can adjust the color of the circle border. Your email address will not be published. Unlimited Websites. If you did not choose to use an Icon, then this setting will appear. 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. Divi Blurb module image: 1 column: 550px, ½ column: 510px, ⅓ column: 320px, ¼ column: 225px. All shapes are created using CSS alone so no need to upload background images, simply use the built in icons … Place a valid web URL in this field to turn your Blurb Title into a link. It shows you how to; Add a Blurb module and 2 call-to-action modules either side for the pop-out content. Blurb module in Divi allows creating beautiful sections using icon, image and text. Every Divi module has a long list of design settings that you can use to change just about anything. Keep the copy down to one or two sentences and add a descriptive image. Now duplicate the Blurb Module you just created three times and drag each of the duplicated blurbs over to the other three columns. Custom CSS can also be applied to the module and any of the module’s internal elements. Add some animation and your blurb is good to go and will add value to your website 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. Once the module has been added, you will be greeted with the module’s list of options. Eight New Shapes for Your Blurb Icons Free Divi Layout. Most of the time, a 1280 image will work just fine in place of a 1920 image. Content: [enter a short description of the service] If you chose “yes” for the “Circle Icon” setting, then this option will appear. Next, click the Use Visual Builder button to launch the builder in Visual Mode. 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. A CSS class can be used to create custom CSS styling. If you want to adjust all of the blurb images on your website, you can add the code to “Additional CSS” in the theme customizer. I’m sure other people have had this issue as well. You can add custom margin values to any of the module’s four sides. Blurb modules can be placed in any column that you create. The blurb module is a simple and elegant combination of text and imagery. Works with both images and icons, although you will need separate CSS for each of them. By default, all text colors in Divi will appear as white or dark gray. The same image loads on large desktop, tablet and mobiles. I decided to use the Google Chrome inspect tool and discovered the issue. 1. how to choose the right image size. Define a custom background color for your module, or leave blank to use the default color. Update the Blurb Settings with the following: Title: [enter title of service] However, your image will never scale larger than its original upload size. If you do not choose to use an Icon, then you will be prompted to upload an image instead. New modules can only be added inside of Rows. 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. This border can be customized using the following conditional settings. Set a narrow row width so the 2 CTA stack behind the Blurb module To remove custom margin, delete the added value from the input field. Divi sets the blurb module default image width to 64px and there is no way to adjust the width in the settings. ; Add Image and Blurb module to one column (we will be adding classes and edit settings of each module. Par exemple, vous téléchargez une image d’une dimension de 1280px * 720pxdans votre bibliothèque => c’est le format original de votre image. Divi comes with dozens of great fonts powered by Google Fonts. Here’s how. #2. Then add a Blurb module to the first column of your row. If the image will display as a full-screen header it will need to be much larger than if it were an image for a blurb in a 1/6 column. Select your desired style from the dropdown menu to apply it to your border. It perfectly integrates into the Divi Builder and has endless customizing options. Borders support eight different styles, including: solid, dotted, dashed, double, groove, ridge, inset and outset. The columns automatically expand to make room and all of the columns remain equal in height. To remove custom margin, delete the added value from the input field. Header Font Size: 24px Divi comes with dozens of great fonts powered by Google Fonts. This is the tab you will use to change how your module looks. If you would like to change the color of your header text, choose your desired color from the color picker using this option. Here you can apply custom CSS to any of the module’s many elements. How does the Blurb Module work? For this image size, here are the module image sizes for all three aspect ratios. Within the content tab you will find all of the module’s content elements, such as text, images and icons. This cool hover effect for your Divi Blurb modules is created using the built-in Divi options and the blog post shows you step-by-step how to create the layout. It is the 3:4 aspect ratio, and it is best for portraits. The non-responsive image have a single image size. The blurb image follows the same rule of matching image width with column width, with the exception of the 1 column, which has a max width of 550px instead of the normal 1080px. Within the Custom CSS section, you will find a text field where you can add custom CSS directly to each element. With a little CSS, I was able to increase the blurb image size. The Problem Maximum width: 550px. For this example, I’m going to use the Blurb Module to add four featured services to a homepage. Note: Keep in mind these dimensions are simply guidelines and can vary depending on the content so it’s best to use them as a reference and work from there. Divi Gallery module images (Slider and Grid Layout): Recommended dimensions: 1500 x 844. 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. The content setting of the Hotspot module allows users to add images for creating an image hotspot. Blurb modules are some of the most versatile elements you can find in Divi. 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. If you are starting a new page, don’t forget to add a row to your page first. Back To Divi Builder Plugin Documentation. 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, the icons are set to your theme accent color. Here is a quick tutorial to right align the Divi blurb image/icon and reverse the module. By default these values are measured in pixels, but you can input custom units of measurement into the input fields. Here you can choose where you would like your image/icon to be placed. Add Standard Section and select 3 columns layout. Here you can adjust the size of your body text. Enabling this option will place a border around your module. 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. In a similar fashion to my previous Blurb article (though not too similar) we’ll use the Blurb Module’s image field instead of Icons, and force our Blurb Text to overlay our Images. I looked through the module settings, but couldn’t find a way to adjust the image size. As long as you make the copy for your Divi Theme blurb short and concise and add a descriptive icon or image divi blurbs are a great idea. This will change the label of the module in the builder for easy identification. The Divi Blurb part of this tutorial comes into play because we are filling our layout with Blurb Modules. 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. Material Blurb for Divi is the perfect module to show off stuff on your Divi site. Now, duplicate everything: Click the duplicated row settings and go to Design tab. The button automatically moves down and the columns remain the same size. Also, add Custom Padding Bottom to 40px. Then scroll down a bit further and select your blurb image from the media library, ... i used some divi theme option like body font size, Background color think is body line height not saved in editor . Divi sets the blurb module default image width to 64px and there is no way to adjust the width in the settings. Blurbs are one of the most popular and versatile modules in Divi. With a little CSS, I was able to increase the blurb image size. To add the four Blurbs to your page, use the visual builder to add a standard section with a four column row. New modules can only be added inside of Rows. Blurb Module Image. Within the advanced tab, you will find options that more experienced web designers might find useful, such as custom CSS and HTML attributes. By default these values are measured in pixels, but you can input custom units of measurement into the input fields. Answer: If you are using Icons in Blurb module, you can switch in that module to Advanced Design Settings > click ‘Yes’ for Icon Font Size > Change the size of your icon there. After modules in 1st column are ready we will copy them to 2nd and 3rd column). If the space calls for a 200 x 200, then resize your images to that size. You can choose to disable your module on tablets, smart phones or desktop computers individually. Here you can pick a color to use for your circle. Padding is the space added inside of your module, between the edge of the module and its internal elements. 1 License. But I like my blurbs to be clickable as a whole. 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. I am not sure why it happen, when the image size set to 200px with the body blurb text take out almost 3 lines, it seem not good at all. Here you can choose whether or not your link opens in a new window. Here you can adjust the size of your header text. For this example, I’m going to use the Blurb Module to add four featured services to a homepage. Next, click the Use Visual Builder button to launch the builder in Visual Mode. URL: [add a URL to the service page] The Blurb Module also allows you to turn your Blurb image/icon and title into a link to your service page. It also allows the image to be read and recognized by search engines. You can add multiple classes, separated with a space. If you chose “yes” for the “Circle Icon” setting, then this option will appear. This free Divi layout provides 8 new shapes for your native Divi blurb module icons. Dans un premier temps, il va falloir comprendre ce que fait WordPress lorsque vous téléchargez une image dans la bibliothèque des médias. 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. 1/3 column: 320px by 241px. This color is independent from your Icon color selected earlier. This controls the direction of the lazy-loading animation. 1 of 7 Blurbs. Locate the blurb module within the list of modules and click it to add it to your page. By default, all text colors in Divi will appear as white or dark gray. This option affects the color of your border. This means D… The perfect theme for bloggers and online-publications. 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. Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. Built to get you more shares and more followers. 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. If selected, an additional option will appear to select your border color.