Neve WordPress Theme Tutorial: How To Use Neve Step By Step

Neve WordPress Theme Tutorial: How To Use Neve Step By Step


Hello everyone, I am Robert from ThemeIsle.com
and in this video, I am going to show you how to get the best out of your Neve WordPress
theme. Here is what you will learn: First of all, I will show you how to download
and install Neve. Then you will see how it works out of the
box and how to use the customizer to change the layout settings, colors, typography and
so on. Furthermore, you will learn how to import
these beautiful and free website templates from the Site Library. Once you pick a demo, you will want to change
its content so I will show you how to make changes on your Front Page. Are you ready? Let’s get started Navigate to Neve Page on ThemeIsle.com. Click on the green Download now for Free button. Enter your email address in the pop-up window
and click on Download Now. You’ll be redirected to a confirmation page,
while the zip file for Neve will be automatically downloaded to your computer. The file will likely be in your web browser’s
Downloads folder. Once you find it, remember the location and
continue to the next step. Login to your WordPress dashboard which is
also known as the WP-admin. Look towards the left of your screen to the
admins’ menus and click on Appearance ->Themes. Now click on the Add New button which appears
at the top of the screen. Then click on Upload Theme, and a new section
will expand. Click on the Choose File button and then browse
to the zip file for Neve and select it. Then click on Install Now and allow the process
to complete. Then click on Activate. When installing Neve on a new WordPress website
you will see something like this on the front page which is far away from what you saw on
the demo page, right? So, in the coming minutes, I will show you
how to customize it and even how to make it look like the demo with just a couple of clicks. First, let’s see how to change the theme settings. After the theme is installed and activated,
go to Appearance → Customizer to start customizing Neve. The Customizer options are mostly addressing
all pages except for the imported frontpage which can easily be customized with Elementor. I will show you exactly how to do that later
in this video, so keep watching. By the way, if you want to jump over the steps
please use the timestamps in the description box below. The customizer contains options to change
the Layout settings, the colors, and background, the header area, typography settings including
font family, menu settings, widget options, homepage settings, and an additional CSS field
where you can change things by using specific CSS codes. Let’s see what you can do in the Layout tab. Here, you can see five elements you can change
the settings for. The container, content and sidebar, blog and
archive, single post and finally, the footer area of your website. Click on the container to see the options
within. The first thing you can change here is the
Container Width in pixels for desktop and for mobile views too. There are three more options you can change
below for the Default Container Style, Blog, and Archive Container Style and for the Single
Post Container Style. You have two options for each setting. Contained or Full Width. That’s it, so we can go back and access the
settings for the second element. Here, we can change how the Sidebar Layout
looks like sitewide. The sidebar is on the right by default and
you can move it to the left or eliminate it completely if you don’t need it on your site. Furthermore, you can set the width of your
content sitewide, between 50 and 100 percent, and if you want to enable the Advanced Options,
click on this switch and see the same options separately for the blog page, archive page,
single post, and other pages as well. This could be helpful if you want to have
different structures on those pages. The Blog and Archive settings are meant to
change how the content on these pages is structured and the first option here is to change the
Blog Layout. With the masonry style selected, you have
four options in this drop-down. You can choose to display up to four columns
on your blog page, which will look like this if you choose three columns, for example. Below, you can set the Excerpt Lenght from
5 to 300 and the post pagination to Number or Infinite Scroll. Furthermore, you can choose what you want
to display in the Post Content Order and in the Meta Order, and you can even move these
elements, like so. Cool, right? Just click on the eye here to hide an element,
the author for example. You have the same options in the Single Post
settings tab. It’s weird but you can drag the Content above
the title, like so, and you can hide any element – the Post Navigation for example. Finally, you can access the footer settings
where you can have a text, a Footer Menu or you can turn off this area by choosing none. On the Widgets tab, you can choose how many
columns you want to display in this drop-down. If you choose three, for example, and you
go back to the Widgets area under Appearance on your dashboard, you can see Footer One,
Footer Two and Footer Three where you can add any widget you see on the left. You can add images, text, links and even more
but remember that these widgets will be displayed all over your website. This is simple, but powerful because you can
change the colors on the Primary Button which will be the default color. Then you can change the color on Links, Links
on Hover, Text, Primary Menu Items, Primary Manu Items on Hover and the Background Color
which can be replaced with an image, if you select one here. Just click on default for each color to go
back to its initial settings. Right here, you can see three options:
The Site Identity, Top Bar and Primary Navigation. In the Site Identity tab, you can select a
logo over here which will replace your site title and tagline you see on the left side
of your header menu. One more thing you can select here is the
Site Icon, which should be square and need to have at least 512 x 512 pixels. Enabling the top bar here, you can see a tiny
space above your menu which contains two elements: the content field which can be used to display
a phone number, for example, and a Top Bar Menu selector. If you want to display a click to call message
here, for example, use this HTML code which will redirect your visitors to the dialer
app once they click on it. Just replace the number with your own and
you are good to go. You can also use the Layout Options to swap
the position of the elements. Cool, now publish the changes and go to the
Primary Navigation options. Here, you can change the Navigation Layout
and the Last Item on your menu. If you want to hide the search function, for
example, choose None in this drop-down. We are done with the header area so we can
go to the next one. This is the area where you can change the
General Settings for all the fonts used on your entire site. The Font Subsets here, Font Family over here,
Font Size in this field with dedicated options for mobile view, and the Line Height here
which can have a separate value for mobile devices. Furthermore, you have options to change the
Font Family, Font Size and Line Height for each set of Headings from H1 to H6. These are the elements on your blog posts
and pages, which helps you structure the information with titles, subtitles and so on. If you don’t have a menu yet, create one here
and then select its position using the drop-down after you click on View All Locations. To see how you can create a good looking menu
with icons, check out the video recommended above or the link in the description box. Widgets are the elements you see on your sidebar
and you can use the same things in your footer area too. Just select which one you want to have in
the Footer One, Footer Two, Footer Three and so on. remember that in the Layout settings you can
choose how many columns you want to have in your footer area. Here, you can choose what’s displayed on
the homepage of your site. It can be your latest blog posts or a static
page as well. To choose a new static page here, other than
the pages you see in the drop-down, you need to create that page and then select it here. That page will become the homepage, and the
other one will be where your posts are displayed, like the blog page for example, which comes
by default when you install Neve. This is, in a way, Neve’s own personal portfolio. Here you are given a lot of information about
what Neve can do, and how to do it. Also, the tools are linked there for easier
access. Although it is not mentioned in the Useful
Plugins tab yet, AMP for WordPress is a plugin that is capable of making full use of Neve’s
speed. Neve is an AMP-ready theme capable of lowering
down your loading times for a more fluid experience. In order to use Neve at its full potential,
you would need to install the AMP for WordPress plugin to enable AMP on your website. Gutenberg Blocks and Template Library by Otter
is a lightweight WordPress plugin that brings extra Gutenberg blocks to your site. So if you want to create complex pages and
posts, Otter Blocks would be all you need to build beautiful pages. This is the fastest and easiest way to set
up your website with Neve. Please navigate to Appearance>Neve Options>
Sites Library and choose the template you would like to import. There are multiple demo contents which can
be easily imported, among which stands the content from our Neve demo website. Neve also detects if your previous theme was
Zelle. If you want to switch to Neve, but you really
love Zelle’s front page look, Neve makes it easy to import a frontpage similar to Zelle’s. The detection is done automatically and the
process is similar to what you will see next. I’ll choose the Neve Original demo for now. Once you click on the Import button for any
demo you pick, Elementor will be automatically installed in order to facilitate the editing
process. The feature will import an entire demo which,
among other features, comes with a well-designed Frontpage and Blog page with thematic-based
posts. The imported demo can be easily customized
further. After Importing the demo content, one of the
imported pages was automatically assigned the role of the Frontpage. You can check this by navigating to Pages
/ All Pages. Since the page is based on Elementor, you
can further customize it by clicking on the Edit with Elementor link over here. Once the Elementor interface is loaded, you
can start changing the content and settings for each element, which reveals its settings
when you click on it. If you need to change the background image,
for example, find it in the style tab of the first section over here. Change the text you see over this section
here, the buttons over here and so on. You have nine fully customizable sections
plus the big title section which you can use as you wish. Some sections are built in duplicates and
loaded separately according to the device that’s currently accessing the website. For example, the Subscribe section is loading
the first item for the Desktop view, and the second item for phones or tablets. See the contact details twice in the footer
area when editing it? Same thing here as it is for the subscribe
section mentioned earlier. If you go to the advanced tab and open the
responsive settings, you can see that the first element is hidden on desktop devices
while the section you see below is hidden on tablets and mobiles. Cool, right? At the bottom of the front page, there is
an HTML widget which contains some CSS code made for disabling the animations for mobile
devices and tablets and some fixes for Internet Explorer. By clicking on this gray area you’ll be able
to see the CSS code capable of adding extra features to the footer sections for mobile
devices and tablets. Each snippet describes each piece of CSS code
and has its own customizable purpose. As an example, the following code will disable
the animation when the screen width is lower than 768px. In order to use this feature, you would need
to have a MailChimp or SendinBlue account. Once you have an account, retrieve the Access
Key, which is the API key, from your personal MailChimp or SendinBlue account on their website
and insert it into your plugin’s settings in the Dashboard. The inserted Access Key will further generate
the List ID which alongside the Access Key need to be inserted in their corresponding
field as you can see here. I think I’ve covered everything you need to
know about Neve. As a bonus for staying with me until the end,
I will show you how Neve works with the Block Editor, (aka Gutenberg) When adding a new page or post on your dashboard
and using the block editor, you can see the document settings on the right side of your
screen. The last panel for posts is the Posts Settings,
obviously, and you can see the Page Settings over here, on pages. The options are very useful for changing the
layout on that particular post or page and its components visibility. More about these settings and how to create
a landing page with the block editor of WordPress in the video you see on the screen right now. Feel free to check other WordPress videos
on our channel and leave your comment below to start a conversation with me. Ask any question about Neve and I will do
my best to answer it. See you there.

