The Unconventional Guide to Course WordPress

In this course, I will teach you how to build, design and manage Professional Websites on WordPress. Just like the sites now displayed on the screen.Upon completion of this course

You will know how to build and define a website from scratch…

It is also professionally designed…It is compatible with cell phones and tablets…You add advanced features to it… and you protect it. Of course, you will know how to manage and maintain it. So that you can make changes and modifications to the site and keep it updated and guarded. Building websites is no longer as complicated or expensive as it used to be.With the help of the tools we have today,Anyone can learn how to builda professional website, in less than 3 hours without knowing or writing a single line of code.Over the last years, I have known more than 10,000 shop owners from different fields and backgrounds

How to build their own professional websites for their stores and companies

For example, Internet shops, corporate websites, blogs, etc…They saved thousands of dollars that they would have paid to experts. And they save on monthly maintenance expenses.So if you are interested in building websites and are ready to learn

How do you do that on your own, so stay with me,

Because we will review together during this free course.The entire website building process is stage by stage.Until we have a complete and up-to-date website.There is no need to be afraid, as there is no need for any previous knowledge or experience in order to pass this course.Not even knowing English, because we have prepared this course.Specifically to be suitable for all levels, especially for beginners.But if you feel that a certain topic is not completely clear to you at each stage of the course,

 the first thing we need in order to build a website is a ‘Domain’

The domain is actually your website name or website addressIt is also the address that we can write in the URL field In the browser to access a site. For example, the Google domain is google.com.And if you type it now in the address field of your browser.. it will take us to Google.Let’s take additional examples such as the YouTube domain at: www.youtube.com.Or a Facebook domain at facebook.com.Thus, there is an identifying address for each website that distinguishes it from others, and it is called a ‘domain’.Without a domain, browsers will not be able to access your site.Therefore, the first step we take in order to build a website,is to purchase a domain.The average price is about $10 per year.But don’t worry, because in this course we will lear now to get a domain Completely free for the first year.

The second element needed to build a website is ‘Web Hosting’.

It’s actually a computer running your site,It contains all the files and data that make up the website.Such as: pages, images, layout settings,user list, etc.This computer was called ‘server’.It works 24/7 in order to display the site in front of your browsers 24 hours a day,It is also very fast, guarded and able to withstand great pressure It is specially built to store websites.So, it is not your home computer. It is a computer that we rent from professional web hosting and preservation companies.On average, it costs about $10 a month.And by the way, that’s not the price we’re going to pay today,Because on the occasion of this course I succeeded in obtaininga special discount voucher for you.Get high-quality web hosting and maintenance starting at $1.97 per month.I know full well that expenses at the beginning of the road can be scary and important,Therefore, I did everything in my power to keep the costs of this course as low as possible.Of course, without detracting from the quality of the site.

The final stage of building the site is the installation of the WordPress system

It is the leading and most popular system in the world currently for building websites And through it. we can build and manage our site through a simple admin panel.Building great websites without even knowing or writing a single line of programming code.WordPress is also completely free,With this, we have finished collecting expenses until the end of this cycle, but before we start

I just want to draw your attention to one important thing regarding WordPress

If you now search for ‘WordPress’ in Google.Most likely it will be the first or second search result.It is a site called WordPress.com.Attention, we are not talking about the official WordPress site Rather, it is an independent company with the same name and offers a very limited website building system.Although it is based on the original WordPress, we do not recommend it.Except it’s not free.The original WordPress site is at: WordPress.org.As I said, we are in the process of building an open and free website.LIt never asks you to pay any money.

Here, let’s summarize all of the above – in order to build a website, we first need a domain.This is the name or address of your website.And by clicking on it as a link or typing it in the title field.The browser accesses your site’s store (host),It is the computer or server that contains the site files and can display the site.And we install WordPress system to build websites on this computer.So that we can easily build and manage the site.We have to do this process whenever we want to build a new website Now that we understand the basic stages of building a website,

↚

Let’s move on to the actual practice and start building our site.

In order to obtain a domain and hosting for the site,Now we write in the URL field in the browser:arabic-wp.com/hostingerAnd we press “ENTER”. I added the link to this site as well in the video description.So, that brings us to the popular Hostinger website Which offers a very fast, cheap, guarded web hosting service and most of all,A service compatible with WordPress sites It is a company that I use and I wholeheartedly recommend to use,That’s because I live in the Middle East and this company They guarantee me a site that works great thanks to the proximity of their servers to the region,This is compared to other companies we see in such courses Such as: Hostgator or Bluehost The servers of these companies are located exclusively or primarily in the United States

That is why its browsing speed here in the Middle East is very, very slow.

So let’s scroll to the bottom of the page where prices and hosting deals appear.Possibility to choose one of 3 storage programs (hosting): Uni..excellent..and works.The main difference between them is the amount of websites that we can store in each program The ‘Single’ package allows storing only one site, in the ‘Premium’ and ‘Business’ packages.We can store up to 100 locations. There is another important difference It is the amount of monthly visitors that your site can absorb.When the package is ‘mono’ we are talking about 10,000 browsers per month As for the ‘Excellent’ and ‘Business’ packages You can accommodate up to 25,000 and 100,000 entries per month.

I will choose the “Premium” hosting plan, because with this plan

We will be able to get you a free domain and at the best value for our money.Anyway we will get 30 days trial for every storage (hosting) package During which we can get a refund, which means we can always cancel the deal Now we get to the order page, and here they ask us: How long is the web hosting we want to buy, Note that the longer.we stick to it, the more discount we will get. For example, when committing to 48 months.We will get a very discounted price of $1.99 per month, Committing for a year, we get a higher rate of $5.99 a month, If you commit to one month, we will get a price of $10.19 per month.This is of course not desirable.Anyway, as promised at the beginning of the session, You got a special discount voucher from Hostinger for this course Thanks to it, the price may drop even more. We’ll see how to use it in a moment I will now choose web hosting for 12 months, Because I’m building a site as a template and won’t keep it for long. Here we will enter our email

Which will be used to create our Hostinger account.

Note the possibility of registering through Google or Facebook if you prefer Now, we choose the payment method we want to use.Payment can be made by Paypal, credit card, google pay,Even with bitcoin or other virtual currencies. Which is great in my opinion, but I will now choose Paypal..And now we can see in the order summary. We are buying premium web hosting for 12 months at a total price of $71.88 But if we now click below on the gray sentence: ‘Do you have a discount code?’ And we entered the coupon code: ‘ARABICWP’.And we will see now that the price has fallen to twenty-three dollars and sixty-four cents only.Which is about 70% off the original price!So make sure you don’t forget to use your discount voucher here,Now let’s click “Submit Secure Payment” to complete the order.We are now being asked to put in a password for our account,so I’ll quickly enter my password

↚

This will be the page you will reach after completing the payment

Now we will have to complete some small details needed to create the site.This shouldn’t take more than 3 minutes, let’s start by pressing ‘Start Now’.Now they ask us who are we building this site for.If it is for us personally or for the benefit of a client, or for a company in which we work or for the benefit of another person.. The answer to this question is not obligatory,All you have to do is click here below on ‘Skip’.Now we choose the software we want to use to build the site.And of course we will choose WordPress.We now fill in the login data we want to our WordPress account.

It is the same data that we use to access the site admin panel,

But be aware, these are different login details About the one you picked for Hostinger a moment ago.I advise you to save them individually to avoid confusion.Before we continue I tell you that if you have a WordPress site existing and would like to transfer it to Hostinger from another hosting company,You can click here below on the words ‘Select’And ask Hostinger to transfer the site to you for free, without you having to do anything.I’m creating a new site, so I’ll press ‘continue’ Now, they are offering us ready-made designs for our website.But we will learn that later, and of course we will  learn how to design a website from scratch So, below you can click on ‘Skip, I don’t need a template’.

In this window, we choose the domain on which we want to build the site.

For some reason if you accidentally started the course with another existing domain or didn’t buy a domain from Hostinger Now you can check the right box ‘Use an existing domain’And enter the exact domain name that you purchased.But if you are like me and want to get a new domain for your site,Click ‘Select’ in the left-hand box, under ‘Claim Free Domain’.Note that you will not be entitled to a free domain.Unless you choose the “Premium” hosting plan.Otherwise, you will need to purchase a domain by selecting the middle box.Here we will type the domain name we want for our site.. and press “Search”.

What Hostinger does now is check if the name Iwant for my site is vacant or it may have already been booked by another website,

Because every website should have its own domain address.Unfortunately, the search showed that the domain ‘hotelx.com’ is in use, which makes sense,Because ‘.com’ is a popular top-level domain.It is difficult to find vacant domain names in it.I generally recommend finding a vacant domain with the top domain ‘.com’.Since it is a very popular top-level domain that everyone in the world knows and knows by heart,But since we are learning, I will now choose hotelx.online.I check if it is vacant. Great hotelx.online domain is vacant, so we can now click “Continue”.Appropriate, if you prefer a domain with a top-level domain for your country,Such as: sa,.ae. or eg.,You can first try searching for it here on Hostinger,And even if you don’t find the top band you’re looking for,

↚

You can simply buy it from any other hosting site, and connect it with Hostinger Through that page, or later through the account control panel.

I will put links to the proposed hosting sites in the description of the video.Excellent, we have reached the end of the site creation process,And in this window we can see a summary of everything we have done:So, the domain on which we will build the site is hotelX.online ,The site building system that will be installed on it is WordPress.We can also see here the email we chose to administer the site.But be aware that there is an additional clause here called’The site you chose for your site is’ And through it we choose in which server center of Hostinger our site will be located. If we click on the purple pencil here..

We can see a list showing Hostinger’s server centers around the world

Let’s choose in which one we want to place our site.We always prefer that the site be located as close as possible to the browsers,If the main viewers of my site, for example, are from the Middle East,I will choose where the closest servers are located in Lithuania in Europe.And we click on ‘Change’.. and on ‘Finish Setup’.Here we are asked to fill in some personal information, I will fill it in now quickly…Fabulous! Our new website is ready, and we now have three possibilities: The first is to access our Hostinger account control panel,where we can manage the settings related to the hosting account,The second is the site preview, and the third is direct access to WordPress,

Where we can start building the site.

But we’ll really start with a short introduction to our Hostinger account Because there are a number of important possibilities that it is desirable to know,I promise that it will not take more than 5 minutes.Now, we click on Manage Site…You can close the previous window.And first we go to the main page through the main menu.So that we can review things in order.This is also the page you land on when you log in To your hosting account directly from Hostinger,

The first thing we see here is this message asking us to confirm the email address

I will now quickly go to my Gmail account to find the account confirmation message there,And we will find that we have received two messages to confirm the account, and I will start with the first..Great, I’ll move on to the second post.Done and done, all tabs can be closed.There are other things we can do here like managing our payments to Hostinger.And the payment method in the ‘Billing’ tab…Create new sites on the ‘Hosting’ tab.This is of course if we buy a package that allows it..Opening a business email box.With the domain address in the ‘Email’ tab..Buy and manage domains in the ‘Domains’ tab.

If we want to write to Hostinger tech support and get in touch with a representative

