Thanks! You can not imagine how helpful this was. It took me a while to set up my website but I did it, yay! I do really like the Hello Theme and seeing how everything fits together.
It’s amazing, many thanks. So many useful practical tips. I haven’t seen it all yet, because I’m correcting my draft as I go along. Some things don’t work yet, but ‘m learning .
Thank you Imran, If I understand everything, I can better change my theme to the Hello theme. At the moment I am using the Asta theme. I presume everything will work great even with the latest possibility with the container. Thanks for all your good video's. I've just found them and I am bingwatching 👍👍👍
@@websquadron Thank you for your quick answer. I am at Siteground so the backup is not a problem. With your good video's the styling will be peanuts ( this is a American saying is it :)
thanks for a great video! I didnt think you could use wordpress blog editor with elementor, i thought you had to write and style everything in elementor ..
Hi, Imran. I discovered your channel some days ago through this video and have been binge-watching all your elementor videos since then. This video is helping me immensely to build my website and I can't thank you enough for it. Though just struggling to understand how did you remove the default Archives section on homepage that comes with Hello Elementor theme. (I have Elementor Pro) The Archives section is making duplicates of every blog post I create. Would highly appreciate any suggestions, advice or help. Thanks for reading. I hope you are doing well. 🌻
crocoblock.com/blog/adding-custom-fonts-to-elementor/ I keep promoting that you need to remove GoogleFonts to speed up loading time of your site - but unless you want to have Roboto everywhere - then you need to follow this guide!
Great Sir make another vlog on this having hello theme(Elementor free) #-Mega Menu #-Trendy Mobile Menu #-elementor(free) #-woocommerce #-SSL plugin #-shopengine free (customize My Account page using CSS) #-Thimify #-EA #-UAE plugin Etc, etc .. Stay Blessed
Thank you @Web Squadron for this tutorial, it definitely helped to fill in some gaps in my knowledge! I just have a question: Would you also discourage using Adobe Fonts (with a unique project ID per website)? Does using Adobe fonts influences the page speed as much as Google Fonts? I find it very easy to use, just create a project in my Adobe account, choose only the fonts and variations I want to use on the website and paste the project ID in the Elementor Integrations settings. Should I stop doing this with my projects and custom add the fonts?
I would say 'yes don't use' as it will hurt your score. Maybe try to find an alternative or a similar font that you can obtain the OTF or WOFF or WOFF2 files for. Try Fontsquirrel.com
@@websquadron Thank you for your quick response! I have tested this on two projects, where I could easily replace the Adobe fonts ID by uploading the font (Montserrat & Open Sans) and could see a slight improvement in the page speed. I will definitely go through my other projects and where possible, I will change them over to custom fonts. Unfortunately, I won't be able to do this for every website, as some fonts are just not available without a licence. I will leave these as they are, because the fonts used are part of the branding, and I don't want to replace them with alternatives or hassle the client to buy a licence. It is definitely something I will keep in mind on future projects!
@@eliendauwe I totally understand. I have sites from the early days where they’re still using a font that is too costly to download or too much work to correct, so I just left them as they were. It’s one of those live and learn moments that becomes your new norm.
@@websquadron Im using linux and google chrome... is there something I need to do? any setup? also Im noticing that I cant use dynamic images as background is that correct?
I love this video but I am also having the same problem. I can't upload webp image using windows 10. Is there a solution for this?? I get this message: "This image cannot be processed by the web server. Convert it to JPEG or PNG before uploading."
OH Captain, my captain? Curious... IF you've ignored the preset thumbnail sizes, does it matter to change them to 0 (zeros) later -- Any ramifications? And by the way, do you need a Regenerate Thumbnails plugin if sizes are = 0? Or is it mute at that point? thx for this video. Really helpful.
Hey my friend! I Very greatfull for watching your tutorials! ❤️😃 Just one doubt: How to remove Google Fonts without Messing up with my already made website? Theres a way to do that without effecting the desing? Thanks! From a greatfull subscriber! ❤️💎
@@websquadron, ok! It's worked perfecly! Really greatfull for that! 😃 Ihave one last question. My website has a form which people sends MP4 files and It takes too long to send It.. the problem is that when the file its too big Elementor form doenst load that animation on the Button, so people close the tab before its completely submited! If you help me out with this problem, I Will be etternaly greatfull for that, its Very important for My business! Thanks a lot!
❤Awesome! But MAN hold off on the caffiene...slow down pleaassee... Lots of content for newbies to take in at one go especially when you are moving soooo fast. Maybe split it up into 2 vids...
I'm using Autoptimize and WP Fastest Cache as you suggested. But I'm getting a message on the Autoptimize Settings screen that says, "It looks like you have another plugin also doing CSS and/ or JS optimization, which can result in hard to troubleshoot conflicts. For this reason it is recommended to disable this functionality in WP Fastest Cache." Can you tell me which settings to change in WP Fastest Cache to disable CSS and JS optimization?
@@websquadron Thanks for your prompt reply! Removing the checkmarks from ALL options that referenced CSS or JS in the WP Fastest Cache settings fixed the error. When I put them back in, one at a time, the problem turned out to be Minify Css AND Combine Css. Autoptimize shows no more errors. I'm going merrily back to your excellent tutorial. Keep up the good work!
@@courtneyvashaw3718 Ace :) Minify can be a common problem. Did you delete the minify from the JS setting in Autoptimize as that’s how I usually remove the conflict :) take care
I just moved from adobe muse and shopify, and now using wordpress with Elementor and trying to wrap my head around WooCommerce. What NOT A SINGLE PERSON on youtube explains is do i need to make a product page for EVERY...SINGLE...PRODUCT? Or is it just a "template" which is the word everyone keeps using..."template"...for when someone clicks a product from a "category" page, Thats the product that shows up? What seems to be a reoccuring theme aswell is "single product" is all I see that is a thing. What if I wanted lets say...3 products on a single page? I see no way to do that?
It is a Template that works across all products. To have 3 products on a single page then assign them to a Category and show that on a page with the Products Widget and use the Query to only show that Category.
@@websquadron I finally finally finally got my head wrapped around it today. I work for a huuuuuge company that sells a lot of stuff. Some stuff is even “Made to order” and some stuff is companies coming to us with a problem, and we make components as their solution so our website is extremely complex. But I finally wrapped my head around this today. I’m glad I made the move to this route and ditching Muse. Thanks for the response and you deff earned a sub
NOTE: FEE REQUIRED. You will need to purchase Elementor Pro for this tutorial - mentioned at 3:50, $99.00/Year. If you seek a free theme, go find one of many and skip this ground-up, fee-based built out. One day UA-cam will require their content creators disclose their financial relationships upfront -- you know, like in a video title.
I feel your pain but it is on my cover art that it’s Elementor Pro - and to get the best out of WooCommerce etc then you need Pro for the templates. The cost of EL Pro is $49 per year for a single license and not $99. At the time of recording I didn’t have any affiliate links and they were added in retrospect.
Sigggggggggggghhhh - "Edit with Elimentor", click........wait, wait, wait, wait .......The connection was reset Never EVER like they portray in their very heavily edited vids, init?
I "thought" i downloaded WP to my local host, but I was watching a heavily edited youtube video when doing so -- visting the site times out, as does asking the elementor help me edit. But if you say it should be only a few seconds then I'm sure its all perfectly well and fine.
I know this is great stuff before even gone through first 5 minutes. Keep up your great stuff man!
PS - you may notice the deeper voice - as I was extremely ill whilst shooting this.
Hope that you enjoy this.
Thanks for this effort. Love the full site-building with Elementor. Keep doing great works. And take care of yourself too.
While I deeply appreciate you making this tuterial, don't be working yourself into a hospital bed my man. Take some time off when needed to regroup!
@@nohomenomad1427 So true :)
This tutorial is pure gold. Thank you so much!!
Huge thanks :)
Thanks! You can not imagine how helpful this was. It took me a while to set up my website but I did it, yay! I do really like the Hello Theme and seeing how everything fits together.
Awesome! I call this the All-in-One video that covers a lot :) Always remember to have Backups in place too to stay protected :)
This is brilliant! I wish I had seen this video before I started tinkering with Elementor as a total newbie.
Hope it helped :)
It’s amazing, many thanks. So many useful practical tips. I haven’t seen it all yet, because I’m correcting my draft as I go along. Some things don’t work yet, but ‘m learning .
@@njabeid Reach out if you ever get stuck: info@websquadron.co.uk
So far sir you are the best you explain it detail to detail.
Watch this updated video instead: ua-cam.com/video/GphUzVrjm3w/v-deo.htmlfeature=shared
thank you very much Grand merci!
You rock, man!
Brilliant! ...and funny!
I'm on my 3rd watch of this one. Maybe it will stick now 😆 🤣
Thanks Imran , It was Very useful Tips and helpful Tutorial
This is incredible! Hope you're well now!
On the mend but the cold is awful. I must have edited out about 30mins of me sneezing and coughing.
Thanks so much. This was really useful. I've been struggling with how to fit everything together so this was perfect. Very appreciared
Glad it was helpful!
I did an updated version this week too :)
ua-cam.com/video/Zp8pAx4aIyg/v-deo.html
@@websquadron I'll check it out. Thanks
thank you !
00:00 Intro
01:07 Wordpress Settings
03:11 Plugins to Use
07:46 Elementor Settings
09:31 Load Custom Fonts
12:10 Convert Images to WebP
14:34 Hello Theme
16:25 Elementor Header Template
30:10 Elementor Home Page
32:28 Elementor Hero Banner Section
52:44 Elementor Featured Section
54:25 Elementor Banner and Subscribe Section
01:05:20 Elementor About Section
01:06:05 Elementor Footer Template
01:08:26 Create the Wordpress Menu
01:08:50 Add an About Page
01:10:58 Add a Team Page
01:14:45 Menu Styling
01:22:58 Elementor Single Post Template
01:27:11 Elementor Post Archive
01:37:45 WooCommerce
01:44:39 Add Products
01:49:35 Add Variable Products
01:52:48 Elementor Shop Archives Template
02:01:07 Elementor Single Product Template
02:04:29 Modify the Menu
02:07:51 Modify Home Page Styling using Dynamic Tags
Hi Imran, brilliant tutorial! I wish I saw this sooner. Thanks.
No worries!
Thank you Imran,
If I understand everything, I can better change my theme to the Hello theme. At the moment I am using the Asta theme. I presume everything will work great even with the latest possibility with the container.
Thanks for all your good video's. I've just found them and I am bingwatching 👍👍👍
You may need to doublecheck your styling after switching.
Make a backup before you switch :)
@@websquadron Thank you for your quick answer. I am at Siteground so the backup is not a problem. With your good video's the styling will be peanuts ( this is a American saying is it :)
Thank you so much
As always Imran, very educational, useable information
and funny too.
Big thanks :)
Awesome! And, even, without wasting any time... 😉 Thank you a lot!
Amazing , just what I was looking for! Thanks!
Glad it helped!
so cool!!!!!
:)
Thank you...you're a smart guy
Thank you too!
thanks for a great video! I didnt think you could use wordpress blog editor with elementor, i thought you had to write and style everything in elementor ..
I’ll have a new updated video coming out in 10 days :)
Awesome video, thanks for the great lesson. How can google fonts no longer has the popular pairing options?
I know :( But see this >>> ua-cam.com/video/2D1N8CD4XIU/v-deo.html
Awesome!!!
Hi.... Amazing Video woow thanks
Awesome :)
Hey super detail thanks, Are the plugins you use in the videos still relevant today? or other plugins are better like wprocket or others? THANKS
That is an outdated video. My latest build/methods/plugins are here: learn.websquadron.co.uk
Hi, Imran. I discovered your channel some days ago through this video and have been binge-watching all your elementor videos since then.
This video is helping me immensely to build my website and I can't thank you enough for it. Though just struggling to understand how did you remove the default Archives section on homepage that comes with Hello Elementor theme. (I have Elementor Pro)
The Archives section is making duplicates of every blog post I create.
Would highly appreciate any suggestions, advice or help. Thanks for reading. I hope you are doing well. 🌻
Big thanks for your kind words. There's more in the Site Tutorials Playlist :)
crocoblock.com/blog/adding-custom-fonts-to-elementor/
I keep promoting that you need to remove GoogleFonts to speed up loading time of your site - but unless you want to have Roboto everywhere - then you need to follow this guide!
Great Sir make another vlog on this having hello theme(Elementor free)
#-Mega Menu
#-Trendy Mobile Menu
#-elementor(free)
#-woocommerce
#-SSL plugin
#-shopengine free (customize My Account page using CSS)
#-Thimify
#-EA
#-UAE plugin
Etc, etc
..
Stay Blessed
That would take a lot of time but I’ll consider it.
Thank you @Web Squadron for this tutorial, it definitely helped to fill in some gaps in my knowledge!
I just have a question: Would you also discourage using Adobe Fonts (with a unique project ID per website)?
Does using Adobe fonts influences the page speed as much as Google Fonts? I find it very easy to use, just create a project in my Adobe account, choose only the fonts and variations I want to use on the website and paste the project ID in the Elementor Integrations settings. Should I stop doing this with my projects and custom add the fonts?
I would say 'yes don't use' as it will hurt your score. Maybe try to find an alternative or a similar font that you can obtain the OTF or WOFF or WOFF2 files for. Try Fontsquirrel.com
@@websquadron Thank you for your quick response! I have tested this on two projects, where I could easily replace the Adobe fonts ID by uploading the font (Montserrat & Open Sans) and could see a slight improvement in the page speed. I will definitely go through my other projects and where possible, I will change them over to custom fonts. Unfortunately, I won't be able to do this for every website, as some fonts are just not available without a licence. I will leave these as they are, because the fonts used are part of the branding, and I don't want to replace them with alternatives or hassle the client to buy a licence.
It is definitely something I will keep in mind on future projects!
@@eliendauwe I totally understand. I have sites from the early days where they’re still using a font that is too costly to download or too much work to correct, so I just left them as they were. It’s one of those live and learn moments that becomes your new norm.
hello, just a little question. I cant use .webp format on elementor, it returns an error or the image doesnt show, what can I do?
Is this on the desktop? If you’re using Safari make sure that you’re using iOS 14 or greater.
@@websquadron Im using linux and google chrome... is there something I need to do? any setup? also Im noticing that I cant use dynamic images as background is that correct?
I love this video but I am also having the same problem. I can't upload webp image using windows 10. Is there a solution for this?? I get this message: "This image cannot be processed by the web server. Convert it to JPEG or PNG before uploading."
OH Captain, my captain? Curious... IF you've ignored the preset thumbnail sizes, does it matter to change them to 0 (zeros) later -- Any ramifications? And by the way, do you need a Regenerate Thumbnails plugin if sizes are = 0? Or is it mute at that point? thx for this video. Really helpful.
I’ve never had an issue with Woo products or posts when I set them to 0
My Hosting Provider Install Cloudflare and LiteSpeed as a cash plugin , Can i install Autoptimize plugin?
Yup. Should be no problem.
Hey my friend! I Very greatfull for watching your tutorials! ❤️😃 Just one doubt: How to remove Google Fonts without Messing up with my already made website? Theres a way to do that without effecting the desing? Thanks!
From a greatfull subscriber! ❤️💎
You could use OMGF plugin for that but that depends on how many fonts you’ve used.
@@websquadron, ok! It's worked perfecly! Really greatfull for that! 😃
Ihave one last question.
My website has a form which people sends MP4 files and It takes too long to send It.. the problem is that when the file its too big Elementor form doenst load that animation on the Button, so people close the tab before its completely submited!
If you help me out with this problem, I Will be etternaly greatfull for that, its Very important for My business!
Thanks a lot!
@@andreiof5 that is tricky and you may need to state that they should submit via an alternate form and add a note into the form that contains a link.
❤Awesome! But MAN hold off on the caffiene...slow down pleaassee... Lots of content for newbies to take in at one go especially when you are moving soooo fast. Maybe split it up into 2 vids...
Noted :)
I'm using Autoptimize and WP Fastest Cache as you suggested. But I'm getting a message on the Autoptimize Settings screen that says, "It looks like you have another plugin also doing CSS and/ or JS optimization, which can result in hard to troubleshoot conflicts. For this reason it is recommended to disable this functionality in WP Fastest Cache." Can you tell me which settings to change in WP Fastest Cache to disable CSS and JS optimization?
I don’t get that issue but remove the css and Js settings in WP Fastest Cache. You’ll see which ones they are as it refers to them.
@@websquadron Thanks for your prompt reply! Removing the checkmarks from ALL options that referenced CSS or JS in the WP Fastest Cache settings fixed the error. When I put them back in, one at a time, the problem turned out to be Minify Css AND Combine Css. Autoptimize shows no more errors. I'm going merrily back to your excellent tutorial. Keep up the good work!
@@courtneyvashaw3718 Ace :) Minify can be a common problem. Did you delete the minify from the JS setting in Autoptimize as that’s how I usually remove the conflict :) take care
I just moved from adobe muse and shopify, and now using wordpress with Elementor and trying to wrap my head around WooCommerce. What NOT A SINGLE PERSON on youtube explains is do i need to make a product page for EVERY...SINGLE...PRODUCT? Or is it just a "template" which is the word everyone keeps using..."template"...for when someone clicks a product from a "category" page, Thats the product that shows up? What seems to be a reoccuring theme aswell is "single product" is all I see that is a thing. What if I wanted lets say...3 products on a single page? I see no way to do that?
It is a Template that works across all products.
To have 3 products on a single page then assign them to a Category and show that on a page with the Products Widget and use the Query to only show that Category.
@@websquadron I finally finally finally got my head wrapped around it today. I work for a huuuuuge company that sells a lot of stuff. Some stuff is even “Made to order” and some stuff is companies coming to us with a problem, and we make components as their solution so our website is extremely complex. But I finally wrapped my head around this today. I’m glad I made the move to this route and ditching Muse. Thanks for the response and you deff earned a sub
NOTE: FEE REQUIRED. You will need to purchase Elementor Pro for this tutorial - mentioned at 3:50, $99.00/Year. If you seek a free theme, go find one of many and skip this ground-up, fee-based built out. One day UA-cam will require their content creators disclose their financial relationships upfront -- you know, like in a video title.
I feel your pain but it is on my cover art that it’s Elementor Pro - and to get the best out of WooCommerce etc then you need Pro for the templates. The cost of EL Pro is $49 per year for a single license and not $99. At the time of recording I didn’t have any affiliate links and they were added in retrospect.
Sigggggggggggghhhh - "Edit with Elimentor", click........wait, wait, wait, wait .......The connection was reset
Never EVER like they portray in their very heavily edited vids, init?
It should be quite quick - not more than a few to 5 seconds.
I "thought" i downloaded WP to my local host, but I was watching a heavily edited youtube video when doing so -- visting the site times out, as does asking the elementor help me edit. But if you say it should be only a few seconds then I'm sure its all perfectly well and fine.