Hestia 3.0 Full Tutorial and Demo Step By Step (Free WordPress Theme)

Hello everyone, and welcome to our channel My name is Robert and in this video, I will show you everything you need to know about our Hestia WordPress theme, and how to use the customizer to create your first WordPress website step by step By the end of this video, you will understand what is the difference between the free and the pro version of Hestia and which version would fit perfectly to your needs If you are here to learn more about a specific feature or section of Hestia, feel free to use the time stamps below and jump to the desired step The easiest and fastest way to install it is by going to Themes under Appearance on your dashboard, click Add New, and search Hestia in this field Now you have to click on Install and wait a couple of seconds until the Activate button appears Once activated, the theme creates a new menu element under Appearance named Hestia Options But before accessing those options, let me check out the look of my website as it is right now on the front end If your website is new, it will probably look like this but don’t worry, I will show you how to make it look like the demo in just a couple of clicks The next step would be to do some Recommended Action like installing and activating the OrbitFox by Themeisle plugin which will give you access to even more features and sections As you can see right now, in the Customizer, you only have five sections available, but if you click Install and Activate over here, or here, it will give you everything you need and even more In the General Settings of the plugin, you can enable features like Social Sharing, Gutenberg Blocks, Uptime Monitoring, Google Analytics, and the Menu Icons module is the feature you need to get access to the menu icons you see in our demo The last module will enable this bottom bar with info about your website’s Privacy Policy and it can be linked to the Default Core Policy or a custom page Ok Now I will go back to Hestia Options and show you more recommended plugins which could be useful for improving your website’s speed, automatic blogging, the so popular and advanced frontend drag and drop page builder plugin, a simple way to create responsive charts and tables and embed them into your site Last but not least, we recommend WPForms as your form builder and TranslatePress for multilingual sites Now, let’s go to the Sites Library, import the Original Demo of Hestia, and see how it works Before importing that demo, let me go to the homepage and reload it so we can compare how it looks right now with the new design Ok, now I’ll go back to my dashboard, Hestia Options, SItes Library, and preview the Original demo So, this is the homepage with many sections where you can see some products too which means that the importing process will put together some products and the WooCommerce plugin too Yes Your website will become an online store where you can start your own e-commerce business The contact form in the last section is made with the WPForms plugin which is not there on your dashboard yet, but it will be installed automatically once everything is imported Also, if you keep the Content option turned on it will import these demo blog posts too So, click Import, disable what you don’t need in the pop-up window that appears next, and click Import again There are four steps in the importing process which should take under ten seconds to complete Installing required plugins, importing content, setting up the customizer, and finally, importing widgets Once the process is finished, you can go back to the Sites Library, View your Website, or

add custom content For now, let me check out the homepage which is already open in this tab If I reload this page you can see that the demo content is fully available now on my website, including the product section and the contact form in the last section Let me access my dashboard and show you what’s new As you can see under plugins, you have two new elements; WooCommerce and WPForms lite, which you can use to create any type of form You can speed up the process though by unlocking the pre-built form templates among other features But this video is about Hestia, so I won’t go deep into this right now Let’s see what other new things we get once a demo website is imported Under posts, click all posts and you will notice three new articles besides the default hello world post which I would move to trash and delete forever These posts are there for demo purpose and you just saw how to get rid of them Alternatively, you can edit those posts but keep in mind to edit the permalink too, and if you don’t see the edit button near the permalink of your post, go to Settings, Permalinks and choose the Post Name structure Save changes and go to the following step In the media library tab, you will see all of the images imported from the demo, and the pages you need are under All Pages over here The Sample Page is again something you can move to Trash and Delete Permanently to keep your site clear from unneeded content Now I will click on Customize under Appearance to show you step by step, how to change the content This is the place where you can adjust the global settings of your site, edit the content of your Frontpage Sections, access the Header and Footer settings as well as create or edit your menus and widgets There are some interesting WooCommerce features too and in the Additional CSS tab, you can use custom CSS to change the appearance and layout of your site even more Let’s go up and start with the Site Identity Obviously, this is the place where you can select your custom logo for both versions; main and transparent header logo Below the logo, you can change the Site Title and Tagline, but the tagline never shows up so don’t worry too much about it It can be useful for SEO though If you select a Site Icon over here, it will show up as a custom graphic near your website’s name in places like the header of your browser, in the bookmarks tab, and the recently visited sites on this window of Google Chrome, for example In the General Settings of this tab, you’ll find options for full-width Layout, sidebar on the left or right for pages, blog, and let me go the blog page to show you how it works with the sidebar on the left and right The shop sidebar is empty for now but you can populate it with useful features like product filtering, search form, and recent products, for example, but I will show you more about this in the widgets tab Next, I’ll show you the place where these built-in Sharing Icons are displayed, if the feature is enabled If I go to a blog post, for example, and scroll down to the end of the content, you will notice three sharing icons for Facebook, Twitter, and Email Remember the Social Sharing Module of Orbit Fox? You can use that to give people options to share your content on even more social media platforms like Pinterest, Linkedin, WhatsApp, and so on

