Bricks 101 Part 5 - Create a Header Template

Bricks 101 Part 5 - Create a Header Template - Bricks Builder

Рет қаралды 9,479

Күн бұрын

Templates are great for Headers. We'll cover how to set it up and create a Basic Header.
00:00 Intro
00:51 Create a Header Template
02:62 Add the First Section
04:49 Add a Heading to be the Logo
06:34 Style the Heading
08;56 Style the Parent Section
10:10 Add a Nav Menu
10:56 Address the Typography
12:29 Align the Container's Items
15:18 Padding to the Container
16:01 Styling the Nav Menu Further
19:28 Set the Display Conditions
We love to create - share - respond - and deliver.
🧐 Learn with our Mastery Modules: websquadron.co.uk/web-design-...
👕 Get our Merchandise: websquadron.co.uk/merchandise
😃 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 KZfaq Analysis: www.tubebuddy.com/websquadron
🥹 Support us: paypal.me/Websquadron
Hire us to work on your Website!
💌 info@websquadron.co.uk
👩‍💻 Visit websquadron.co.uk

Пікірлер: 28

@user-cr2sp7my8h 6 ай бұрын

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 KZfaq tutors!

@websquadron 6 ай бұрын

Fantastic!

@RichardWadeUK 2 ай бұрын

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"

@websquadron 2 ай бұрын

Now. I. Feel. Hungry.

@davidwalls2304 Жыл бұрын

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.

@websquadron Жыл бұрын

Indeed. As I push on the videos I’ll be adapting and showing off new tricks and tips to take things further.

@itsnelson123 Ай бұрын

I find the header the most complicated thing in Bricks.

@mubindidit230 Жыл бұрын

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.

@websquadron Жыл бұрын

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.

@mlhscanada1069 2 ай бұрын

Can you share a header and footer template? I had issues making them right in mobile view

@jugibur2117 Жыл бұрын

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?

@websquadron Жыл бұрын

You could set the Page Featured Image, and then add an Image Widget where it's based on the Featured Image.

@arosvalar Жыл бұрын

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.

@websquadron Жыл бұрын

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;}

@arosvalar Жыл бұрын

@@websquadron you are absolutely amazing my man. Thank you. Cheers 🤘🏻

@Thrive-WP Жыл бұрын

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.

@websquadron Жыл бұрын

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.

@Thrive-WP Жыл бұрын

@@websquadron thanks just wasn't sure if I was missing a particular reason. 👌

@mreclecticguy Жыл бұрын

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.

@kakenetit2 Жыл бұрын

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.

@barrystockdale3731 Жыл бұрын

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?

@websquadron Жыл бұрын

Hmmmm... which Browser are you using? And is your screen set to 100% default zoom.

@barrystockdale3731 Жыл бұрын

@@websquadron screen set to 100% zoom.

@fredpourlesintimes Жыл бұрын

Where is the hero?

@websquadron Жыл бұрын

The Hero comes afterwards :)

@vanessasorino6463 Жыл бұрын

Looks okay but it done nothing to convince me to change from Elementor - Sorry

@paveljanovec1094 Жыл бұрын

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) :(

@websquadron Жыл бұрын

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.