27 thoughts on “Neve WordPress Theme Tutorial: How To Use Neve Step By Step

  1. Table of contents:

    Step 1 – Download & install Neve 0:48

    Step 2 – Change Neve settings 2:56

    Recommended actions: 11:36

    Step 3 – Importing full websites 12:52

    Step 4 – Frontpage Setup 14:10

    Step 5 – Setting up the subscribe section 16:37

    BONUS Step: How Neve works with the Block Editor 17:26

  2. Sorry to keep asking, but at some point in the future can you do a step by step tutorial on how to build an automatic blogging site using Feedzy and The Extra theme by Elegant Themes. i would have to say this tutorial would be epic. Don't get me wrong your tutorials on the plugin is good, it's just extremely hard to follow. Also if you can do a tutorial on how to auto-post your content on a business facebook page. Or if i can pay you to create a step by step tutorial on this, please.

    I know a tutorial like this would benefit overs like me in the same situation.

    kind Regards
    Anthony

  3. Great video as always Robert! Curious what is your favorite Elementor free theme and fav paid theme?

  4. Is there any way to make the main menu slide with the page (so-called sticky menu)? I've tried with plugins and without them and nothing works.

  5. @ Robert – Nice video. Question, i’m trying to use the default neve layout. But i’m having issue in contact form. I put my email address in form setting field but the message doesn’t go through the email address that i define. Can you help me on this. Thank you in advance

  6. Yeah! this is an awesome theme… thanks. Please make a video with the AMP page builder. Because of my website getting slow in mobile.

  7. Hi Robert. I have instaled and activated Neve but when I scroll with the mouse, the next pages (about us, testimonials, our team, etc) don't appear. I tried to uninstall Neve and install again but i have the same problem. Can you tell me what I'm doing wrong please? How can I recovery the pages? Thanks and sorry! I'm a beginner… :S

  8. Hello Robert!

    Basically I need two themes for my two blogs.

    If I choose this option
    "get access to all our themes & plugins for

     only $89"
    do I have to renew products yearly, which I will use?

  9. Hello Robert, Neve is a beautiful theme, thank you for sharing. I really like 'Vet Center' is there a way of changing the blue sections under the main header to a different colour?

  10. I just discovered this theme and I think it's incredibly good but i miss a few thing:

    ➢ Change the size of the menu letters and the separation between each menu item.
    ➢ Set a color gradiant in the background.
    ➢ Set the sticky menu with a color diferent of the background

    I think your theme is very good and i would pay for a plugin with this features for the theme.

  11. Can elementor replace all the editing work? I asked because, many times when i want to make changes with wordpress customizer, i couldnt change anything. But I could only make the changes in elementor, so thats why i ask

  12. Hi Robert, I get an error while uploading this to my WP that says "The uploaded file exceeds the upload_max_filesize directive in php.ini." How should I rectify this?

  13. Hi
    I want to know what I need to do to change the background image from the frontpage when I import zelle pages. I have tryed from "appearance", "costumize" and clors & background. And I have uploaded a new image but that not works…
    Is there any other way to do it?

  14. Thanks again Robert, love this theme, I am struggling with one thing, changing the colour of the header and footer sections. They are currently dark grey and I don't seem to be able to find how to change them? Thank you in advance! Simon.

  15. Hi Robert, I installed the theme and the animations when scrolling donw are not working, do you know how to fix this?

  16. I really like Neve but I can't import an demo.
    It always stops at importing and the last line in the error log says "No front page ID."
    Has anyone any tips about what I can do.

Leave a Reply

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