Bricks Builder Full Wordpress Website Course - SEO - Blog - Performance - Wordpress Tutorial 2023
HTML-код
- Опубликовано: 15 июл 2024
- Join our 'How to Start a Web Design Business' Course - and use strategies to grow, get clients, and generate recurring income: websquadron.co.uk/how-to-star...
Book your 1-2-1 Consultation: websquadron.co.uk/socials
Hope you enjoy our new Bricks Builder Full Wordpress Website Course - SEO - Blog - Performance - Wordpress Tutorial 2023
00:00 Intro
00:59 Domain and Hosting Advice
01:36 Wordpress Settings
03:00 Plugins, Snippets + PERFORMANCE Settings
• How to Boost Page Spee...
Codes: websquadron.co.uk/page-speed-...
07:05 Bricks Theme and Settings
bricksbuilder.io/
10:00 Image Optimisation
bulkresizephotos.com/en
12:14 Custom Load Fonts
www.fontsquirrel.com/
13:30 Site Favicon
14:37 Add the Home Page and the Menu
15:15 Add the Header Template
16:03 The Bricks Interface
20:40 Theme and Page Settings
25:40 Default Colour Palette
27:12 Assigning the Font Family
29:06 Building the Header Template
35:13 Root HTML set at 62.5%
37:05 Set the Header Template Display Conditions
37:49 Build the Home Page
46:20 CLAMP() Calculations
websquadron.co.uk/font-clamp-...
51:08 Using CLASS for Styling
54:21 Understand when the Class is Active
55:52 Continuing the Home Page Build
01:04:31 Add Hover Effect to Button
01:05:24 Continuing the Home Page Build
01:10:39 Add a Services Section to the Home Page
01:16:36 Add a Testimonials Section to the Home Page
01:23:13 Build the About Page
01:35:46 Build the Contact Page
01:37:27 Style the Form Element
01:40:11 Continue Building the Contact Page
01:42:57 Style the Social Icon List
01:46:16 Add the Privacy, Cookies and Accessibility Statement Pages
websquadron.co.uk/product/sha...
01:48:07 Adjust the Menu and Styling
01:51:33 Build the Footer Template
01:57:29 Make the Copyright Year Dynamic
02:00:15 Creating Posts
02:01:38 Add Custom Fields with a Snippet
www.codesnippets.cloud/snippe...
02:03:08 Continue Creating Posts
02:06:51 Create the Post Archive Template with Posts Element
02:19 42 Create the Post Archive Template with Query Loop
02:27:01 Set the Conditions for the Post Archive Template
02:27:19 Adding Filters to the Posts Element
02:28:30 Adding Filters to the Query Loop with Gridbuilder
wpgridbuilder.com/
02:30:49 Remove Facet Title with CSS
02:32:06 Why I don’t like the inbuilt Sidebar
02:33:20 Create the Single Post Template
02:41:10 Set the Conditions for the Single Post Template
02:41:22 Create the Side Bar Template
02:44:28 Add the Side bar Template to the Single Post
02:45:35 Add the Post Archive to a Blog Page
02:47:21 Add the Blog to the Home Page
02:50:15 Create a 404 Error Template
02:53:32 Set the Conditions for the 404 Error Template
02:53:42 RankMath Settings
03:01:02 Google Search Console Set Up
03:03:04 Google Analytics GA4 Set Up
03:05:55 SEO Improvements on the Home Page
03:16:00 SEO Improvements on a Post Page
03:17:01 Submitting Sitemaps
03:18:16 Instant Indexing
03:20:24 Conclusion
ALL of the links above are non-referral and non-affiliate links.
We love to create - share - respond - and deliver.
🧐 Learn with our Mastery Modules: websquadron.co.uk/web-design-...
🔗 All of our Important Links: websquadron.co.uk/socials/
😃 Join our Facebook Group: / 3309523509284305
😃 Get Code Snippets Pro: r.freemius.com/10565/3304295/
😃 Get Elementor Pro: be.elementor.com/visit/?bta=2...
😃 Boost your RUclips Analysis: www.tubebuddy.com/websquadron
👕 Get our Merchandise: websquadron.co.uk/merchandise
🥹 Support us: paypal.me/Websquadron
Hire us to work on your Website!
💌 info@websquadron.co.uk
👩💻 Visit websquadron.co.uk 
Хобби
![🔥[NEW!] The Ultimate Kadence FREE & PRO Deep Dive Guide for Beginners [Updated for 2023!]🔥](/img/1.gif)
Dude. You are the first person I've ever given a super thanks to. I appreciate the in-depth help. This was by far the best video for those like me who are brand new to bricks.
Many thanks and I’ll be doing more on Bricks soon
I’m only 20 minutes into the video, and I must say, I’m astonished by the quality and attention to detail you’ve put into this tutorial. It is truly a comprehensive, in-depth guide. Every question that arose while watching was answered just moments after I continued playing.
Bravo, Web Squadron! Compared to other WordPress-focused RUclipsrs, you are underrated.
I hope to see much more content from you.
Big thanks. We're all here to teach and learn.
Spectacular Bricks course. It is impossible to do more in less time. I like it because even though you go fast, you have time to see almost all the buttons and sections that you go through.
Keep creating videos about this.
Finally a full course on how to build a website with Bricks builder from A-Z, been waiting for this and now is out … time to look at Bricks as my new page builder
Man I never saw nothing like that, so detailed, full of content, so perfect, thank you so much for that, you help a loooottt of people with this content, I'm sure!!!
Glad it helped!
Great! You delivered and on top of it in record time! 👏
I’ve been looking forward to this! Great work, brother!
This is fantastic!
Awesome, dude. Thanks so much. Your efforts are greatly appreciated.
Thanks! Great tutorial 👍🏻 Keep them coming 🍀🙏🏻
Thanks for the video, it helped me a lot. Especially the header settings for different devices
Love to see it! Thx
Great! Thank you so much
Excellent Man..... I was waiting for it.
I greatly appreciate your video. Frankly its just amazing and you have been of great service to me. I hope you will continue to put out videos of such high quality.
Wonderful! I appreciate the tremendous effort you've put into this. Regarding the section's padding on both the left and right sides that you've included, I would highly recommend incorporating it into the global styling. By doing so, you'll have the advantage of making any desired changes in just one location
Wow, you're on a roll Imran!! 🙌🏻
I'm going to watch this just to support because I think it's amazing the time and effort you are putting into these in depth videos ❤
Wow! Amazing Tutorial 😊! Bricks is really good.
Great video. Thanks for sharing!
Just starting the course today. I took the leap because I have seen what this builder can do and it's very intuitive. Here we go!
Again! Another absolutely fantastic video! Thank you so much for the generosity and the time you put in making these tutorials.
No problem. I will be doing an updated and a bigger version soon.
Outstanding video I greatly apprciate it. I bought Bricks because of your videos. You present really well and clearly. Thank you
I'm 13 min into and you've given me a tons of extremely valuable information.. thank you for making the learning process shorter a LOT. Cant imagine what comes in the next hours dude...
Awesome tutorial. Thanks
What a great tutorial!!! I'm brand new to Bricks and learned so much. Thanks a bunch!!
You are so welcome!
This video continues to be of high value to me, thank you so very much.
You're so welcome!
Thanks man!! 💯
Wow.. That's a mega course
Brilliant, just the video i needed. i have been distracted by breaking heart bad lol. now time for some building back better with bricks.
A lot of love from my side.i will definitely watch this video.
I think this is the best channel, the best tutorial I've ever watched so far regarding WP website building.
Big thanks :)
First video I've seen of yours Imran and I can easily say your the best web design teacher I've seen on YT. I learned so much and will be buying a Bricks unlimited. Thanks, subscribed!
Thanks so much 😊
Great tutorial, especially the clamp explanation!!
Many thanks.
Feel free to share it :)
Im glad it’s only 3 hours 😀 still working down the 6 hours course.
your videos are endlessly useful thank you
That means a lot :)
Great tutorial! Thanks for this content!
Glad it was helpful!
I have been a total STAN for another builder, but based on recent issues, I’m considering Bricks. This tutorial has been INCREDIBLE for helping me make the decision. Thank you for everything you do. So brilliant! ❤🎉
Hi @merrillcreativesolutions,
Can you please share which was that other builder?
Thank you so much imran. I'm really struggling with Bricks. Mainly as I'm looking at sites designed by people far more advanced myself. Kind of makes me feel dispirited. This has lit a fire under me.
Nice one :)
Thanks for sharing this video/tutorial. You are master of masters.
You are very welcome
Imran you’re just amazing ❤ Masha Allah. Keep posting this type of valuable content 😌
Thank you, I will
Transitioning from Divi to Bricks currently and watched the first 20 mins of your video. It’s fantastic and I know it will teach me a lot.
But, I now need a video on setting up your 3 screen live wall you have, it’s awesome.
:) They are Atmoph 2 LED Windows :)
Thanks a lot for this excellent course!! Used to work with Elementor, I now decided to give Bricks a deeper look. I watched the video entirely and can't thank you enough for the great work you did. Living on a touristic island, building multilingual websites requirement. I was reading Bricks is still not 100% WPML compatible, so I'll have to wait until I can first use it on my first clients project.
All the best from Lanzarote Island!
Why isit not yet compatabike with multi languages?
Wow you really did a great job I’m thinking of switching my website on elementor to bricks builder to give a try.
Could you do a tutorial about the brick builder extension witch use gsap for animations ?
And can you explain the difference between blocks and Div ?
please make tutorial for beginner with bricks + woocommerce
Just because you mentioned it on 40:17 I thought I would bring it up. You might mention it later in the video or maybe I missed it early on but the point of rem is so that the website adjusts to the default font size of their device. Too many times I have seem sites that look strange on my mother's phone because she has her default font size up large for hear eyes only to see that the site was obviously designed for only the default system font size. I don't disagree with using px for some objects but doing that locked them into a specific size even if the default font size of the device is different than your system you designed the site on. Maybe worth mentioning.
Hi! This is super helpful!! I was just wondering whether or not you should use the child theme and what are the benefits/negatives. Keep up the great work!!
Absolutely fine to use child theme though I prefer to add changes via code snippets
Great tutorial. You've come a long way since your early days. If I didn't set the media to '0' is there a way to clear all the old thumbnails etc?
You’ll have to go to your Wordpress files via your host provider and then delete the unwanted sizes
This was epic, and really helping me find my way around Bricks. I'm coming from Oxygen but haven't used it in over a year.
BTW what is your Star Wars wall art in the background? Is it real? I noticed it moving and had to slip back and double check as I thought I'd lost my mind for a second 😂
Atmoph 2
They are LED Windows :)
Greate tutorial :) I love Kadence theme and Kadence block plugin, but Bricks builder looks really interesting.
Thanks so much! Great video.
I see there's now even more code snippets on your website, do you recommend adding the 'Explicit Fixed Width and Height' and 'Remove Gutenberg CSS' to every site as well?
Not always - especially the Explicit Snippet in case it affects Sliders/Carousels.
@@websquadron Thanks!
I know I've already commented, but I really can't get over how amazing this course so far (I say so far as I've not had enough spare time to consume it all). Is there a section on this video for setting the responsiveness to different screen sizes? This is driving me insane at the moment as I'm playing around with bricks builder on a staging site. Thanks Imran for all you do for the WordPress community. Its greatly appreciated :)
Thanks.
Not specifically for different breakpoints but if you watch how I build the Hero Banner then you’ll get a feel for using clamp to handle fonts, paddings, margins etc
@@websquadron I've followed your video and its all clicking in now. I paid for a bricks course and it's no where near the quality you've provided here. You're awesome :)
Big thanks
could i lock the header ie non-editable when editing a page to avoid mess around accidentally by users?
Imran, about the media settings, do you know where the triple images is stored and can be deleted? I don't see it visably in the media library, but I can see in the cache megabyte that it tripled just as you said.
You have so much gold in this video, it's insane. You are truly the most generous.
You’ll have to go to your file manager and then search for those images that you don’t want but be careful and take backups
@@websquadron Thanks! Found it. Do you know what the folder name will be after date and years are ticked off? Now I see it's called by year, but what will the name of the folder be for the new uncategorized folder?
When using Siteground Hosting, do you recommend to skip the setup Wizard and just do everything manually? Or are their plugins and setting good, because they are optimized for their hosting?
Absolutely. Just skip and add what you need.
great video as always, one lil request sir can you please make a movie streaming website in WP l
Where would the movies be streaming from?
Great tutorial Imranl! 1:05:19 is it possible to apply similar class based method in Elementor?
Not yet but I believe it’s coming soon
Great Video, thanks a lot. Unfortunately, the clamp calculations don't work for me, how they supposed to. They don't work at all with the font size and stop with the image, maybe at the tablet breakpoint. Does anyone know why?
What formula are you adding? And did you make sure that there are no pre existing values for the tablet entered?
Hi Imran, thanks for this resource. Is there a link to be able to download the images or do we have to source our own images to follow along?
Any images can be used. I just got them from Canva.
Hi, what would you recommend instead of wp grid builder as a free alternative? Thanks
Not really an alternative
Hello my friend, excellent video, where is the excell sheet with your formula? I dont see
For the font clamp?
Here: learn.websquadron.co.uk/tools/
this is awesome thanks lad ! , Does anyone know where exacly to find the snipped code ?> if i click the link i get redirected but im not shure what that code does .. is that the purge site code ?
It is yes
Hey, did you make one for elementor?
Yes here: learn.websquadron.co.uk
do images set as the background of a block load faster than just using "image" ?
Technically yes. By nano-seconds. Because the container is the house which you see first. The image is like furniture inside the house. Thus, you see the House/External Decor, and then the inside loads. But it is a minor difference.
哇
So far this bricks builder is one of the most buggy page builders i ever worked with.
Any body else has problems with a wiggling canvas that doesnt stop till reloaded? Not applying styles to the preview till reloading multiple times. CSS styles are not applying correctly to all elements containing that class, when class is applied i cant change font weight (i can change all other settings) and further more.
It feels really unstable so far.
Where u got the icons at 01:12:00 ?
Canva :) Saved as SVG and then used Vectorizer.AI to sharpen them up.
Can I use Boostrap as my custom CSS?
Indeed you could.
Imran! Can you make a tutorial on using filters in Bricks Builder?
The native Bricks Filter?
@@websquadron Bricks doesn't have own filters. Maybe Jetsmart Filters?
Bricks does have basic filters and a decent set for Woo as well. However they are only available for the Posts widget and not the Loop Query.
Hi Imran, thank you so much for this tutorial. I have one issue with mobile menu, that drives me crazy. When i open the mobile menu (click on hamburger icon) i cannot scroll - not in the menu, and not even outside of the menu). In portrait mode it does not make any problems, because all of the items fit in the screen, but when it come to mobile landscape, the last two items in menu does not appear, beacause there is not enough space on the screen. Which would not have been a problem, if i could scroll down, but i just cant. Its freezed.
Do you have any advice, please?
Thank you so much
i found the problem, its because i have set the height of Nav Items to be "fit-content", which is kind of bugging i think. I wanted my menu not to be fullscreen, so there is a small of a page content visible at the bottom of the screen. But i have decided to left it default full screen and its ok now, scrolling works fine. 👍
WP Meteor isn't really necessary?
That s great.... are you going to try to build a website just with css grid?
Not completely :)
@@websquadron sorry but i cannot find the code for purge site...
@@ericuk9481 it’s at the bottom of the link in the Timestamp: websquadron.co.uk/page-speed-performance-wordpress-code-snippets/
@Web Squadron thank you Imran 😊 🙏
Where can i find the assets to build this webiste (images/ graphics /etc)?
Canva
I tried your tutorial in the video in the discussion > Clamp() Calculation Generator.
but there was something strange about the results where I tried the formula directly from your website for 2.5rem and 3.5rem to get the results:
➡h1 {font-size: clamp(2.5rem, 2.03341rem + 2.133vw, 3.5rem);}
and in your video at minute 53:15 the result is:
➡h1 {font-size: clamp(2.5rem, 2.03345rem + 1.1333vw, 3.5rem);}
but when it was applied to brick builder v1.9 it didn't work at all.
maybe there is a new tutorial about this?
Thanks
What did you set as the Root HTML in the calculator, as Bricks uses 10px and not 16px.
By setting the container to 1100 x 600, won't it look quite small on screen sizes above, say, 1280px?
Depends on the layout and it helps to create padding without putting padding in.
Sometimes I go for 1400.
@@websquadron Is there a well-known class system that Bricks builders use similar to Client-First with Webflow? If not, do you create a class page for your projects to refer to later?
Where do I find the codes for the snippets
ruclips.net/video/P4nepzKE0Fs/видео.html
Codes: websquadron.co.uk/page-speed-performance-wordpress-code-snippets/
when I go to settings it shows only theme styles and page settings and no template settings , plus the edit header is not showing
Which version do you have?
@@websquadron 1.9.1.7
Did I miss the part on where to download the images?
It will automatically download them for you once you use BulkResizePhotos.com
Did anyone else have trouble uploading woff2 files into the media folder?
Could be the source of where the fonts were converted or uploaded from.
Why use bricks over elementor? Any one
It’s subjective and I use both
Speed, code quality and price for example?
function disable_google_fonts() {
return false;
}
add_filter( 'print_google_fonts', 'disable_google_fonts' );
This Code snippet is doing nothing.
Strange that as the snippet worked for me.
@@websquadron Did you test it without disabling google fonts in the bricks settings?
@@Mia_Bella420 Of course.
Why has Bricks become so popular? Breakdance has more features and more user friendly. Code output is clean for both builders, the speed is also similar.
Some of us don't like the Breakdance PR, but that is subjective. The Bricks creator had been very transparent and honest with delivery and connects well. I'm not paid or getting any affiliates for this video. I'm doing it because I care.
@@websquadron Super very informative video. Thanks for your helpful videos
Thanks for the fantastic tutorial, it’s complete and I’m able to follow it while I’m building my blog ☺️ I only have a problem with background colors & pictures. When I go to my front end, I can’t see any backgrounds on any page. I’ve tried to deactivate plugins just in case but that is not the problem. Any ideas?? 🥹
Do the images have https in their URL?
@@websquadron yes, all of them 🤔
where are is the full elementor course like this?
I removed that as it was slightly dated with some new changes. I created a new tutorial and course here: learn.websquadron.co.uk
@@websquadron i've checked before but i cant pay it. too much free effort before i know. thanks anyway that 1 hour video was best for me