So we click on the purple chat icon on the right side of the bottom..And in this window we will go down.And click on “Start Chat Now”. This will open the chat window.We choose “Arabic”Finally, we choose the topic we want help with and write our letter.Support works 24/7, 365 days a year,Do not hesitate to contact if there is any problem related to hosting or your site.And the last and most important thing we can do here,The security of our site is secured by installing an SSL certificate .It is a technology that encrypts communication and data transmitted between browsers and the serverThrough our website, which may sometimes include sensitive information such as: login data and credit card or personal data.And after installing the SSL certificate, if you signed this information.In the hands of a hacker who will not be able to decipher them,Because this information will be encrypted and cannot be stolen.For example, if we open our site in a new tab..I will now write the website address here: ‘hotelx.online’

Do not be afraid if you receive an error message at this stage instead of your site

New sites can take up to forty-eight hours to come online.So in case you are not able to access your site right now,Just go take a break and come back in a few hours to complete this course.So this is really our site, but let’s take another look at the URL field.Next to the header, we’ll see: ‘Not secure’.This warning appears on sites that do not have an SSL certificate installed.In addition to the fact that this phrase causes fear to surfers of our site,Google and other search sites lower their rankings.That does not use SSL encryption and herein lies the importance of the issue.So, in order to secure the site’s security,we return to the Hostinger dashboard.Next to Activate the SSL Certificate, click on ‘Set up’Then we click on ‘Install SSL’is over! The SSL certificate is now installed on the site, and if we go back to our site..We have reloaded the page.

We will now see a lock icon indicating that the connection to our site is secure.

If you are watching this tutorial, and your site is not on Hostinger,In the next course, we will learn how to install an SSL certificate.In a way that is convenient for all other hosting companies.With this, we have finished the boring part of the course.Now we will move on to the second and exciting part.And in it we will finally learn about the WordPress system and start building our site.You can close the Hostinger Control Panel..And now to access the back-end admin panel of the site,Go back to the address field in the browser and type the following text immediately after the site address:wp-admin.This takes us to the WordPress login window,From here we can now enter the site administration panel.Now we write here the login information for WordPress.that we have chosen during the registration procedure,Check ‘remember me‘.. and click on Log In.. Excellent.Now we finally get to the WordPress admin panel.From here we build, edit and run our website from now on.I know this now seems to you a bit complicated and messy.But I promise you that during this course,we will learn about the WordPress system

In all its aspects, everything will look more natural and familiar to you than before

So the first thing we’re going to do here is to make it a little easier for ourselves.It is the conversion of WordPress into Arabic.Those who wish can continue with the English language,But since we will build the site in Arabic.We will now change the language of the system to Arabic.To do this, place the mouse icon on the left side on the Settings tab.We choose general.This takes us to the general settings in WordPress, then initially scrolls down.In the Site Language field, we choose ‘Arabic’, then scroll down.And click on Save Changes.Excellent, note that the language of the system has now changed to Arabic.I’m just going to shut down all the spam here,

We are now reviewing all other general settings on the site

The first thing we can do here is edit ‘site name’ and ‘tagline’I have to confirm that ‘site name’ is not your own domain address,It is not possible to change the scope from here.But this is the name of the site Which represents your location in Google search results?and in other additional places, so we write here the name of our site or our commercial interest,I will name my site “Hotel X” and in the site description I will write…”Luxury middle eastern hotel. For people who aspire to a good life”The following clauses: ‘WordPress URL’ and ‘Site URL’, I stress,must remain the same.Editing it will not change your domain name as I mentioned earlier.It is not that simple.Because changing these fields will keep you out of the site’s administration

↚

It is better to refrain from this if you do not know exactly what you are doing

And under it we can change the mail address of the site administration and if we go down a little bit.We can change the ‘time zone’ according to the region we are i.As well as choosing appropriate display settings for the date and time.I choose ‘The week starts on Saturday’..and click on ‘Save Changes’ Excellent, we finished setting the general settings in WordPress.If at any moment we would like to view our site,Click on the site name in the top right bar.This is how our site looks now.If the top bar of WordPress disappears like I have now,Try to reload the page..it should reappear.Don’t worry, it only exists because we are connected to the site administration,It will not appear in front of your browsers.Now, the home page is the default page for WordPres

Which displays the latest publications (posts) on the site

We note that there is now one post, for example,called “Hello World”.It is created automatically upon every installation of WordPress.Click on it to open it.. and here is the page of the same publication.. with the title.The content of the post.. There is even a comment here as a model,But what concerns us now is precisely at the top.Because if we take another look at the URL line in the browser,We’ll see that our website address is getting a little complicated:”hotelX.online/?p=1″Doesn’t look comfortable and we expect the title to be cleaner Like big and famous URLs,For example: “hotelX.online/hello-world”This structure in web page titles is also called ‘permanent links’.or Permalinks, and in WordPress there is a very easy way to edit it

We start by returning to the control panel by clicking again on the name of the site in the top bar

Now we put our mouse back on ‘Settings‘ in the side menu.This time we click on ‘permanent links’.In this window we can choose from different types of common settings for ‘permanent links’,But there is no need to complicate matters, because the preferred option is ‘article title’.It will simply display the page name or post name immediately after the site address.I will select it..then scroll down..and click on ‘save changes’.Let’s go back now to the site by clicking again on the site name on the right side at the top.We make sure that the link building has actually changed.I’m going back to Hello World’s post And here we see that the structure of the page links has changed And it looks much better now than before:”hotelX.online/hello-world“This will change automatically on any new page we create on the site.We can go back to the control panel.

What we will learn is how to check

if there are new updates for WordPress.For this purpose we now click on ‘Updates’located inside ‘main’ in the side menu,And here, if we go down a little…We will notice that the version of WordPress we have installed on the site is 5.8.This is also the latest version, so let’s move on a little further down..Here we can also check for updates for’Extras’.. ‘Templates’.. and ‘Translations’.Of course, we will learn more about all these terms later.But for now, remember that you can update all of them from here.It is always recommended to keep all elements of the site up-to-date.Because important security updates are released from time to time such as a speed boost or newer and more advanced advanced features,

If you have updates available now- it’s time to download them,

But remember that updates may also cause some problems with the site sometimes,So we always advise to do a backup before making updates on this page. I will add to you in the video description a free link to add to the site backup.The next thing we will do, is to install the plugins we need to build the siteTo do this, we will now go to the side menu, to ‘Extras’.

Here we can see the list of all the extensions we have now installed on the site.Note that we now have 8 plugins installed,But we don’t actually need almost any of them, they just overload our site,So we can teach them all now.By clicking on the checkbox here at the top..Then we click on ‘Execute the command’..and choose ‘Disable’..and click on ‘Apply’.

We have disabled all active add-ons, and in order to completely remove them from the site

And we press again on ‘Execute the command’.. ‘Delete’.. ‘Apply’.. and press ‘OK’.Excellent, we have removed all the extra plugins from the site, except for Litespeed Cache,Because this is an add-on that helps improve the speed of our site, it is therefore recommended to keep it.And now it’s time to explain: what add-ons really are.Plugins are actually small software that.we can install in WordPress.In order to add new features and features to the site.For example, if we want to add a contact form to the site

We can install an extension that gives us the ability

in WordPress to create a contact form.And if we want a chat button,We can install an extension that allows us to add a chat button to the site,And if we want an internet store with a shopping cart and a payment page,We can install an extension that does this as well.In WordPress there is a huge plugin library containing more than 50,000 In addition to any other purpose that comes to your mind,So let’s start now by installing the plugins that are needed to build our site.Click on ‘Add New’ at the top.

The first add-on I want to install is called Contact Form 7.

It allows us to create and add contact forms to the site.Write it here in the search field.. This will be the first addition here on the right side Excellent, we notice that Contact Form 7 has been added to the ‘Add-ons Installed’ page Pay attention to the new tab that has been added In the main menu in WordPress called “Contact”,And if we go into it now…Through it, we can create and add contact forms to the site,It is a possibility that we did not have in the basic version of WordPress.We’ll come back here later in the course.Now let’s continue installing the rest of the plugins that we need to build the site,We put the mouse back on the ‘Additions’ tab .This time we choose ‘Add New’.I will now look for an add-on called Elementor.

This will be an add-on that will allow us to design the site from scratch with a complete personal fit

Instead of ready-made design templates, I will expand on this topic further,But now we click on ‘Install Now’ next to the ‘Elementor Website Builder’ Instead of pressing ‘Activate’ this time.We will now continue to install the rest of the plugins needed to build our site.The following plugin is called: Elementor Header and Footer Builder And I see it showing up here below.It is actually an improvement of Elementor.The add-on we installed a few moments ago.It also allows us to create a Footer site The site is fully personalized I know this seems unclear to you, but in a little while we will get to work,Get to know all these topics and I promise you that everything will be clearer Click on ‘Install Now’.We continue to install one last add-on called ‘Starter Templates’.Here it is.. and it allows us if we want to bring in ready-made design elements For pages or even entire websites into WordPress And shorten the time we spend designing the site from scratch,So we will click again on ‘Install Now’

While it is installing, I wantto talk about the data shown

On this page under each add-on, such as star rating.. Number of active installs When was the last update..is it compatible with the current version of WordPress.I always recommend looking at this information Before you install a new addition to the site Because the plugins we want to install.It may not always be 100% reliable or professionally built,Therefore, the best way to assess the level of safety and security of each additive is Have a look at these data below before installation,This process relieves you of problems and frustration later.Ok, Starter Templates has finished installing,Now let’s go back to the ‘Add-ons Installed’ tab.Now we mark all the new plugins that have been installed And we activate it by pressing ‘Execute the command’.. ‘Activate’.. ‘Apply’ excellent. With this, we have finished installing and activating the four plugins that we will need to build our website,Those of you who are careful must have noticed that. we have added new tabs In the side menu like Elementor And tracking templates for new additions we’ve installed, which we’ll get to later in the course

↚

The next thing we will do is install a template on the site

In order to better understand what templates are, we go back to viewing our site,And now we see the default WordPress design. It really doesn’t look very nice.But we note that there are design touches..such as the green background Text font sizes, headings, and a specific page structure Begin with the name of the site and the description of the site at the top The last one is in the bottom bar in the search control and additional items.You may also have noticed that we saw exactly the same specs on the ‘Hello World’ post page.A few minutes ago and if we go into it again now .We’ll see that it’s actually designed in a very similar way.In practice, this happens because the design specification of our site is defined by an element called ‘Template’.The site template contains a set of design specifications and editing capabilities,

Which determines how each section of our site looks.

Header site and main menu, background color, text design, Footer The site, the page structure, and just about anything that is displayed on the screen. Just like plugins, WordPress has thousands of different templates. which we can choose from with thousands of different designs. But before you panic and close this video because you wanted to design the site on your own.As I explained earlier, we will not be limited to designing a template on our website Because it is precisely for this reason that we have installed the Elementor add-on

Which allows us to design the site from scratch on our personal taste And what makes us talk though about molds now

is that there will still be a few parts of the site,We will not be able to design it completely with the free version of the Elemntor Like main menu and blog page,So we will now move on to installing a slightly more advanced template on the site.Which also allows us to design those parts as they should be.So let’s go back to the control panel.. and this time we put the mouse on the ‘Appearance’ tab And we choose ‘Templates’. Here we can see all the templates now installed in our site .All these templates are simply default templates in WordPress.We can note that the Twenty Twenty-One template.The template is now active on the site.Also note that, unlike plugins, our site may have only one active template.In order to install a new template, click on ‘Add New’ at the top.

 This will take us to the template library in WordPress,

