This is why some images may appear blurry in the carousel. Reformat Your Old Featured Images. Image types. The images uploaded were of very high quality and so I read a few blog posts and found out about "Regenerate Thumbnails" plugin. Changing these settings may require you to adjust the dimensions of your images slightly. Answer (1 of 2): You can't really "fix" a blurry image. Catalog Images: Medium-sized image used in product loops, such as the Shop page, Product Category pages, Related products, Up-sells, and Cross-sells. •. nancyshank. Now your image will not only be blurry . I had some really blurry gallery thumbnails in Woocommerce, using the Hello theme with Elementor. If you see blurred image in Divi Blog Extras, please check the image size. Check the file permission in the Permissions and Owner/Group column. website maker Ok, so we've been pulling our gorgeous silky (cuz it's kinda greasy) hair out over here trying to get the Divi blog module to stop cropping one of our client's beautiful food images.Despite there being plenty of articles out there on WordPress media sizes, image cropping, how to disable the Divi theme from cropping images for the blog module, etc, none of these methods worked. Enter the desired width & height in the 'Single Product Image' field. 01. To resize it proportionally (i.e. Using Canva.com For Your Blog Featured Images - May 16, 2021; . 400x284px. In the Media Settings window, you can adjust the desirable pixels for each size. to avoid stretching or compressing the image) use the following code: set_post_thumbnail_size ( 50, 50 ); // 50 pixels wide by 50 pixels tall, resize mode. The most impressive of them is Divi Next Blurb. WordPress reduces image quality to 60% on upload when processing. This means that they have to be scaled up by the browser. Therefore, you need to change the default WordPress image sizes. All Collections. Getting Started With Divi. Blurb modules can be placed in any column that you create. Go to Appearance > Theme Editor in the WordPress sidebar to open the editor which lets you view the files in a theme. Click on Save Changes. Divi has default layout settings. Blurbs are a great way to showcase small bits of important information, and are often used in rows to display skills or features. Select an existing image in your Media Library or Upload a new one. Product Thumbnail Images: Smallest image commonly used in the Cart, Widgets and (optional) Gallery images underneath . You can customize the WooCommerce product image size for a single product page using the following steps: Click WooCommerce -> Settings. It can be changed from module settings and you could select Medium or Full size as well. Doing this will help us make sure nothing exceeds the column container. All you have to do is add the following code snippet to your Divi child theme. The Divi Theme gallery module has a grid view which shows thumbnails of the images in the gallery. In order to do that, go to WordPress Settings >> Divi Blog Extras >> Custom Post Types >> Enable Custom Post Types in Module. Add a percent sign. Finding the perfect featured image for every post or article is a tough task. I have uploaded them in full high quality but nothing I do improves the quality of the featured images. This doesn't mean to take the original 90 x 60 image and simply resize it so it's 400 x 284. WordPress uses the terms "thumbnail" and "featured image" interchangeably. Generally, you will be able to make changes to your image dimensions from the WooCommerce Customizer. Note: Keep in mind these dimensions are simply guidelines and can vary depending on the content so it . Fixed: Additional social icons not visible in Divi 4.10 ("Dynamic Icons" option needs to stay disabled in the new Performance Divi settings) Fixed: Sub-menu width incorrect in Divi 4.10. I can create so many different designs, the possibilities are endless. Posted by 6 years ago. How to set the WordPress featured image size for Facebook. You need to find the original image that is hopefully not blurry. To add a featured image in a WordPress post, simply edit or create a new blog post. But sometimes you want to have these uncropped and display at the same aspect ratio as the actual images. Fixed: Preloader stuck on page load in Divi 4.10. Using Canva.com For Your Blog Featured Images - May 16, 2021; Setting Up Google reCAPTCHA On Your Caldera Form Using The Caldera Forms Anti Spam Plugin - April 25, 2021; Elegant Themes Founder Nick Roach: We Want To Flip the Script and Make Divi the Fastest Page Builder Around - April 9, 2021 (@nancyshank) 1 week, 6 days ago. Click on the gear for the section, row, column, or modules to open the settings. Divi support suggested I deactive my plugins and then reactivate . This hack enables the featured image column in the Divi Library. Step 3 - Regenerate WordPress featured image sizes. This means you should not be trying to use an image that is "medium" size or "large size" in WordPress anymore. The Product Image is the main image for your product and is reused in different sizes across your store. In Recipe #27 I am going to show you how to replicate the Library layout I made for my Ventura Child Theme using the filterable portfolio module.. One thing I hear lots of people complaining about with Divi is that as far as the default builder goes, it's limited to 4 columns, in this recipe I will show you how to have as many columns as you like AND how to change the default image size so . they overflow the container and look blurry. Moving on, we're going to add the blog's post categories, post date & time, and post comment count. When you upload a featured image for your post, Divi will automatically crop it. I cannot for the life of me upload a "featured image" that isn't blurred. Out of the box, Divi will create additional image sizes from the default Feature Image set for each article. Product image. Even seemingly high quality, color-corrected images can sometimes benefit from a modest . The DIVI Post Slider Module is a wonderful way to showcase our posts and articles, but unfortunately it can be very harmful to our page load time. Adding Post Thumbnail or Featured Image in WordPress. Full: Actual image size. Jetpack activation blurs photos. Right-click the file and adjust this number if you see it's not correct. Blurry Featured Images using Divi theme | Divi.Help Blurry Featured Images using Divi theme Bryan Alexander New Member I am having a real problem. You can use the Blog module to display blog posts on any page. Then create/edit a page in Divi builder, add Divi Blog Extras module to it. 1/2 column: 510px by 384px. Because it uses the original size of the featured images, the megabytes can quickly accumulate, especially if a client with little tech knowledge uploads his blog's featured images directly as he gets them from his camera or high-resolution download. This is where a default featured image can come in handy. Add Featured Image Column to Divi Library. We recommend that your images, including featured images, be at least as wide as the column they will be placed in. Once on the videos page, click on the video whose thumbnail appears blurry. Medium (300px width) Large (1024px width) and Full (actual image size). Stop Divi Featured Images from Stretching By default the Divi Theme will stretch featured images to the width of the post area. This works on regular and parallaxed backgrounds and has different options for blurry. COSTO: $70 por persona Divi Project Featured Image Size - 1080 x 810 If you post a lot to Facebook and want something that will work well for both Divi and Facebook: Divi Blog Post Featured Image Size - 1200 x 750 Divi Project Featured Image Size - 1200 x 900 If you upload these sizes for each post type, you won't be disappointed. YOu just have to find one that is compatible with Divi or you might have to adjust the Divi settings. Plugin Featured Image In RSS Feed simply adds the featured image to your RSS feed. Fixed: Custom Post Meta links color not working correctly. For some themes here you will see an option to define the width of the main product image as well as the thumbnail. Portfolio Posts adds three new modules to the Divi builder. Click to select a new photo, and the media library should open up. Calculate the sizes you want your content area images to scale at individually and manually. Install the Plugin Featured Image In RSS . This way all of the featured images will have the same size for your blog page. Images will be 400x284px. While I was using Divi's Visual Builder, the image looked crisp. If you use classic, large or full will be ideal. Here, you'll see settings for CSS ID & Classes, Custom CSS, Visibility, Transitions, Position, and Scroll Effects. You'll see a set of icons. Hover your cursor to Setting -> Media. Note down those image sizes. Divi has two major breakpoints. Adding, removing and editing a product image is done in . CEO And Founder, www.divilogy.fr. Go to /wp-content/ directory and open the uploads directory. 1/3 column: 320px by 241px. To change the display order of meta data in Divi blog extra please add the following CSS in Divi Theme Option. you can also choose to resize the image by cropping it with this code: In this video, I'm going to share some handy CSS snippets to change the Divi blog module featured image aspect ratio. In the content editor, you'll find the featured image tab in the right column. - Divi Builder shortcodes will now render correctly when placed inside of Post Slider modules. The featured image is a standard feature of WordPress. Frequently asked questions. Close. Now, do that for the two remaining types of images (if you use them on your store) and head back to your WooCommerce display settings. One at 980px and one at 480px. Available for free on plugin directory, Featured Image In RSS is actively used by more than 4000+ at the time of writing this post. Hi Divi Reddit! The Solution. So naturally, the settings revolve around these breakpoints. 0. From the Dashboard menu, click on Settings > Media. Display custom posts by ID. . Step 1 - Find out what WordPress featured image size is currently used by your theme. Your theme templates are designed to use a specific copy of your uploaded image that is scaled or cropped (or both) for the best fit and most efficient load time, so those copies will look different from the original if compression is a problem. 1. There are two ways we can prevent that: It's actually a simple fix. Upload an image that is in a portrait. Square 1:1 - 1 / 1 = 1.00 = 100%. On your WordPress admin panel, go to Appearance > Customise > WooCommerce > Product Images. .el-dbe-blog-extra.vertical_grid.el-masonry .et_pb_post { display: flex; flex-wrap: wrap; } .el-dbe-blog-extra.vertical_grid.el-masonry .et_pb_post .post-media { order: 0; } .el-dbe-blog-extra.vertical_grid.el-masonry .et_pb_post .post-content { order: 2; padding-top: 10px; } .el-dbe . I think Divi is cropping it and so it's showing up more pixelated and not as great of quality as the image I'm uploading. We'll recreate a beautiful example from scratch and also share the design example JSON file for free! The net result being blurry photos. Sometimes the thumbnails will appear distorted, as small images are stretched to fill the thumbnail area. To set a featured image for your course: Navigate to LEARNDASH LMS > COURSES; Click on the course you'd like to add an image to; In the sidebar, look for an area titled Featured Image; Click . Once the video opens in a new window, press pause. Go to the 'Products' tab -> Display. The blurb module is a simple and elegant combination of text and imagery. So I thought I would give it a go. 1. the_post_thumbnail ( array( , ) ); you can create custom featured image sizes in your theme's functions file that can then be called in your theme's template files. Guess it's the same problem like Kirsten's. . You can also use the module to display other content types on your website, including pages and even media. If you use the aspect ratio 4 x 3 these are the dimensions for your images: 1 column: 1080px by 810px. The size of your featured image depends on the Divi Module. And if we keep 1080 x 675 which is default Divi setting for images with same 1.6 ratios, the images won't get cropped. It has a content width of 1080 pixels and a gutter width of 3. While last year's upgrade saw some impressive additions to the theme, version 5.0 goes even further and is billed as the biggest update in Divi's history. You need to add the following code to your child themes function.php file. Single Product Image: Largest image on the individual product details page and refers to the main/featured image. To calculate what percentage to use in the CSS for the Divi Blog Module featured image aspect ratios, just use this math formula. Step 3: In Divi Theme Options Custom CSS add the following CSS Code: @media only screen and (min-width: 1080px) . Log in to your WordPress site 2. The most obvious is to upload larger logo images. If they are small (100x100) and you need 500x500, the image is going to be blurry when you size it larger. So it's ideal for keeping in view the image aspect ratio to get the best-fit image size. This tutorial will show you how to remove the crop from the Divi gallery module. With this image I gave the image the appearance of being blurred using the blur filter in the CSS. So here ya go - if you're also trying to figure out why your images are blurry in WordPress or specifically Divi, try the below and see if that's your issue as well: Find your blurry image (in this cause, ours was In Divi under the "Background" for a section). Here is how to check the quality: Click on your videos. 2/3 column: 700px by 526px. Item #4 Fix your edges. Logo carousel images are blurry - the solution. Click functions.php to load it into the editor. From the homepage, the custom category page, custom author archive page, and so on. . Move on to the advanced tab and hide the column 2 overflow using one single line of CSS code. If you have multiple columns based layout like block extended, medium would be good choice. I use Divi and created a Fullwidth Image sized 1920 by 225 pixels. Lottie Icon for Divi Lottie Icon allows you to upload an animated icon to your Divi website. The Divi Theme gallery module has a grid view which shows thumbnails of the images in the gallery. Fixed: Popups compatibility issue with Divi 4.10. To get the accurate aspect ratio, we'll divide the width by height, and the aspect ratio will be 1.6. With Divi, there's an alternative. If you select medium, the size will be 300px width and it may not appear sharp for layouts that use large images. Next to the Thumbnail size, there are number fields where you can input the desired dimensions for your featured images. Landscape 16:9 - 9 / 16 = 0.5625 = 56.25%. Make sure it is wide enough to span the full width of the column on all browser sizes. The ImageMagick Sharpen Resized Images plugin brings the open source ImageMagick image editing application to your WordPress installation - and it can be a great tool for improving edge sharpness in images you've already uploaded. This isn't actually a problem, it's a misconception. Clicking on the featured image opens the image in a lightbox popup window vs opening the post (optional). 1/4 column: 225px by 170px. This means that depending on the original Featured Image aspect ration you might lose details on the image. Go to Elegant Themes. Under the first Blurb you created, add another Blurb module, and in the title box, click the Dynamic Content icon. Enable the post type from the Divi Blog Extras setting. Thanks to the many built-in options Divi has, you can turn Image Modules into blurred backgrounds. It adds so many new features to Divi that it is impossible to list them all! Move the decimal over two places to the right. Useless. I installed then regenerated the thumbnails, and it was still the same! - Fixed an issue in Chrome that caused icons in the builder to become blurry after fading in using CSS animations. 1/4 column: 225px by 170px. Ignore whether it's blurry or not right now - we'll fix that in the next step. . Here's what you need to do: Open up your store. Plugin Instructions. Live. Medium: 300 pixels image width. Add this simple CSS code snippet to your Divi child theme to change the image aspect ratio of the featured image displayed in the Divi grid portfolio. We'll blur the backgrounds up to a point where only the colors show through and thus form a gradient. The exact same image will show up fine in the actual post, but every single time when I choose it as a Featured image it becomes horrible. Where you see the image size settings, turn all the values to zeros. Hit the Save Changes button to save the setting. 3/4 column: 795px by 597px. Note: Keep in mind these dimensions are simply guidelines and can vary depending on the content so it . Then just link the text image to the media file in the . On the bottom right-hand border of the video, there are size icons. I am working on a site for a client, and we are running into an issue with the featured image on individual blog posts (the big image at the top right underneath the title on individual articles). Next, copy and paste this code into the section: .custom-logo, .site-header .logo { max-width: 100% !important; width: 300px !important; height: auto !important; } You'll see your logo update instantly to be 300px wide. Divi is a premium theme and will cost you $89 for one year of updates, or $249 for lifetime access - which can be used on unlimited sites. Select Set Product Image. 3/4 column: 795px by 597px. Go to theme customizer OR Divi Theme Options (scroll to the bottom -> Custom CSS) 3. One such issue being the low resolution thumbnail images in the Divi shop module. 1. add_image_size ( 'category-thumb', 300, 9999 ); // 300 pixels wide (and unlimited height) Here is an example of how to create custom Featured Image sizes in your theme's . This 6" x 8" spiral notebook features the artwork "Provo City Center Temple at Night - Utah" by Gary Whitton on the cover and includes 120 lined pages for your notes and greatest thoughts. In the CSS, change the "300px . To prove that the Divi theme is a long-term priority for the Elegant Themes crew, their flagship product has been recently updated with the release of Divi version 5.0 in 2022. This means Divi will use a smaller image for the blog cards than it does for the featured image in the blog post, in galleries, project posts, etc. Large: 1080 pixel image width. It's like a blurb module where you can add icons . Blurry, Low Resolution Images The product photos in the grid listing of the Divi shop module are rendered at just 150px by 150px byt the WordPress Thumbnail function. Look at the X and Y dimensions. Just a single CSS declaration is all that is needed. WORDPRESS.COM BLURRY IMAGES. The Divi Gallery Module also crops the images by default, which is usually nice. Also, check the size of the image after you upload it. 2/3 column: 700px by 526px. This plugin has been recently updated to support custom image sizes. Divide the second number by the first number. Set a background image for any element and make it blurry. 2. Scroll down to reach the 'Product Images' section. Changing the default Blog module FullWidth Layout to have the Featured Image on the left, and the post content on the right. Resize Images in WooCommerce.