It worked! I just have created my first header for my bilingual website! So happy, and grateful for this tutorial, and all your other great work. If I ever win the lottery I come to the UK and take you and your whole family out for dinner 😀. You are definitely in my top 3 of UA-cam tutors!
Wow, this tutorial really dives deep into setting up a header template with Bricks Builder! It's great that they're emphasizing the importance of templates for maintaining consistency across multiple pages-definitely saves a ton of time. I appreciate the detailed walkthrough on structuring sections and containers, and the tips on optimizing images for web using WebP format are spot on. Looking forward to seeing how they flesh out the content in the next video!
Excellent video mate, superbly explained. After much delaying and distractions, I'm finally getting stuck into Bricks. In pure Macca's style... "I'm lovin' it"
Thanks Imran, I'm looking forward to the remaining videos in this series. I'm almost finished developing an Elementor website in Bricks but I'm sure I'll learn some better approaches during this series.
Hey Imran! Thank you so much for putting in the hard work. Loved all the bricks videos. Can you please make a video to create search pages and customize the search box? Maybe you can combine those to "Blog archive page" videos in this series.
Indeed. There’s many more to come. I’ll be modifying the header, hero banner, more sections, etc and then adding the blog etc and the search function and add some other customisation.
So is there any particular reason to have the container in this example? Could you have just had the logo and menu in the section? I'm just curious with all the div drama with elementor. I'm always thinking how can I make this with the least amount of div's, sections, containers or columns etc.
Normally I would have just done it with a section :) In the later videos I add some extra stuff so the container from the get go helps. But I’ll be reverting back to one section when I get to the Hero banner video. The videos are like basics and then they go up a notch with more advanced features and methods.
I think it also depends how you're designing the page. I have a site with a lot of content in blocks (boxes with borders) and so I start with a section, then wrap the eniter page in a single container. This way I can place a 2% padding on the left and right of that container so the boxes, and the text in text elements, don't bump into the edges of mobile devices. There may be a better way (I'm no expert), but it works for me.
You wouldn't use a "section" for your header in proper HTML semantics. Your header and footer are actually special sections that have unique semantic tags "header" and footer" and are important to use as they provide a landmark for Bots and screen readers to decipher where certain content is on a page.
Thanks for sharing Imran! Q: What could be the best way to have an individual header image plus text (or what ever) for each page? I guess we need ACF oder MetaBox etc. for building an input to insert an image, right?
How do you create hover effect like color change on the menu? Should be super simple but I can't seem to find a way how. I used the hover selector but when I change the color it changes the coler of every menu item. I just want to change the color or bg color of the item im currently hovering over.
I'll do a tutorial on that soon. It requires you to add a class id to the menu, and to then single out the active-menu item. Modify this code: .current-menu-item a {font-weight:800 !important;} .menu-item a:hover {font-weight:800 !important;}
Hi Imran. I am just getting to grips with Bricks and following your videos. I have a problem with scrolling. I cannot scroll down the widget panel as there is no scroll bar to click. I keep having to zoom out so that I can see everything. Can you help?
So they keep adding new functions there and it will be fully usable only from version 2.0, but it still has faster development than Elementor, where we have been waiting for Container in the Stable version for almost two years :D :D Unfortunately, Elementor goes the way of greater profits compared to adding new ones ( users of long-requested features) :(
I’m creating simple How To videos and I’m not trying to convince anyone to change from Elementor :) It’s more for those that don’t want to watch a 1-2 hour video. PS I’ll be modifying as we go along to show alternate ways - but just getting the basics in first.
I somewhat agree with you. However, I have jumped to breakdance, and I absolutely love it over elementor. I feel it's faster for production than bricks. But I want to like bricks for two reasons. I have a lifetime license, and development seems to be more active than breakdance. I have built sites with all three and I really like breakdance. Bricks is better from a developer standpoint and hopefully after building some more sites with it, I will learn to like it more and get more proficient at it.
It worked! I just have created my first header for my bilingual website! So happy, and grateful for this tutorial, and all your other great work. If I ever win the lottery I come to the UK and take you and your whole family out for dinner 😀. You are definitely in my top 3 of UA-cam tutors!
Fantastic!
Wow, this tutorial really dives deep into setting up a header template with Bricks Builder! It's great that they're emphasizing the importance of templates for maintaining consistency across multiple pages-definitely saves a ton of time. I appreciate the detailed walkthrough on structuring sections and containers, and the tips on optimizing images for web using WebP format are spot on. Looking forward to seeing how they flesh out the content in the next video!
Glad it was helpful!
Excellent video mate, superbly explained. After much delaying and distractions, I'm finally getting stuck into Bricks. In pure Macca's style... "I'm lovin' it"
Now. I. Feel. Hungry.
Thanks Imran, I'm looking forward to the remaining videos in this series. I'm almost finished developing an Elementor website in Bricks but I'm sure I'll learn some better approaches during this series.
Indeed.
As I push on the videos I’ll be adapting and showing off new tricks and tips to take things further.
Hey Imran! Thank you so much for putting in the hard work. Loved all the bricks videos.
Can you please make a video to create search pages and customize the search box?
Maybe you can combine those to "Blog archive page" videos in this series.
Indeed. There’s many more to come. I’ll be modifying the header, hero banner, more sections, etc and then adding the blog etc and the search function and add some other customisation.
So is there any particular reason to have the container in this example? Could you have just had the logo and menu in the section? I'm just curious with all the div drama with elementor. I'm always thinking how can I make this with the least amount of div's, sections, containers or columns etc.
Normally I would have just done it with a section :) In the later videos I add some extra stuff so the container from the get go helps.
But I’ll be reverting back to one section when I get to the Hero banner video.
The videos are like basics and then they go up a notch with more advanced features and methods.
@@websquadron thanks just wasn't sure if I was missing a particular reason. 👌
I think it also depends how you're designing the page. I have a site with a lot of content in blocks (boxes with borders) and so I start with a section, then wrap the eniter page in a single container. This way I can place a 2% padding on the left and right of that container so the boxes, and the text in text elements, don't bump into the edges of mobile devices. There may be a better way (I'm no expert), but it works for me.
You wouldn't use a "section" for your header in proper HTML semantics. Your header and footer are actually special sections that have unique semantic tags "header" and footer" and are important to use as they provide a landmark for Bots and screen readers to decipher where certain content is on a page.
I find the header the most complicated thing in Bricks.
Thanks for sharing Imran! Q: What could be the best way to have an individual header image plus text (or what ever) for each page? I guess we need ACF oder MetaBox etc. for building an input to insert an image, right?
You could set the Page Featured Image, and then add an Image Widget where it's based on the Featured Image.
How do you create hover effect like color change on the menu? Should be super simple but I can't seem to find a way how. I used the hover selector but when I change the color it changes the coler of every menu item. I just want to change the color or bg color of the item im currently hovering over.
I'll do a tutorial on that soon. It requires you to add a class id to the menu, and to then single out the active-menu item.
Modify this code:
.current-menu-item a {font-weight:800 !important;}
.menu-item a:hover {font-weight:800 !important;}
@@websquadron you are absolutely amazing my man. Thank you. Cheers 🤘🏻
Hi Imran. I am just getting to grips with Bricks and following your videos. I have a problem with scrolling. I cannot scroll down the widget panel as there is no scroll bar to click. I keep having to zoom out so that I can see everything. Can you help?
Hmmmm... which Browser are you using?
And is your screen set to 100% default zoom.
@@websquadron screen set to 100% zoom.
Hi, thank you for great videos, please shortcut your content it's too much unnecessary explanation, also avoid using 60fps videos!
Thank you for helping me to become a better UA-camr.
Where is the hero?
The Hero comes afterwards :)
Looks okay but it done nothing to convince me to change from Elementor - Sorry
So they keep adding new functions there and it will be fully usable only from version 2.0, but it still has faster development than Elementor, where we have been waiting for Container in the Stable version for almost two years :D :D Unfortunately, Elementor goes the way of greater profits compared to adding new ones ( users of long-requested features) :(
I’m creating simple How To videos and I’m not trying to convince anyone to change from Elementor :) It’s more for those that don’t want to watch a 1-2 hour video. PS I’ll be modifying as we go along to show alternate ways - but just getting the basics in first.
I somewhat agree with you. However, I have jumped to breakdance, and I absolutely love it over elementor. I feel it's faster for production than bricks. But I want to like bricks for two reasons. I have a lifetime license, and development seems to be more active than breakdance. I have built sites with all three and I really like breakdance. Bricks is better from a developer standpoint and hopefully after building some more sites with it, I will learn to like it more and get more proficient at it.