Here we can browse and find thousands of different templates designed for all kinds of websites.But I repeat that this does not concern us because we will design our site from scratch.With Elementor, so before we install a theme,It must be emphasized that these thumbnails found here,does not reflect how our site will look after the template is installed,They are just web design templates that we can create with these templates .The template I want to install is called ‘Astra’ and let’s type its name here above in the search And it’s this template, don’t confuse it with the ‘Astral’ template!The ‘Astra’ template is one of the most popular templates in WordPress today.Since it offers a lot of design possibilities and its speed is high,And the most important feature for us – it’s fully compatible with Elementor,So let’s now click on install..and on ‘Activate’ Great, we note that the Astra template has been installed and activated on the site So, now let’s go to our site and see what it looks like after replacing the template.We note that the design of our site has completely changed,

We now have a top bar here with the site name and the start of a main menu.

The background has changed to gray and white.A sidebar is added here on the left. Practically every site design is completely changed after changing the template,It still doesn’t look very attractive, but you don’t have to worry.Because we will immediately learn how to start designing the site.We go back to Control Panel and here we put the mouse back on ‘Appearance’. This time we choose Starter Templates.I repeat that this add-on that we have previously installed, which allows us to.Bring and edit ready-made professional designs to WordPress.

If by chance there are determined among the audience,

I reassure them and tell them that we will of course learn how to design a website from scratch.However, bringing in ready-made designs is an excellent way to get inspired.To ensure that our website looks as professional as possible.Even if we do not have previous experience in web design.So, in this window we will be asked to choose one of 4 tools for website design.Beaver Builder, Gutenberg, Elementor or Brizy.The most loved tool is definitely Elementor.So we will choose it now by clicking.This takes us to the Starter Templates library The giant, which contains dozens of ready-made designs for websites Which we can now bring to WordPress .Note that the designs we see here now are not templates.But designs are already ready from A to Z, we can bring them to our site,And the images here accurately show what our site will look like after the design is brought in.Here at the top, in the top bar

We can classify designs according to the type of site we want to build,

I want to build a business website, so here I will choose Business.We can also choose whether we want to display all designs,Or the free designs only or the premium designs only.So we notice that some of the designs here are marked with Premium,This means that the use of this design can only be done by purchasing a subscription of $149.But in fact, there is a huge assortment of free designs here that leaves us beyond that.But if you accidentally like a Premium design,I will leave you the link to buy the subscription in the description of the video.I will choose to show free designs only, Let’s pick the number one location here: Outdoor Adventure.On this page we can see closely the design of each page of the site,

↚

Which we bring and note that it includes 5 pages.. Home page..Projects .. Services .. About page and Contact page.

I think it looks great, so below I’ll click on Import Complete Website. Here we choose that we are a beginner at WordPress and that we are building this site for ourselves.And we click Next. This part can be bypassed by clicking on Skip.At this moment the design is brought to our site, it should not take more than 3 minutes Excellent, the site has been successfully fetched, now we can click on View Site Pay attention to the design of our wonderful website now.. of course we did not bring only the home page But 4 additional pages that we can now navigate through the main menu And look how, in less than an hour, we got absolutely amazing results for a website Complete and designed, but of course we won’t end that here for sure. So, let’s now learn how to edit every part of this website It is suitable for commercial interest and for our specific taste.Back to the control panel. Excess tabs can be closed here in the browser.

The first thing we learn is how to edit and manage the pages of our site.

So we will now go to the Pages tab And here we can now see the list of all the pages of our site. All of these are actually pages now brought in with the website design from Starter Templates.If we want to change the names of the pages now, for example,We can place the mouse on the page we want to edit and then press ‘Quick Edit’..Here, I can change the page name from About to About Us.The second field here changes the last part of the page title,Just as we saw when we edited permalinks,So I will change it too..to Who we are..and press update I will now translate quickly and in the same way the rest of the site’s pages into Arabic,Excellent if we want to delete pages from the site, for example I want to remove the Projects page.As well as the blank sample pages: Sample Page and Privacy Policy.I can select the three pages..and choose to execute the command Move to Trash… and press Apply.So, now I just moved the 3 pages to the ‘Trash’

Where it is kept for 30 days before deletion,

But if we want to restore a page we deleted by mistake,or permanently delete pages,we can press ‘trash’.We place the mouse on one of the pages and click on ‘Restore’ or ‘Delete permanently’To create a new page on the site,we click on ‘Add New’ at the top.You can close the window that appears here,And that takes us to editing pages in WordPress.Before we get started, I’d just like to click on the 3 dots here on the left-hand side at the top,Deactivate ‘full screen mode’ Because I prefer it like this, with the WordPress framework around it.

I start by giving a name to the page I will call it: ‘Blog’

Then we can simply start writing,Or click on the black plus here on the left side,To add different controls to the page.Since we’re talking about a blog page in this case,There is no need to enter any content for the page,So we just publish it by pressing ‘publish’You can cancel this reminder here..and click again on ‘Publish’Now we can see the new page we created,By clicking on ‘View Page’. And that’s it! This is how editing is done.We delete and create new pages in WordPress,Of course, we will later present these topics and learn more about them.We will also learn how to work with the Elementor Editor

 Which will replace the basic WordPress editor

we just sawBut before we get to that,Note that if we now go to the main page, for example.We will not be able to return to the blog page Because it is still not in the main site menu. So, what we will learn now is how to edit and add pages to the main menu And for that we click here at the top, in the top bar on ‘Customize’From this area in WordPress we can edit everything related to the site template ‘Astra‘ We will now use it to edit Header Site Which is practically all the top font right here at the top and it includes the logo and the main menu.We start by adding the blog page to the main menu, We can do this through the Lists tab We note that we now have only one menu on the site called ‘Menu’.It’s simply the main site menu, so let’s click on it,Here we can see all the pages that now appear in the main menu.The page indicated in red is a page that was appearing in the list and we have removed it from the site In order to remove it now from the main menu, we click on it,Scroll down..and click on ‘Remove’ Excellent.

↚

If we now want to add a new page to the list, we click on ‘Add Items’

Now we can see the list of our website pages,From there, I will add a blog page with one click.Now we see that the blog page has been added to the main site menu.If we wish to control the order of pages on the site,We can press Reorder And now arrange them simply by arrows, the way we want them.In this way we can also create a submenu in the site,By arranging the pages we want within the submenu Below the page from which we want to open the menu,So, if you want, for example, to display the pages ‘Blog’ and ‘Contact Us’.In the submenu that opens from the ‘Hotel Services’ page I arrange them under it..and enter it into the submenu by pressing the left arrow.Great, now we see the submenu that pops up from ‘Hotel Services‘

The pages include ‘Blog’ and ‘Contact Us’. Doesn’t look so cool

But shortly we will also get to the design of the menu.I just want to rearrange the pages the way I want.When I’m done, click on Done.Finally, in order to save the changes we have made, we click on ‘Publish’ at the top.And here we are, we succeeded in adding the blog page to the main menu,And now we can go to it with the click of a button.. We got back to the blog page.We now notice that it displays the default Astra layout.Unfortunately, that won’t change much because the blog page.It is one of the few areas on the site,We wouldn’t be able to design it to our personal taste with the help of the copy Free from the Elementor.Later I will expand on the topic of the paid extended version Its name is ‘Elementor Pro’ for those who want it.But for now, before we get to the main page design, Let’s make it act like a real blog page

We display a list of publications on the site.

We go back to the main ‘Personalization’ bar.. This time we choose ‘Home Settings’.Here we can define the ‘home page’ settings of the site,Which will be the page that is displayed in the main domain hotelX.online.Which is now defined on the ‘Home’, as well as the ‘Articles page’.It is the page that automatically displays the list of publications on the site.Here we select the ‘Blog’ page. Excellent.Now we notice that the page shows the post ‘Hello World’

Which is the typical publication we saw at the beginning of the course

It is created automatically once you install WordPress.But from now on any new post we create will be displayed on the ‘Blog’ page.without having to do anything extra.Now let’s create two more posts and see exactly how it works,All we have to do is save the changes again.And return to the control panel by pressing the X.. and on the name of the site …Here we now choose articles from the side menu And here just as in pages, we can create and manage publications that will appear on the blog page on the site.I will start by deleting the sample post ‘Hello World’ by clicking on ‘Trash’ Now I will create a new post by clicking on ‘Add New’.

This brought us back to the WordPress Page Editor we know

I will call the post… “The 7 Best Restaurants in Dubai” Enter a short text that you prepared in advance.. and click on ‘Publish’ Great, I’m going to make another post quickly,We will shorten the process by placing the mouse on ‘New’ in the top bar… and selecting ‘Article’ Once again we choose a title for the post: How does the repeat guest program at Hotel X work? Here I also enter a short text .. and click on ‘Publish’ Now back to the site.. and go to the ‘Blog’ page. excellent!.We see that the summary of the two posts now appears on the page, Our blog appears to be working as it should, And if we wish to access from here to the pages of the publications themselves,We can click on one of them.. and read the full post And if we go further down…we can even leave a comment. So, all that’s left now is to learn how to design blog pages

We’ll get to that later… Now let’s get back to the customization.

 And continue editing Header site Here all the header design capabilities will be in the third tab.It’s called ‘Header Builder’ but before we start editing it,I note that we actually have two types of Headers on the site.The normal Header we see here on the blog page And an additional transparent header that we can see if we go to the home page.We will also find it in the rest of the pages of the site.We will now start from the normal Header design. But be careful, you are also on the blog page like me

If you do not intend to include a blog page on the site,

You can go directly to the next section of the course.And in it you learn to edit the transparent header The first thing we do is replace the website’s logo, so we choose ‘Site Identity & Logo‘” in the sidebar.. First, here we uninstall.A different logo for ‘Retina’ devices we don’t need it,Here, we can now choose our site logo. We note that we have a logo that was brought with the design of the site “Outdoor Adventure” but if we want to replace it with our own logo Then we click on ‘Change Logo’.. This will open the media library on the site,Where all photos, videos and media files will be displayed later that we upload to the site over time.

If you have a business logo, you can now drag it here

from the computer and add it to the media library. As for those who do not have a logo, So let’s learn how to create a logo designed for your website Or for your own business for free and within 5 minutes. In a new tab, open a site named ‘Logo Maker’ in the title: logomakr.com is, in fact, a free and easy online tool for creating logos. You can close this video.. and start designing your own logo.I will start by adding text from the tape on the left side… and write here:”HOTEL X” has a golden color that you chose in advance.. And then I just copy and paste the value I saved Here back to Logo Maker here on the right side I change the font of the text and choose it from here at the top, from the left menu Designer Picks.. and in the left menu select Cormorant.Now, I want to add an icon to be displayed next to the text, Click on the table icon ‘Browse all logos’ at the top left.

↚

This opens a store of icons that we can use to design the logo

