Build and Customize a Modern WordPress Front Page in One Hour | Paulina Hetman | Skillshare

Build and Customize a Modern WordPress Front Page in One Hour

Paulina Hetman, Developer & Trainer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
15 Lessons (48m)
    • 1. Introduction

      1:27
    • 2. Getting Started with WordPress

      3:47
    • 3. Welcome to Your WordPress Dashboard

      1:24
    • 4. Project Setup: Installing Theme and Plugins

      2:44
    • 5. Say Hi to the Customization Panel

      1:59
    • 6. Setting Our Front Page

      1:51
    • 7. Header Section: First Steps with Gutenberg Editor

      5:30
    • 8. Let’s Build the Motto Section

      2:03
    • 9. Building the Portfolio Section

      4:08
    • 10. Adding Interaction with Custom CSS

      8:51
    • 11. The Contact Section

      4:40
    • 12. Navigation: Adding Anchors

      2:31
    • 13. Navigation Menu

      2:57
    • 14. Sticky Navigation

      2:53
    • 15. Conclusion

      1:04
17 students are watching this class

About This Class

In this class, you will learn how to build a modern portfolio type front page with WordPress.

You will learn how to configure WordPress properly and how to level-up and use its content editor.

I will also show you how to add some personal touch with custom css. I will explain how css works and how you and add custom css to your WordPress website.

This class is accessible to beginners. I will guide you step-by-step from a fresh WordPress installation towards the outcome.

Still, it can be interesting and challenging for more advanced WordPress users who don’t have much experience with the Gutenberg content editor. And for those who would like to go further with the customization and start working with css.

You can see the demo of what we are going to build here.

To follow up with this class, you will only need a WordPress installation. I will also guide you through the complete website setup with one of the popular web hosting services.

A few useful links:

General: Style guide and images. 
Video 5: Google fonts
Video 10: You can follow along and code the introductory example with me here
Video 14: You can find the complete custom css code here

Transcripts

