How To Crop Divi Images | Change Image Aspect Ratio In The Builder

[@shontam]

For anyone having trouble, when you add the custom class do not add the period before the class. I was racking my brain trying to figure out why it wasn't working. Hope this helps.

[@wisdomcamille7542]

You make your videos very simple to understand, Thank you

[@lounote1]

Great stuff. very helpful. Thanks!

[@PeeAyeCreative]

Glad it was helpful!

[@BrandWebMedia]

best divi tutorial out there, thanks my man

[@PeeAyeCreative]

I appreciate that! You are always welcome! :)

[@alexcharlton8252]

Love the video, subbed. Also, I've hiked through PA and it's beautiful, your pictures show it!

[@PeeAyeCreative]

Hey Alax, I'm glad you like our videos, you should be happy with the other sthat are coming as well. Yes, there is a lot of the state that is very beautiful, many of those places only seen by hikers.

[@foodieadventurerrider]

Awesome, very detailed, and informative. Thank you.

[@PeeAyeCreative]

Glad it was helpful!

[@ljswaan]

Thanks!

[@PeeAyeCreative]

You're welcome!

[@henryrobusto5415]

El unico en todo you tube. es complicado encontrar css simple hay cosas que uno ya no se acuerda hostias. TOP ✌

[@PeeAyeCreative]

So glad you found it!

[@noavankatwijk9306]

Thank you so much for this info, it's solved my problem.

[@PeeAyeCreative]

Glad it helped!

[@journeywithoutdistance]

This is so good. Thank you for sharing!

[@PeeAyeCreative]

Sure thing Peter, glad it is helpful!

[@samuri2011]

I tried it for video it works on that too!

[@PeeAyeCreative]

Oh that's great!

[@samuri2011]

@@PeeAyeCreative yes! You really saved me! I had a huge project and I really needed this to work and it did! Thank you so much!

[@shontam]

This is great, thank you so much. Any way to crop off the bottom of the image instead of the top? Or better yet, adjust the postion of the image in the crop in any direction? Thanks for any advice.

[@Taradactyl78]

This didn't work for me. I put .pa-image-3-4 in the CSS Class field and then the rest of the code in the "Custom CSS" field. But there are THREE custom CSS fields in the version of DIVI I'm working with---BEFORE, MAIN, and AFTER. I tried all of them and for each one I got two error codes in red with a red box around them. One said "Expected RBRACE" and the other one said "Unexpected Token". I have no idea what any of this means. You'd think with every other setting DIVI has created to give users a functional experience, they could include photo size/orientation/aspect ratio.

[@PeeAyeCreative]

That's the wrong place, you are adding to the module, but you need to add to Divi Theme Options Custom CSS box.

[@marciaturley2850]

Thanks again for another great tutorial. Quick question. I'm using CANVA. As a starting point what size should my CANVA image be? For example, if I wanted to create an Landscape 16-9 image. Should I resize my image, in CANVA first to 1280 X 853 px to match the Landscape Custom CSS size ?

[@PeeAyeCreative]

If you know the exact size it will in WordPress it's always best to make it that size.

[@mehadijim6349]

Thank you so much for the video.. I have same ratio problem with divi blurb module image.Could you please tell me how to do that for blurb module image? Or give me any tutorial link? Note:I have tried the css code with blurb image and It's not working .pa-blurb-image .et_pb_main_blurb_image { padding-top: 133.33%; display: block; } .pa-blurb-image .et_pb_main_blurb_image img { position: absolute; height: 100%; width: 100%; top: 0; left: 0; right: 0; bottom: 0; object-fit: cover; }

[@PeeAyeCreative]

You can use aspect-ratio now, this was not available when I first made the tutorial: .et_pb_main_blurb_image img { aspect-ratio: 3/4; object-fit: cover; }

[@benjamenesono8066]

@@PeeAyeCreative Great video. I tried using the steps on a blurb and it is not working for me. Anything I am missing? Any guidance? please.

[@abigroman]

How would you use "Object-Fit" so the image isn't cropped but shrunk? Figured it out in the other video!!! Thank you!

[@PeeAyeCreative]

Happy to help!

[@Victor-gs9yk]

I have an issue that I can't solve. I want a fullwidth gallery with a fixed height, so the images won't make the layout jump around as they change. The thing is, I want to crop the uploaded images to the same ratio, so my client doesn't have to worry about editing sizes before uploading. Is there a way to match this ratio mode with the fixed height tutorial you gave? I'm trying to figure out a way to keep the images fullwidth and the gallery height fixed, no matter if some cropping might occur on images that are originally squared, for example. Hope I made it clear. Thanks a lot for the great material!

[@PeeAyeCreative]

Hi Victor, it sounds like you just need to check out our other video on the Divi gallery: kzbin.info/www/bejne/e2a6eK2ao7dlfdk

[@MsElegance23]

Can you add a button inside a blurb module. Also, having a problem with uploading images which are stretched or don't fill up the blurb box or smaller.

[@PeeAyeCreative]

I have other tutorials for that yes.

[@kristinekingery102]

This worked for me, but now the images are not appearing correctly. The Divi builder shows them as 1:1 when I am editing them, but when I save the page, the resulting layout is not correct. It only is happening to pages I have updated lately. I have checked the CSS code and placed it as you have in the tutorial. I have deleted and re-loaded the images, but nothing I do get the images correct. I even went in and added the code to the Divi Theme Options Custom CSS Box. Not sure why this is happening or what to do to fix it short of cropping all the pictures to 1:1. Any suggestions would be appreciated.

[@PeeAyeCreative]

I'm not sure either off hand without seeing it and knowing what was done.

[@mauricelee7299]