Note that they are arranged by categories, so I would choose Shapes I’m looking for an icon that I like I think this is cool.. Now I just have to put it next to the text I make it smaller..and color it in gold too..and that’s all there is to it, We now have a new logo for the site, to save it on the computer.We now click on the right side at the top… on Save Logo and on: ‘No thanks, download low resolution file'” here below, in blue Before uploading the logo on the site I remind you that, we actually have two types of Headers One with a white background appears on the blog page And the last transparent one appears on the rest of the pages as a dark background.I don’t think the golden logo we just created

It will look good on a dark background on pages with a transparent header

So what I’m going to do now is upload an additional copy of the logo,But this time in white so that it looks beautiful.On pages with the transparent Header. Then close this window.Select the text and the icon..color them white Click on Save Logo again and download the logo again in the lighter version.The last thing I will do here is re-upload an additional copy of the logo,This time only the icon will be included And I’m going to use it to display the site icon, It is the icon that is displayed in a small size at the top.Next to the site name in browser tabs, just like colored shapes that appears here on the Logo Maker tab. I will go back to editing.. and delete the entire text This time, color the icon black And for the last time I’m downloading a third version that only includes the site icon.

That’s it, we can go back to WordPress and close Logo Maker

Now I just have to drag the 3 files we downloaded directly to the media library.I choose the golden logo because I am now editing the normal Header and click on ‘Select’ Now if you like, I can cut it to a more precise size,But I don’t think there is any need, so I’ll press ‘Skip cut’ again excellent,We can now see the new logo shown here at the top of the Header site. And if we want to resize it, we can now drag the slider into the ‘Logo View‘ field. Then we continue down Here we can also add the site icon that I talked about By pressing ‘Select the site icon’ And choose the site icon that we downloaded Skipping the story again And if you don’t see it change right on the site, that’s perfectly normal!

Sometimes it may take some time and there is no need to be alarmed.

And with this, we have finished editing the logo,Let’s go back to the ‘Header Builder’ menu..,And now we move on to releasing the button by pressing the Button.I want to write in the text of the button.. “Book now“.I want the link to lead to the ‘Contact Us’ page.In order to get the link, I now open the site in an additional tab. Go to the ‘Contact Us’ page. Copy the page link.Paste it again in the ‘Link’ field.Just hit the button to make sure everything works. excellent! Return to the blog page.Now, if we want to release the button, we go to the DESIGN sub-tab.Here we can design the button colors now in a normal position or in a mouseover mode I want to change the background color of the button to gold,So I’m copying the color that I set earlier..And paste it in the normal color..I change the mouse over color to black.Fabulous! I also want the button to be square and not round,So at the bottom I change.. ‘Frame Angles’ to 0..And that’s all there is to it! We are back again..And we move on to the main menu edit.Now that we don’t have a submenu on the site,

The settings here will not be important to us,And we can simply go directly to DESIGN…

Here, I want to change the menu colors, so I’m going to scroll down..Until I get to Menu Colors.I want to change the text color here to black.To golden when you hover the mouse.Fabulous! We note that here we have the possibility of another type of color called Active.This will be the display color of the page we’re in right now,In this case the blog page, but I don’t want to add it.Here we can also edit the menu background color and text font.., the spaces between the items in the list,But I am very satisfied with everything so come back again to Header Builder.And here’s our list looking pretty good,But before we proceed to editing the transparent Header I’d like to know this bottom area here at the bottom which is shown as we can see Header website with building logo,The main menu and the . button Here, we can if we want to Now, change the location of the items in the Header.For example, if I want to reverse the order of the logo and the menu, I can drag the logo to the left side.The menu and the button to the right…You have now reversed the order of the items in the Header.

If we want to make more complex buildings,

For example, we can put the logo at the top, the menu in the middle.The button is on the left side.Here there is also the possibility to add new items to Header.By clicking on one of the empty fields.and choose a new control from the list like Social for example..To display icons with links to social networks.Or the search control if we want to add a search box to the site And now, just as we’ve edited the logo, the button and the main menu,Looks like we’ve added new tabs in the sidebar Allows us to edit the new controls we added to the Header.I like the look of the previous menu,So I will delete the new controls I added here..The list was returned to the original order.And in the end, I will explain to you how to edit the background of the Header For this purpose, we press the gear wheel to the right of the line we used in the lower area And here we can first determine the height of the Header.In the Height tab and in the DESIGN fiel.We can edit the background color..and choose a uniform color or ‘Gardient’

Which displays a transition between two colors..or even a ‘background image’.

Here we can choose an image from the media library To be displayed in the background of the Header I’ll stay with the white background and go back to Header Builder.Also on the site now, I can finally edit the transparent Header Because as we have seen before, it appears in the rest of the pages, the Header is transparent and different.Normal, which is edited separately from the header So let’s go now to the home page.And to start editing the transparent Header And we click on ‘Transparent Vertical Bar’ in the sidebar.In all the site here we can first turn on the transparent header And then categorize and specify in which pages we want to display.In any case, there is no need to change anything here because I like the status quo.If we want, we can always specify its width for each page individually Through the page editor in WordPress In the next box: “Activate in”We specify on which displays the transparent Header will appear On desktop only, on mobile only or both..On the desktop as well as on the mobile.I want the transparent Header to appear

We will learn very soon how to fit Header to the site

The site for mobile and tablet displays.If we go down a bit…We can choose here a separate logo for the transparent Header.I will now choose from here the white logo that we created with Logo Maker.Which will be displayed on the dark background image..But here again I’m going to cancel a “different logo for Retina devices”.Excellent, we proceed from here to the design of the transparent header In the DESIGN tab..Hence I want to change the color of the links on mouseover.So, I’m going down to Menu Color And change the position of the mouse hover to the golden color. Fabulous! If you add additional controls to the Header Ex: Social.. Search.. control.or any other control.You can design it here individually, specifically for the transparent Header.We’ll be back here shortly.That’s all it takes for now,we learned how to design our regular Header website.Also the transparent header.And the next important topic that we are going to learn now is how it is compatible with mobile devices and tablets as well

This is a very important step in our current reality.

Because more than 50% of your website’s visitors browse it on a mobile device.Fortunately for us its fit is uncomplicated,All we have to do is click at the bottom of the edit bar on the display icon that we want to edit,You can first close the download here..Now, I will choose here the mobile icon.This allows us to see what the site and the Header will look like.which we created on mobile.So, in this screen we will have a transparent Header.The Header is also normal.Since we are in the transparent Header edit Let’s start with it this time.So the first thing we notice is that the background color of the Header.It might for some reason change to white To rearrange the order, choose Background Overlay Here at the top, in the sidebar…And we bring it back to be transparent by dragging the Transparency Slider here at the bottom…Almost to the end…And I want to give it a black background this time To have a smooth separation between the Header and the rest of the page.If we now click on the menu icon…Note that the menu colors here have changed again to red…So, let’s move here again to ‘Menu Colors’.

I will change it to black in the normal case And for golden when you hover the mouse.

Excellent, if we want to edit the menu icon itself/We can scroll down in the edit bar to ‘Toggle Color’And I want to change the background to completely transparent And keep the icon itself here only.Also note that it has now been added to the bar below.A new area called ‘OFF CANVAS’where it displays the building of the menu that is opened in mobile,Which opens when you click on the icon,We can now add new controls to it Just like in the normal Header.If we want it to appear above or below the main menu.Another thing we can see here,Same is that in the Header.Only two items appear now.They are the logo and the Toggle Button.It is actually an icon to open the menu And it has many exciting editing possibilities,So let’s get to it now by pressing the Toggle Button Now we can choose, for example, from 3 different icons..But I will stick with the current one.As well as from 3 different styles.. But I liked the first design, so I’ll stay for now. on filling.We can also add text next to the . button.In the ‘List Label’ field, such as: List.But this time I also liked it more without the text, so I will give it up too..Let’s continue to the DESIGN tab.. Here we can control the size of the icon in the Icon Size field.And control its color in the Icon Color box

↚

Where we are now about colors that will appear in the normal Header So try not to confuse them.

Before that in the tab we practically edited the colors of the transparent header.’Transparent header bar‘ So let’s move now to the blog page And edit it to see Header normal site From here, I want to change the color of the icon to gold background color for transparent.Great, let’s see what is the status of the menu that opens in the normal Header Here also I want to change the color of the mouse hover position.The quick and short way to edit the main menu It is done by pressing the main menu in the bottom bar.We proceed directly to ..DESIGN.We go to “Menu Color”Change the color of the mouse over to golden.As well as the color in Active Excellent.. Finally, I would like to change the background color of the list to white as well.I can do it here in the background.It’s all over!We’re almost done, I hope you guys follow along.We have one small possibility left that we haven’t recognized yet It is to change the style of the menu that opens in the mobile,To access this ability, we press the cogwheel next to.OFF CANVAS,Here we can choose one of 3 different menu display styles:This is the current Dropdown mode. Which displays the menu on a full screen.. Full Screen..

Which displays the menu on a section of the screen Flyout and I like the Full Screen mode

I also want to center the links in the center by selecting ‘Medium‘in the …Content Alignment and Dropdown Target For those who do not know, it is a possibility related to the sub-menu that is not currently on the site Therefore, it does not matter much to us But it generally determines whether to open the submenu Everyone who has a submenu on the site, will understand this explanation better.Finally, we go to the DESIGN tab And here we can change the background color or the color of the close menu button In the box Close Icon Color I don’t want to change anything here.. so it’s over,Finally we finished editing the header Either in normal mode, or in transparent mode Also, fully compatible with mobile phones, I think it looks great Now let’s go back to the main customization bar… and to the Desktop display,And click ‘Publish’ to save all the changes we’ve made.The next thing we will do before leaving the customization is to learn how to design a blog page As I mentioned before, we won’t have much editing capabilities here But let’s get to know the ones here.

We can find the comprehensive design possibilities of the template

Let’s start with the colours…Here we can control the default template colors I will change the ‘Link Color’ and ‘Template Color‘ to the golden color I will change the ‘link color on hover’ to black This will change the colors of links, buttons and additional elements on the site.We go back one step.And this time we choose ‘fonts’… and ‘base font’.Here we can edit the design of the regular texts on the site And to choose her font, size and other advantages.If we want to edit the titles.We can see an example here in the sidebar. It’s big and inappropriate.We can go back one step.. and go to the ‘Headers’ tab

We go down from here.. to address 2… and change the size.. to 18 pixels..It looks great but we’re not done yet, because if we get into one of the posts now .And we went down.We’ll see that the button design here too needs an update.. so I’ll go back again.This time I will go to the buttons.And here we can also specify the design of the universal buttons on the site, which I want to change to the golden color. And for the black color when hovering the mouse..I will also reduce the ‘frame angles’ to 0 And that’s all it takes!And of course, each button is manually designed, like this one in the Header will not be affected by the overall design settings,But all the remaining buttons that we did not specify a specific design.You will get these settings as .default Back to the main bar.. and to the blog page.

We can find additional blog editing capabilities

In the ‘Blog’ tab..Blog/Archive.Here we can define precisely Any data that is displayed within the summaries of the publications shown here on the blog page So, if you click on the eye icon next to comments, for example,I can opt out of displaying the number of comments on a post.If we go back..and choose there ‘single article’We can also do exactly the same for the pages of the publications themselves But we won’t stop there now.The last thing I want to show you quickly is how to edit sidebar here To do this we go back to the main customization bar And we select the ‘Tab’ sidebar…Here we can precisely define in which pages the sidebar is displayed

