How To Create A Website For Your Business (Elementor & Hestia)
Articles,  Blog

How To Create A Website For Your Business (Elementor & Hestia)


Let’s see how you can build this one-page
WordPress website for a Local Business using the Hestia WordPress theme and some of the best free plugins like Elementor and Orbit Fox. Now, I am gonna install the Hestia WordPress theme, and then I will install the Elementor page-builder. Last but not least, you can get the Orbit
Fox plugin too. You’ll find out why later, so keep watching. After the installation occurs, let’s jump
to the theme customizer. Before moving to the front page sections,
I want to change some of the default settings the theme comes with. The accent color to a green shade, for example,
and the background color to white. Another thing you can change before moving
on is the font family in the “Typography” section. I will choose the Cairo font for the heading
text to match our Local Website demo presented earlier. Click on Publish once you finish the settings and then go ahead to the front page sections in the customizer. Here, you can click directly to the element
you want to change. First, you can upload a custom logo here,
then you can proceed to change the text in the fields above the button… Finally, you will need to set up the call
to action, if you want it, and then remember to publish all changes. Any time you want to see how your changes
look on a mobile device, use these buttons to switch between devices. I almost forgot to show you how to change
the background image. Even though it’s not something hard to do,
let me show you how to use this particular 3d like parallax effect. You can do that with almost any image, and
here is how you can do it yourself. First cut out the first object you see with
the polygon tool, like so. I use the free version of Photo Filtre Studio
to do that because its lightning fast and easy to use but you can do that with other
image editors as well. After you finish cutting the object all around its edges, type Ctrl+C to copy it and then paste it back there using Ctrl + V.
Hide the background like so and then save that new image as a transparent .png file
type. Name it as you want then upload it in the
customizer as the second layer, like so. The first layer will be the original image,
of course. Remember to keep the same size for both pictures
and use images larger than 1920 x 1080 px. Click on this arrow to reveal the Feature
Box content fields and then start by changing the icon. You can browse through all of those graphics or you can simply type here to filter out exactly what you want. Once you find the icon you like, click on
it and then go to the next option. The color, in this case, will be green and
I copy its code to have it later on. Next, change the title of this box and then
enter a compelling text here, which I recommend you keep as short as possible… Do the same with the last two feature boxes
then you are done. Publish the changes and move to the next step. This particular section is populated with
content by using the Elementor page-builder plugin. To do so, we need to go back to the dashboard. Close the customizer, go to your list of pages and find the page which stands as your “front page”. Click to edit that page and then the big blue
button “Edit with Elementor”. Once your front page editing screen will appear, scroll down until you see the about section. You will find it easily because it is the
only section with both “ad new section” and “ad template” buttons active. Now, start by adding a new single column section then drag the first heading element there, like so. Set the color of the text to white, then change the font family to Athiiti, Cairo, or whatever you want, in the style tab… Once you finish editing the heading element, drag a text element below, and then type a compelling “about us” text in it. I will copy the original text from our demo
to keep things going fast. Finish the element with some custom styling, if needed, and then move to the next one, which will be the video element. I suggest you upload your own video to youtube then copy the “share” link and paste it in the dedicated field, like so… If you want to have a custom thumbnail you can upload it here. Furthermore, I’d prefer to close all these
options to make the video element as clean as possible. After you finish all the settings here, update
the changes to save your progress and go ahead to the next element. Remember to add a new section any time you start building a separate element. This way you will have them well organized
and you will be able to slightly adjust the spacing between them if needed. Next, you need to drag over another heading element but you can use a trick that’ll actually help you work faster. Duplicate the heading element created earlier, and then drag it in its place like so. Change the text to whatever you want, “Image Gallery” in this case, and then drag over the image gallery element, right under the
text. Upload the images you want to use, set the
image size, number of columns and other options as needed, and then move down to the last
element. Add a new section once again and then duplicate
the heading element. Change the text to “come and visit us” and
then find the “Google Maps” element. Drag it under the title, change the location
with your own address and that’s it. As a finishing touch and for a better spacing
between elements, you can add dashed separators between each element. Start by adding the first one below the video
and adjust it to fit the design overall… Now, duplicate it and drag it below the last
two elements one by one… One thing you can do before moving to the
next step is to change the background image with something related to your niche, the
wood maker industry in this case. That’s it, we are done with the “about us”
section, so let’s move to the next step. You have a very good example of what you can
do here by looking at the demo content that comes as default in this section after installing
Hestia. You can change the content by navigating to
“Front Page Sections” and then looking for the “Testimonial” section. Change the section title, the section subtitle
and then I recommend to paste a real testimonial in the Testimonial Content boxes, like so… You can add as many testimonials as you want
but three of the best testimonials you have should be enough. This section uses the SendinBlue email marketing
service provider which is very easy to integrate. First, you need to install the WordPress plugin
as suggested and then connect it to your SendinBlue account… Stay with me because I will show you exactly what you need to do. First, remember to publish all the changes
before installing the plugin. The page will reload automatically after clicking the button so you don’t want to lose your progress. After the plugin installation occurs, go back
to your dashboard and click the “Home” link within the SendinBlue menu. Log into your SendinBlue account by adding
the specific key here and then go back to your customizer and copy the custom code of
your subscribe form to the clipboard. Go back again to your dashboard and paste
it in the text editor of your “Default Form”… Click the “save” button below then one last
thing you need to do is to go to your “Appearance” menu and click on “Widgets”. Once you are here, drag the “SendinBlue” widget
into the “Subscribe” section and you are done. Check it out how it looks by going back to
the customizer… You may consider this back-and-forth process
a bit overwhelming but in the end, you will get this nice looking subscribe to our newsletter
form which definitely worth the effort. Everything is there, by default, and one of
the things you should do is to install and activate the Pirate Forms plugin, like so. After you activate it, the contact form in
this section should look like this. Next, you need to change the contact info
in the Contact Content tab by using the default WordPress editor… And then, finally, you can change the background
picture of this section whit something more appropriate for your business. I forgot to mention, but it’s obvious, that
these three fields in the general settings tab are meant to display the Form Title and
both text lines above the contact info. Change them as needed then move to the final step Every piece of your Local Business Website
is in its place now but you need the menu to navigate through them, right? So, how you can do that? Creating the Main Menu it’s easy, and I recommend
an in-depth tutorial about that above. You can follow the step by step instructions
there to find out how to add these beautiful icons too, so be sure you check it out. Remember that you need to add custom links
as elements to that menu, with anchors as links, if you want it to work like this… Every section of your Local Business Website
has its own ID, and you can find all of those IDs in the theme documentation, which you
can access by clicking this link in the customizer… That’s is. We are done! The one-page Local Business website is finished
and you can share it with the world. To make that easier for your visitors too,
make sure you activate the Social Share option within the Orbit Fox plugin, like so… After that, you can see these beautiful social
share buttons on the left side of your screen, that sticks to the edge of your screen on
scrolling. You may want to see 10 things you should do
after launching a WordPress website. See you in the next video.

11 Comments

  • King Maker

    Sir please teach us that how we can make Admin panel like AdminLTE style for free and without the knowledge of coding. Thanks

  • Infinity Sync

    Good video for people to understand the steps which must followed to make a website. InfinitySync also provides you reliable Woocommerce to a quickbooks integration plugin that simple, and elegant plugin for your e-commerce account, save your time at work by using quickbooks online store integration.

  • Olanrewaju Malumi

    Thsi is a good tutorial. However, i didnt see the html code for subscription form in my customizer. Can you share? Thanks

  • Ricardo Arros

    Hi Peter, can you tell me how to add the icons on the Contact section? I bought the Hestia Pro and still can't put those (the phone and The location icons) thank you!

  • Elaheh Madjedi

    this is a very good tutorial but why you did not do the blog section i am having a hard time finding a good tutorial on the blog section i appreciate an answer and maybe a tutorial on the blog section

  • DKMusic

    Just want to know if i can arrange it the front page the way i want? example. i want all testimonials in the bottom only not in the middle?

Leave a Reply

Your email address will not be published. Required fields are marked *