This is the best tutorial on the net for getting gallery images to properly display in Word Press. The default WP editor is horrible, in mobile it displays two images at the top, one large image underneath, then two again beneath that, it was driving me crazy. This tutorial perfectly solved this problem.
Really appreciated it Jack for making a video on my request. Will apply on my website as soon as possible. You gained a loyal subscriber and a supporter Recommended to my friends too 😄☺️
Amazing work, again! Thank you! If I may, I would love for you to pay more attention or show us the mobile versions and needed updates on your website tutorials because now over 50% of traffic is mobile and it is very important to do as much as possible to convert this audience with easy to understand and effective UI. Again, love your work - you're the man!
Thank you! I'll keep in mind to have a section for mobile optimization in all future tutorials. This tutorial has a section on mobile optimization towards the end of the video: th-cam.com/video/GFsbb4WE8o0/w-d-xo.html
You almost made me change from Astra theme to Kadence whose speed I double checked also competitive with Astra. Currently I am waiting for Astra's solution for two columns in mobile layout, which if they can't solve I have to follow your solution. Anyway your tutorial worths a million!
Hy Jack! Thank for your content! You are so creative! Could you give advise hor to swap columns in one section? I have implement column settings and won't change widgets between columns but wan change columnt. My case left image and right text, how to swap column to opposite?
How can we achieve this for WooCommerce products on a custom page? I'm able to achieve 2 column layouts in the shop page for mobile, but I want to add a grid consist of products on the home page for a custom layout, and seems very difficult!
2 ปีที่แล้ว
Fantastic explanation, thanks! I have one question regarding adding a new item in the middle of other items. Is there a way to create a blank/new space between products and add a new one and the other products will move up or down in rows?
Thanks a lot Jack , you're the man ! That was amazing ! My question is should i edit everything for Mobile and tablet version everytime i add a page ? Is there any plugin that do that automatically for mobile and tablet ? I'm asking cause everytime i add a page to website like a text or an image , i have to redesign everything for mobile version again .
For me, I will always design the page on desktop, and then I will resize it down to the mobile version to optimize it (e.g. clearing unnecessary padding and margin).
I've been the whole week looking for a video which talk just what you have explained. Thanks a lot!! BTW, how can I align the product title in the middle? On the astra theme they are aligned to the left and with a very small size. Thanks in advance!! 😁
Sorry for the late reply. The product title is aligned through the settings in the theme customizer. If you go to: In your WordPress dashboard >> Appearance >> Customize >> There will be a "Woocommerce" option. You can align the product title there. Hope this helps
Hi Jack, I am wondering if you could show us a tutorial on how to adjust this setting into a mobile responsive version. I am struggling to make the layout into 2 columns
Do your content looks "squeezed" together? If yes, you need to play with the padding margin. Make sure you select the right layers to edit. Try checking this video out. I have a section for mobile optimization: th-cam.com/video/GFsbb4WE8o0/w-d-xo.html
Hi Jack! This video was so helpful. I am trying to duplicate this process with 2 columns, except my images vary in size (portrait AND landscape). Is there a way to do this using different image sizes (NOT thumbnail) but keep the images centered horizontally and vertically AND keep the header and paragraph boxes aligned horizontally? I essentially want to lock the image size width and height so the entire image can be seen, but is forced to scale down to the set size. Is this possible? Thank you so much for all of your wisdom!!!!!
Hi Jack, quick question, 10:22 , why did you edit the margin on the "desktop view" tab instead of the "mobile view" tab? When to use the mobile view tab instead? Thanks!
By default, when you edit the desktop version, the mobile version will follow unless you change it otherwise. Use the mobile version when it doesn't look proper on a mobile device
Where are you Jack? We miss you. I am always looking for your current videos but I can't find any. I hope that you are fine bro. We hope to hear from you soon. God bless
If HOBBY = SPORT choose template 1 If HOBBY = ART choose template 2 For that purpose create a CPT with two fields. First field = Hobby second field = template. With other words: create a custom field Hobby where to add some hobbies as option like (Sport, Art) etc..etc.. and assigned this field to post type X to display different content templates based on the hobby options. For that a template per hobby options needs to be created without assigning this content template to any post type. Toolset Views offers the filter hook "wpv_filter_force_template" using which you can override the content template. => toolset.com/documentation/programmer-reference/views-filters/#wpv_filter_force_template Next: Create new content. Then, add the hook to the "Custom Code" section offered by Toolset: => > toolset.com/documentation/adding-custom-code/using-toolset-to-add-custom-code/ Please check the following related ticket: - toolset.com/forums/topic/set-template-per-post-for-a-custom-post-type/#post-1953569
I tried to chance the font size for mobile and tablet in the Grid Block i could change the size for desktop but not for mobile and tablet when clicking on the tablet icon like you do when makeing two or four collums. Is that a limitation for the free kadence theme ? Or free kadence blocks
There should not be any limitations for the Row Layout. There should be a setting for you to change the font size in the Info Box whether it is for mobile or desktop. Just make sure to try it on the live page to see if it works. You need to trial and error for that.
Select the info card >> visit the settings for the info card on the right panel >> at the top there is a place for you to place links. Find the link to your product and add the link on the settings. Hope this helps.
Hello. You need to create a blank WordPress page. On your WordPress Dashboard >> hover to pages >> Select Add New. And you should see the blank page I am referring to. Let me know if this helps. 😀
@@JackCao I found. For others who have a problem. You have to go: Plug in - Classic editor - settings. There you have to choose classic or block editor, click block editor and Allow users to change editor YES
Hey, thanks for your comment. Unfortunately, I don't do Elementor tutorials because I am not a fan of its site speed. My channel is focused on building fast loading web pages without sacrificing on design. Elementor has the design element, but not site speed. So, I will not cover any content related to Elementor. You may want to check out WP Tuts instead, Paul does lots of great Elementor tutorials. 😊
This is the best tutorial on the net for getting gallery images to properly display in Word Press. The default WP editor is horrible, in mobile it displays two images at the top, one large image underneath, then two again beneath that, it was driving me crazy. This tutorial perfectly solved this problem.
I've struggled with this exact issue for more than two weeks (off and on as time allows). And here you are solving it for me!! Thank you!
Thank you very much, I've been searching for this solution for over 3 months, finally found it.
THIS HELPED ME LIKE 700% MORE than any video. Thanks!
Glad it helped 😁
Hope u share more about mobile friendly web.. thank you for sharing . Nice
Amazing! Thank you so much for this. Can not tell you how many hours I have spent trying to work this out without a plug-in 😅👍
Really appreciated it Jack for making a video on my request. Will apply on my website as soon as possible.
You gained a loyal subscriber and a supporter
Recommended to my friends too 😄☺️
You are most welcome! I'm always happy to help 😊
@Kaiser William Thank you for your support 😊
I really like your videos dude, you're literally doing really well. Kudos
Amazing work, again! Thank you! If I may, I would love for you to pay more attention or show us the mobile versions and needed updates on your website tutorials because now over 50% of traffic is mobile and it is very important to do as much as possible to convert this audience with easy to understand and effective UI. Again, love your work - you're the man!
Thank you! I'll keep in mind to have a section for mobile optimization in all future tutorials. This tutorial has a section on mobile optimization towards the end of the video: th-cam.com/video/GFsbb4WE8o0/w-d-xo.html
@@JackCao how can we make two columns for product category in homepage?
You almost made me change from Astra theme to Kadence whose speed I double checked also competitive with Astra. Currently I am waiting for Astra's solution for two columns in mobile layout, which if they can't solve I have to follow your solution. Anyway your tutorial worths a million!
Really appreciated it Jack for making a video on my request. Will apply on my website as soon as possible.
Hy Jack! Thank for your content! You are so creative! Could you give advise hor to swap columns in one section? I have implement column settings and won't change widgets between columns but wan change columnt. My case left image and right text, how to swap column to opposite?
thank you. you help very much
How can we achieve this for WooCommerce products on a custom page? I'm able to achieve 2 column layouts in the shop page for mobile, but I want to add a grid consist of products on the home page for a custom layout, and seems very difficult!
Fantastic explanation, thanks! I have one question regarding adding a new item in the middle of other items. Is there a way to create a blank/new space between products and add a new one and the other products will move up or down in rows?
Thanks sir I am finding it almost from 2 days now I got your video thanks for the amazing content
You gain a subscriber (me)
Thanks again ❤️❤️❤️
Glad that helped and thanks for the sub! 😉
@@JackCao sir can u help me I need a one more help as I can't find that thing on whole youtube
@@Bullstars How can I help?
@@JackCao sir how can I contact u privately
@@Bullstars please send me an email at jack@jackcao.com
Thanks a lot Jack , you're the man ! That was amazing ! My question is should i edit everything for Mobile and tablet version everytime i add a page ? Is there any plugin that do that automatically for mobile and tablet ? I'm asking cause everytime i add a page to website like a text or an image , i have to redesign everything for mobile version again .
For me, I will always design the page on desktop, and then I will resize it down to the mobile version to optimize it (e.g. clearing unnecessary padding and margin).
nice thank for sharing very useful
Awesome tutorial! Keep up the good work.
Great tutorial, can u do this to post queries in Gutenberg?
I've been the whole week looking for a video which talk just what you have explained. Thanks a lot!! BTW, how can I align the product title in the middle? On the astra theme they are aligned to the left and with a very small size. Thanks in advance!! 😁
Sorry for the late reply. The product title is aligned through the settings in the theme customizer. If you go to: In your WordPress dashboard >> Appearance >> Customize >> There will be a "Woocommerce" option. You can align the product title there. Hope this helps
Hi Jack, I am wondering if you could show us a tutorial on how to adjust this setting into a mobile responsive version. I am struggling to make the layout into 2 columns
Do your content looks "squeezed" together? If yes, you need to play with the padding margin. Make sure you select the right layers to edit. Try checking this video out. I have a section for mobile optimization: th-cam.com/video/GFsbb4WE8o0/w-d-xo.html
Can you make a video on infoboxes horizontal style (fastest one) with image and text + read more ? The three-column layout?
Superb content as always..
Glad you think so! So nice of you 😀
thank you ,bro!
I need a video on how to customize a shipping info page
thank you
You're welcome!
Awesome!!
Good content. I agree page speed rocks.
Hi Jack! This video was so helpful. I am trying to duplicate this process with 2 columns, except my images vary in size (portrait AND landscape). Is there a way to do this using different image sizes (NOT thumbnail) but keep the images centered horizontally and vertically AND keep the header and paragraph boxes aligned horizontally? I essentially want to lock the image size width and height so the entire image can be seen, but is forced to scale down to the set size. Is this possible? Thank you so much for all of your wisdom!!!!!
Thanks ! :D
Hi Jack, quick question, 10:22 , why did you edit the margin on the "desktop view" tab instead of the "mobile view" tab? When to use the mobile view tab instead?
Thanks!
By default, when you edit the desktop version, the mobile version will follow unless you change it otherwise.
Use the mobile version when it doesn't look proper on a mobile device
@@JackCao Understood! Thank very much Jack! Love your content!
@@yapchenpo95 You're welcome! And thank you so much for your continual support! Really appreciate it!
But my Gutenberg has no option for mobile and tablet view, How can I bring them because I have issue in mobile view? Thanks
Please help me with this problem: Row Layout block settings are not availble.
I tried to make like this. But i can't. Do i need to deactivate the elementor plugin?
Where are you Jack? We miss you. I am always looking for your current videos but I can't find any. I hope that you are fine bro. We hope to hear from you soon. God bless
I am fine K B, thanks for your concern, I really appreciate it! I am with Rank Math now: th-cam.com/users/RankMath 😊
Wordpress Tutorial suggestion: How to filter dedicated template? Example:
I don't quite understand filter dedicated template. could you please give an example? Maybe a link?
If HOBBY = SPORT choose template 1
If HOBBY = ART choose template 2
For that purpose create a CPT with two fields. First field = Hobby second field = template. With other words: create a custom field Hobby where to add some hobbies as option like (Sport, Art) etc..etc.. and assigned this field to post type X to display different content templates based on the hobby options. For that a template per hobby options needs to be created without assigning this content template to any post type.
Toolset Views offers the filter hook "wpv_filter_force_template" using which you can override the content template.
=> toolset.com/documentation/programmer-reference/views-filters/#wpv_filter_force_template
Next: Create new content. Then, add the hook to the "Custom Code" section offered by Toolset:
=> > toolset.com/documentation/adding-custom-code/using-toolset-to-add-custom-code/
Please check the following related ticket:
- toolset.com/forums/topic/set-template-per-post-for-a-custom-post-type/#post-1953569
I tried to chance the font size for mobile and tablet in the Grid Block i could change the size for desktop but not for mobile and tablet when clicking on the tablet icon like you do when makeing two or four collums. Is that a limitation for the free kadence theme ? Or free kadence blocks
There should not be any limitations for the Row Layout. There should be a setting for you to change the font size in the Info Box whether it is for mobile or desktop. Just make sure to try it on the live page to see if it works. You need to trial and error for that.
@@JackCao Thanks Jack. It was a bug. Talked with the kadence team, thay would try to fix the error for the next release.
@@MB-sl8pw Glad it is being handled.
Can you do it for me for my theme, i have clipmydeals theme,
Bro how to link that products pls help me asap
Select the info card >> visit the settings for the info card on the right panel >> at the top there is a place for you to place links. Find the link to your product and add the link on the settings. Hope this helps.
When you say you are going to blank page.. I am not seeing where you are going. When I go to the products page, it only shows 1 way to set it up
Hello. You need to create a blank WordPress page. On your WordPress Dashboard >> hover to pages >> Select Add New. And you should see the blank page I am referring to. Let me know if this helps. 😀
@@JackCao ok I just went to add new, but my menu didn’t look like that one.
I think the look and feel depends on the theme you are using. May I know what theme you are using? For me it is the Kadence Theme.
am using EVON theme it was possible in this theme if yes then How ?
am already Plugin Kadence but dont know how can edit exsiting pages with this
how to do this in blogger
Hello, can you help me. I can't figure out how to get to a wordpress editor. I have WPbakery installed
I think WP Bakery takes over the design layouts of your WordPress editor. I would suggest that you remove it totally.
@@JackCao I found. For others who have a problem.
You have to go: Plug in - Classic editor - settings. There you have to choose classic or block editor, click block editor and Allow users to change editor YES
Jack I have more problem too 😅
Would you mind if I post you one more mail ?
Of course. Feel free to send me a mail.
@@JackCao thanks a mail is on the way 😉
Please show this for elementor
Hey, thanks for your comment. Unfortunately, I don't do Elementor tutorials because I am not a fan of its site speed. My channel is focused on building fast loading web pages without sacrificing on design. Elementor has the design element, but not site speed. So, I will not cover any content related to Elementor. You may want to check out WP Tuts instead, Paul does lots of great Elementor tutorials. 😊
thank you