On which side of the screen will it appear?

And at the bottom, in the ‘Sidebar’ view.We can limit the space it occupies from the width of the screen I think 30% sounds great.In order to edit the controls in the sidebar,Back to the main bar Here below, we choose ‘widgets’.For the main sidebar, we click on ‘I understand’Here you can edit all the controls (widgets) in the sidebar One click.and edit the titles or the controls themselves For example, I want to delete all the duplications that I think originated here Because the controls appear twice for some reason,in English and in Arabic,So I will now select and delete them one by one.We can also add new controls By clicking on the plus sign here at the top

And here at the bottom, or even among the controls themselve And we choose from a list of dozens of possible controls that we can add to the sidebar.We won’t stop there now because not everyone will have a blog with a sidebar on the site.But whoever is interested in this is invited to come here to study for himself the different, available controls.I am available for any questions via comments

Now we’re done learning everything you need to know about editing ‘Header’

Website and blog page through customization.Let’s go back to the main bar.We save the changes.. and go back to WordPress Now it’s time to learn to edit and design the rest of the pages of our site and I’ll start by going to the main page To start designing the page, in the top bar, click ‘Edit with Elementor‘ I remind you that Elementor is a WordPress plugin

It provides us with an advanced editing interface for designing the pages of the site.Its great advantage is that it allows us to design website pages From scratch without being associated with the design of the template As it was in Header website and blog page So, this is the editing interface in Elementor Here, just as in the customization, we see on the right side of the display screen Editing bar and on the left is the preview of the page we are editing with Elementor

↚

We can start editing each section of the site freely

And if, for example, we want to edit the headline here,we simply click on it And now we can edit the title text through the edit bar And if we want to change its design, we go to the ‘Format’tab.. Here we choose the fonts For example, I want to change the font family.. to Cormorant.Of course, here we can edit the size of the title as well.. and its weight..And other other features The next thing I want to do is change the background image For that, we click on the 6 dots at the top of the section.We go again to the ‘Format’ tab.. We click on the image here Now we can choose a new photo from the media library But now, instead of uploading a picture you made earlier Let’s get acquainted with another interesting and practical tool Free Image Repositories for Website Design I will now switch to a new tab in the browser To a site at the address pexels.com Here we can find hundreds of thousands of free images that are professional and available for use Now, on the right, here I choose the horizontal direction In order to display only landscape images suitable for the background of the site

I will now look for a suitable picture.This looks good to me, so I’ll click on it..And again click on FREE DOWNLOAD Done, you can go back to WordPress..And upload the image we downloaded to the media library.Click on ‘Add Media’In my opinion, that sounds great..but be careful

When you usually choose background images

The ‘Size‘ field will be here on the right-hand side in the ‘Default‘ position.You will notice that the image in this case is not suitable for the size of the partition So, if you choose a background image and see the situation like this All you have to do is change ‘Size’ to ‘Cover’You also notice that the image displayed on our website is darker than the original image This is because of the definition of the wallpaper cover for the section here So if we close the ‘Wallpaper’ tab now..and open the ‘Background’ tab.We will see that a dark background cover is defined here This appears to highlight the incoming texts on the background image I’ll keep it as is but change the color For black.. and the highest degree of transparency.. to this extent..The next thing I’d like to do is make this section a little smaller.Because it occupies all the screen

So this time we will move to the third tab in the editing bar – advanced Here we notice that ‘inside margins’ have been defined as 270 up and 240 down And what this cell actually does is add blank margins between the elements and the section boundaries So we will now bring it down to 210.. and 180..We see that the margins are reduced and the section no longer occupies the full height of the screen

If we want to see how it looks now in full screen

We simply click on the arrow shown here in the center of the editing bar on the left side And now we can also see Header the site we created And it looks perfectly fine in my opinion, so let’s bring back the editing tape.. and continue editing the rest of the elements I want to delete the subtitle “Explore the Colorful World“By right click.. delete And I want to color the dividing line here at the top with another color, so I click on it Go to the ‘Format’ tab And I change the color to the golden color that I have used several times in various corners of my site

And because I use this  color a lot, and to save time, I can save itBy opening the color bar and pressing the +Give it a name..and click ‘Create’.And if you want to use it again, instead of copying and pasting it I just have to click on the globos icon Next to choosing the color.. Scroll down..and choose it from the list of saved colors Done and done, let’s continue editing,now I just want to pull a divider under the title, so I click on it And I drag it under the main heading.. I also wanted to bring them closer Where we see them are a little far from each other and that’s I guess because Inner title margins that give it more page size In order to check this, Igo back to Edit Address tab ‘Advanced’.. and we will already notice that The top and bottom ‘inner margins’ are defined here which creates a space between the element’s content -That is, the text, and between its borders, which are now indicated in blue So I reset it excellent. Before moving to the button

↚

I would like to add another short text here under the divider and for the main title,

In order to add new items to the page You should now click on the table flag in the top section of the edit bar.This will open a very long list of elements that we can use to build the page such as titles, images, videos, buttons,Galleries and more / many more advanced and complex items What we will learn about during the course Just be aware that the items shown here are under the ‘Pro’ category.That is, all items with a small lock icon appearing on them It will only be available with Elementor Extended Edition The extender is priced at $49

I personally use it on all my sites and highly recommend it Because it introduces a lot of new controls and capabilities that are not available in the free version And the blog page with a complete personal fit like: Header website design Attractive animation when scrolling (scrolling) the page.New controls like contact us form,login or price list And many more new features and capabilities Which may raise the level of your site by several degrees, and even reduce the time of building the site But in this session It was important to me that you know that it is possible to build a complete WordPress website Even without using any paid add-on or software.

So we saved those costs this time as well.For those who want to read more details about Elementor Pro I’ll leave a link to additional information in the video description.So, in order to add text to the page now Climb up in the editing bar.. we find the item ‘Text Editor’Now we put the mouse on it, click on it and drag it Directly to the place we want it to appear on the page.It’s a little hard to watch now because it has dark text and is displayed on a dark background But I will write here now.. a short text describing the hotel ‘I turn’ to the Format tab Here I will just center the text in the center.. and color it white.We continue from here to the button release Note that it got part of the design settings from the template Because we have defined a holistic button design in personalization So, what we’re going to do here is just change the text from “Learn More””Book now” and in the link, I want to enter again a link to the contact us page But this time, instead of copying the link from the page

We can simply write the name of the page inside the box

Choose it from the list that opens It will automatically copy the page address to ‘link’Excellent, the section looks great But I want to improve it further and add an extra button Next to the button we just edited But pay attention, if we now go back to the list of items.We tried to drag an additional button to the right or to the left of the existing button.We’ll see that we can just put it above or below the button This happens because the page is in the Elementor It consists of a building somewhat reminiscent of a stream The lines in the table are the sections,indicated by a light blue frame

It always occupies the entire width of the screen.Like the sample top section here, which has a background image set to Within each section like this we can add up to 10 parallel columns Indicated by dashed gray frames.We notice that there are now 3 columns in the current section And we can put inside each column like this Any number of elements we want, one under the other.We notice that the middle column contains the 5 items that we have now editedSo, because of this restriction, we couldn’t put the new button next to the one in the middle column But above or below it or in parallel columns only.It’s a bit complicated topic, so if you don’t fully understand it.That’s okay, as we’ll be working a lot on sections,columns and items very soon.We will understand things little by little until we feel that they have become completely normal In any case, in order to solve the current problem we are facing

We can use a new element called ‘Inner Partition’

So, I will now go back to the list of items by pressing the table icon This will be the first item on the right And if you drag it now to the center column under the buttons.We will notice that it allows us to split the column into two additional columns Creating more complex buildings Practically speaking, we are not at all obligated to be satisfied with two columns, because we can add Easily a new column by pressing the right button Add a new column Or delete columns by pressing the right button Delete Now that we have two more parallel columns.We can drag the first button to the right column Just to align it to the left.. and drag the second button to the left column

In his text I will write this time.. “Explore more”I’ll leave the link blank for now, we’ll come back to it later Now let’s go to the Format tab And this time we’ll design the button a little differently I want to make his background here completely transparent Instead add a frame by selecting ‘frame type’ full color.. in ‘display’ I enter 1… and change the frame color.. to white Excellent. If we now want to add animation to this button on mouseover.We can press ‘hover over item’ And now we define the colors that are displayed when the mouse is hovered over the element

↚

I would like the text color to change to black.. and the background color to change to white

And that’s it, we finished creating our first section in the Elementor Admit it wasn’t too complicated! Now,just close the image upload here below And we fold the editing bar again in order to see the site on a full page I think it looks great, we did an excellent job and learned a lot along the way So let’s bring back the editing bar now.And we save the changes by pressing ‘Modify’ here at the bottom in the green button.Great, let’s move on to the next section Here below, I want to create a similar section showing hotel facilities and services But I prefer to start from scratch,at the top of the section so I will delete this section now by pressing X Now narrow a new name instead by pressing the ‘+’ at the top of the section below it..And again on the ‘+’ violet Now we choose the number of columns we want in the new section

I want here a section with one column now I start adding a header, drag it to the new column I write in it.. hotel services.. I mediate In order to increase its size a bit, I am going to Format..And in ‘fonts’.. I change the ‘size’ to 40..I also want to move it a little further from the top section So I go to the ‘Advanced’ tab and give it 40 . internal margins But be aware that when I edited the inner margins So, in order to cancel this link between values

We click on the chain icon on the right side And we enter again only upper margins, size 40 I will add an additional section under the title So I’m going to move to the list of items..Organizing a split item Now I reduce the ‘width’ to 8 I mediate…Move to Format.. Color it gold from the saved colors..And I raise the ‘weight’ to 2 Now, like I said, I’d like to create a section that displays information about hotel services Like hotel rooms and restaurants next to each other For that, I will add a new section now by pressing the ‘+’This time I will choose two equal columns

We notice that the ‘Edit Partition’ bar has opened here on the right side

So I’ll start by going to Advanced.. and giving footnotes of 40 .This will prevent it from sticking to the next section In each of the columns I will display an image, a title, text and a button So I’ll start by dragging an image element to the right column Here it is.. and here I show the picture of the hotel rooms, so I will click on choose a picture I will now upload all the images that I will use to build the website to media library I will attach it to you for download in the video description.Now I will choose the picture of the rooms I will also add a cute shading effect to it So I will move to Format .. and here I click on ‘Shadow’We’re now seeing the effect on the photo, but I’ll play around with its value to make it more interesting It remained more sideways.. Excellent..and the title element was added under the picture And turn to Format in order to increase the text size a little.. to 25 pixels I’ll add a short text under the title,so I’ll drag an item..text editor

We can keep this text here, and I’ll copy and paste it again to make it look longer