If you switch to the Inline After Content desktop position, after saving your changes, it will show up like so in your blog posts The following options in General Settings are for Typography and with the Pro version of Hestia you get even better control over the font size options, for each specific mode: Desktop, Tablet, and Mobile Moreover, you’ll be able to adjust the size of the characters in the navigation menu As for color options, you can change the Background Color as well as the Accent Color but within the Pro version, you’ll get access to even more settings The Background image will replace the white background behind your sections but if you disable the Boxed Layout in General Settings, you won’t be able to see the background And yes, you can upload a header image that can be displayed sitewide once this box is checked, but I will show you more about this in the Header Option menu There is only one option remained under Appearance Settings which is for your Buttons, and it will allow changing the padding and border-radius for all of your buttons globally It will affect only the buttons that belong to Hestia, though In its free version, Hestia offers eleven beautiful sections, filled with demo content you can easily customize, or delete, and this is exactly what I’ll cover next For sections like Pricing Plans and Portfolio by Jetpack, I would recommend the Pro version which will give you the ability to reorganize your frontpage sections So, this is the Big Title Section where you can upload a new background image, change the title, the text below the title, the text of your button, and the button URL In the Extra settings tab, you can move the content to the left or right, and use widgets for adding more things like a contact form, for example As a pro user of Hestia, you can create a slider in this section or use a video in the background instead To disable a section, any section, check this box or click on the eye near that section Let’s go to the following section which contains the features This section’s title and subtitle can be customized in these fields and a feature contains three elements; the icon, the title, and description The color of the icon is adjustable over here and you can redirect your visitors to specific links that can be pasted in this field You can add new features as well, and delete features that you no longer use if you click the delete field over here The about section is disabled for some reason by default so check this box to enable it This is the most versatile piece of content on your front page I mean you can edit it with the Block Editor of WordPress and use any type of content provided as blocks Alternatively, you can use page-builder plugins like Elementor or Beaver Builder to create custom content A good way to tell people more about you and your business is with a video that you can embed in this section by using the YouTube block of WordPress and paste in a video link in this field The shop section displays the available products in WooCommerce and you can change its title in this field, the subtitle below, and the number of items you want to display over here Let’s go to the following section which is the place where you can show up members of your team If you have only two people in your team, you can delete these elements and then edit the content of the remaining two team members

Upload a new image, change the title, subtitle which could be the position of that member in your company, a short description, and a link to his or her website for example If applicable, you can paste links to Social Media profiles below, ore you can remove these Social Media icons to keep things simple The title and subtitle of this section are editable in these fields, obviously Subscribe to our newsletter is an example of the call to action you can use in the Ribbon section To replace the background image click here and select a new image, change the call to action text below, the button text and link URL then click Publish The color and border of this button are editable in the Appearance Settings, but I already mentioned this earlier Testimonials are very useful pieces of content on your website where you would display what people think about you and your business So easy and straightforward to use, as any other piece of your Hestia WordPress theme Here comes the Clients Bar section where you can upload logos of the clients you work with, and redirect people to custom links for each client I think you can create a portfolio page where you can showcase more about the service or product bought by your clients Instead of the subscribe to our newsletter call to action in the ribbon section, you can use the Subscribe section powered by SendinBlue, which works with a plugin you need to install and activate first Then you have to create a SendinBlue account and connect it with your website by using the API key in your SMTP and API section To finish this step, add the SendinBlue widget to this section choose the form you want to use, and click publish To edit the way your form looks, go to SendinBlue, Forms on your dashboard, and click edit Now you can go ahead and finish the setting of your last two sections, Blog and Contact The blog section is simple and it will display your latest blog posts but as a Pro user of Hestia, you will be able to do even more things Last but not least, the contact section contains the Get in Touch information where you can upload a custom image and change the text in these fields The contact form is provided by WPForms and it is generated using the shortcode you see over here To change info like address and phone number below the get in touch text, click Edit over here and use the visual or text editor of WordPress If you want to change something in the contact form, you need to go back to your dashboard and click on All Forms under WPForms Edit the form in that section and save your changes I will close the form editor now and go back to the Customizer, Header Options I would like to start with the Header Settings where you can use an image instead of color As you can see, there is no image set yet so go ahead and upload a new image or use existing images in your media library Crop the image and enable header image sitewide, if you want that If this feature is enabled, it means that this image will show up on every page instead of the featured image picked separately for each page Also, for the single product page, you can choose between two layout options, with or without a header image The posts and pages layout, though, have three different formats; the default layout shows up the title over the image, the second option put the title below the image and the last one is the classic look with the title above the featured image Navigation is the place where you change the look of your navbar which can be transparent and you can enable search in your main menu

The following thing you should do here is to change the layout and use a widget like custom HTML to display a banner over here Want to show up email, phone, or social media icons above your header menu? Enable the Very Top Bar and use a menu or widget to do just that Check out the video recommended above or in the description box to learn more about how to use this section step by step See the footer credits over here? Go ahead and change the content in Footer Options For example, you can keep the existing text and replace only the link to the Hestia theme with your affiliate link This way you will make money when people buy Hestia through your link To make your footer area look like in our demo, use the Widgets tab and populate footer one, two, and three with any widget you want, but I will show you more about this later, so keep watching By default, your blog page looks like this but if you want to feature a specific category, choose that in this drop-down and it will turn on this nice looking masonry design for the last three articles in that category, followed by your latest posts in any category Your blog has two types of layout settings in the free version but as a Pro user of Hestia, you can switch to a modern layout that looks like this if your sidebar is turned off Then you can go ahead and play around with some display settings for categories, content, excerpt, and pagination If you pick none in this drop-down, your categories will be turned off and if you have multiple categories level set for a blog post, you can display the first category or all categories Just for your latest articles below the featured section, you can turn on the entire content but for a better visual experience, I would recommend the excerpt selection with just 30 words Or turn off the category above the title and use 40 words as your excerpt length For a big blog with a lot of news, you can set up the post pagination as Number or Infinite Scroll in this drop-down and we are done with the Blog Settings The Menus tab will take you to the settings of your default top menu, footer menu, and main menu You can create and assign menus in this tab exactly as you do it in Menus under Appearance on your dashboard But, if you turn on the Menu Icons module of Orbit Fox, that option will not show up in your customizer It will turn on this plus icon near the name of your menu elements on your dashboard So, if you want to create a good looking menu with icons just like the one in our demo, pick your preferred icon or filter them out in the search field For the shop element, you can use a cart icon and after clicking Save Menu it will look like this on the front end For a full WordPress menu tutorial with icons please watch the recommended video above or check out the links in the description box WordPress widgets are displayed on your blog’s sidebar usually but this type of content can be displayed in your footer area as well, and near your header navigation as a banner, for example On your dashboard, widgets settings are located under Appearance but for a visual experience when building your blog’s sidebar, for example, you should use the Widgets tab in the Customizer To create a footer close to the one you see in our demo, use Footer One and add a text widget, Footer Two with any Social Media feed widget, and Footer Three will be populated

with pictures from your Instagram account but you’ll have to use a plugin to connect your website with your Instagram account This is just for inspiration I would recommend using your imagination to create something unique There are a lot of widgets available for almost any type of content If you will use Hestia only for blogging and you want to display your latest blog posts on your homepage, choose the Latest Posts under Homepage Settings By default, the selection of a static page is made out of your Front Page in the Homepage drop-down and the Blog page as your posts page Just keep in mind to push the Publish button above from time to time so you won’t lose changes if something goes wrong Here comes a very important section for Online Store website owners Under WooCommerce you have four menus and the first one is useful if you just started building your e-commerce website and want to let people know that no orders shall be fulfilled If this is enabled, it will show up a notification bar at the top of your website on every page, which can be something different, like “huge sale” or “big discount” for specific products The Product Catalog settings will give you access to Shop page display variations, Category Display, Default Product Sorting and in the last two fields, you can choose how many products per row will be displayed as well as how many rows per page To adjust the default look and size of your product images, change the thumbnail cropping settings over here For example, if you want to adjust the height of your images, set 30 instead of 35 in this field and it will make your images smaller, as you can see in the preview The checkout options are for the checkout page and once you go there it will redirect straight to that page If you want to sell your products only for individuals, turn off the company field, foe example Feel free to play around with all settings below until you get the best out of your Checkout page I think the Privacy Policy and Terms pages are mandatory for every online store so make sure you create and pick the proper pages in these drop-downs I think I am done and I hope that every aspect of your Hestia WordPress theme is completed and now you know exactly what you can create with this theme There is one more tab below WooCommerce, the Additional CSS which you can use to finetune your website if you know how to code Alternatively, you can go to our Hestia theme documentation and use the provided custom CSS, link in the description box, to change the height of your page header, for example To adjust the height of your website’s header where the image is located, paste, or type in this custom CSS over here, and you will notice that your header becomes taller For a full-screen height keep the value 100 over here but you can make it 50 or 70, for example Just keep in mind that it will affect every page, not just your big title section If you go to general settings and disable the boxed layout it will give you a clear vision over the full height look of the big title section This is it, guys Thanks for following me until the end with patience If you have questions, feel free to leave a comment below I will answer each of you guys Keep up the good work, and see you in the next video Cheers!