1. Introduction: Hi everyone and welcome to this video course. My name is Paulina, and I'm a front-end developer and trainer.I'm truly passionate about CSS and all that you can accomplish with it. I also work along with WordPress. I develop WordPress themes and plugins with custom websites for clients and give regular workshops. In this course, you'll be building a modern front-page with WordPress which we'll be a portfolio type of front-page. If you need to quickly build the website to feature your work, your art or your hobby, this class is just great for you. Still, if you're not interested in building a portfolio, I would suggest that you stay with us, because most of the methods that I'm going to share with you can be a useful way building any kind of WordPress website. I'll show you how to add some fearfulness dodge with custom CSS. You'll learn how to work interaction with CSS and how some custom code can improve the user 60 areas. If you are a beginner, don't worry, I will guide you step-by-step from the first WordPress installation through our final outcome. I will also provide you with all the assets. But in fact, you're more than welcome to follow up with your own ideas, your content, and your age. I'm really curious and would love to see what you will come up with. Are you ready? I'm ready. I'm actually excited. Hope to have in my students list and see you in the next video. 2. Getting Started with WordPress: WordPress is an open source publishing software that keeps gaining popularity. Some statistics say that already one-third of the web runs on WordPress, and this number keeps growing. Why WordPress is so popular? Well, there are plenty of reasons, but one of them is that it's relatively easy to start with WordPress, and it's also relatively easy to use it. In this video we will cover, starting with WordPress. To have a website you need a hosting and a domain name. Most of the hosting providers comes with some special WordPress offer. I will show you how to set up a WordPress website with SiteGround. SiteGround comes with three basic plans for managed WordPress hosting. For this project, I will use the startup plan since we don't need to have more than one website. Once you've chosen the plan, you'll be sent to the choose domain screen. I will register in your domain name, macy-jones.com. If the domain that you want to register exists already, SiteGround will suggest you a few alternatives. If you already own a domain name, you just have to check, "I already have a Domain" and type it in. Let's proceed. Next, you will have to set your password and fill in some personal information. You will also have to fill in the payment information. Macy is based in Europe and her main audience is based in Europe as well. So I will choose a data center based in Europe. You'll have some optional services like domain privacy or security scanner. You can track them, you can also add them at any moment later. I will click pay now, after the payment, SiteGround will send you a confirmation email. You can now log into your SiteGround account. You can access the login from the SiteGround homepage. Fill in your username and password, and that's what your SiteGround dashboard looks like. Choose the "My Accounts" tab, Next, choose "Go to cPanel", and this is your cPanel. Can you already see the WordPress icon? We'll be back here in a moment, but let's first install the SSL certificate. We'll do that so that the communication between the server and the browser is encrypted. Let's come down to the security section and click "Let's Encrypt." click "Install", next I'll be back to the cPanel, click the cPanel home button. Now, we can actually install WordPress, click the "WordPress" icon. Next, "Install Now." Make sure to choose the HTTPS protocol. We will not install our website in a sub-folder so you can leave the "In Directory" field blank. Set your site name and description. Next you will have to choose their WordPress Administrator, username, and password. You will need these two to connect to your WordPress dashboard. Make sure also to fill in your admin email. I don't want any preinstalled plugins, so I leave the select plug-ins checkboxes unchecked. We will do on our website from scratch. So I will uncheck the "WordPress Starter" box. Next, you can click "Install". Congratulations, in a short few minutes, you will have your WordPress website running. I should mention one more possibility, you can actually install and play with WordPress on your own computer. This way you can try new things before you get ready to buy a hosting, choose your domain name, and publish a website. It's also a great approach and there are a few ways to install WordPress locally. One of the most popular methods is installing WordPress with MAMP application that is available for Mac and Windows. There are plenty of online resources on how to do that. 3. Welcome to Your WordPress Dashboard: Say hi to your fresh work with installation. During installation, Wordpress adds a few elements such as, for example, this welcoming "Hello World" post. It also activates the default WordPress theme. It changes about once a year and right now it looks something like that. Let's start building our website. Let me show you how to connect to your WordPress control panel. First of all, make sure to be on your front page. To be sure, I click the logo, go to your browser's address bar and whatever you have there, add at the end, slash, WP, hyphen, admin, click "Enter" fill in your credentials and here we are. Welcome to your WordPress dashboard. You can always switch between the front end view and the dashboard view by clicking here. This black admin bar is visible only when you're logged in. Let's go back to the dashboard. One of the first things I always do when starting a new WordPress website, is to make sure that the search engines don't index it yet. It's too early. This website is not ready yet to be visible to Google so I go to settings, to reading and make sure to change the search engine visibility bugs, save Changes. Once I feel that my website is ready, I'll be back here to uncheck this box. 4. Project Setup: Installing Theme and Plugins: How does a WordPress actually work? When you add your content, it saved to the database tables. When someone visits your website, WordPress takes the raw content from the database and displays it in a way that is defined by the team. So when you change the theme, the same content can be displayed in a different way. Besides that, WordPress comes with plugins, are the functionalities that can be activated or deactivated depending on whether you need them or not. In this step, we will install and activate a new theme. Go to dashboard, appearance themes. What you can see here is that I have three themes in start and is 2019 that is activated. Let's add a new theme. You can find here three themes that have been accepted by WordPress to be available there is dashboard. We're going to work with Astra, Astra do display pages with a full layout with no sidebars or borders. It also allows to customize colors and sounds. So let's type Astra in the search field. Click Install, then activate. We're not going to use a statue template. So I just close this window and let's see what our website looks like with Astra. Let's go farther and install some plugins. We already installed three plugins, ultimate, addons for Gutenberg and custom colors palette for Gutenberg will add these two to level up our content. And either the last one will be fancybox for WordPress that will enhance our photo gallery. So let's go back to our dashboard. Plugins, add new, and in the search field, I would type each of them. Then click installing and activate. I guess I'm okay with the default settings, so I will just go back to plugins. Add new. Second one. That's this one by team C. Activate. Add new, and the last fancybox for WordPress. Install and activate. 5. Say Hi to the Customization Panel: In this video, we will set up colors and fonts using the customization panel. If you are in your dashboard, you can access it in appearance customize. If you are on your front-end view, you will find customize in your admin bar. Let's click it and start playing with the typography. Astra, the team that we had just installed, let's you integrate Google Fonts. Right now there are over 900 Google Fonts available at fonts dot google dot com. With Astra, all you need is to provide the name of the Google font that you want to use. I have chosen two type phases for this project, Poppins for the body, and a ultra board variant of Playfair Display for my headings. Next, let's set the colors. I used a yellow team color. Its reference is EABDL9. I will set the same color as the link color. The text color will be 222222. I use a dark gray 3D3D3D, for links in the hover state, whenever your mouse is located over the link. The last thing we need to do is to set up our custom color palette. These are the colors that we'll be ready to use in a handy way when we will edit our content. So we just have one color, the yellow one. Our black is actually 222222. Our dark gray, 3D3D3D. We do not need these primary colors. The last thing is to publish in order to save the changes. 6. Setting Our Front Page: WordPress comes with two basic types of content, posts and pages. Posts are like newspapers. They have a date and you stack them in a chronological order. Pages are more like books. They are made for static, timeless content. Let's start building our front page. It looks like a book. So I will choose page and let's give it a title. I will call it home, I will also add some text, publish it and let's switch to the front page here. Oops, nothing changed. Actually, it's normal. WordPress is basically a blogging platform. So unless you configure it differently, it leaves the most recent posts on the front page. We need to alter this default behavior by going to customize homepage settings. We want a static page, so I will select home. But on which page can we find recent posts now? Well, now we need to take care of that too. Let's add a new page. Let's call it blog or a news, and add it as post page. Let's publish. And now you've got your homepage on your front page. Let's have a look at what we are aiming to build. We need a full width layout without the page title displayed on the top. Most of that are possible with our team Astra. Let's go back to editing the page and have a look at Astra settings. We choose no sidebar, full width touch layout and we'll disable title and featured image and also enable the transparent header. Finally, click Update to save the changes. 7. Header Section: First Steps with Gutenberg Editor: Let's start building our homepage section by section. The first section we are going to build is the page header, with subtitle plus subtitle heading, any button. That's what we're going to add in this video. If you have already worked with WordPress but prior to version five, these editor can be completely new for you. WordPress five introduced a new content editor called Gutenberg. With Gutenberg, you've built your content with blocks that you can insert and rearrange. You have a paragraph block, a heading block, a gallery block, you can add some custom HTML, you can play with columns. We have also installed the Ultimate Addons Blocks to have even more configurable blocks. Let's start by deleting the first paragraph. Click here, More Options, Remove Block and we will replace it with a section. It's actually one of the Addons. Make sure to have it selected. In your right sidebar, you will have the settings that apply to your currently select blocks. Let's configure our section. It will be a full width section. Its role is the page header, so I will choose header as the HTML tag. It has the image in the background. Let me select the image and then upload it here, open and click "Select." I'll just set it fixed, which means when you scroll the page, the background will stay in place. I will also add some overlays so that the text that we will add to the header is more legible. Set your Opacity about 30 percent. I will also add some spacing, so let it be 280 in the top, 240 in the bottom, which can be too much on the mobile screen. I will decrease it to 120 in the bottom and in the top. Let's update the page and see what it looks like. Let's go back to the editor view. Make sure to be inside this section. The title and subtitle combo is in fact also one of the Addons and advanced headings. Click the plus button and add advanced heading. Let's fill in the text and description. "Hello I'm Mercy" is the main title of our page. I will give it as the H1 heading tag, which one's the highest level heading tag. I reset the font size to 72 pixels, color to yellow. Let's move to the subheading, 24 pixels in white. Finally, the separator in white as well. I will also increase the spacing between the text and our separator to 24 pixels. Great. That's at the button now. As you can see, when you search for button block, there are two types of button block, the native one and the multi button Addon. I prefer to use the multi-button because it comes with more options. Update it. It landed outside, but you can always drag it into the section. Let's edit it. We only need one button, so I will set the number of buttons to one. Let's edit it. It should send us to the portfolio section, but it's not ready yet, so I will leave this field as it is for a moment. We'll come back here when we were work on the navigation. I set the font size to 24 pixels, horizontal padding to 16 pixels and the vertical amount to 24 pixels. I set the text color and the border color to white. Now, let's set the Hovers date styling. When the cursor is located over the link, we want it to have a white background. We want the text to be in dark gray. We want also the border to be white. Let's update the page and check what it looks like. I guess that there is not enough space between the heading and the buttons. Let's go back. You can actually always add space or block if you need to add some vertical space between the elements. Let's assert its height to side 32 pixels. Let's update and see what it looks like. Great. I'm really happy with this outcome. 8. Let’s Build the Motto Section: In this part, we will not use any new types of block. I would just like us to have a little more practice before we move on to the main portfolio section. In this video we'll be adding a four way section with a solid color background, and a heading. Let's be outside our header section, you have access to the recently used blogs, let's click the "Section" icon, set it "Full width". The background type to color in yellow, let's set the top spacing to 72 pixels, and bottom one to 48 pixels, and let's add the advanced heading block. I'm okay with the H2 heading, the second top-level heading, let's set the font size to 48 pixels, the color to white, and the font size of subheading to 24 pixels, separator to white, and again I will increase the spacing to 24 pixels. Let's update the page. The pre-selection of colors that we have in our right sidebar comes from the custom colors palette settings. We installed the custom colors palette plug-in, and configured it one of the previous videos. I would just to remind you that if there are any colors that you'll reuse within this project, you could add them at any moment, you need to go to "Appearance" "Customize", "Custom color pallet", and you can add them to have them available in a handy way. 9. Building the Portfolio Section : In this section, we'll be building our portfolio section. It has two columns that stuck on mobile screens. The first one has a heading, an image and some text. The second column contains a photo gallery. Since in this part, we use a two columns layout. We will use advanced columns block instead of the section block. The advanced columns block is also one of the add-ons. Let's start by adding color elements to the columns. The first one is a heading. I used advanced heading, but I will configure it a little bit differently. The heading is an H to tag, my work is a sub-heading, discover my portfolio. I will say it's 48 pixels for the heading in yellow. Subheading on the 18 pixels. There will be no separator at all and I'll set the spacing to zero. Let's align our heading to left. Next, let's add a spacer element and make it 32 pixels high. Next, let's add an image. We'll use a native image block. It's always a good practice to fill in the alternative text. I will type Macy Jones here. Click "Select." Finally, let's add a paragraph containing our longer description. In the paragraph scholar settings, I will set its background to a light gray. Let's switch to the second column, it will contain the image gallery, also a native but it's not in the red column, but you can always drag it. You can upload all the images at once and you need to make sure to set link to media file. Great, we don't want our columns to have equal widths. It's possible to be done with advanced columns, so setting the first column and set it's content with 225 percent and the second one to the remaining 75 percent. Now, let's start working our whole columns element. We'll add it some spacing, 160 top and bottom. I get something like half of it on mobile screens. The advanced column black comes with shape dividers, design these yellow way shape here and in the bottom, the black one. I think they create a nice visual of transition between the preceding and following sections, so let's add them. You have this shape dividers tab, I choose waves. For the top one, I choose yellow. I said that the height of 80 pixels and I do the same in the bottom, I just change the color to black and again, 80 pixels. Let's update this page. Do you remember that we installed that fancy box for a WordPress plugin. Now, we can see it in action. When I click one of the gallery integers, it opens this fancy Light box Gallery. If you don't have this effect, make sure that first you installed and activated defensive box for WordPress plug-in, it needs to be activated. Second, in your gallery settings, you need to have your Link to set to media file. In the next video, I will show you how to add some interaction to the gallery images with custom CSS. It would add some personal dodge, but also give us strong hint to users that the gallery images are clickable. 10. Adding Interaction with Custom CSS: Let's have a look at this page. What we can see here is how your browser reads and renders an HTML document coupled with a CSS style sheet. HTML is a structure of tags that categorize different parts of the content. Tags consists of an element name like p or a section surrounding by less than and greater than symbols. The content is wrapped between an opening tag and a closing tag. In the closing tags, we added forward slash before the tag name. For example, here we use p for a paragraph element. You can also use H1 or H2 for the titles, ul for an unordered list, and you will use li for the list items. Very often you will put elements inside other elements, this is called nesting. You can also have elements that don't need a closing tag because they don't have any content. The most common example is an IMG tag that is used to insert an image. Elements can also have attributes. One of the most common is the class attribute that comes in handy when we work with CSS. Speaking of which, CSS is the code that style your page. Let us see what happens if I remove the CSS from this page. Well, I prefer to put it back. Let's have a look at how CSS works. H2 text-align center means, hey, browser, look for all second level headings and center them. In general, the structure has to be selector, opening braces, property, colon value, semicolon. If you want to add another property to the same selector, second property, colon, its value, semicolon and very important close the braces. Let's put what we've just learned into practice and play a little bit with CSS. Let's add some more styling to this page. First, lets give more tips and tricks coming very soon phrase, some yellow color. It's a paragraph, I will type p, opening and closing braces, color, colon, eabd09 semi-colon. Great, it's yellow but there is a problem. There was one more paragraph on this page and now it's yellow on the yellow. I actually only want to tie the paragraphs that are within that section. To do that, you need to have section space p. That means that you only select the paragraphs that are within the sections. Now let's have a look at the designer and photographer paragraph. Do you remember that I mentioned that class attributes are useful when working with CSS? Well, this paragraph has a class subtitle. You can select it by typing.subtitle, which means, let me choose all the elements that have class subtitle. I will give it some transform. Transform and I will rotate it. Rotate, now I'd like to show you how to add some interaction with CSS. Macy says that these are her secret tips, lets add some blurred to list items. It's possible with the CSS filter property: filter; blur,10 pixels;. Now we can't read them anymore. Let's reveal each tip on the mouse hover, to enter styling in a hover style you need to add:hover, and now we insert filter; none. Let's check it. Yeah, it works. We can also add some transition between the hover and unhover states. When I add transition:1 second;. It means that if something about li changes, it will take one second. Now let's go back to our image gallery. Let's look at the effect that we are aiming for. When I hover the gallery, all images are desaturated and scale down. Only the one that is actually directly under the cursor is in full color and size. We need to know what selectors to use, which means we need to look into the HTML structure of this page. Web browsers comes with what is called inspectors. I find the one built into the Chrome browser as the most easy to use. I'm in the Chrome browser. Right-click, Inspect. This opens these inspector sidebar. This is your page HTML structure. Yes, this page structures is much more complex than our previous example. You can use these icon to navigate to the part of the HTML that corresponds to our a gallery. Now I can see it's the, I mean the column. Inside the column I've got an unordered list with list items containing a figure, a link and an image. What we are going to style are the images that are within a list that has a WP block Gallery class. To add some custom CSS with WordPress, you can use the customizer panel. I have already opened the customizer panel in another window. It's in additional CSS tab. Let's type WP block gallery. When it's hovered the images, this saturated, there is another filter. It's called gray-scale,100 percent. Also, the image is scaled down. It wouldn't be a transform property, transform, scale and they scale down. Let it be 12.95, it's not in percent here. Let's check it. Now, when I hover an image that is within the wp-block-gallery class, the image that is directly in the hover state, has no filter at li and is transform value is scale 1. It keeps its regular size. Let's check it;. Yeah, we just need some transition. We will add a transition to the integers that are within the wp-block-gallery class. Copy this one, wp-block-gallery image, opening and closing braces. Transition one second, which means whatever changes about the images within the wp-block-gallery class, it will take one second. Let's check it. Yes, great. We've just added the interaction to our gallery. 11. The Contact Section: In this video, we will add our contact section. We will have a full width section with black background. Just make sure to use the same background color that you set for your portfolios bottom shaped divider. Add a section block select it, make it full width with black background. The vertical paddings are 48 pixels in the top and 64 pixels in the bottom. Let's move to our heading. It will be an h2 tag in yellow, 48 pixels, contact me. The subheading, 24 pixels, white. I set the separator, white. I will increase the default spacings to 24 pixels. The next element is the bottom, but I will insert a spacer first and make it 48 pixels high. Now, let's talk a little bit about the role of our send me a message bottom. Wordpress, does not have contact forms built in. If you want to add a contact form, you'll need to install and activate a plugin. There are a few great plugins that allow you to do that. Contact Form 7, WPForms, or Ninja Forms are few great examples. But we are not going to cover contact forms in this class. We'll go for a simpler solution. A bottom with a mail to link. Mail to links are links that point to am email address instead of a web page URL. When someone clicks a mail to link that person's computer opens their email client with the sent to e-mail address being the one specified in the mail to link. Let me show you how to set it. We will add a multi bottom blog with just one button. It will have yellow text and border and yellow background and border on hover. I type in, send me a message. That set the link to be mail to link. You need to start with mail to without spaces. Column, not spacers insert your email address, something like my e-mail at my domain.com. Okay. Now, let's add another spacer. Actually, you can also duplicate the first one and move it down below the bottom. [inaudible]. Why not encourage your visitors to follow you on social media and exchange with you this way. Another paragraph with white text color centered. Or let's meet on social media. Then let's add the links to your social profiles. Once again, [inaudible] come in handy. There is this icon list block that we are going to use. I will center my icons. There will be two icons. I open the general tab, I will choose horizontal and hide labels. I just want the icons without tags. The first one is still my Twitter account. Well, I chose the Twitter icon. I make it white and yellow on hover. I will copy paste my Twitter's profile URL. Let's send a second one that it to be Facebook. Again, it will be white and yellow on hover. Great, we've just built our contact section, so let's update the page. 12. Navigation: Adding Anchors: In this video, we will work on one of the most important, absolutely crucial aspects of any website, the navigation. Do remember that in our header section, we added the See My Work button. It's meant to send the user directly to their portfolio section. How can we accomplish that? You can navigate within the page from one spot to another, within the same page. To accomplish it, you need to have a link and an anchor that are coupled together. With an anchor, technically, it can be any HTML element that has an ID. If you have a section with an ID equal to portfolio, you can couple it with a link to hashtag portfolio. When you click this link, you will be sent to the portfolio area. The problem is that Gutenberg, at least at the moment, does not allow to add IDs to the sections. What we will do is to add some custom HTML to create the anchors. Make sure to be positioned right above the portfolio section. We'll add a custom HTML block. We will add an empty div with the ID portfolio. The div is the most neutral HTML element. If you add an empty div, it should stay invisible on the screen without any additional spacing. Let's type the div opening tag. It's really important not to forget the closing tag. It's the same, but with a slash. To enter an ID, you need to add in the opening tag, space, ID, equals, opening quote, closing quote, and within the quotes, portfolio. I will copy this and I will do the same for the contact section with the ID equals to contact. I add a custom HTML tag, paste my code, change portfolio to contact. We will use these later while working on our navigation bar. Let's go back to our header button. Now, in the link field, we will set hashtag portfolio. Let's update the page and check if it works. Great. 13. Navigation Menu: Let's have a look at our header bar in the homepage settings we named the transparent header, but it's default font color is black, and it's not enough legible. Let's fix it. I already opened the customizer button, lets choose, colors, header, transparent header, and make sure that the site title, color, and link color are set to white, let's publish the changes. What you can see in the right of the navigation bar is the list of the pages that are published on our website. We added the home, and block pages ourselves. Now the sample page was created by WordPress during the installation process. We don't really need to this page, let's take a moment to delete it. Let's go to our dashboard pages, all pages, and put the sample page to trash.I will also empty trash immediately, let's go back to the frontend view. You can replace this default to list of published pages by a custom navigation menu, and that's what we will do now, let's reopen the customizer panel, choose the menu tab, click creates new menu. You can call it whatever you want, I will call it top, it's a primary menu, click Next, and let's start adding items to our menu. I would like to have a home link, and blog link, but also links to the portfolio, and contact sections. Let's first start home, and blog. How can I upload volume section? It will be a custom link. I added the link text put portfolio. What about the URL?The first rednecks could be to type hashtag portfolio. But actually it's not correct. It will work only if we navigate from the homepage. Imagine that you are on your blog page, and click a link with hashtag portfolio. The browser will look for a portfolio anchor within the blog page. What we need to do is to precede it with your homepage URL, and slash. I will copy my homepage URL from the address bar, the bar that is before the WP admin, and I will paste it here add to menu. I'm going to do the same for the contact. Hashtag contacts, there is the link text contact. I would change the order of the items, publish aid, and let's test if it works. Great, but as you can see, we need to scroll back to keep navigating. We will take care of that in the next video. 14. Sticky Navigation: The sticky navigation that stays in place when we scroll, usually fixed to the top of the screen, is a common pattern in web design. For the usability reasons, it is really appreciated by most of the users. There are some WordPress teams that provide these type of navigation. It's not the case of Astra, at least at the moment. But we can obtain these behavior with a small amount of the CSS code. Let's do it. I've already opened the Dev Inspector. Let's try to select the element that corresponds to the whole top bar. I move the cursor. It seems to be this one. The CSF propriety that is responsible for some special positioning of an element is called position. What we can see here is that our element has positioned set to absolute, which means that it's positioned in some precise way within some other element. We want it to be positioned in a specific way but in regard to our screen, in this case, instead of position absolute, we should use position fixed. We want to fix it to the top left and right border of the screen. Let's copy the selector and go to Customizer Additional CSS which I have already opened. Let's "Copy," let's "Paste it," open the brackets, position, colon, fixed semicolon. Let's go. Yes, it works. We just changed the positions from absolute to fix which means we change the element that says the coordinates to be the screen. The only problem is that when we scroll, we've got white text on white background. We need to change the background. We can add some semi-transparent background using the RGBA color format. For example, RGBA 0000. 4 corresponds to the black color with 40 percent of opacity. Yes, I like the result. I'm pretty happy with now. Let's publish the changes. Let's check whether it works also on small screens. Perhaps it seems there is a problem with link colors on mobiles. Let's go back to customize, colors, header, transparent header. Yeah, we actually can change the link colors for mobile screens. I will set it to black. Let's check whether it works. Yes, now it seems okay. Great. 15. Conclusion: We've reached our last video. Thank you for staying with me and completing this course. It was a real pleasure for me to build this material. I hope you enjoyed it too, and that you learned a lot of useful things. What is really great with this project, that you can go much farther with it now. What about adding more different sections to your homepage? There are plenty of great Gutenberg blocks and add ons that we haven't covered in this course. Make sure to check them out. Maybe you will want to play a little bit more with custom CSS or add more pages or develop the block section. There are plenty of possibilities. The sky is the limit. I'm really curious and would love to see what you came up with. So please make sure to share your project with me and the community. I would also love to hear your feedback. If you have any remarks or tips on how I could improve this course, please let me know. Hope to hear from your very soon. Thanks again.