I’m moving to a layout to center it and at the end I’ll add a button too I will write in the text ‘Explore more’ and insert the ‘Services for a Hotel‘ column into the link I mediate.Excellent, we finished the right column and now we move on To the left column that will be more or less identical So, instead of starting over from scratch.We can delete it with the right button Delete.. and duplicate the column we built earlier by pressing the right button Click the column icon on the top right.Repetition Great, all we have to do now is just replace the picture with the picture of the hotel restaurant The title read “hotel restaurant” and finally I’ll enlarge the space between the columns For that we can add “inside margins”For the columns themselves, and for access to Edit Column Click on the column icon on the right side of the top.. Advanced And we add internal margins of 40 on each side

I will do the same for the second column.excellent. You definitely noticed that there is another field It’s called ‘outer margin’ we haven’t used it yet So let’s talk about it a little What is the difference between ‘inside margins’ and ‘external margin’? To visualize this well, I will now quickly put a background to one of the columns This will help us to know the limits of the column completely.Now back to advanced And we increase the size of the internal margins.. to 50 for example

We will notice that there is a greater distance between the column boundaries and its content Practically no content items

On the other hand if we add the outer margin.We will notice that a blank space has been created between the column boundaries and the boundaries of other elements on the page.That is, the outer margins create a distance from the border of the element to the outside Whereas Inner Margins create a space from the element’s boundary inward I know this topic may cause some confusion But I promise you it will be after practice and experience Completely natural and more clear, as we will address it later during the courseSo I will now return the column to its normal position and move on to the next topic Before continuing to the next section I’m going to introduce how much an extra simple and functional item called ‘menu focus’ Allows us to create a link that activates page sliding automatically to the place we choose in the column Explanation is a bit difficult.

So I’ll simply act it out so as not to confuse you We go to the list of elements.. and look for the element of focus of the list There it is, dragging it to the top of the section we just created We note that there is only one digit in it, which is practically the “number of the anchor FD Note that only English numbers and letters can be used So, what I’m going to do is make pressing the ‘Explore More’ button In the upper section, the page slider is turned on automatically To the ‘Hotel services’ section. For that,I’ll now move on to releasing the button And type ‘#’ in the link

Which we chose to focus the ID menu and the hotel

Now, if we press this button The page will automatically slide to the ‘menu focus’ item you are linked to I think it’s very interesting,and it might be very practical to guide surfers of our site.With this we have finished the second area. From the main page, let’s save the changes.We move on to the next section.Okay. In this section,I will first change all photo background for video background For that, I will move to ‘Edit Section’ by clicking on the 6 dots above the section Format .. and in ‘Background type’ choose ‘Background video‘ We can insert a link to a YouTube video here To appear in the background of the section I will copy here a sample link that I prepared earlier Great, now we’re watching how the video starts playing in the background Now we can also set the start and end times of the video If we want to skip certain parts at the beginning or at the end

We can decide if we want to repeat the video playback or play it only once If we want to turn it on in the mobile.. and if we want to activate the ‘Privacy Mode’Which does not allow YouTube to collect information about our site’s surfers I will now activate privacy mode only I do not advise you to activate ‘Play on mobile’ Because the majority of browsers today do not allow the ability to view background movies in mobile devices That’s why we can add here at the bottom a backup background image Appears in cases of unsuccessful downloading of the video I’m going to pick a picture now.. that seems very appropriate to me And it’s great in my opinion, but the truth is that it might look better if the text was on the other side

So, in order to switch between columns quickly,we can simply place our mouse over the column icon and pull it to the other side.Excellent Now I want this column to show advice for a customer who stayed at the hotel.Instead of the text shown here now so I’ll first edit the title And write ‘Customer Reviews’..I align it right Increase its size to 40..and paint the divider in gold I will remove the text and button from the column permanently In their place, they added a new element called ‘recommendation’. It allows me to display recommendations and advice to the customer in the column in an attractive way I’ll find it now in the item list, it should be right at the bottom Here it is, I drag it to the right column.. and in the ‘Content’ I simply copy and paste the existing text multiple times And in the next box, I can add a picture of the giver as well So I will choose this image that I uploaded to the site’s media library

↚

We can also enter the name of the recommender and his job, so I will write here for example Elon Mask Tesla.. CEO

We follow a little downwards.. and here I just align the recommendation to the right and go to Format Color the tip (recommendation) content white and go to the ‘Name and Address’ tabs In order to color these texts also in white.This section is now looking completely fine and I’m finally lowering its height a bit So, as we already know we will move on to ‘Edit Section’..Advanced And I reduce the inner margins to 120 at the top and 120 at the bottom Let’s see the section on a full page That seems excellent to me.But I want to watch it for a moment with the video playing in the background So I will go back to editing the background..I disable the privacy mode.This section also looks great so I’m going to bringback the privacy mode now again.I save the changes.That’s it, you can advance to the next section

So there’s a nice 3-column section that mainly shows pictures But I want to change it up a bit So I will keep the column containing text but I will drag it to the left side specifically I want to permanently delete the photos As well as one of the columns Ok, we notice that what happened now It is that the remaining two columns have increased their width in order to fill the remaining space of the deleted column But I really want the left column to be narrower than the right column So what I can do,is to place the mouse on the line separating the two columns And drag it until it reaches the proportion I want..Another more accurate possibility It is to go to edit the column by clicking on the column iconAnd enter the column width manually in the ‘Column Width’ field So now I’m going to enter 33% here. Now I will add to the right column new items to display images The first item is ‘image viewer’ There it is, I drag it into the column.. and we start editing it In the first box here, we choose the images to be displayed in the Image Viewer.

I will now quickly select several random photos of the hotel.And click on ‘Create a new gallery…’ and again on ‘Insert Gallery’ Great, we notice that a changing gallery has been created here showing different photos from the hotel I’m going to make two small changes; The first is to change the ‘Image Size’.. to Custom Specify the image display size 1000×600 And don’t forget to press ‘Apply’I also want to change the ‘slides to display’to 1. awesome..There are so many exciting additional editing possibilities here that we won’t stop now In the ‘Extra Options’ tab

We can even control the animation features to change the image

 But the last thing I want to do is to go to the Format tab And I want to change the location of the dots from ‘outside’ to ‘inside’This will cause them to appear on the photos themselves Quite but a little hard to watch So I will change it to white I think it looks so cool Now I’m going to add a new element under ‘Photo Viewer’ which is very similar to Image Viewer Its name is ‘Basic Gallery’ Here it is.. I also added several photos of the hotel from the media library This time we are going to completely classic gallery displays The images we have chosen are in the form of columns and lines The only thing I will do here is to change the ‘Image Size’.. to Medium And add a few space between photos in the gallery by going to Format And change the ‘spacing distance’..to custom..awesome

In the end, I will quickly edit and translate the text and the button in the left column To fit the website design You already know how to do it. I’m going to pass this section forward quickly And that’s it. The fourth and final section of the homepage looks great too Let’s save the changes And with this, we have finished the design of the home page of the site by Elementor I think we did a great job Soon we will also talk about Footer website which appears here below. But before that we will learn another important topic,which is how to fit the design of the page which we have now created with Elementor for mobile phones and tablets, In the previous part just as we did with Header site We all know why this process is so important So let’s move on to the topic and let’s get started

We click on the small icon with the phone and tablet below the edit bar, Also called ‘Responsive Mode’

This will allow us to see and edit the page in other displays as well In the top bar we can now switch between the ‘mobile phone’, ‘tablets’ view And Desktop, which is the normal screen As well as inside each of them we can expand and reduce the width of the screen To see how the website will look on devices with wider or narrower screens Mobile site fit is very easy I will switch back to mobile mode I will choose here, for example, the main title that I want to make it a little smaller..I go to the ‘Format’ tab.. and change the text size.. to 50 Now we see that if we go back to the Desktop display The title remains the same and has not been edited Because Elementor has selected a separate design for the portable display automatically Without changing the design we set for it in the Desktop But there is one thing to keep in mind when we are editing in responsive mode

Which is next to the fields that we edit The current display icon appears in small size So, if we now go back to editing the address in the mobile phone Once again, we come to the size field.We will see that next to it appears a small icon of a mobile phone Indicates whether this field is specifically suitable for a mobile phone display ‘If we now try to edit another field like ‘font family’ Now back to the desktop screen We will see that the address has changed here too, and not only in the mobile view Now there is no way to fit this box specifically for different displays So, wake up and pay close attention to this matter

When you edit the boxes next to which the display icon appears only because there is a possibility

To cause a huge mess in the design of your site without you even noticing it Therefore, after this important point I will here rearrange the title.We continue editing.So, I also want to enlarge the width of this divider here.. to 25 We will notice that the buttons need some arrangement as well. So, I will first center both of them Now we see that the organization field is also flexible.There is one more thing that you must have noticed Which is that if these buttons are in the normal display They appear in two columns parallel to each other They moved in the mobile phone display to appear on top of each other The reason for that is that if we try to display them one by one For example, if we move now to edit the column And each of them was given a 50% offer.. We will notice that their shape has been confused Because it has no room on the narrow mobile phone screen This is what makes Elementor Organizes columns with a mobile phone display automatically under each other instead of next to each other.If we go down a little we will see that the same thing happened in the lower section But the design still looks great, so it really makes no difference There is another small thing I would like to mention

↚

Which is that the columns in the mobile phone are arranged as a default position

So that the right column is the top and the left column is the bottom But if we want to reverse the order so that the ‘Explore More’ button appears Click the ‘Book Now’ button, – we can go to ‘Edit Internal Section’ Advanced.. Responsive.. and select ‘Reverse Columns’ – Mobile I’ll keep the columns in the original order.. but as long as we’re here Let’s find out about another amazing possibility Allows us to display specific items on the displays of our choice So, if you select here at the bottom ‘Hide on phone’ The edit bar was inserted… We will note that the internal section is no longer shown here yet Because we have selected to hide it in the mobile phone display If we now go back to the Desktop We will notice that it still appears here normally So, this is another excellent possibility Allows us to better fit the design for different displays It allows us to develop separate designs. Perfectly for different screens

We come back again. But I’ll unhide here And if we go further down We’ll see that the rest of the page fits itself very well for a mobile phone But we see here at the bottom that the ‘core gallery’ Doesn’t look good on mobile and occupies too much space So as we have now learned What we can do is go to Edit Gallery..Advanced..Responsive Referring to ‘hide on phone‘ Here to hide it in mobile phones onlyI think it looks better now, so let’s save the changes There is another point that I will touch upon beforemoving on to the next page And it’s the capability right here at the bottom of the edit bar, called ‘History’ And here if we made any editing mistake and want to recover the steps we took

We can go back step by step in the editing procedure From the moment we started editing with Elementor and cancel any step we’ve taken.Even if you exit Elementor I will now reload the page to simulate the entry and exit And if you go back now to the record We’ll see that we no longer show our edit history record Because it is automatically deleted at each entry and exit from the Elementor But we can still recover previous versions saved from the page By going to the ‘Reviews’ tab And choose one of the previous versions of the displayed page Arranged exactly by date and time Be aware that you did not forget to click on ‘Apply’ here above in green Ok, that’s all I wanted to explain Let’s see the page now by clicking on the eye icon on the right of the refresh button This takes us to a preview of the site Elementor editor can be closed This is how our full home page looks.. with the header

What we built and designed Via Astra customization and with template The homepage designed by Elementor

We also adapt it to mobile devices.. and here at the bottom, at the end of the page Also we can see Footer website It is the lowest section on the Internet It usually displays links for quick navigation or practical information for the browser So, the Footer we see here belongs to the Astra template But this time instead of being restricted and editing it also through personalization At the beginning of the course, we installed an add-on called Elemetor Header & Footer Builder It also allows us to create a website Footer through Elementor as well In order to access it, we go back to the control panel and choose the possibility of appearance in the menu Here in the Elementor Header & Footer Builder window. We can now create a design in the Elementor that we will use for the Footer site So, I will click on the top.. on Add New

You can bypass this part by clicking on Skip.Since we are making a Footer I will call this design ‘Footer’ and click on ‘Edit by Elementor’ That takes us back to editing by.. Elementor Now we are going to set up the section that we will use as a Footer for our site So, I’ll start as usual by creating a new section By pressing the violet plus This time with 4 columns..and I want to give it a gray background..So I will now move in ‘Edit Section’ to Format’ Classic..a dark gray background is added here..I also want to go to Advanced..and add a few bold margins So that the elements we put here do not stick to the boundaries of the section So, we have a chance to see if you understand what I explained about the margin in the previous part

I’ll give you 3 seconds to think and choose what kind of margins we’ll need in this case

In which we want to create a space between the borders of the section and the elements inside it 3…2..1..The answer is the internal margins, of course Which creates a space between the element’s boundaries and its content. Let’s now enter the upper and lower internal margins here, the size of 20 If we try to give an external margin of 20..There would have been an empty space above and below the partition.When we have achieved our goal.I want to add the site logo to the right column So I’m going to drag the image element from the edit bar…And I choose the golden logo image we created.I also want to align it right…And go to Format.In order to make it smaller…to about 50% Under the image, I will insert the ‘Text Editor’ item…I write here…Middle Eastern luxury hotel for people who aspire to the good life Paint it white…Reduce it to 14 pixels.

I will add under the text icons with links to business profiles In various social networks

For that I can use an element called ‘social icons’ So, let’s find it in the list of items…I’m going to drag it to the right column…We can now see that it is currently showing: Twitter, Facebook and Youtube But if, for example, we want to delete Youtube,We can click here next to the ‘X’ line on the Youtube icon…And if we want to add Instagram in its place, for example, Click on ‘Add Item’…This led to the addition of a new element called WordPress We can now use it for editing by pressing the icon Here we find the Instagram icon…And click on ‘Insert’…Of course we can add a link to each icon like this So that leads to your page in the mentioned social network and that we choose to use the ‘official color’ or a custom color We go down.in the ‘form’ field. I want to choose ‘circle’.To make the icons round…I will align it to the right…and go to ‘Format’ Here in the ‘Color’ field.’I want to switch’ the official color To a custom color for everyone…change ‘base color’ for white….Almost completely transparent…

And I’ll keep the ‘secondary color’ white…But I’ll give it a little transparency, too.I want to reduce the ‘size’ to about 14…Let’s move to the second tab here.Named ‘Effect of the mouse pointer on the icon’ Here we can add color and animation when the mouse is hovering over the icons So, I’m going to change the ‘secondary color’ to white…And in ‘motion’ while scrolling…I will choose Shrink This will add some liveliness to this element when the browser hovers over it.The second and third columns will be almost identical They will first consist of…write here…’Browse the site’ Change the text color to white Reduce the size to 16. A quick navigation menu has now been added to the site, under the title In order to do so,Added a new item called: ‘Icon List’It’s this item right here

Now we see that it reminds us very much of the element of social icons ‘in terms of its editing capabilities’.

And what it does is display lines from the icon text in the form of a line or column, But we will use it in a slightly differen way to create a vertical navigation menu in the site footer So for example we will go into the first element here I will write in the text…’Main’ I will delete the icon by clicking on the trash can icon In the ‘Link’ field. I will add a link to the homepage of the site by typing it again…And choose from the menu that opens. Now I will do exactly the same for the rest of the pages that I want to add to the list There is nothing new here So I’m going to pass this section forward quickly. Ok, so I have practically created a list with links to all the main pages of the site And now I’ll just move on to the format

Increase the space between lines in the “Space between” field. to 5 Go to the Text tab…And here I change the ‘text color’…for white…and ‘hover over element’ For golden color…Fabulous. So, we’ve finished creating the Site Footer Navigation List From now on, if a browser reaches the bottom of the page He will not need to go up by dragging the screen up To move to the next page,To additional pages on our site, but can be accessed directly from the Footer The next column will be almost exactly the same It will also contain a title and a list,…so I will copy the items from the previous column into here And paste it in the third column…I will just change the title and links quickly.excellent, Now you can see that I used this column To display an additional menu Allows browsers to access important publications In the site blog.in the last column,

I would like to enter contact information

As well as ‘icon menu’…And this time I’ll write in the title…’Connect with us’ And in the ‘Icon List’ I want to use icons this time As well as teaching you an additional exciting and practical possibility Allows us to create links lead to opening applications such as email, Whatsapp, phone With the details we now understand inside. Let’s start with the first element which will be the email address…I will write in the text the business email address…And this time I want to add an icon,So I’m going to open the Icon Library here…And now we can choose from thousands of free icons that we can use in Elementor I want to put an envelope icon here, So I will write about it……Envelope Choose this icon…and click on ‘insert’… Now write in the link mailto two points…Copy and paste the business email address without spaces

In fact, this is a special link that will open Email application in the browser computer or his mobile phone.So that the email address we entered became here Listed as the recipient’s address. Create this possibility Comfortable and very nice user experience It encourages surfers to come to you quickly and effortlessly.Now let’s add special links similar to the phone,Also Google Maps and Whatsapp

↚

I will do the simulation again on the phone link

The rest of the links are private.I am attaching it to you in the video description.Moving on to the next item…Here I will write the business phone number I’m looking for a phone icon in the icon library…This looks beautiful…Now I will write in the link…tel two points…I copy the phone number of the business Including the international introduction but without the ‘+’That’s it I’ll now add two of this kind quickly For Whatsapp and Google Maps Now let’s move on to the format Here I want to increase the space between the lines to 10…In the ‘Icon’ tab I also want to change the normal color As well as the color of the passage over the element for the golden color…And that’s it.We finished installing the 4 columns.There is one more thing I would like to do.which is to slightly change the proportion between the columns,So I’m going to now move on to editing the first column, and give it a ‘column view’ is 35% I will give to the rest of the columns… 20… 25and 20.In my opinion, this looks a lot better So the last thing we will do, and with it we finish building the Footer

It is the addition of intellectual property rights that help us prevent copying from the site.

I’m going to create a new section for her…from one columnAnd this timeI want to give it a slightly darker background color and drag the ‘text editor’ element to it To which I will copy the copyright text that I have prepared here earlier Move to Format…I mediate…Paint it white…The text size has been reduced to 14. Note that there is a small space under the text But this time This is not caused by ‘inside margins’ It’s because of some default setting in Elementor Related to paragraphs of text So in order to cancel this order We will return to the ‘Content’ tab.Click on the small tab here which bears the name ‘text’ And put the mouse here at the end of the text and press ENTER Fabulous.We have now finished building the Footer website too Therefore, you can press publish And re-enter WordPressClick on the menu icon on the right side above the edit bar and on ‘modify control panel’The last thing we have to do here is to scroll down to settings In the item Type of template and choose Footer And now in choosing display on Entire Website

This will take care of displaying the Footer we created at the bottom of each page of the site

Click on ‘Update’ And if we go back now to our site And we went to the bottom of the page Here we will see the new and cool Footer we created By Elementor Header & Footer Builder Our website is already starting to gain the desired look Footer And note that if we want to go back later to edit the.We can simply hover our mouse over “Edit by Elementor”A new tab has now been added here With a shortcut to edit the Footer So, the home page is finally ready I know we’ve been through a lot of complicated topics so far in this course So I remind you that if you have any questions about what we have learned so far You can write it in the comments I am glad to answer all of you

And of course, if you like this guide, I’m glad you hit the like button And sign up for the channel if you haven’t already.Let’s continue building the site. From here, we will go to the ‘About Us’ page. We click again on ‘Edit by’ Elementor And I’ll start by changing the background image in the top section I choose this picture instead And you notice that it has been cut a little from the top Because this picture is above the section

If we want to display another, more central part of the image

We can move to the ‘Position’ field.And choosing to display another part of the image like ‘Top Center’ for example I will change the title to ‘About Us’ And in the section below I want to quickly change the image, text and colors here You know how to do it, nothing new here,So we will skip this step as well And now I want to add here a new section showing the hotel staff.We now know how to design pages with Elementor.We can simply go deep inside And start creating sections, columns, and items But I also want to know a nice acronym Allows us to fetch individual regions Designed by Elementor Just as we brought in full website designs at the beginning of the course So, this time we click on the left button colored here,with the letter S The Starter Templates Design Library will open again to us However, this time we will be able to.To get completely single pages from here at the top or even individual blocks if we click on the Blocks tab Here there is a large assortment of blocks arranged by categories So if you open the menu on the top right now…I chose the category Team

I will be able to filter the blocks related to the hotel staff view

This looks great in my opinion So, I’m going to click on Import Block in order to bring it to the site.And here is the new block that we brought now displayed on the page.All that’s left is to swap out the text, images, links, or any other part we want to edit.I’m not going to simulate it now because we’re talking about a basic material So we also finished building our ‘About Us’ page in 5 minutes Changes can be saved…and view the page.So, the ‘About Us’ page looks great too Elementor’s edit window can be closed

I will pass the ‘hotel services’ page now..Nothing new for you there,So from here we will go directly to the ‘Contact Us’ page.This time also we will start with ‘Editing by’ Elementor.We quickly switch the background and title Here too, below I will only translate the texts into Arabic and align them to the right excellent In my opinion, the inner margins are also reflected here So I’m just going to move on to editing the column advanced And reverse the trends of the margins Likewise in the second column Fabulous

↚

The last thing I will do is delete the contact form here permanently

Because it was built by an add-on that I personally do not like very much and do not recommend Its name is WP FORMS.We will also soon learn to create a new communication form from scratch By extension Contact Form 7 that we installed at the beginning of the course So let’s just save the changes And we go out again to WordPress.We now quickly move to the tab ‘Installed add-ons’ And remove the extension WP Forms Lite

It is simply an add-on that is installed automatically With website design brought from Starter Templates But it will not be of any use Therefore, it can be deleted permanently.The add-on with which we will create contact forms She 7 Contact Form In order to start working with it.We will now go to the ‘Contact’ tab.These messages can be closed And I see that we now have one contact form ready as a template…But let us now learn how to create a new paradigm from scratch, ourselves,.I will click on ‘Add New’ at the top of the screen

We start by giving a name to the model.

I will simply call it…Contact Form Below, we will see the same contact form I know it might sound a little confusing and not quite so pretty But we will understand what each line in the communication form says,It is not complicated at all So, each paragraph here represents a cell in the form,For example: the text field,Email field…The subject field, or the message field…But the best way to learn is to permanently delete this default form now And build it again from scratch by ourselves.So, in order to add a new field to the form