Thank you so much for this video. I am working with a client now that has images he wants to use on his site but they all don't have the same ratio. From what are see this should solve the problem, correct? Also, you started to mentioned something about not needing photoshop but then you stopped. Were you about to say that using this method would eliminate the need to resize images in photoshop and similar tools?

[@PeeAyeCreative]

Well, I don't think I would ever recommend no cropping them first. But if they are not cropped the same, then yes this will do it.

[@xxjones]

brilliant!

[@PeeAyeCreative]

Thank you!

[@digitaleuphoria4076]

Can you please help make that of a gallery module

[@PeeAyeCreative]

I already have one for that.

[@recomposemedia4603]

Great tutorial! Is there a way to zoom into the images to change the view area that you are cropping into?

[@PeeAyeCreative]

You can zoom in yes, with scale, but I'm not sure if that's what you mean.

[@recomposemedia4603]

@@PeeAyeCreative I want the box to stay the same size but for the image to be cropped in tighter if that makes sense.

[@williescott4118]

Hi Nelson I pasted the code into the Main Element section of the image Gallery under the Advance tab and I received the error "Expected RBRACE" right underneath line 3 and 'Unexpected token '}'." after line 17 and the images didn't change. I did paste pa-image-gallery-9-16 in the CSS Class under the CSS ID and Class section. Not sure what I am doing wrong or why the images are not changing size. Would love to get some feedback from you. Thank you.

[@PeeAyeCreative]

Hi Willie, You can't add code like that to the module, you need to place it in the Divi Theme Options Custom CSS box.

[@paulph23]

@@PeeAyeCreative I can't get it to work either. Do you enter the snipit after the other css code that is there?

[@andretimms6419]

It is not working for me CSS Class: pa-image-1-1 I copied and pasted the code but it comes back with Expected BRACE and Unexpected token '}'

[@PeeAyeCreative]

Hi Andre, it sounds like you might be adding the code to the module. Make sure to add the snippet to Divi Theme Options Custom CSS box.

[@joebenitesmendoza2738]

Thanks, I have a question... How I make the circle shape?

[@PeeAyeCreative]

Well you would need to change the border radius, but a true circle would need to have the same width and height.

[@galeriachocolate8123]

Hey! I got a Q, does it works for woo product images? Cause I use, but it didn't works. Besides that, awesome video!

[@PeeAyeCreative]

This tutorial is for the Image module specifically, so it would need different selectors to target other images. But WooCommerce has settings for this in the Customizer.

[@sannepeters5671]

Absolute legend! I do have a question..the 'display: block; ' should prevent the text from overlapping the image, correct? In a two-column row I placed an image left from some text and gave the img a 4:3 ratio. But on mobile the text is overlapping the image. It seems it doesn't stick to the 4:3 aspect ratio on mobile

[@PeeAyeCreative]

Hi Sanne, the text should never overlap the image...not by default or with this tutorial. So there must be something else going on.

[@sannepeters5671]

@@PeeAyeCreative you were absolutely right. Thanks for pointing me in the right direction. I believe it had something to do with not having my row in a section and perhaps some cache clearing 🙃Thanks again 🙏🏼

[@jolynesevilla184]

Hello Nelson! Your tutorial videos are great! However, I am trying to paste the code to CUSTOM CSS it will not paste. I am using a Mac, is it different on a Mac? Also, when I go into CUSTOM CSS it has 3 boxes, " BEFORE , MAIN ELEMENT, AFTER" Can you advise. Please....

[@PeeAyeCreative]

Hi Jolyne, I'm not sure what you are trying but I think in Mac it is key called "Command" (the equivalent to Windows "Control") so command - v should paste it :) Be sure to follow the tutorial closely as you should not be putting any of this code in the modules where you described. You would put it in the Theme Options Custom CSS of style.css file.

[@jolynesevilla184]

@@PeeAyeCreative Thank you for replying! :) I got it to work, I was missing a step! My next step, to adjust spaces between images evenly. Thanks again!

[@olliestanley8436]

When I try to paste the codes in the page settings it doesn't work. I can paste codes in the theme options section of Divi, but not in the visual builder. Any idea what I'm doing wrong.

[@PeeAyeCreative]

That's pretty weird Ollie, not sure! Although you probably want it in Theme Options anyhow.

[@melissaskibo1338]

@@PeeAyeCreative I'm having the same issue. I'm working on a macbook and when I copy your codes I can't paste them into the custom css area. So weird!

[@digitaleuphoria4076]

This doesn't work for divi gallery module

[@PeeAyeCreative]

I have a separate video for the gallery 🙂

[@cliffordwishart7780]

Will the CSS still work if we get a Dive Theme update or will we loose the custom CSS?

[@PeeAyeCreative]

It will still work fine if it is in Divi Theme Options, updates don't affect that.

[@md.mizanurrahman2522]

thanks

[@PeeAyeCreative]

You're welcome!

[@GekkoJuan]

Since the last update, this method no longer works. Images are not displayed properly

[@PeeAyeCreative]

This wouldn't have anything to do with a Divi update, nothing in the changelog to indicate that is it?

[@kovinster]

Why'd they make it so bloody difficult to do a simple thing like image crop?

[@PeeAyeCreative]

No one is trying to make it difficult. Do other builders have this?

[@Samirabrown123]

@@PeeAyeCreative I don't remember having this much difficulty in brizy

[@sarahloudon4410]

Doesn't work. Literally followed each step to a T..

[@PeeAyeCreative]

You're welcome to share a link to your site so we can check what is not working there.

[@julianchabrillon2525]

Estaría bien si añadieran la opción de elegir el tamaño que uno desee, tener que hacer todo esto para cambiar el tamaño de una imagen es ridículo

[@PeeAyeCreative]

Please don't come to my channel to complain.