Image Gallery Element Tutorial | Elementor
ฝัง
- เผยแพร่เมื่อ 17 เม.ย. 2018
- Fix the border problem: .gallery a img { border: 0 !important; }
In this video I will show you how the 'Image Gallery' Element in Elementor 2.0 works. Get Elementor here: ferdykorpershoek.com/get-elem...
![ลักพาตัว เอาลูกเอิร์นกลับมา...!! [เอิร์นไดเม่]](http://i.ytimg.com/vi/f4NVKlZ5qkk/mqdefault.jpg)
Thank you once again ferdy. You really make the best elementor tutorials :))
Thanks for the tutorial. Very clear and quick instructions. My clients expect to see image file numbers which unfortunately is not an option with this gallery - unless I'm missing something.
Wonderful videos! Thank you so much for all the tutorials!!!
I love your videos, great teacher, keep up the good work! :)
Great Job Ferdy.... This is exactly what I needed...
Thank you. Very helpful. Real and useful explanations
Hello. Thanks for the video. Is there a way to have gallery images in a non squared aspect ratio while not worrying about large file sizes? Or do I have to create all images at lower file sizes manually in Photoshop. In other words, I'd like to upload a bunch of images in a wider format, yet I'm not sure what quality I should upload them at. Do I need to save them at lower quality in Photoshop, or will Elementor automatically reduce quality (file size) if I upload original quality. The whole retinal thing confuses me, because I don't want to upload too small or too low-quality for images pulled for retina devices. Any help would be appreciated. Thanks.
Thanks for the code snippet! It worked.
this helped simple and straight forward
Hi Ferdy. Thanks for all the pieces of training.
You are welcome Mark!
How do you change the slide animation when in lightbox view. Yours slide right to left, mine just click through without any movement right to left. Can you also make them fade in rather than slide?
When uploading photo's to our websites, which image size works best? I have a few uploaded to my site and when I run seo checks it reports back that the image sizes are too large and should be smaller. I try to compress the images but doesn't seem to help.
You are the best. thanks Ferdy
Thank you Sensei Grant!
You great Ferdy. My hero
Hey Ferdi, thanks for your tut. Do you have any suggestion how to make a adjusted or masonry style gallery in Elementor? Is there a css hack?
Any way to make the captions float over the picture and then when picture is clicked, it links to a certain page on your site? I want to make a visual menu grid. If it doesn't, could you point me to something that will accomplish my goal. Thanks!
I love your talent bro...
Very helpful, I Must try this on my web site. Thnaks Ferdy.
You are welcome Neil!
thanks ferdy
Useful info. Thanks.
I use the free version of elementor and I really like it. I only have one problem.
I want to use the basic gallery in my WP post and everything looks fine at first sight. But when I hover my mouse over the content (and even over the text about this element) I constantly have an annoing hover animation. Every picter becomes bigger and most images overlap each other.
I also have it when I use the WP gallery and it's driving me insane. Watched multiple tutorial video's and no one seem to have this problem.
Do you have an idea of how to fix this?
p.s. I found out that this problem appears only in the WP blog post, with elementor. On other pages it all works fine
Ferdy, thank you for the videos. They are great. My question with this video is in the Image size. Your pull down Woocomerce is nowhere to be seen in my Free Elementor. Is this Elementor Pro functionality?
Good and helpful video. good work
I like you quick and succinct style.
Thank you Peter
Hi Ferdy,
I do not have Wowcommerce for Image size, is it only with Pro?
Thank You Fredy
Hi recently i have watched your videos they are really great. i have a problem in my shopisle my product gallery is broken after updating woocomerce to 3.0. and now i dont how to fix it. i have also added that code to function.php in theme editor but that mess the pictures.
thank you for the video but in the image size I do not have all them options such as the woocommerce as you showed. I only have thumbnail, medium, medium large, large and full. Is all the ones you have only available on the pro versions?
add the woocommerce plugin to see it
Hi Fredy,
I am trying to fix the border problem you mentioned in the video but can't figure out how to do it.
Any tips?
Cheers
Do you have any advice blured thumbnails? Thanks :)
I use the Pro version and I have only 5 image sizes to choose from. Nothing of WooCommerce mentioned. Could you clarify that, plz?
@@wantedsavage7776 woocommerce is a webshop pluging
Hi Ferdy, I see you are able to sort the images in your tutorial. In the gallary I made this look not possible, do you have an explanation for this?
Thanks for your help
So do I need the woo commerce plugin ? As you used it to stretch the images to all match. I don’t have woo commerce and I don’t get the option to make them all the same size? Cheers
Hi I have several Image galleries on same page. In the Elementor Editor, when I click on a gallery it only will show me the images in that gallery (counter 1/3). This is how I want it. Unfortunately when I update and view , and I click on same gallery to stroll (i see counter 1/95) - I will show me all the images on the pages. How do I stop this from picking up all the images on the page?
Ferdy? What about each photo that has a link? How can i make a gallery of each photo that when i click it, it will lead me to my post per photo ?
You can incorporate the html for a link directly into the caption text. E.g. Lorem ipsum
Thanks Ferdy. Can you create an updated 2022 version?
what about if I want to create a photo album and not a gallery? How can we make this with elementor?
Please can you tell me how to make my grid 2x2 instead of 1 x1 in mobile view? Even the basic gallery in Twenty Seventeen does this by default! I see people asking this since 2016!
Responsive Gallery Column Width Feature in Piotnet Addons For Elementor can do it pafe.piotnet.com/#responsive-gallery-column-width
Ik zag in de gallery edit een paar woocomerce items staan, die staan er bij n iet in. Hoe krijg ik deze erbij in?
You are a great man
Thank you Y Abbasi!
Ferdy this video is great. I wanted to ask, my image gallery is slowed Down. I am a photographer, when I am trying to add more photos to my gallery its loading very veerrryyy slow. Rest everything is fine. What should I do? Is it because my photos are high quality?
HI Ferdy, I wondered whether you could advise? I am working on a site for an artist friend. I would like to display her work, which is of various random sizes, and would like to add a little descriptive text beneath each image. I am thinking of painting title and a short description perhaps. Could you recommend a method of doing this? Thanks in advance.
4 years and still no reply.
Hi. I built a portfolio with elementor and my intention is that when clicking on an image a popup or lightbox appears to generate a slide. Could you guide me? Thanks.
very nice... i have learned many things from here and i am also making wordpress tutorials in urdu, hindi language...
Good and Crispy Content brother
how to do images gallery in one post? because i just want have post with many images or videos which for every new post, i dont need to add new pages, but just update post
Hey Ferdy, top video! Ik heb wel een vraagje, ik heb nu een gallerij foto's op een pagina geplaatst, deze wordt mooi in een rechthoek op de pc weergegeven alleen geeft hij deze op de telefoon onder elkaar weer, kan jij mij vertellen hoe ik deze in bijv. een rechthoek of vierkant naast elkaar krijg op de telefoon? Groeten, Jeffrey
hey can we have gallery where we can insert video as well? in the same layout? images will b around and video will be center?
have you find the way to do it? Thanks
Thanks Ferdy Korpershoek for your help full video. I want to know
In Elementor, have any slider image function?
You are welcome Mizan. The PRO version of Elementor has a slider. th-cam.com/video/TvcCt9xhD5Y/w-d-xo.html
yeah... offcourse... image carousel element is used for making image slider in free elementor basic
Hi Ferdy, mooie presentatie hoor. Maar wat is woocommerce en kan ik ook een link in een afbeelding zetten? Dus bijvoorbeeld eerste foto's op de homepage kan zetten van bijv een landschap en als ze dan op de foto klikken men dan naar de galerij van "Landschappen" gaan. Alvast bedankt! Groetjes, Ron.
My photos don't want to load up i made the page with skt theme i downloaded and when i use elimentor to load it i cant see the photos can someone help please?
Bedankt! :)
Ferdy... good night....please help me: I have 50 images and I want to justify the size of all of them and I also need a navigation bar to be shown in blocks of 9 to 9. There will be some free plugin that does this in elementor pro. Thanks for your help
hello, i suppos wocommerce plugin must be installed in order to have woocommerce thumbnail option no? coz in 2021 free elementor i dont have this option . and my images size are all differents and it's really starting to break my balls...
Same,hv yu got any other option?
You asked for suggestions about removing the border around your images. I noticed when you added the Caption, there was a background color to the Caption area. Could it be because you chose for the size, the WooCommerce size and it is a color in that area? Just a suggestion. Great video, just like you always do. Thank you!
Hi John, thank you for your comments. I tried a few things but I did see no change. I found out it can be fixed by using this code in the custom css area of the element: .gallery a img { border: 0 !important; }
HI Ferdy, Thank you for this tutorial. How can you make an image gallery responsive on mobile? I would like to have 10 columns on a computer screen and 4 columns on a mobile. Is it possible ? Thanks for your help...
Struggling with this same issue right now. Any solution yet?
Responsive Gallery Column Width Feature in Piotnet Addons For Elementor can do it pafe.piotnet.com/#responsive-gallery-column-width
Hello Fredy, can I add a filter bar for the image gallery?
If you do not see that option you can't.
How to show title bottom of the every image?
thank you. I couldn't get all the pictures to be the same size, it was driving me crazy
hi Ferdy, How do you get those image size options? I only have thumbnail, medium, medium large, large and full.. please??? thanks
Maybe it is updated and not possible anymore.
you have to have WooCommerce installed as a plugin. I didn't have it, I added it, and now it's fine :)
thanks a lot
The first part,...the screen that shows "add new section" & "add template"... Why don't I have that? The Gallery widget is no longer free so I dragged the basic 'gallery' over to my page and it disappeared. Like I didn't drag it. And the only way I can figure out how to start over again is to go out without saving and go back in. I refuse to pay. Can you give me any direction or maybe update your video, please?
Do you have a video showing how to add an image to a gallery using Elementor?
Ferdy, great series man! Quick question -- when I am adding images to my gallery, they often only show the photos as partially loaded. The thumbnail view is fine but if I then click on the image to enlarge it in my lightbox, the image is only a partial image. Are my images too large? If so, what is a good size to make my images? Is there another reason as to why this could be happening? Thanks and best
sorry to be offtopic but does any of you know a tool to log back into an Instagram account??
I was dumb lost the login password. I love any tricks you can offer me
@Kylen Leighton Instablaster :)
@Josue Finn thanks so much for your reply. I found the site thru google and im waiting for the hacking stuff atm.
Looks like it's gonna take a while so I will get back to you later when my account password hopefully is recovered.
@Josue Finn it worked and I now got access to my account again. I am so happy!
Thank you so much you saved my account!
@Kylen Leighton Glad I could help xD
This is not the same thing as doing posts right? I'm using the free version of elementor.
I fixed the border problem without going into code, finally. In edit mode in Elementors gallery, under STYLE (and NOT Advanced settings) and then IMAGES, chose Solid border and then enter 0. Voila!
Thanks
Hoi Ferdy, mijn afbeeldingen komen niet zo mooi strak naast elkaar te staan als bij jou. ik heb geen woocommerce plugin. en het maakt niet uit welke afbeeldingen grote ik gebruik. Er vallen grote gaten tussen de afbeeldingen. ik vind het ook niet prettig dat er een menu rechts boven in komt waarmee je de foto kunt downloaden, en of op socioal media kunt plaatsen.
How do you get those image size options?? I only have thumbnail, medium, medium large, large and full..
I don't know why your options are different. Maybe a newer version of Elementor?
Install WooCommerce it will appear image size option.
Hm, well that plugin gave me those image size options but the thumbnails were still uneven.
When i installed that I got a cart in my menu. Any idea how to get rid of it?
Good video, but how about mobile version? For mibile they haven't options and it's look not good.
I don't think the gallery comes with the free version any more, though
Treasure in 5 minutes❤️❤️❤️
Thanks....
How to add more IMAGE SIZE setiing - like You have the WOOcommerce Thumbnails?
I hv tge same doubt.have yu got it?
@@followyourdreams6851 no, but didn't try it more then 3 times.
@@TomaszTwojFotograf any other method to make gallery without plugin?
@@followyourdreams6851 I have made a standard Elementor free gallery - and make it withouth the filtering.
@@TomaszTwojFotograf how?
What about woocommerce gallery images? How to customize that?
You must install the WooCommerce plugin free from wordpress plugin store
:)
Thank you. 2022 - there is no Woocommerce option anymore :/
Please can you tell me how to make my grid 2x2 instead of 1 x1 in mobile view? (2) this is what I'm lookin for
Responsive Gallery Column Width Feature in Piotnet Addons For Elementor can do it pafe.piotnet.com/#responsive-gallery-column-width
It's a shame that the image gallery does not offer any options for hovering over the thumbnail images. Disappointed with Elementor already :(
Give them a change. They are amazing!
Hello ferdy I am 3thd
Hia Cio! That is great :)
CoOL
Your videos are amazing too mate!
Ferdy Korpershoek are you freddy or ferdy ? Lol most of time i mispell your name as freddy anyways is it possible that we can have a private chat
it's not COMPLETE , you didnt mention about mobile view == ~~~~
I have other tutorials about that. By default Elementor does a great job in creating a mobile view.
you went right past how to add an image to the gallery....you go too fast and I can't follow. I realize your video is for free, but you go too fast for a complete beginner to follow.