We choose the type of field we want from the list here at the topThe first field I would like to add is the ‘Name’ field.It is actually a text box So I’ll choose ‘Name’ here on the top right We start by defining the box.In the first item we can choose whether the field is ‘mandatory’…That is, the browser will have to fill in this field in order to submit the form.I will mark it as a mandatory field And in the next box: ‘Name’,

We choose a name for the field that we will use at a later stage You can enter here any name you want But I’ll call it your-name In the ‘default value’ line,We can enter a default value It is sent with this field on the form If the browser did not fill it out,So if we now enter ‘name’ here for example…If the browser does not fill in this field in the form,It will be sent by default with the text ‘Name’.But what would I do instead

It’s ticking the box here at the bottom:

Use this text as a placeholder label for this field.What it will do is convert the text that is entered in the field Default value’ to’ ‘Place Holder’Placeholder is a text that appears within the same field Until the browser starts typing But it is not sent with the form if the browser did not fill it out,It mainly aims To direct the browser to the information to be entered in the box.Therefore, since this field is intended to take the name of the browser,I want the text ‘Name‘ to appear in it.But I don’t want this field to be sent with the form if the browser didn’t fill it out,

Because we are talking about a mandatory field So I put a reference here:Use this text as a placeholder for this field.The rest of the boxes don’t matter to us Therefore, we have finished creating the ‘Name’ field.You can click on ‘Insert Tag’excellent We added the first field to the form, and if we now look at the cell tag that originated here.We will find all the settings we have chosen For example, it is a field of type text The asterisk here indicates that it is a ‘mandatory field’….your-name It is the name of the field we have chosen The placeholder that will be displayed in the field is ‘Name’.Really not complicated I will now double press Enter.In order to prepare a place for the next box

↚

Which this time will be an email field

It is located right here to the left of the text field This time also we will mark it as a ‘mandatory field’And in ‘Name’ I will write the name of the box…..’your-email’I will write in ‘default value'”E-mail”I set again as…Placeholder The checkbox was added to the form.Enter, Enter We proceed directly to the next and last box on the form.This is the message field.But be aware that this time we are talking about a text-type box Because the text-type cell can only display

one line, we usually need more than that for a message.

Therefore, this time we will choose a box of the type ‘text area’located here in the middle.This time I won’t mark it as a mandatory field…Enter the name your-message..Set as Placeholder..and write your “message”The field has been added to the form…Now, since we said it was a text area and not a single line,We can completely limit the number of lines of text Which will be displayed in this box and how many characters each line includes.

 Let’s say I want 5 lines of text Each contains 40 letters,

I have to write: 5×40.Of course, browsers will be able to write longer messages is displayed at each given moment in the form The last thing we still need to complete this form It’s the send button So I will press again …Enter Enter In order to add it to the form I click on the ‘submit’ button.We just choose the text we want to appear in the button I will write.. “Send the message”and add it to the form.excellent.We have finished creating the contact form

The next stage will be to determine where exactly the

form will be sent after the browser has filled it out What is the content of this message?but before that Let’s save the changes by pressing Save ‘to the right from the top’Now back to the ‘Email’ tab.Here we can now set the alert mail which will be sent to us.After the browser fills out the form and determine where it will be sent, what its subject will be,What data it will contain and other settings.Also note that they have added us here below List of all fields names which we have chosen in square brackets So that we can now use it to display information left by the browser in the same field As part of the email content.So, if we want, for example, to add the name of the browser that filled out the form to the email subject,We can write here in the ‘Subject’ field:New message from [your-name] This is the name we chose for the ‘Name’ field.From now on, every time a browser fills out the form

We will receive a new email with the subject:New message from…Then the name entered by the browser will appear in the name field.Normally your-name will be displayed practically after the text.This is due to the problem of merging between English and Arabic.But I hope this is also clear and even if it is not,

We will see several additional examples.

In the ‘To’ field, we will specify the address to which the email will be sent Now there is a tag indicating that the email It will be sent to the email address we have provided to administer the site,If you have not changed it since installation,It is the same email you registered with for WordPress But it can always be changed easily Through the general settings I’ll leave it like that, but if you want the form to be sent to another email You can delete this tag and enter any other address instead,Next we define what will be the name and email address from whom the message came,No need to touch the email address if you don’t know what you’re doing This may cause problems with sending emails,

The name will now be according to the tag shown here:

‘Site Title’which displays the name of the site we chose in the WordPress general settings,And in my case it would be, “Hotel X.”But again, if you want to show another name You can delete the tag Site Title And write your name or any other text of your choice instead.You have selected the subject of the email So we will proceed to ‘Additional Headers’…Here we specify where the response email will go…

If you choose to reply to this email,Come back and remember we’re talking about an email It will be sent to us after the browser fills out the form,So, as a default now You may specify that if we reply to the email.The reply will be sent to the same email that the browser wrote in the ‘e-mail’ field,Because we note that they have entered here the tag that bears the name of the email field,

Which will change each time with the email address

that the browser enters into the form.This is excellent in my opinion.So I will leave it as is Now, we will select ‘Message Content’Currently displayed as default Text: Who, two points.Then the email name For the person who filled out the form in triangular brackets In the line under the Subject field There is a field that we have removed from the form,So you can delete all this line…And finally, a sentence:Message content” “:And the text that the browser typed into the ‘Your Message’ field.In my opinion, that looks great.So I won’t touch anything here either,But be aware of the amazing use they made here of the Khans tags To display the various data that the browser has Fill out the form, as part of the email content.Let’s go down…And in the last box here we can add ‘attached files’This is in the event that we add to the form a box to download a file So that’s less important to us…

There is also an additional possibility called ‘Second Mail’.

Allows us to send additional mail Each time the form is filled out.We can now use this mail to auto reply to your browser So, let’s put a sign in this box…We start by defining the automatic response that will be sent to the browser After filling out the form.So, if we want this email to be sent Each time to the same browser that filled out the form,We can enter the ‘to’ field.Mark the ’email’ field,We will find that they did it for us But be aware that a name appears inside it that actually matches the name you chose for your niece field ‘from’ identical to the box we saw in the first email,It indicates that the e-mail message Sent from our site name “Hotel X”From the website’s email address,Which, as I said before – no need to touch it.I will write in the subject of the email…Thank you for contacting Hotel X If the browser responds to this email,

The response will be sent to the site administration mail.

This is acceptable to me,But of course, if you have a specific email You use it for customer service.You can replace a tag with this email site admin email Go to ‘Message Content’And here I don’t see any reason why browsers should receive their message,So I will write instead:Hi [your-name] , We have received your message.One of our representatives will contact you within a day or two.I wish you a wonderful day,’Hotel X’ customer service team And that’s it, come down a little bit Customer Service Team Hotel X And click on ‘Save’With this, we have now finished creating the contact form for our website

In addition to the alert message that will be sent to us,

it will include all the details of the form Even an automatic reply that will be sent to the browser assuring it that we have received its message If you are really accurate, you can move from here to the ‘Messages’ tab as well Specify the exact text that will be displayed in different form submission cases Like the message sent successfully or failed to send…We will now see how these messages are displayed…I see no reason to release it now,So be aware that after saving the changes we have added a blue area here It contains a new and very long tag…” or by his professional name Shortcode

We can now copy and paste this Shortcode into the siteTo view the contact form Of course, we want to display it on the ‘Contact Us’ page, so let’s do it now I will copy this Shortcode I will move from here to the list of pages.. I will place my mouse on the ‘Contact Us’ page and click on ‘Edit by Elementor’Scroll down.. Now I’lllook for a new item in the list of items called Its name is ‘Shortcode’ or ‘Shortcode’.Here it is, I drag it under the title in the right column..This element has only one function, which is to display shortcodes

What we receive from various WordPress plugins

So I will now paste the Shortcode Which we got from 7 contact form And the new contact form we created is now displayed on the page In my opinion, it looks absolutely gorgeous.I see there is a small alignment issue in the ‘Email’ field But we will fix it immediately So, let’s save the changes now.. and show the page Thus, we will now be able to view the ‘Contact Us’ page on our website.I will even fill out the form to make sure everything is ok and click ‘send message’ and now see a thank you. You have been sent successfully So now I’m going to my gmail and we’ll see what we got there

Great, we can now see two new emails here from Hotel X If you can’t see the emails in your inbox It is possible that you have accidentally accessed ‘spam’or ‘promotional messages’But here is the first message we received from Hotel X “New message from mahdy” which alerts us that we have received a new message from the site visitor The site is named ‘Walid’ who filled out the form. Let’s enter it And now we can see the browser details exactly as we have specified name, email And the content of the message. So let’s go back again It seems that we also received the automatic response Thank you for contacting: “Hotel X”Of course, in fact, they will not both reach the same email address, but in this case

↚

I entered into the form the same email that I use

to administer the site So let’s also go to the automatic response message,And here’s the message we’ve selected for the automatic response So, the communication model that we created works,You can start receiving directions from website surfers.You can return to WordPress Close all redundant windows Before we proceed, let us first check the ‘Email’ field.that for some reason are aligned to the left instead of the right.We will do this by copying and pasting a short code snippet,

Which we must return again to customize in order to add to the site

And here we choose the last tab: ‘Additional Formats’ CSS Which we can add short code snippets in CSS It is the programming language responsible for designing the website So I’ll simply copy and paste a short code snippet here, which I’ve already prepared And let’s just see that the ‘Email’ field has already been straightened to the right Excellent. I will attach this code snippet to you as well in the video description With several additional codes that allow you to design the form.

    You won’t believe it, but with this we have finished creating our site, all due respect to whoever got here But as I promised you at the beginning of the course, I will show you one more and one last thing Which is how to install an SSL certificate To protect the site even for those who do not store (host) their site in Hostinger For those who follow me so far,and actually store the site in Hostinger I still recommend staying and doing the steps, it takes exactly a minute and a half It provides you with an additional layer of protection for the site.This time we will do this by installing an extension.So I will now go to the control panel.. and choose ‘Additions’.. ‘Add New’,And I’m looking to add her name.. ..really simple SSL It’s this plugin right here with over 5+ million active installs So let’s click on ‘Install Now’And on the ‘Excellent activation,

we now notice that we have jumped the message About to migrate to:

SSL! “”But if you don’t see it, you can go to the ‘Settings‘ tabs And choose SSL…In any case, all you have to do is now press the blue button here Activate SSL Or if it does not appear here,press the gray button that appears in its place Install SSL Certificate on your site, this will install the SSL Certificate I’m going to do it right now.. and as you can see wordpress we have now installed from No need to stress because this was to be expected,so I’ll sign in again quickly On our site successfully and that’s it,we have installed an SSL certificate You can ignore all those messages that jumped in here, they aren’t really important With this, we have practically reached the end of the course, my friends

We built a complete and awesome website from scratch From A to Z by WordPress

You can be proud of yourself for reaching this stage Because you now have all the tools and abilities Great to build your own wordpress sites Which goal do you choose?It’s time to take all the great information you’ve gained here And start applying it on a professional website of yours Because there is no better way to learn than to train, train and train I can expect to see all the great websites you will build thanks to this course And of course I remind you that you are welcome to ask any question that you still have Here below, via the comments I would be very happy if you click like on this video now.And register for the channel and share it with everyone you think might help.As for us, we will meet in the next guidance.I wish you much success, and bye-bye.