Resize the text to 1 and change the alignment to centre. Click on the three vertical dots next to typography, select Appearance and change it to light. Then I will use my List View and select the Site Tagline block. I will change it to five pixels to bring the two parts closer together. Select the Group block in your List View and then scroll down to block spacing. And lastly, let’s modify our Group block with our site title and site tagline. ![]() The next thing we can do is create a bit of space between the header and the rest of the content on the page by using a Spacer block. Once here, we merely click on Replace and select the template part we just created. When I save the template part, I can make my way back to the home template. And lastly, I will change the background colour of the header to grey, and once I click on the colour, I can customise it as I please. And then select the parent block, open your sidebar settings and below justification select Space between items, and now you will have your site logo, site title and site tagline on the left and your Navigation block on your right. ![]() The next important step is to use your List View and select the Site Logo block as well as the Group block, and put them together in a row using your block toolbar. Next, make sure you select the parent block, click on the Inserter and add your Navigation block. Then I will go ahead and insert the Site Title block and below that the Site Tagline block. Once I’ve done that, I’ll open the List View, and after the site logo, I’m going to add a Group block as I want to stack blocks vertically. The first step is to add a Row block and then within the Row block, we will add a Site Logo block and select an image from our Media Library. This will take us into Template Editing Mode, which will help you to only focus on the header you are working on without any distractions. In this case we are going to call it Row block and click Create. We will click on Add new top right to create our own new header template part. ![]() Here is the list of template parts that come with this theme. Now, remember, a template part is a block type used for structuring your site such as headers, or footers. To do that, we will make our way to template parts. We are firstly going to create our own headers. You can customise this header or create your own. If we click on the Editor, it will take us into the Site Editor, and at the moment this template is using one of the headers or template parts that is provided by the theme. And this will give us access to the Site Editor where we will be able to manage our templates, template parts and site-wide styles. I have created the pages for my site, and I’ve installed a block theme, Twenty Twenty-Two. Today, we are going to build two different headers using various blocks and also look at how to add a header pattern. A typical header usually has a logo, a site title, a navigation menu and other elements such as social icons. It’s the first thing that visitors see when they get to your site, and first impressions matter. The header is one of the most important areas of any website. In today’s tutorial, we are going to create a new header using various types of blocks.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |