Hestia WordPress Theme Tutorial: Setup & Customize (Step-by-Step)
Вставка
- Опубліковано 17 жов 2018
- A step-by-step guide to set up and customize Hestia filled with nice tips and tricks to make your website stand out. 🔔 Check our Easy to follow WordPress Tutorials Playlists: bit.ly/2PFd0tv
Check the timestamps below to navigate the video:
00:29 - Get Started With Hestia Free
02:03 - Start with the Customizer
02:52 - Site Identity (Logo and Site Icon)
04:16 - Appearance Settings
09:40 - FrontPage Sections
20:20 - Contact Form
22:41 - Header Options
27:58 - Color
28:20 - Blog Settings
29:25 - Menu
32:21 - Add a button in the Menu
34:31 - Footer Widgets (Instagram Feed)
Check these resources that I mention in the video:
• Hestia Community on Facebook: / 2024469201114053
• Get the front page sections and subscribe form code: docs.themeisle.com/article/75...
• Add Menu Icons: www.youtube.com/watch?v=YcSot...
Free images resource: pixabay.com/
Hestia gives you a fully responsive design that never fails! No matter how you choose to configure your site, it will always remain mobile-friendly and will render perfectly on all devices.
We started doing video-responses for the things we missed in the video. Let us know in the comments where you got stuck.
Video response to Twitter and Instagram feeds: • How To Add Twitter And...
For more options to customize your website, I recommend you to check the PRO version here: bit.ly/2kJQ679
Website → themeisle.com
WordPress Articles → themeisle.com/blog/
Facebook → / themeisle
ThemeIsle is the go-to source for the High-Quality WordPress Themes (both free & premium), and plugins every website owner needs. We're passioned about all things WordPress, but we're not afraid to tackle other web related subjects. Our goal is to give those websites easy-to-use themes and designs that can be managed by everyone. - Навчання та стиль
![Hestia Vs Oceanwp Vs Astra: Most Popular WordPress Themes [2019]](http://i.ytimg.com/vi/Eavgz_CM7jM/mqdefault.jpg)
Table of Contents:
00:29 - Get Started With Hestia Free
02:03 - Start with the Customizer
02:52 - Site Identity (Logo and Site Icon)
04:16 - Appearance Settings
09:40 - FrontPage Sections
20:20 - Contact Form
22:41 - Header Options
27:58 - Color
28:20 - Blog Settings
29:25 - Menu
32:21 - Add a button in the Menu
34:31 - Footer Widgets (Instagram Feed)
I have no frontpage settingsand contract form
Having a frustrating time trying to get Hestia looking the way I would like it to. This Tutorial is fantastic. Great job to get me to understand a little better.
The BEST TUTORIAL OUT THERE!!. straight forward building upon previous material. Taught like a teacher should teach. I wish you taught Full stack programming. You have to spoon feed newbies until they develop a strong foundation. Great job. Now I have great looking website and a good understanding of WordPress dashboard.
Great tutoria! Clear, straight forward and simple! Absolutely recommend it!
WHAT A GENIUS! thanks for putting the subtitles !! Please don't stop making videos like this! ♥
I can't thank you enough... This is the best tutorial I have ever seen for any theme..
Hello! Your tutorial is AMAZING! Very clear, concise, it helped me a lot! Thank you very much!
That's great, glad it helped 👍
This video has been really helpful to me... congratulations! Thank you for sharing your knowledge!
Never I watch step by step working you tube video. Sir you are excellent. If you have more paid classes I want to join
Please share the love. Thank you :-)
Thank you so much for the detailed instruction to work on Hestia Theme.Please make a video on adding Photo gallery too.i searched and watched dozens videos but your instruction are fantastic.I really appreciate.
Hi, Zahid. You can add photo galleries with easy. Just use the gallery block in the new editor of WordPress.
Thanks Robert.
Great Job! Your English is really good and the tutorial was so helpful.
Thank you Carrie, I really appreciate your feedback.
Thank you 😊 That was great!
Thank You very much, very helpful, and easy to follow
My pleasure to help. I will do my best to make even better videos, thanks!
very well documented, thanks for sharing. Very informative!
Thanks man! This is the longest video tutorial I made so far. More coming up :-)
👍
Tremendo tutorial, muchas gracias!!
So Good! Thanks
this tutorial is as clear, concise, and beautifully done as the Theme itself!
Thank you, David.
Thank you for this tutorial
thank you so much sharing!
Thank you Lina! I appreciate your feedback :-)
thank you very much for this great work
You're welcome 👍
Thank you, excellent everything ;)
Thank you bro!!!
It is always a pleasure to help you, guys.
Thank you too.
Excelent Thank you very much for all this information. I have a question is there a way to add a video on the header or put diferent headers images?
congratulation! your video is helpful.
Thank you Eric. Can you share your project with us?
Great tutorial, thanks for this, one question can we change the order of frontpage from the set order, for example, suppose I want blog section just after about section and subscribe after contact section can we change the order,
Que buen tutorial💕
Very useful thanks bud
Glad it helped
Hey, glad you like it. Did you saw the new video? ua-cam.com/video/8pOUJtdqIuY/v-deo.html
@@RobertPeterK I'll take a look 😊
Excellent tutorial.this shoulde be tge temples for all other tutorial.
I will keep that in mind, thank you
Great Tutorial!
One Question:On 26:07 how did you move the social icons from the right of the very top bar to the left?
Thank you so much, I'm still learning tho
Very good tutorial
Thank you Eduardo. Your feedback means a lot to me.
Hello, thank you so much for sharing your knowledge, it helped me a lot! One thing, in my Hestia, even though i have both plugins, i dont seem to have the fontpage section, so i cant even edit the title etc
I think you should take a look at the static page selection in your settings.
Hi Robert, Thanks for all your tutorials. I have installed the Hestia theme for my blog. When I navigate to my blog page (set as per category), the Header (Title) text is in White. Like at 5:10 "Sample Page". Is there any option to change the text color to our choice? Because I've set header background also to white using CSS and the text by default is also white. Any CSS for this, please? Thanks!
Great tutorial! I am having a problem with setting up my ecommece on my blog. I do not have any product to sale. I have looked but have not had any luck. I have a book I would like to sell. But the plugin do not allow for that. Can you help?
Thanks for your work.
I would like to edit or delete the Google map in the contact section but I didn't find any way to edit this section (free version)
Hi there, thank you very much for your outstanding training. Please can you advise me if Woo Commerce is allowed only on the premium Hestia version? Many thanks.
WooCommerce works great with both version but in the Pro version of Hestia you get more features
Hi! Great video! Is there a way to display to logo on mobile version? I noticed it was missing. Hope you can help! Thanks!
Can I build my website using Hestia and publish it when I have finished. This way I can leave my current WP site up and running while I learn and use Hestia? Thanks for your tutorial.
I have a small team and want to change the image size to accommodate a rectangular. Can I do that in teh index file or which css file?
Yes but how do you move the blocks around?
For example to have the testimonials at the top or about at the very bottom, etc?
Hello,
I have a question with the hestia theme ... for some reason the menu on top shows as well on the footer and I cant find a single option to remove it...
Also about the footer... like you said there are three option footer 1 2 3 .... I want to have the adress to the left and social media to the right... problem I find is... I can write someting on the Footer one and it stays on the left... but if I want to write something on the footer 3 it'll automatically place in the mid ... can you tell what can be done so I can have the adress on the left and social media on right ?
Thanks for your help!
Nice voice and accent too!
Hi everyone
I just started with wordpress and I have many doubts. What css do I have to put to customize the button? 8:35 Thanks!!!
Why not using Elementor instead to remake that page and then visually create any button style.
Is there a way to make the big title section photo a little smaller?
Hi, Melanie. You can change the dimension of your image within your WordPress dashboard right after you upload it.
Just make sure you keep the aspect ratio so that the image does not become distorted.
@@RobertPeterK Big title section is invisible even I unclick disable and publish. Is there anywhere that controls/blocks this section?
@@RobertPeterK Is there a way to make the photo different sizes for desktop vs. tablet vs. mobile?
Thank you so much for the excellent information. Unfortunately, I purchased a theme " The Cause" for my Non-profit which is totally different but i also have my Trading website developed with Hestia pro. Is it possible if you kindly make a video with the theme " The Cause" or how can I add some functions to my Hestia theme similar to the Cause ?
The only way to get additional functionalities into a theme, is to change the code.
You can use plugins, though, that will add the desired functionality to your site.
thanks for nice tutorial, is it possible to create multiple one-page with different URL with this template ??
Sure, you can use Hestia on unlimited websites.
Hello! There is any way to make the logo bigger? The default size is to small. Tks!
How do I add a second blog page to the free hestia theme? I can see how to add a regular new page, but I don't see the place to convert it into a news/blog page anywhere.
can you change the font color of the main page message?? I cant find anywhere to change such a simple thing.
Hi, may i ask how to put the icons beside of the menu pages? they doesn't appear in the Appeareance section of the Dashboard (it doesn't appear the + button). Thanks!
Hello Ricardo. You should use the Orbit Fox plugin and activate the Menu Icons module.
Then you will se the plus sign near each menu element on your dashboard.
@@RobertPeterK Didn't work, but thanks anyway. By the way, in my Contact section, the icons of the number and location doesn't show up. It appears an empty square. ¿How can i add those icons? Thanks!
Hi dude
Thanks a lot for this video, I loved it.
Little question, How can I remove the menu bar
?
Hope you ll get the time to answer me. =D
Hey, Mr. Schilling. You can't do that from the dashboard, you need to change the code of the theme.
Hi @@RobertPeterK 😊
And thanks for the answer.
I ve changed my mind and I want it in black. Do you know the coding dude?
PLEASE HELP! For the BLOG section in Frontpage Sections, where you see the clickable posts with the photos of the bears, mine is blank from removing the theme posts and I want to add my own items! Where do I edit that so I can add clickable blog posts? Please help it is crucial to my site.
Hi, I loved this video. Whilst I was customizing the theme, my big title section button disappeared. It's not showing anymore even if I fill in all the fields. Any idea how it could have disappeared.
Hi, Chikasha. I have no idea of what could cause this problem. I think if you try to reinstall the theme, everything will go back to normal as it should be.
what is the size of featured image in Hestia theme?
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!
Hi, Ricardo. Please contact our technical support team here: themeisle.com/contact
Shukriya
Thank you too.
How can I change the header height in Hestia.
Excellent Tutorial. How Can I add a section to customize and edit it ? I cant find my pages in customize frontpage sections after added in pages. Thanks
Make sure you have the homepage set in settings / reading, then you will see your sections on the front page.
You can change the content in the about section and put there what you want.
If you want to move sections or create a custom one, I would recommend getting Hestia PRO: themeisle.com/themes/hestia-pro/
@@RobertPeterK Thkanks!
Does anyone know of a video that teaches how to edit the pages? This one doesn't go over that area at all :(
Do you know how to change the header colour of your individual blog pages? they are grey now.
Sure, you can do that in the Customizer.
@@RobertPeterK Can you tell me where to find it please? I can not find it..
Hola no me quedan los iconos de las redes sociales me queda en letra pero no el icono del logo, como tengo que hacer?
Hi!
Thank you for the tutorial.
I have a problem... when I click on " contact" icon in my primary menu, it doesn¸'t take me to this form. Do you know why is this so?
It should take you to the page, if you want to use anchors though and navigate through sections on your frontpage, you should use Hestia PRO
Can i change the order of feature frontpage section? I want to move the subscribe section below the blog section. Thx
You can do that only in Hestia PRO: themeisle.com/themes/hestia-pro/
Hi, is there any way to move team section to another page other than the frontpage? Any short code perhaps?
Hello there,
We appreciate your patronage of Hestia!
To replicate the frontpage sections, you can utilize shortcodes. A detailed explanation can be found at docs.themeisle.com/article/782-how-to-recreate-hestia-pro-frontpage-using-shortcodes-with-shortcodes.
I've seen that hestia has a background video. Replaces the image of the home page. Do you know how this is done?
¡Hola hombre!
Esta característica solo está disponible en la versión PRO del tema.
Pronto tendremos un video donde podrás ver las diferencias entre Hestia FREE VS PRO.
@@RobertPeterK muchas gracias :D Thanks you
Can you change in frontpage section background picture for video? Thx
That feature is available in the pro version of Hestia which you can purchase on this page: themeisle.com/themes/hestia/
Hello, can you please tell me why the new pages I create show up only the title? I tried changing the customisations and changing page settings but none fied the issue I hope someone can help
Hello! Im very new to this and i havent been able to find an answer. As i see Hestia comes with a background image with mountains etc, but can i remove it and add a picture of my own from my pc ?
Sure, Liina. You can change that picture in the background with your own through the customizer.
@@RobertPeterK Thank you :)
So, i changed the image of BIG TITLE SECTION and it worked well. But, when i visited the website through mobile, the image cropped out. only a little central part of the image was visible
You must use a mobile friendly image
You are the best! Thanks!
But I have a problem: "Section Main Page/ Contact/ Contact Content" - I can't change the content.
Hi, Marcos. Is this happening through the customizer?
@@RobertPeterK Yes. In your video, at 20:32, you click on (edit) and change the content by the customizer. But when I try, the content doesn't appear and I can't add or delete the standard content.
I realized when I try to edit the content, an error occurs (chrome console). Look at that: uploaddeimagens.com.br/imagens/hestia__issue-png
@@MarcosdeOliveiraRamos Please contact our support team here: themeisle.com/contact
@@RobertPeterK Ok, I'll do that. Thanks!
I have the orbit fox with the Icon menú activated but it doesn't work I don't have the + in the menú... :( I don't understand why...can you help me please! Thanks for the tutoríal is excelent (and sorry for my english)
I have no idea why is not working.
Is everything up to date?
Sorry, can i re-order the sections in the index ? i need "Our team" before "Shop". Thanks
You can do that in the pro version of Hestia: bit.ly/HestiaPRO
Hi, great video! I have a problem though, with that search icon you added it is a regular search instead of a product search which is what I need since I am making an eCommerce site. is there any way to switch it? Also, I tried adding a regular product search widget on the navigation menu and it doesn't show up on mobile, do you know of any way to fix that?
I have no idea but I will check it out.
Robert Peter thank you!
@@CR-hq4fp You are welcome
Hi! I am trying to customize the Hestia theme but for some reason it won't let met. (no 'teddy bear' image or subsections appear). Could you please steer me with this problem? I have Orbit Fox, Pirate Forms and WP Forms active as plugins already.
Check out the reading options under settings
At 16:04, when you change the picture it doesn´t have a round shape anymore. Anyone you know how to fix it?
Hi! Transparent Navbar doesn’t work on mobile... I can't find out why in the documentation. Help please!
Hi, Anne, Please contact our support team here: themeisle.com/contact/
I cant do anything related to fro t pagr section.. like big title section or button or anything.. it's not visible site but it's there in settings.. what to do
Hi, Komal. Please make sure the "disable section" checkbox is unchecked.
Greatt job!
I'm searching good solutions about my website(hestia), and I saw your youtube content about hestia. Maybe you'll help me for what to do.
I built website with turkish language, after that I add English version as a second language. But some details not working in english version, such as: transparent menü bar, pages appearance (services page) and url. I didn't use two language without subs domain.
Thanks in advance.
Can a background image be placed in the function? I do not want it to have a white background.
You have that option in the customizer, actually.
Hi, I created a about on the main menu and a subproject under about called company profile, but I don't know what link to put in the URL bar.I don't know where to edit my company profile？
Hi, Sunny. You should create a page and then add that page to your menu.
@@RobertPeterK Ok, but how to create the page, thank you
@@sunnyubl3759 go to pages than click on add new, that's it.
@@RobertPeterK I don't know much. Is there a video? If not, please explain the details. Thank you.
What's the difference between customizing the theme vs. creating a page? If I created a page looking completely different from Hestia theme, what's the purpose of the theme? (I'm using Elementor to edit my pages)
The purpose of a WordPress theme is to get a complete website up and running as fast as possible, out of the box.
@@RobertPeterK thanks! That helps.
It would not let me upload a png file for the logo, how were you able to do that? Please welp
Really? Try uploading something different instead. It should work.
how can I change the order of the front-page content
Hi, thanks for this helpful video. Could you possibly tell me how to change the font colour in the blog section? Many thanks! :)
Thank you too. Font settings are available in Appearance Settings / Typography
I am experiencing issues with changing the features icons. I wish to change the icon into one that is not pictured in the drop-down menu. Any advice on how to add these?
Get Hestia PRO and you will be able to upload your own images there.
@@RobertPeterK Thanks for the reply! However, that is not exactly what I mean. When I try to update a feature icon I see the following remark: some icons are not shown here, You can find a list of all icons [here].
I then can't change the icon into any of these, not even the ones that are free.
How do you change the color of the default theme page..? Mine are all white but I want to change the color of my pages to dark blue. Do I have to pay for the Pro version in order to change the color of the pages?
Being able to change the color of the background and accent is nice but very limiting.
Hi, Hanson. You mean the background color?
In the free version of Hestia you have only two color options in the customizer.
@@RobertPeterK I'm actually referring to the color of the default pages. I can't find any way of changing the color. They are all white but I want to use dark blue.
How can the items on the menu lead to a section on the frontpage (scroll down) instead of a opeaning a new page?
Hi, Marcos. You need to use anchors in your menu. Watch the step here 29:28 , and you will understand how to set it up.
Hi, can you please guide me how to make my header transparent..? I didnt find the transparent header option anywhere.
Hi there,
We appreciate your use of Hestia!
You have the option to make the header transparent on your homepage, and you can find step-by-step instructions in this documentation: docs.themeisle.com/article/753-hestia-doc#headeroptions.
Furthermore, if you want to achieve a transparent header on pages other than the homepage, you can follow the guidance provided here: docs.themeisle.com/article/1342-how-to-make-hestia-navbar-transparent-for-other-pages.
Hi, may I know why I didn't see "Frontpage Section" inside Customizer?
If everything is installed correctly, you should see that section in your customizer without any problems.
Try re-installing the theme and then deactivate the plugins one by one to see if there is some conflict between your theme and some of the plugins you are using on your website. If you have no success, contact our support team here: themeisle.com/contact/
Trying to add a shortcode to the BIG TITLE section under the Title name. Which PHP file is this under?
It should be the home.php
Hello, Why is there a phone icon next to the phone number and no envelope icon next to the email address in the very top bar for contact information? Thanks for your quick reply.
Hey, Sunny. Sorry for late answer. Here is a video you can follow to understand how that works: ua-cam.com/video/dsGJfApsVXQ/v-deo.html
in my customize theme contact form was not show after the install wp form lite
Please check this part to create a form: ua-cam.com/video/bpom4SSyo-8/v-deo.html
let us know if it worked
Hello, I can't configure the feature and buttons that they followed the link.
Hi, Filipov. You should follow the steps that show you how to configure the menu.
Hi,
Thanks for a great tutorial. But I have a problem. Some of the blocks are missing (probably because I have deleted the long time ago). For instance both contact and subscribe. How can I get them back?
Hi, Laila. Go to the customizer and uncheck the box that says "disable section" or click on the eye on the left when you see the list of all front-page sections.
Let me know if it worked.
@@RobertPeterK Hi, Unfortunately not. The box was already unchecked and the eye atictivated. Do you think it will help to download Hestia one more time? What will happens to my site if I do that?
@@rundtekvator You can do that safely, no part of your website will be affected but not sure it will help.
If the problem persists, please contact our support team here: themeisle.com/contact/
Is it possiblie to modify Hestia comments template? My website is in Portuguese, however, Hestia comments template in Blog section by default is in English. I don't see the option to change the text in Comments template and I would like to change titles like `Leave a Reply` ou `Post Comment`. If you could reply if its possible or not to change it in the free version. Thank you
How to make the image of the header brighter? Currently she is dark ... Thank you for your reply
That is a setting you can't change through the customizer, sorry.
Where is the line of code in the css file to change?
What is the name of the css file? style.css? Thank you
Why cant i edit and add similar content as the main page on the pages that i create? do i need elementor for that?
You can use shortcodes to re-use the sections of the homepage on any page.
That is available only in Hestia Pro.
Hello, how to upload the product video? Thanks for your quick reply.
The product video? Where is the place you want to upload that video on?
thanks alot sir for this detailed tutorial sir i want to know that this theme is competible for advertisement or not like google adsene and affiliate advertisent etc ..answere please..
Sure, you can use Hestia for AdSense ads and Affiliate Marketing.
Someone PLEASE help. I am in the process of adding menus that link to my front page sections: About, Contact, etc. But when I do so, it is only allowing one menu to be 'primary' I need more than one! I am so frustrated. Any help is greatly appreciated
Why would you use more than just one primary menu?
Hi, I cannot find a way to the comment section on my pages. I enabled the "allow comments" in all of them. Can you help me?