In this guide, I will show you how to create your own website step by step. Perhaps you need a company website, or maybe you are a freelancer? Do you need a website for a photographer and filmmaker? Or maybe you work in the construction industry? Or maybe you are a musician? Maybe you are a personal trainer, or perhaps a trainer or coach? Do you sell books? Or maybe run your own podcast? Or maybe you have a hotel? Regardless of what you do, you will be able to create a website tailored to your n
eeds. Just choose the specific template you see behind me and I will show you how to change every element on the page step by step. I will show you how to change photos, texts and other elements such as a blog or contact form. I will also show you how you can create texts for a website using artificial intelligence. The entire website creation process that we will go through consists of five steps. The first step is to purchase a domain and hosting. The second step is to install WordPress. The t
hird is to change the appearance of your website. In the fourth step, we will add additional functions and improvements to your website. The fifth step is testing and launching your website. In the description of this video you will find the most important links and additional materials that will help you throughout the process. I invite you now to take the first step. The first step to creating your new website is to purchase a domain and hosting. The domain is the address of your website, and
hosting is the place where all the files, photos and other elements that are needed for the website to work will be located. Personally, I have been using the Polish hosting company LH Kropka pl for years and I recommend this company to my clients. Now go to the link you will find in the description of this video and I will show you how to buy a domain and hosting. When you click on the link in the description, you will be redirected to such a page and 4 hosting packages will appear before you.
If you need a simple business card page for your company website or you run a blog, then these initial packages, either the Orange package or the Kiwi package, will be enough. I think kiwi is the optimal choice because we already have 10 GB of data space, so we can also store mail here. If you want to create an online store or a course platform and need more resources, then choose the higher Mango or Apple packages. Here we have another switch. If you click here, you will see the gross price. If
you choose a given package, click I choose. You will be redirected to such a website and here you can buy a domain right away. Just click here and enter the domain name you would like to use in this field. I enter my domain name that I would like to buy and click the Check button. If the domain is free, you will receive a message that the domain is free and there will be green information here. We can click here and add it to the cart. If the domain is taken. For example, if I were to enter the
name of my real website here, which exists, we will see red information that the domain is unavailable and then I could buy a domain with a different extension, e.g. com, pl or eu, or I would have to enter another proposal here. I choose the NetGonet system domain and go to checkout. Now, to use the discount code, click here and enter the discount codes that you will find in the description called NetGonet, then click Add and you can now click the Order button. Now click Register in 15 seconds
and choose whether you want to set up an account for a company or an individual. You can switch between these options here and if you have a company, you can enter your Tax Identification Number and the system will automatically download data from C and DG. I am setting up this account for a natural person, so I will enter all the data here. In this field you must enter the customer ID, i.e. come up with the name you will use to log in to the LH system and then enter the password. You can genera
te them automatically. Click here. Click on OK. Now copy this password and write it down in a safe place. So that you can log in to the system later. You must enter your phone number, email address, consent and click Register Account. If you have entered all the data correctly, you will be redirected to a page where you can click Order and now select a payment method. It is best to pay online, because then the transaction will be faster and your account will be activated immediately. I click pay
online and now I have to log in with the code that was sent to my email. I enter the code and click the Confirm Code button. If you have not received it, you can click Generate a new code or look for a message in spam. I click Confirm Code. I will be taken to my panel where I can pay the invoice by clicking here pay invoice. Then select the payment method, I choose BLIK and click pay for the selected last confirmation and I can enter the BLIK code. If you've made it this far, congratulations. Y
ou have purchased a domain and hosting. Now. Installing WordPress. First, go to the website's servers. Now click Add, enter your domain name, i.e. the name you purchased earlier and click Add. If the domain is correct, the new page will be added in this way. If something went wrong, make sure your internet domain is listed in the domain tab. Now I need to go to the website and activate the SSL certificate. Fortunately, at LH this is a free service. Just click here and you can enable SSL. This pa
id certification is available to larger companies. If you are creating a simple website, the free one and click enable will be enough. If everything went correctly, you should receive a message that the certificate has been launched. If an error occurs, wait a few minutes and try again. Now that the certificate is active, we can proceed to install WordPress, the system in which we will create our website. Now I click on servers and then on auto installer. Now I need to click Create MySQL Passwor
d. Generate a password. You can save them in a safe place and click Create. Now click on. Now click the New button. Then select your domain name. Click next. Enter a page title. In this field you can create your administrator login with which you will log in to WordPress or copy the one that is currently visible. Then enter the e-mail address that will be used to operate the website. Once all details are entered, click Install. On this page you will find all login details. And here again, save t
his entire page. Copy it to a safe place, preferably a password manager, so you can access it as we move on. The most important information for you will be information about logging in and password to the WordPress system. And we also have a login page. This is what your new website looks like. Now we will move on to configuring the entire system to suit your needs. But the first thing we need to do is repair the SSL certificate. Because if you enter http here and click Enter, we get information
that the website is not secured, so we need to correct this element. And to do this, log in to your WordPress, i.e. click on the login link located here or you can also enter wp admin. This way you will be able to log in to your website and enter the login and password that were visible on the previous page. This is exactly where we have the login. And the password. Now log in to WordPress. Now you will be redirected to your WordPress administration panel, where you will be able to perform all
the necessary operations to create a website. After seeing this guide, he will have no secrets from you. First, let me briefly explain what's here. In the Cockpit tab we have updates and a general overview of information from the website. We can create blog entries in entries, i.e. elements that will be visible on our blog. Here we have the first sample entry and it needs to be removed to avoid clutter. When we delete an entry, we must also remove it from the trash. Then it will disappear from o
ur site forever. Here we also have categories and tags and we can create our entries. Then we have the Media tab where we can upload various photos and elements. We have a comments page. Here you can manage the comments that are on our blog. And here we still have the appearance of the plugin and users, but we will go to the settings and here we need to change a few things. In the general settings, we must enter the letter S in the WordPress address. We do the same for the website address and it
is related to the correct operation of the SSL certificate. And we'll come back to that in a moment. Then click Save changes. Now go to the Permalinks tab and here select the post name. This way, each new page you create will automatically have an address that will include its name. So if you create a page, e.g. offer, your address will be as follows. NET System dot pl offer. If you create a Contact subpage, it will be go net system dot pl slash Contact. I save the change. Now we need to comple
te the implementation of the SSL certificate on your website and to do this, go to plugins. Plugins are software that add new capabilities to your website. We have two plugins installed here that we don't need, so I'm going to click mass action here and remove. We are removing these plugins from the website so as not to clutter us here. Then click Add Plugin. Enter the name htaccess File Editor here and click here Install and then Run this solution. Now go to plugins, installed plugins and click
Edit. htaccess File. I go down, click that I understand and here I have to add such text. I copy it from my NetGonet website. You'll also find it in the description of this video at the top. I click Enter and paste this text, then save the changes. If everything went correctly, we can exit this plug-in and check whether the certificate works properly. I go to my website, click here and enter the address starting with http. Now I click Enter. If you don't get a message saying that the site is da
ngerous, the site is at risk. Different messages are displayed in different browsers. Then we can consider that our certificate is implemented correctly. If you have any doubts about this topic, please write me a comment. Now I'm coming back here. I click on plugins. Disable the plugin and remove it. We can safely remove it. Once the plugin is removed, we can move on to the next step. The third, and in my opinion the most pleasant, step is changing the appearance of your website. I will show you
how to install a theme and change the appearance of individual elements on the website. First, go to the Appearance tab and then go to themes. The theme will largely determine the appearance of your website. On a WordPress site, you can only have one theme active at a time, and that one is currently active. By default, we can remove these two. So I click here and click the Delete button. Then I will have more order on the page. I won't have unnecessary elements here, but we won't use this defau
lt theme. We will install the Astra theme. To do this, click here on Add a new theme. Then type Astra here. The Astra theme looks like this. Click install, and then you need to run the theme by clicking the Enable button. The Astra theme has been installed and here we immediately see an advertisement for the plugin, thanks to which we will be able to install templates. But if this ad is disabled, I will show you how to install it manually. You can do it this way you will go to plugins, Add a plu
gin, then in the upper right corner enter the following password: Astra Starter templates and install the first plugin. It has over a million active installs. I click install and run this solution. Now you will have to choose whether you choose classic templates or AI-generated templates. For now, I suggest choosing the classic solutions because it works much more stable. Now you choose the so-called Page Builder, a tool that allows you to edit pages in a simple way. In this guide, I will show y
ou how to create a website using a mentor, one of the most popular Page Builders in the world. Now you can search the template database and here you will find free and paid templates. The paid ones are marked premium and if you don't have a Pro theme, you won't use them. If you would like to buy the Astra Pro theme, you can find the link in the description of this video. We will use the free version in this guide. You can filter these templates by categories, e.g. select business categories. And
here we have various business websites, for example this one. And after clicking, you will be able to browse the entire template, see what individual subpages look like and decide whether this template is for you. If it turns out not to be the case, just click the cross and you can go to the next template and see if this template suits you, e.g. Here we have more tabs and more subpages and you can see what it all looks like in the live preview. In this guide, I will show you one specific templa
te, but you can choose any of the available ones and adapt it to your needs according to what I will show you step by step. I click on the selected template, then I can send the logo immediately, but we will skip that for now. I click Continue. Here you can choose the colors of this page, so you will immediately have a default color palette that you can use. I like this blue color the most, so I'll leave the default colors. You can also choose fonts for this website by clicking here. You can of
course change it later, but I think it's worth choosing the ones that suit you best. And click Continue. Now the process of importing this template to your website to your hosting will take place. Here, all you need to do is uncheck the last checkbox and click the button. Now all the elements are imported to the website and if you have a slow internet connection, it may take up to a few minutes. For me it took about 30 seconds. If you received an error here, you can try again or choose a differe
nt template. If you have a specific problem, you can write it in a comment and I will try to help you. Now you can click View your web site. The website now looks unrecognizable. All the items should be imported and we'll move on to editing them in a moment, so you can change every item you see here to suit your needs. First, we will edit the header, then we will move on to the footer, and finally we will change the content of our subpages. If you are logged in to the website, you should see suc
h an administration panel here. And here you just need to click Customize. You can enter this place from the cockpit. All you need to do is go to Appearance and adjust here. These are the same options. You will be transported to such a place. You can edit the header in the Header Builder tab and here you will have two options. Here is a very important moment where many people make a mistake and get lost. Listen carefully because we have two types of headline. We have a transparent header, i.e. o
ne that does not have any background behind it, and we have a classic header, which has an embossment. It can be, for example, black inscription on a white background, as on my website. This template uses a transparent header, i.e. Transparent Header, and we can click here. And we can change various elements. You can choose to have this header type active on every subpage. This means that if you create a new page, the header will always have no background. You can change the logo. The first logo
is classic, and the second will be displayed for Retina screens. Then we can change the width of this logo, i.e. you can use this slider to change the value in pixels and we can set it manually. This needs to be adjusted to the size of your graphics. The logo is an optional element, but I think it's worth adding it to the page because users are used to clicking here and being redirected to the home page. Additionally, the logo is an element of your brand image, so it is worth taking care of it.
If you don't have the opportunity to hire a graphic designer yet, you can generate such a logo in one of the graphic programs, e.g. Canvas or Chat GPT. In the paid version, the paid version of Chat GPT allows you to generate images and here we can enter such a simple command. This is, of course, a big simplification, but you can start with this and see if the results you get will be OK for you. That is, create a logo for the company that deals with. And here you must enter what this company doe
s. I will write here, for example, creating websites. Use colors. And here we can enter the colors we want to obtain. It is best to enter it in hex code, i.e. we just enter the hash and the color code. If you don't know these colors, there is a website like Adobe Color Will and you can move the color you want to get here. This slider shows the main color. And here we have the colors. Then just copy this color and paste it into the chat command. Then add the style in which the graphics should be
created, e.g. modern style. I send such a message and now you have to wait until the chat generates this photo. I would like to remind you that to use this system you must have the paid version, which currently costs $20. I can download this logo to my computer by clicking here. I go to such a website and upload the file. This has been removed. I can download such a file. And upload to my site. Now we can insert a new logo. Just click on the Change Image button and now upload your computer's fil
e. I click Select File, then click Select Image. The logo will be replaced. But what happened here? Because it's not visible on the website. This is because the second logo is not replaced. And here you could change this image and upload it twice as large as this one. Or you can deactivate this option and then the logo will be replaced. I'll keep this logo because it looks much better on this website. The horizontal logo here will blend in better with the rest of the page. If you are going to cr
eate your own website, you must of course change them. Now we can move on to the individual elements that we have here to edit. In the Design tab we have a lot of color options and here we can change the colors of each of these elements. You can, for example, change the color of the text located here. You can change the color of the button. Here we have the default button colors and here we can set it to be this color. The more navy blue circle is responsible for two button states. In this case
we have a normal state, i.e. the one we have now, and we have a hover state. If we go to this element, the text color changes. If we gave something like this, the button would turn white. We can do the same in text. The normal color is the default and the hover color may be more navy blue. And we have this effect right now. These are details, but it's worth knowing about them, because if you don't take care of such elements, the website simply won't look good. If you want to change the layout or
add some element for navigation, then we have three bars here. Each of these bars will have the ability to add a new element when hovered over. We have a plus sign here and we can add a new element here, e.g. links to social media. If I left it like this, the links would appear at the top. If you would like to add them to the navigation, just move them here and we have our social media icons. In my opinion, it is better not to add icons to the navigation, because this way you encourage visitors
to leave your website, and that is not your goal. However, if for some reason you want to add some icons, you can do it this way. And we have social options. If I click here, I will be taken to new options and here I can add various links, e.g. phone, which is also a good option. I can add a phone, click Add icon and here I can enter my phone number, which will be automatically dialed if someone clicks on this icon. If you want to hide or remove an element, just click here and the icon will dis
appear. In the Design tab, you can change the colors of these elements, e.g., make the icons white and turn navy blue when hovered over. This is how it will look like if you want to leave such an element, but I don't want it, so I click on delete here. Then we have navigation elements. If you click here, you can change the width of these elements. You can change all settings regarding the style and color of these links. I'll leave it at default because I think it's pretty cool. An important elem
ent is the order and what is in the navigation, but we will get to this a little later. The last element is a button, click here and here you can enter text, e.g. contact. We can enter here a link to the page to which the customer is to be redirected. In the case of this test page, this is what the contact page looks like and I can choose here whether this page should appear in a new browser tab or not. This is what the basic settings look like. If you would like to change the size of this butto
n, we have the Space, ink and padding options here. And here we define what the button should look like, i.e. how large the spaces between these elements should be. We have four tabs at our disposal and each of these. We have four values at our disposal and we can edit each of them to adjust the appearance of the button to our needs. If, for example, you want to make this text bold, you go to fonts and here we have the White font and choose, for example, 700. Then this button will be bold. I l
eave it at the default value. If you would like to change the order of these elements, just drag the navigation to the center here. The button may also be in a different place. You can also add these items on separate lines. Thanks to this, you can create a fully functional navigation. Once you've made your changes , click the Publish button so that everything you've done is saved correctly. Now let me show you an example. When you read a template that has an Opaque heading, I have loaded a diff
erent template. This time the header has a white background. And unfortunately, some things have changed. We have to fix them. I go to customize. First of all, my logo is invisible because we have a white background and the logo is also white, so I have to go to the header builder for site title and logo. And here I change my website logo to a logo that has some color. I choose graphics with color. Then I go back to the Header Builder and here I can change our elements, e.g. make our button not
white when hovered, but have a color, e.g. we can choose to make it darker. Well, in this case we also need to change the text color, so it will look like this. The same applies to navigation. We can click on the Primary Design menu and here we can change, for example: text color in links or background color. Suppose I want to change the color to black. I can also use this slider and on hover make this link be dark blue. We have just such an effect. In the case of buttons, we have a third Active
option, which is the active color. If the customer were, for example, now on the About page, this link will be red. We can also change the fonts that will be included in the navigation here. We can make them bold. And you can save such options. Now we go back to our home page and go to the footer. Now I'll go to the bottom of the page and we'll change the appearance of our footer. You can find the footer settings in the Footer Builder tab and here you will find so- called widgets that can be ed
ited in any way. Just click here, for example, and we have the logo and text. This logo is invisible because it is in the form of a white photo, but it has been pasted here in such a way that I just need to click on Add media and, for example, I will select the black one and then after refreshing such a photo will appear. If you don't want this item, you can simply remove it by left- clicking it and clicking the Delete or backspace button and it will go away. You can remove each of these element
s by clicking the cross here. If you would like to change the settings of these elements and adapt them to your needs, just click on a given element and you will find all the settings here. We have general settings, which include elements such as adding a link or adding another social icon. And the Design tab, where we can set stylistic options that look very similar everywhere. We have balls in which we set colors, we have sizes and elements that are used to position a given solution. If you wa
nt to add something to the footer, just click on the plus sign and you will be able to add available elements here. I will remove all these unnecessary functions. And I leave something like this. Copyright WordPress Course. And here we have the year automatically downloaded. And here it is created by NetGonet. PL will be fine and we can also add a link to the Privacy Policy here. We'll cover this at the very end of this video. Remember to remove unnecessary Enter, because if you add Enter here,
the text will be moved to a new line. If you would like to add some more social media icons here, you can click the gear wheel here, select two columns, select the layout like this. And now we click the plus sign. Social. And we have our media. We can also set the width of this element. I think it looks ok. And here you delete the media you don't need. And this way you can create your own footer. When the footer is ready, I click publish. Another important element that you can change in the sett
ings is this icon. This icon appears when someone opens your website in a browser. It is worth replacing it because it will look professional. To do this, to change it, go to Site Identity and select an icon from your media library or upload it from your computer. Such an icon should be square. You can either prepare it in a graphics program or crop an image. I could also choose, for example, my logo. Now crop a given fragment, crop the image and the graphics would also change. Well, in this cas
e you would also need to add a white background to make it visible. If you decide that you would like to change the global colors on the website, i.e. change the colors that are set by default, you can go to global settings and here we have many settings regarding our typography, colors and other elements. Just go to, for example, colors and here you can change the default color palettes. You can also change these colors manually. Just click on the given circle and you can enter either code here
color, or drag this element and change the color to a different color. The same goes for accents, links, headings, and other elements. This is where you set global colors and this is a very good practice because then you won't have to edit each color separately, these colors should change automatically. If an element does not change its color, I will later show you how to do it manually. The same applies to typography. We can change the default typography settings. We can also change the defaul
t size of the headers on your website by clicking here. And then all H1 headings should be changed. Same with H2. I'll click here and I can see that all the headers are changing according to the settings that I'm entering here. Here I can also choose whether links on my page should be underlined or not. Once you've made all the changes, you're happy with the result. Click the Publish button. Now it's time to edit individual subpages. First, you need to exit our editor. We go back to the dashboar
d and we have a page here. Here you can create separate subpages on your website. And here are those that were loaded by the automatic template. If any is unnecessary, just click on the trash bin and it will go to the trash bin. You can then delete such a page from this basket. It is very important not to keep additional elements here that are unnecessary. You can edit each of these pages here. First, let's look at the home page, i.e. the main page. And there are two ways to edit. I'll show you
them so you know how to change a very important option that a lot of people asked me about in previous videos. First, click Edit and you will be redirected to this view. On the right side we have various settings. You can change the address of this page, you can change the featured image and make other options. But what we are most interested in is the Astra Settings tab and this tab will only appear if you have the Astra theme. Here you can specify the width of this subpage. You can choose whet
her this page has sidebars. You can hide the header or footer. If you check this element, the header will disappear and you will have advanced options. And here you can select the Transparent Header option. This means you will then choose whether this header should be transparent or not. If I click disable, I'll close it and update it. Then I'll click here. So now my header is as I showed you earlier, i.e. it has a white stripe and there is content underneath. If I go to edit the page, I will go
to Astre advanced options again and select Enable. Then my headline will look like this. And this way you can decide whether you want this header to be transparent or opaque. To edit the appearance of our website, go to edit element. Maybe now you will be taken to your page editor, which is called element or. Thanks to it, you can change any element on this website and adapt it to your needs. The element uses various blocks that give you the opportunity to add and extend this content. We can cr
eate texts, headers, images, buttons, and add a video. These ball elements are reserved for the paid version and I have a separate guide about them if you are interested in them. We'll be using the free version for this guide, so I can hide that. And now I only see the elements that I have access to, i.e. all free ones, and in most cases they are enough to create a fully functional website. So how do you change text on a page? Each of these texts works in a very similar way. I click on it, I hav
e a field to enter text, I delete the content, paste the sample text and I can edit the text just like in Word, e.g. I can bold a given element, I can use italics, I can underline it. So we have a classic editor, just like Word or other editors. Here we have the option to expand and here we can also change other elements. Each of these elements gives you new options, so it's worth checking it out and testing it out. We can align this text, but we can also do it from the style level. If you go to
style, and that's what I recommend, you can change the alignment of this text here. You can position it, you can center it to the left, to the right. You can change the color, you can change the typography. I can change the size, but when I change the size, it is worth correcting and increasing the line height. And this way you can adapt this text to your own needs. Everything in this convenient editor. We also have Text shadow and this function allows you to add a shadow under the text. You ca
n choose the color and intensity of this effect. Here we have color and transparency and we can also change the direction of this shadow. These are stylistic elements, but it is worth being aware that this is possible. We also have the option of changing the photo in the background. I'm going to enter this main container here. On the right side we have Navigator, which is worth using. Thanks to this, you will know where you are on the website. We have our main container, I click on style and her
e we have the image. If you click Select image, you can now select a photo from the media library and replace it in this way. Or you can upload a file from your computer and replace the photo as well. If you don't know what size to choose, the easiest way is to look at the photo used in the template. We have its size here and then the photo should look OK. I'm replacing the photo. We have something like this. If you would like to add a new element here, you can click here and, for example, we ca
n add an image to the right. I'll click here and add an image like this. Then I click here and in the middle of this element so that it is relatively flush with the text. We can add a video instead of an image. I just need to right-click. I'll click here and paste the video. And now I'm pasting the link to the video. In this case it will be a YouTube video. It can also be Vimeo or another video hosting. What don't I like here? These elements are very close to each other and need to be moved apar
t. That's why we can climb onto the container. Now get into the deal. And here we have gas and in this case we can select 40 pixels. Then these elements will be moved apart. This button is a bit too high. I click on it, go to advanced and remove the margin. If you want to reduce the height of this element, click on the container. And here we have the minimum height. We can set this container to, for example, 80%, but remember that in the page layout I have chosen, I still have to leave space for
navigation, so this is also an important element. Let's move on to the next element on the page. Here we have a header, we have text and an icon with the text. I click with the left mouse button and I can change the icon to another one, e.g. I can change the title and description of this item. So I just enter new text here and I can do that with any element. If I want to change colors or some stylistic elements. Well, I go to the style tab and here I can change the arrangement of this icon. I c
an change the color and icon and adapt it to my needs. If, for example, you don't have 6 elements here, you can easily remove them. Just click here and click Delete. Then these items will be deleted. And if you want to add another element, right-click and click the Power button. Then you will have 4 item offer. We can add here, for example, a button, I add a button and for each of these elements I can add a new button. I click copy and paste and paste and paste. We have 4 buttons. There is one v
ery common problem with this arrangement. If a given section has shorter text, the button is automatically placed in a different position in relation to the rest of these elements. So we have a zigzag that doesn't look very good. Such situations should be avoided and can be fixed easily. Just click here, then Advanced and select it in size. Then the button will be at the very bottom of this container. Here we can do the same and we have different buttons. In an ideal scenario, it is best to make
these texts have a similar number of words. Then we have the portfolio section and here 4 blocks are added that contain photos. If you would like to create a gallery here, you can click here, type in Gallery and there you have it. Basic gallery I'm scrolling through it below. Then I click on the plus sign. And I choose some photos from the library or you can upload them from your computer as well. I click Create and insert. This gallery doesn't look very good because we still need to change a f
ew things here. First of all, you need to change the size of these photos and the number of columns. We can change the column to ones that suit us. In this free version, it is best to add photos of the same size. This will make it look good. We can also go to the style and choose the spacing between these elements. Then we have such a simple gallery available. After clicking, the customer will be able to view specific photos. We have information about customers, i.e. there is a section that cont
ains the logo and we have a single customer opinion. If you have more reviews and would like to add them this way, you can duplicate them by right-clicking and clicking Power. Then you will have more of these types of opinions here. You can also do it in a different way, i.e. click on the plus sign and add a new section. E.g. Using the flex box, we can add such a layout here and I can drag opinions from one to the other. We then have two opinions. We can duplicate this element. This way you can
create a network of your customers' opinions. If you need to change the background to make it consistent with the one above, click on a specific container and select background type classic. Here you select the color and you can either select the color manually or click here and select the ones that are globally available. In this case it will be color number 7 and it is exactly the same color as before. I can also right click Copy. Then right click and paste the styles. Now we have a tab with o
ur employees. We can change everything here. I click on the photo and change the text. I think it's very simple. And the last element is the call to action. Do you want to start a project with us? And here you should paste your phone number or enter some call to action. After making changes, save the page and run it on your computer. Another way to change the appearance of this website or extend it is to use ready-made templates. Just click here and go to the blocks. And we have a lot of ready-m
ade templates available here and we can, for example, insert customer reviews. You can preview it if you like this blog. Just click import. Then this blog will be imported and we can change the style of this element, e.g. change the background color and the content of individual sections. We can select these blocks from different categories here. For example, we have a call to action, we have a hero, so we can create this main banner on the website. I think something like this would look much be
tter in a movie. I click import. Now you could change each of these elements and change the order. If you choose a navigator, you can move this element up. Then it will be in a completely different place. The same applies to every element on the page. You can grab the entire container and move it lower. Thanks to this, you have just that. You can arrange all the content of the page as you need. But it is not everything. You can click here and use individual elements from these template sample pa
ges or load the entire page. If I enter a webinar here, click here, click Import, now this webinar registration page will be read in its entirety and all I need to do is replace its content. So we have a photo here, we have a lady to change and we can edit this element. And if we want to use only these sections , we can remove them and this way we will be able to edit this page in many different ways. I will now show you two problems that may arise during this process. If you read one of these r
eady-made blocks or a page loads a block with opinions, the following problem may arise. When we click on a container, we don't have a container, we only have a section. If I go to the navigator, there is also a section and columns here. This is the old way of creating pages with the help of a mentor and it is no longer valid. It needs to be changed. The site will still work, but there are completely different settings and the system works a little differently. That's why it's best to have every
thing already in containers. To change this section to a container , just click here and then click here. On the Convert to Container layout. I click here and what happens? This entire section will be duplicated and will appear at the bottom like this. And now your task is to remove this old section. And use these containers already. Unfortunately, sometimes errors occur and the photos will be of a different size and you have to correct them manually. I'll show you how to edit these settings lat
er in the guide. Usually you just need to change the width of the individual elements and everything should be fine. Sometimes it also happens that in the advanced tab there are some additional margins that change the entire layout. This may or may not happen to you. That's why I'm showing you this just in case. The second problem you may encounter if you have had a site for some time or your WordPress has been installed before. Then you may not have the container option at all. What should you
do in such a case? Go to your dashboard. You can do it by clicking here. You click exit. I'm leaving the site. Now go to Item Settings and then select Properties. And here you will find all the additional mentor settings that you can enable or disable. And here we have a function that is responsible for Flex Box Containers. You need to enable this feature here and then save the change. Then the containers will be visible. I showed you how you can change elements on selected subpages, but the mos
t important thing you need to remember is that each page you create must have a specific purpose. If you create a Services tab, such a page should present the services to your customer, show their benefits and encourage him to take action, i.e. contact your company in any way, either via a form or by phone. Each of these subpages has a specific purpose. About us tab. We are building our authority. We show that we help customers like our visitor. We show the process and then encourage him to cont
act us to help him solve his problem. And try to think about subpages this way. Each page has one specific goal it is working towards. Once you have defined your goals, your website, and you know who your website and your business are aimed at, you can move on to creating texts and graphics that will correspond to the text and will strengthen the message. How to approach this? If you have no acting skills or are just starting out, it is best to use artificial intelligence for this purpose. I hav
e prepared a set of ready-made commands for you that you can enter into Chat GPT or similar tools that will help you generate text for your website. For example, we have a command here to create a header. I copy them from the database, paste them here and we have a simple command. Create 10 examples of engaging landing page headlines for. Here you enter a description of your product or service and describe the main value that this product provides to customers. I completed the command and the ch
at generated 10 headline suggestions. Of course, this is a very simplified command. You can expand them with more details. The better you describe your business idea and target group, the better texts you will get that you can use on your website. You can find a link to these commands on the NetGonet Slash Tool page. There you will find referrals and additional bonuses that will help you use artificial intelligence in your business activities. Once you have created the texts for the website, it'
s time to take care of the photos. And here you can use several ways to find photos. The best way is, of course , the company's own photos of its own employees. The services they provide will be best received because we are flooded with artificiality. Therefore, customers value authenticity and the fact that we show ourselves or our company, so it is worth using such photos first. If you don't have this option, another option is to use artificial intelligence to generate photos. If you have the
paid version of Chat GPT, you can use it to generate various types of photos or graphics, but the quality will not be as good. There is a much better tool that allows you to create photos using artificial intelligence. This tool is called Meet You and with it we can create truly amazing photos that will be unique and make you stand out from other sites. That's why it's worth investing. If you would like to learn how to use this tool, I have prepared an entire course on this topic. You will find
the link in the description of this video. The last, fastest and simplest way, but not necessarily the best one, is to use the database of photo banks. Here we have, for example, a parliamentary website. It allows you to use a large number of photos for commercial purposes. Just click, see the license type and download it for free. You can edit a photo like this right away in Canva if you don't know. What programme is that? Well, it's worth getting to know him. There is a 25-minute guide on this
topic on my channel. I use Canva most often for almost all graphics. The link to Canva is in the description, so you can see how it works. Now let's get back to creating the website. I hope you have already created texts for your website. Now we can move on to the next tabs and I'll show you how to rename them because we don't want English tabs here. We have to change it. The easiest way to do it is to go to the dashboard and go to the pages. Then we have individual pages, e.g. we have an about
page. I click quick edit and enter about us, and below I will write about us together. This will be a link to our website. The same applies to the contact page. Quick edit Contact. And here I enter the contact in lowercase letters. This will also be a link to our website. Here we have a test page. And we have services. Same services. Services. We can throw things we don't need into the trash can for now so as not to litter. And this way we have our navigation translated. Now let's move on to ed
iting the About Us page. I click edit fermenter. And now we have our website. In which we can change the background. So I click here and choose another background, preferably one that you have already prepared. Here are some sample texts about us and you can change these elements here. If you don't want to add three of these tiles here , you can duplicate them to make 4, or you can remove them completely. Then you just need to make sure that the spacing is correct. So let's click on this contain
er and click on advanced. I can add a 50px padding here. Then this element will have the same background as here. You can change each of these elements. We have a process here. If you want to shorten it, we can remove a given section or element again. We can also put it on one line. Only then do we have to change these markings, e.g. here we give a four and I remove it. This way you can quickly change the appearance of each template. This shows you so that you can have more flexibility in this c
reation process. Then we have the accordion section, which allows us to show more information when clicked, and thanks to this we can create a question and answer section. This is very useful if we have a lot of information on the website that we do not want to show at one time. And such an accordion section has the ability to add a new element. And here we have the title and we could write service 1. And enter the content of this point here. Then we have numbering. We can change the number to t
he final number, e.g. 1000, and then the animation will strive to reach the number 1000. If you want to slow it down, we can enter here so that the animation lasts 5 seconds. But in my opinion, these two seconds are such a time, maybe even a bit too long, so I think there is nothing to change here. And the last section, the call to action, phone number. Here we can write contact information and here enter a specific page from our website. So in this case I enter the contact. After making the cha
nges, I click Update. The services section has very similar elements to the rest of the page, so I won't show you how to change them. We have the last contact tab and there is a bit more going on here and it is worth taking a closer look at it, because a new contact form function has been automatically added here. This form will not always be added. This is an optional version, but if you want, I will show you how to quickly add such a form. But before we do that, you still need a privacy policy
, because it is a very important element when it comes to the legal aspect of the operation of your website. First, let's create a blank page. I click on Add Page. Now we will name it Privacy Policy. Now you need to enter the content of your privacy policy and you can do it in several ways. The first way is to go to Google and search for ready-made privacy policy templates, which are available for free. Such patterns are a solution, but they may be out of date. They may contain errors, which may
result in unpleasant legal consequences. I use ready-made document templates available on the Legalne online business website. Such a product contains a Kukiz privacy policy and files template, which you must complete on your own. There are comments and specific information on how to refill this product. Then you can add such text to your page. If you enter the NetGonet discount code here, the price will be reduced by 10% and you can use this discount code for all documents and contracts that a
re available on the Legalne Biznes online website. This is what the file you will receive looks like. Here we have the content of the privacy policy. There are fields to fill in, and then you paste the text onto your website or send it in the selected PDF format. You will find a link to this website and the discount code in the description of this video. Now let's go back to creating the contact page. When you paste the content of your privacy policy here, click Publish and here there will be a
link to your Privacy Policy page. Click Copy. Then go to customize appearance and we will immediately add this nickname to the footer. So I scroll down, click here, select the text Privacy policy, I click on Insert link, paste the link and click Apply. If you don't like the color of this link, the easiest way to do it is to select the text, choose the text color and choose white. Then the color will change to white and the link will still be clickable. Now I click Publish. If you want to add a c
ontact form to your website, you will need a new plugin. Go to Add a Plugin and enter WP Forms here. This plugin has already been automatically installed, but you may not have it, so you'll need to install and run it. It has over 5 million active installs. Once it is running, go to WP Forums. Now click on Add. Enter a name for the form. You can then choose one of the templates. I will choose a blank form to show you everything step by step. Now select the fields that will be in this form. We def
initely need the customer's email address. We need text. A paragraph of text, i.e. a place for a message. After clicking on a given field, we can change the label. We can also go to advanced and make this form full width, i.e. the size of the field. We select large paragraphs of text and can enter a message. Then I go back to the Add field tab and select the drop-down list, thanks to which the customer will be able to choose one of the services that interests him. And you can edit these selectio
n options here as well. The last very important element is the acceptance of consent to the privacy policy. We can do this in the form of a checkbox. I'm just clicking here. I click Advanced hide the label because I don't want the customer to see it. I delete this information and now I have to type the command. I consent to the processing of my data in accordance with. Here we enter Privacy Policy HERE and here before the word Privacy Policy we enter a href equals quotation marks. Paste the link
to the Privacy Policy and close the link. Then we go to the end and type closing. In this way, in accordance with the Privacy Policy. And here we enter the rest of this message. The content of this message depends on what data you process and what you have in the form, so this is just an example. It's best to talk to your legal advisor and create a consistent, good message that fits your company. The last very important element is to mark that a given field is required. This means that if the c
ustomer does not check this box, he will not proceed further. Now save your changes to the form. Go to Settings and here you must select notifications, i.e. to which email address this message will be sent. By default, new message notifications will be sent to the WordPress site administrator's email address. You can enter any email address here and notifications with this title will be sent to this address. And these will be additional details that you can fill in. Here you can also complete th
e message confirming sending the form. I write it all down and now I come back to it. And now I click here. I'm leaving this editor. We have a new contact form that we can use on our website. Now I go to my contact page. I click Edit Item. Maybe I'll delete this form that 's already here to show it to you from the beginning. Well, I'll put the map here for now. We'll come back to it in a moment. And now I select in WP Forms elements, drag it to the middle and select. New contact form. The contac
t form has been added. Now we just need to match the visuals of the rest of the page. So we can choose to make the width of these blocks 50%. And the map doesn't fit here at all, so we could create a new section with the map in it. I can copy it and paste it here. And I'll just delete it from here. The map is very user-friendly because just click on edit and here we can enter either the coordinates or a specific place, e.g. I'm writing Katowice Spodek and I was automatically redirected. In this
view, we can enlarge the view, zoom out, and change the height of the map, so this is a very nice solution. If you would like, you can also add custom styles here that will change the appearance of this map. A common practice on contact pages is to link a telephone number. Just click on the text or icon and enter something like a colon next to the number. And here we enter our phone number. The same can be done in text. Next to the link, enter the phone number. Updates. And now when I click on t
he given website, I will be redirected to the application that supports the phone. You could also add social media icons here. So I enter it in the social elements and here I will add icons under these numbers. I would like them to be left aligned. I'm going to go into style, I'm going to choose my own color, and in this case, I'm going to choose this type of color. Now it shrinks them a bit to make them match the rest of the icons on the website. I think these icons are also too small, so they
could be resized and change the shape to a circle. This way you can customize the elements on your contact page. Now it's time to update and test your contact form. So you go to the page preview again by clicking on the eye and enter the data to be sent. I will now show you how to create and add a new page to the navigation. Let's assume you want to create a subscription page for a newsletter or some free material. Just go to the Create a Page page. We enter the name. Let's assume it will be an
e-book. I click edit elements, click on templates and here I will choose a template for a page with e-books or a book. You can easily replace the book with an e-book. Let's see what possibilities we have here. Let's assume we have a cloud page here. I click import. A new page has been added and here it would have to be edited according to the previous rules. Here you need to create some graphics and you have a ready website. I save and publish the change. I can see it, but unfortunately it doesn
't appear in our navigation. What can be done? I go back to WordPress, go to menu appearance and here we have our navigation. I click here Create new menu. Then I choose to make this the main menu. I enter the name. Now I choose which pages I will add to my navigation. I can click See all. And here we have Home. About us Contact Privacy policy. I will select all sides. Now it would be worth changing their order. Let's assume that the contact will be at the end. Services will come second. Then it
will be about us, and the privacy policy will be in contact. I don't want it to be in the main navigation, we'll just create a drop-down menu. We can also add entries and our own links. So if you wanted to add a link that leads to another page, you could enter something like this. Here I enter the name of the website and enter the content of the link, i.e. the WordPress course. Then I add such an element to the navigation and add it before the contact. Now I save our navigation and go to the we
bsite. Navigation has been changed. We have Home, we have services About us The e-book, when clicked, will take us to such a page. Here we have a slightly different headline. He has a white background. It looks much better and we have a WordPress course. After clicking, I was redirected to another page. This page is specifically about my online course on web development. If you are interested in expanding your knowledge and finding support in the community, I invite you to join me. The link to t
he course can be found in the description of this video. I go back to my website and here we still have drop-down navigation, but what's wrong? Unfortunately, the text is not visible. We have to fix this. Go in and adjust it again. And here we need to adjust some settings. We need to enter Header Builder, then Custom Transparent Header and here enter Design. And here we have the Color menu and we can choose to make the link color e.g. dark. And automatically the color will be changed. We can als
o change the background of this container, e.g. it can be blue. White will work best here. Have you changed your navigation? Now you just need to make sure it looks good on mobile devices. You can do it in a very simple way. Just click here and it will automatically switch to the view on tablets and smartphones. You can click here and verify that everything is displayed correctly. Check the colors, check the drop-down menu and this way you will be sure that everything looks ok and if something d
oesn't work, then you can follow the appropriate steps, which I will show you in a moment. On most template pages everything should be fine, but if you want to make a change, first you can change the layout of these elements in the navigation to this and then it will look this way on mobile devices, and on computers the same as before. So we have the first option, i.e. we can change the order only on the selected device. We can change the Design tab and here we can change the spacing or margins
of this navigation and we can change the colors. If you want to change the color of this icon or just the fill of this icon. You can choose the button style. You can also go to the Design tab and change the color of this element, e.g. You can also choose a transparent color, then it will look like this. And change the size to make this icon more visible. This way you can adjust this element to your own needs. We also have the option to round the corners here. You can click on percentages, click
here and enter 100%, then this element will be rounded. If you need, you can add additional elements here, e.g. a link to your account. If you have a store or a course platform. We're not discussing this today, but I want you to know that you have the option. If you want to change the behavior and appearance of this element after clicking, click the Off Canvas icon here. Click on this gear here and we have a few things to change. First of all, we can change the header type, e.g. make this naviga
tion open to the entire screen. You can select the layout, then this navigation will open from the left or right side. And we also have some options regarding the positioning of this text. I will choose to center the inline content here, so that this text is in the middle. We also have several style options. We can choose the background color. If we have the entire screen, then the background under the navigation will be a different color. We can choose the style of this close button. If you als
o want to change the color of these elements, click here on design and here you have the option related to the background, so we can choose a consistent background. And here you can also change the colors of the links in the navigation. When you are happy with your appearance. To your header, let's move on to the footer. And here you can also make a few corrections, e.g. center these icons at the bottom. I think that's enough. The rest of the rules are the same as before. Let's go back to this v
iew for a moment. Then I go to Home and go to the mobile view. And here, unfortunately, there is a problem, because the text overlaps our navigation and it's time to fix it. Unfortunately, we won't do that here, so we have to go to element. I click Publish. I'm closing this editor. And I go to edit element. Maybe the text on this page doesn't look good on mobile devices? What can we do to fix this? Enter responsive mode here, then click the smartphone icon and we will see. Just this type of elem
ent. We don't have a preview of our navigation here, we don't have a preview of our navigation here, but we can count how much space we need for this navigation. To begin with, you can perform just such a task, i.e. enter the advanced level. If something is wrong, we can increase the padding from the top, e.g. to 100 pixels and then we will leave some space for our navigation. I click update and then you will have a place for our transparent navigation. If you have classic navigation, it will be
easier because this problem will not occur. Here you can switch between views and check how your website looks on different devices. If I go to the tablet, I see that unfortunately it doesn't look good here. Why did this happen? This container is set to stack this content vertically. So here we have the direction set to column vertical. If you want these container elements to be next to each other, you need to choose the row horizontal direction. Then we have two elements side by side here, but
unfortunately this video has been scaled to the width of this container. So if you click here we have a width of 65% and this other container is 36% wide. We can change the width of these containers and then adapt it to our needs. But such a video won't look good on a tablet, even if it's enlarged. So we can change it another way. Let's say we want this video to be at the bottom. I click on the container and select the Column vertical direction. Now I go to the container, set it to 100% width a
nd I can set it to 100% width. But what if you wanted this video to be at the top? You can go to this container, click here, and then select the Reverse column direction and then this element with the video will be at the top and the text will be at the bottom. And here we can introduce other additional settings, e.g. reduce the distance between these containers. We can center the text. In each of these elements. And tailor the entire website to your needs. If you have any questions related to t
he responsive view, of course, write me a comment. If you would like to shrink such a video and center it, you can click here. We change the width of the container. I click on the main container, which is located here, and I choose to center the elements this way, and this is how I have to deal with each element on the page. Below we have a four column layout which doesn't look very good because this text is very cramped and we can fix that. How to do it? First, I click on a specific container,
i.e. click here and set the width. The unit must be set to percentage and I can choose the width, e.g. 47%. And I do this with each of these elements. I write 47% everywhere. Well, nothing has changed. These elements are still next to each other. This is because we need to go to the parent container, i.e. the one above, and select the wrap option. Now automatically these elements will be placed next to each other, but there is still something wrong because on the left side we have a very small g
ap and here we have a much larger one. How to even it out? Just click on the container and select center. Then these elements will be centered and everything will be even here. And now you need to go through each subpage and check whether it displays correctly on mobile devices using this preview. You can also click on the website on physical devices, such as a smartphone or tablet, to see how the website behaves and then make any necessary corrections. I'll show you one more example that involv
es setting the order of elements. I create a new page, click edit elements and read the new page template. Let's assume it will be a portfolio page. I click import and replace the photo. It looks pretty good. I recommend these layouts to clients because if it's a personal branding website, then it is worth showing your face so that the customer knows that he has come to the right place. And we can copy such an element. If, for example, you would like to place this layout on your home page, just
click Copy. Then you will go to another page of the open fermenter, click on the plus sign. And here with the plus sign, right-click and then paste. The entire action was copied, so I can delete it. The only problem here is that we have the same colors and it would be useful to cut off this next element. For example, I can copy this element. Click on the plus sign here and paste it here. And we have a quite interesting layout, which in my opinion looks much better than the one in the first templ
ate. I go back to my test page and let's assume you have this layout in your template. There is a photo, there is text, there is text and a photo. So we have this intertwined. And this type of arrangement may generate one problem if I enter mobile devices. Well, this is what's happening. We have photos, we have text, we have text, we have photos. This is an ordering problem because the photo should be at the top. How can I do this to fix this problem? I click on the container and then select the
row reverse direction and that's it. Now these elements will be in the right order. One technique you can use that is such a last resort is to hide the item. If an element on the page is really giving you a lot of trouble, let's assume that the element with the photo is not properly adjusted. There is no way you can cope with this. You can go to the Advanced container for responsive here and select Hide on mobile and then one of these photos will be hidden. You can hide each of these elements t
his way. This way you can hide any element that you do not want to be displayed on a particular subpage. If you take care of every little detail or create websites for demanding clients, then you can use additional breakpoints that will allow you to have greater control over the appearance of the website on various types of devices. To add such additional points, you can click here on this gear, then click on the plus sign and you have several options here that you can add. They are turned off b
y default so as not to mix too much and you can add them. You can also change these values, but if you are a beginner, just click on the plus sign. Here you can add further change points. Then click Update. Now you have access to much greater possibilities and can adjust your website to different screen sizes. Congratulations! If you are at this point, you have changed the appearance of your website, created texts and added various images to the website. I adapted it to mobile devices, added a p
rivacy policy and a contact form to your website, if you needed it. In the fourth step, we will focus on adding a few functionalities to your website and making a few improvements. I will show you how to add a banner to your website that informs users that you use files. Kukiz I will show you how to perform basic optimization of your website for search results and you will be able to add a blog to the website if you need to. Let's start with the first element, i.e. the banner informing about Kuk
iz files. To comply with the law, you must give users the opportunity to refuse the use of Kukiz files, e.g. tracking files. And to do it properly, you need to register on one website that allows you to add this system for free. First, click on the link you will find in the description of this video. You will find yourself on such a page and here you need to select Free Plan. This plan allows you to add such a banner and use it on a website that does not exceed 25,000 visits per month. If you ex
ceed this number of visitors, you will have to buy the Pro version, but as long as you do not provide your payment card, there are no fees they will not be downloaded, so you can safely create an account here. Click Get started. Then enter your e-mail address, website address, password and log in to the system by clicking here Get started. After creating your account, return to your website. Enter plugins. Add the plugin and enter the name Kukiz. Then install. This solution has over one million
active installs. I click install and run it as before. Now come in here. And click Connect to Web app. I click I already have an account and click Log in and connect. You will be taken to the login system. If you are logged in, just click Connect site. If not, enter your login details here and log in to the website. The page has been linked. We can click here and go to the settings page. First, let's change the language of this banner. I click here, add a language, enter Polish. I confirm with t
he Add button. Then I click here and select Set as default. I need to confirm again. Now the default language of our banner will be Polish. We can move on to configuration. I go to the Kuki banner and here we have a preview of our bar. We can make various settings. And let's move on to the appearance. I usually use the classic layout because most users are used to it. Here we immediately have a preview of what it will look like on our website. Then we have content. Here we can set all informatio
n related to notifications that will be displayed on our website. If the customer clicks Customize, various notifications will appear here. Here you can decide which elements will be disabled and which will not. In this message, it is worth adding a link to Kuki's policy to the Privacy Policy. Just click here. Enter Privacy Policy in Polish and paste the URL of your privacy policy page that you created earlier. Then we have the colors and here we can click Auto generated and then the system shou
ld automatically download the colors from the website and set colors that will be consistent. So we have purple here, just like on my buttons. We can also select it manually, i.e. Custom auto generated color. And here we have, for example, the option to change each of these colors and adapt them to our needs. The next tab is the Kuki manager and this is where the Kukiz files used by your website appear. I don't have any additional files here at this time. Kukiz we only have the necessary files.
If you have a more extensive website, then various files will appear here in specific tabs. Here you only have to watch out for one thing - the system organizes the Kukiz files incorrectly, e.g. if you have an online store and uploads here files related to the operation of the shopping cart, if the customer rejects such consent, some functions may not work, so you need to review it. If there are errors in your stores or websites, check whether the Kukiz files are properly configured and whether
everything is done correctly. Content log Evidence that the user has consented to the processing of files will be stored here . Kukiz. In the Advanced tab we also have the option to disable or disable Google Content Mode. I have separate videos on this topic. This is a more advanced topic for people who have analytics tools, a store or a platform. It's best to entrust this to a programmer who knows what he's doing. If you have a simple business card website, you can deactivate it, and if you nee
d more information on this topic, it is best to contact an expert who will implement such a solution. If you need support on this topic, you will find additional information in the description of this video. After going through all these settings, we can return to our website and check whether the banner works properly. After entering our website, we have a banner informing about the use of cookies. The client can see what files are used. He can accept all of them or reject them. After accepting
, an icon will be visible here and you can change your consent at any time. This is also required for this feature to be available. The next step is behind you. The website was created so that customers can find it, enter it and see your offer and your services. A very important element is to ensure that your website displays correctly in search results and displays correctly when someone shares it on social media. I'll show you how to do it now. Go to your dashboard, go to plugins, add a new on
e and here we will add the iOS SEO plugin. Enter this name and install this solution. After installation, the automatic configurator will launch. If you close this message, you will be able to return to it. All you need to do is go to iOS SEO and go to general and here we have the first configuration. Now you need to perform SEO data optimization. Just click confirm. Click Continue. Here you enter basic information about your website and your organization. You choose a logo and save the change.
You enter social media links. Here's a suggestion to sign up for the newsletter, I'll skip it. And here we are. Go to the SEO dashboard. Now, when the first configuration is completed, we can enter the website and see icons on the right side that indicate whether the pages are optimized for specific keywords. I will not discuss this system in great detail. I will only show you the most important elements that you need to know. If we have a home page, you can go to edit. And here you will see the
new Yoast SEO element. This is the feature that this plugin has added. And here we can first enter the keyword phrase for which this page should be displayed in the search results. If I enter the phrase website here after entering a keyword phrase, the system will give you some recommendations to help your website rank high in the search results. We can change a few more elements here. This is what a preview of this page looks like. If someone enters it into the system, we have this template in
formation here and we can change it. Just remove this title and enter your own title. The title should refer to the keyword and show what your company does. So, for example, if it was a course website, I could create such a title. WordPress course for beginners. Then we have a simplified name and description. Notice two things in this description. Remember that these should be key phrases, because they will be bolded when the user enters specific phrases in the Google search engine, and that the
description should be attractive enough for someone to decide to click on your website. Below we have an SEO analysis, i.e. we have recommendations that will help your website rank higher in the search results. She will have those chances. It is worth improving these elements. A detailed description of what SEO is and how to make your website rank high in Google search results can be found in my online course, which I prepared together with an SEO expert. The link to the course can be found in
the description of this video. Now let's go to the Social Media tab. And here is an important element that you need to remember if you want this page to be displayed with a specific description and a specific photo on social media, which is a good practice so that customers are more likely to click on it. Well, choose a photo that best relates to the topic and you can enter a title that will be displayed on social media. And prepare an attractive description that will encourage users to visit yo
ur website. If you want to increase the chances that someone will find your website in search results, a very good way is to generate valuable content for your blog, i.e. articles, guides and other elements that can attract users to your website. To add a blog to your website, just follow simple steps. First, go to the website, create a page and enter the name of your blog here. I will type in blogger and click Publish. Now I go to Settings Reading. And I select the page with entries and here I
select blogs. I save. Changes are ready. Your blog has already been added. Now we need to add it to the navigation. I click on the Appearance menu, then select See All and add the blog to my navigation. Before contacting me, I write it down and let's see what it looks like. I go to the blog tab and here we have a blank page. Why is this happening? Because we don't have any content. To add a blog entry, we need to go to the Entries tab and here we can click Create entry. I will also exclude those
elements that are unnecessary. I click create and here we can create an entry. We enter the title. Below we enter the content, which can be texts, photos and other elements. You can use the default block editor for this purpose, i.e. click on the plus sign and enter a heading or paragraph text. We can drag these elements just like in the primer, but we have much fewer options to edit these blocks, so it's worth remembering. This solution definitely works much faster, so if you care about perfor
mance, it's worth using. And we can also choose a featured image that will appear in this entry. So, for example, I will choose such a lady and click publish. I added 4 entries and featured images to the blog. Some are horizontal, some are square. However, it is worth adding images that will be in the same style and in the same size. You can use Canva for this purpose, which I also described on my channel. Now, to change the appearance of this blog, because you admit that it doesn't look very at
tractive, we can go to customize the theme. Astra gives us several options for change. Go to the blog, then to the Blog Archive. Now you can choose several settings. You can click here and run the title on this blog. If I click again, I enter the second layout, select Run and in the Title Blog tab I have to enter a name. So I enter a name, e.g. a blog, and I can also enter a description. Below you will find information about what this blog is about. And the colors are different from our website,
so we still need to change the colors. We can go to the Design tab and make these elements have different colors. If you want to change the background color, just select custom and choose the color here. It can be a global color or one of your choice. And then you would also have to adjust the color of the title, e.g. to make it white and the color of the description. This way you can customize our main banner. Then we have the opportunity to add some other elements here. We can change the appe
arance of the container, i.e. make this blog full width, make it narrow. I think it's worth leaving it on this default layout. Then we can choose whether it should be in such a box or not and we have the option of adding a sidebar. This is a nice feature because it will allow users to view your blog posts, so I would leave it at that. This arrangement usually looks best. We can choose the layout in which our entries will be displayed, whether in the classic one, i.e. one entry at a time, or whet
her it should be a list with the photo on the left. Therefore, here we need to adjust the appropriate size of the photos. We also have this option and this one. I can then choose what elements will be displayed on this page. For example, we have a photo of this entry. We can change the image ratio and here we have the effect when hovering over this entry. Then we have the title Post meta, which means here we have information about this post. That is, categories Leave a comment. I deactivate it.
By clicking on this window we have a description of this element and we have Read More. That is, Read more. We will translate this element in a moment. More options are only available in this theme. Astra Pro there is a link to this theme in the description if you are interested. Then we have the Single post option and here we can choose what our single post should look like. So we have the fourth entry here. I can click here and choose to have this post titled like this. And here we have differ
ent stylistic settings. I can click here and go back to our settings. Posts can also have a sidebar. We can choose very similar settings as before. The differences are at the very bottom. Here you can also run linked entries, i.e. entries that will refer to the first one. You can choose which post categories or tags will appear in the recommended ones. We have the option of changing these photos, i.e. we can change them, for example, to make them square photos, then it will look better. This set
ting depends on the aspect ratio you choose to add photos to your thumbnails and posts. Here we have a few additional elements that we can hide, e.g. author categories. And this is what it will look like. Then we have options related to commenting. Here we can deactivate comments or change some settings. Here we have settings related to style and location. The last element that you can edit on your blog is the sidebar and to edit it click here and you will be taken to the Main sidebar Widgets el
ement. This is where you can just edit the different add-ons that will be in this sidebar. If you want to delete one of the elements, e.g. the latest comments, click on the three dots and click the Delete button. And here we can do this with all the elements that you don't need. If you want to add an element, click on the plus sign and select one of the available blocks, e.g. an image. And here we select an image from the media library, e.g. this element, and it will be placed in the sidebar. We
can also add a header that will contain a link or button. Just type in button and you can add the button you need here. Once you have made all your changes, click Publish. This blog already looks quite good, but one more thing needs to be changed, i.e. the translation of the texts. Now I go to plugins Add a plugin. And I type loko loko translate. Now I click install and then enable. Now I go to the Loko translate tab and here I select the Astra theme. Then I click New Language. I choose the Pol
ish language and in the location I select custom. Then I click Start Translate Link. Now I have here all the texts that I can translate in this theme and I will type Read More here. And here we have the source text in English and we have the Polish text. So we can write See more. I click Save. If you find any texts in English on your website that you cannot translate using the mentor or the default options, you can use the Loco Translate plug-in. And here you can translate both themes and all pl
ug-ins into plug-ins. It also can translate various phrases here. It works very simply. If the plugin doesn't have a translation, you create one. Then you select the Polish option and select the element to be translated. If the element contains such a character, it means that you also need to copy it, because this is the element that will insert some text here. And, for example, we can enter page. I click Save. And see if the texts have been changed. Despite the changes introduced, the text has
not been changed. Why? Because I translated the wrong text. This happens if we have repeated phrases in the translation files. It is best to copy such a phrase in its entirety and find it in the search results. And now we have see more. Well, now everything is correct. So if something doesn't work, use the search engine and check if I translated each phrase. You will soon be ready to publish your website. This is a big moment, so it's worth preparing well for it and checking if everything is wor
king properly. The last step is to clean up and test your website to make sure that everything works properly and the website will bring you the benefits you expect. Go to your dashboard and The dashboard contains a lot of useful information, but also a lot of advertisements. If you use free solutions, sometimes such ads will appear here and we have to click on the cross and reject certain notifications that we do not need. We can do the same here. Well, this is what the cockpit looks like. We c
an edit it by clicking on screen options. And here you can choose which information you need and which you do not need. For example, I will turn on WP Forms element review and here we have the status of our website. Then go to entries and here delete all the entries that you do not need, e.g. I delete the fourth entry. I go to the basket. And here click Delete forever. Then go to Categories and Tags and remove any categories you don't need. Just click Delete and they will disappear. On the Media
tab, click Select Multiple. Now select all the photos you don't need that are not related to your site and click Delete. The photos will be deleted. This will keep you more organized. Now go to pages and select the pages you don't need. Click on the check box and proceed to mass action. Move to trash. Apply. And you can throw the page from the trash by doing the same by clicking the Delete button. Check if there are any comments to be deleted. Then go to Plugins Installed Plugins and here we re
move the plugins that you don't need. If this template has installed some solutions that you do not use, then you can remove them and you will definitely be able to remove them. After loading all the necessary templates. After changing the appearance of the page, you will be able to remove the plugin. Startup templates I click Disable and remove. Now I can safely remove this solution. I don't need it. If you want to speed up your website, you can install another free plugin. Enter this name in t
he search engine and install this plug-in. Now click here and click Enable. Now run a few options and you need to do it carefully because these types of plugins can ruin your website if you over-optimize. I will show you relatively universal, safe settings that should not do anything to your website. If something doesn't work for you, you can simply disable this plug-in at any time. Such settings should be relatively universal. Click Save. Of course, this is not the only optimization procedure t
hat you can implement on your website, but in the case of business card pages or simple websites, what we did is completely sufficient. Just remember not to upload too large photos to your site, as this is usually the most common reason for your site to be slow. Once you have completed the previous steps, you can go to your website in incognito mode. Now check if the banner informing about Kukiz files works properly. Check that the contact form sends the necessary information. Are all elements t
ranslated on the website? And most importantly, check whether all elements are displayed correctly. Take your smartphone, laptop or tablet, click on all subpages and check whether each of them is displayed correctly. If you've reached this point, congratulations. This means that you already have a fully functional website that you can show the world, which will bring you various benefits. If something went wrong during this process, you can leave me a comment. I will try to answer them as best a
s I can. Another option is to join the full course, in which I will show you not only how to create a simple website, but I will also show you many other elements that will help you develop your online business. The higher course package gives you access to a community where we support each other, where I help entrepreneurs create websites and develop online businesses. If you are interested in such a topic, you will find a link to the course in the description of this video. Don't forget to lea
ve me a like. And I invite you to read more materials, because creating a website is not everything. Such a page can be developed. You can add new functions, new possibilities, you can expand it, and above all, you have to take care of it. You need to perform regular updates, i.e. updates to your plugins, WordPress themes, and more. But you'll find out about that in the next video. I invite you to visit it now.
Comments