Neve is a super-fast, easily customizable, multi-purpose theme. It’s perfect for blogs, small businesses, startups, agencies, firms, e-commerce shops (WooCommerce storefront) as well as personal portfolio sites and most types of projects. While it is lightweight and has a minimalist design, the theme is highly extendable, it has a highly SEO optimized code, resulting in top rankings in Google search results. Neve works perfectly with Gutenberg and the most popular page builders ( Elementor, Brizy, Beaver Builder, Visual Composer, SiteOrigin, Divi). Neve is also WooCommerce ready, responsive, RTL & translation ready and AMP ready. Look no further. Neve is the perfect theme for you!
In this article
Download and Install Neve
To download and install Neve, make sure you follow the steps below.
- Navigate to Neve's page and click on the Free Download button.
- Enter your email address in the pop-up window and click on Subscribe and download (the email address is not required, you can just click on Thanks, I want to just download the zip).
- You’ll be redirected to a confirmation page, while the zip file ( neve.zip) for Neve will be automatically downloaded to your computer.
- Install the theme by following this doc.
- the layout of the page (from the three layouts available)
- the layout of the posts on the blog page
- the pagination type (numeric or infinite scroll - loading a new batch of posts on each scroll)
- the length of the excerpt (when the Excerpt Lenght is set to 300, the entire post content will be displayed)
- whether to show the author avatar or not.
- General - The options found here are as the name suggests, general. This means that it will apply to all texts of the site unless that text is a heading ( h1 - h6 ).
- Headings - Options dedicated to headings.
Note: If you are using Safari on your Mac, there is a small chance you have a setting that automatically unzips any .zip file. If that's happening for you make sure you check this doc for instructions on how to turn that off.
Note: These instructions are just for Neve. To install purchased Neve Pro, make sure you follow these instructions.
Import demo content
Now that you have Neve installed and activated, a notice will show up in your Dashboard to help you get started.
From there, you can choose to import some demo content, to have your site up and ready with just a few clicks.
Neve comes with a library of ready to use Starter Sites from which you can choose, depending on your needs. Just click on the Try one of our ready to use Starter Sites button and you will be able to see all the Starter Sites available for import.
First, choose the page builder of your choice ( Elementor, Brizy, Beaver Builder or Gutenberg which is the default WordPress editor ), and click on the Preview button for each Starter Site available for that page builder. When you decide on the one you want to choose, click on the Import button. You will be prompted with a popup containing details about what we'll be imported or not.
Note: At this moment, all the Starter Sites available for the Thrive Architect and Divi Builder page builders are available just in Neve Pro.
Migrate from Zelle ( Zerif ) to Neve
We know how much some of you still love Zelle's ( formerly named Zerif ) design, and that is why we've made it easy for all of you to switch to Neve, while still keeping the look and feel of Zelle.
If you currently have the Zelle theme installed and activated, after installing and activating Neve, you will be prompted with a special type of notice ( like in the screenshot below ).
You need to click on the Try one of our ready to use Starter Sites button. That will open a popup from where you can choose to migrate from Zelle.
If you click on the Import Zelle button, a front-page with the same design as Zelle will be imported on your site. The page is created using the Elementor page builder with your previous content ( Note: There are cases where part of Zelle's options will not be properly imported in Neve, as it all depends on each site configuration ).
In the main WordPress menu, under Appearance, you will find the Neve Options submenu, which is the place where you will find all the necessary information about Neve. From the documentation, changelog, and useful plugins recommendations that is the place to go.
This is also where you can find the Starter Site library mentioned before. If you decide on trying a new design for your site, go to Neve Options > Sites Library and browse through the available Starter Sites.
Customize your site content using page builders
If you decide on using one of our Starter Sites, after import, you will need to make some small adjustments to the content of your site, to make it your own.
Depending on the page builder you've chosen, the process will be slightly different.
For this example, we'll go with the default page builder at this moment, which is Elementor.
To make any changes to the imported pages, just go to Pages and for each one click on Edit with Elementor. That will open Elementor's editor where you will be able to make any changes to the page.
A dedicated Blocks Template Library
Neve is fully compatible with the new WordPress editor and is constantly updated to keep up with all the new plugins and their blocks.
Gutenberg Blocks and Template Library by Otter is one of the most popular plugins that bring in extra blocks for the new editor, and while used with Neve, it brings in a dedicated Template Library, including Neve's sections.
How to use the template library?
Just create a new post in the WordPress editor and add the Section block from Otter. At that point, you can either create a new custom section or click on Template Library where you will be able to see all the available templates. Choose the one you want, and click on it to import it.
As all the content part of your site is customizable using page builders or the WordPress editor as mentioned above, everything else can be customized from a single place in Neve, which is the Customizer. Just navigate to Appearance > Customize where you will find options for:
Neve offers multiple customizations options for the layout. These options can be found in Appearance > Customize > Layout > Container and Appearance > Customize > Layout > Content/Sidebar and will apply across the site.
Note: If you want to have some of the posts or pages with a different layout, you just need to customize their individual layout options which can be found in the WordPress editor for each individual post or page. If changed, those options will override the general options from Customizer for that specific post/page.
Neve has options for customizing the container width (the actual width of the site, in pixels) and the style ( either Contained or Full Width ).
After defining the container width and style, you can go on an decide on a left or right sidebar, or no sidebar.
There is also an option to control the content width (the width of just the content area of the site). This can be added in percentages, and it will automatically control the width of the sidebar (if there is one).
Customizer options for the layout
Individual posts options for the layout
The Blog page
Options for the Blog page can be found in Appearance > Customize > Layout > Blog/Archive.
There is where you can choose:
To change the size for the blog page images, you can use this doc, for the neve-blog size.
You couldn't find the feature that you needed? Make sure to check out what Neve Pro's Blog Booster module brings on the table.
Want to edit the Blog page using Elementor? By default, that is not possible in WordPress. As soon as you tell WordPress which page is your blog index page, found in Settings > Reading, WordPress takes control of that page and no page builder can edit it. One solution is to use Elementor Pro's Theme builder for the custom archive page.
A three grid layout blog page example
By navigating to Appearance > Customize > Layout > Single Post you have the option to reorder, enable/disable all the elements on the single post pages.
Is the comments area not visible even though you've enabled it? Make sure you take a look at this doc for further things to check.
Single Product Page
On single product pages, apart from the Related products section which is displayed automatically, you can easily display an Exclusive Products slider section, which pulls products from the selected category.
The latest update of Neve adds a new versatile builder for the header and footer areas of your site. With just a few clicks you can create your perfect header and footer.
The header builder has three rows in which you can easily select and arrange the available components you can find while hovering over each division of the rows. Just click on the "+" (Add) sign and a list of components will appear. Each component has specific options you can customize once that component is clicked on. Also, each component's width can be adjusted so that it corresponds to your needs.
Want to also add widgets in the Header builder? Follow this doc.
Apart from that, each of the three rows of the header builder can be styled individually. Just click on the little wheel that appears in front of each row once you hover over it. That will open some specific settings for the row, with Layout ( Full width or Contained ), the height of the row, the background color of the row and the skin mode ( background ) which can be either light or dark.
[Desktop] Change the background color of the header or add a background image
Select the row of the header builder, that you want to style, click on the little wheel that appears in front of each row once you hover over it, and go to Style > Row Background. There you can either chose a background color or a background image.
The header builder allows for different headers on Desktop and on Mobile devices. Just click on the Desktop/Mobile icons and you will get access to the corresponding builder.
Are you looking for more options? Checkout Header Booster Module for options such as sticky header, social media icons, and more!
[Mobile] Change the background color of the header or add a background image
After selecting the Mobile version of the header builder, you will see the Mobile menu content which represents the area that will show up on mobile devices, after clicking on the menu icon. You can click on the arrow that appears while hovering the Mobile menu content. That will open options for Layout ( where you can make the mobile content open from the left side or act as a toggle ) and style. There is where you can update the background of the area ( color or image ).
The Logo & Site identity component
There are four different layouts for the logo and site identity area: just the logo, logo followed by the site identity, site identity followed by logo, and logo and site identity one below the other.
Also, for each layout, you can enable or disable the site title and the site tagline.
Here is where you can also change the maximum width of the logo in pixels.
The Primary Menu component
There are four skin modes available for the primary menu. These are styles that apply while hovering the menu items.
Colors and typography options can also be customized here for the primary menu.
Note: By default, Neve's submenu items of the Primary menu are centrally aligned. If you want them aligned left or right just follow this doc.
The Menu Icon component
This component ( as suggested by its name ) is adding a menu icon which on click, will open whatever is added in the Mobile menu content area of the builder. By default, the Primary Menu is added there.
By default, the sidebar will slide-in, from the left side. But it can easily be changed to open from top to bottom, like a normal dropdown. Just click on the little wheel on the left side of the Mobile menu content component, like in the picture below. After that, you just need to select Toggle Dropdown from the Layout control.
The HTML component
Consists of an area that allows HTML code and shortcodes. Check out how to use the HTML component to add widgets in the header area.
Want to add social icons in the header? Check out how you can do it using the HTML component.
The Secondary Menu component
It is an extra menu, with styling options similar to the Primary menu.
The Secondary Menu is a single level menu. You can't use dropdown menus in this component.
The Cart Icon component
It can be used only if WooCommerce is installed and activated.
The Header Booster module is enhancing Neve's header builder by providing new components (two extra Button and HTML components, one extra Search Form, Primary Menu and Logo & Site Identity components), sticky and transparent menus, and a page header builder.
The footer builder has two rows in which you can easily select and arrange the available components by clicking on the "+" (Add) sign which appears on hover over each division of the rows. Each component has specific options you can customize once that component is clicked on. Also, each component's width can be adjusted so that it corresponds to your needs.
The footer builder allows for a Footer Menu, a copyright field, and four widget areas. Click on each component to see their styling options.
Colors & Background
These options apply generally across the site unless more specific options are selected for some elements.
Note: If some of the options don't apply on a page, make sure that page is not created using Elementor or any other page builder. If that's the case, you'll need to customize the page using the page builder.
The typography options are categorized as follows:
The typography options include font family, text-transform ( normal, camelcase, lowercase, uppercase ), font weight, font size, line height, and letter spacing.
Note: Same as with colors, these options apply generally across the site unless more specific options are selected for some elements. Check out the Header builder section to change the typography options just for the Primary menu, for example.
Neve has two main types of buttons which we've called Primary and Secondary. Some of the Primary buttons are: Add to cart, Update Cart and Proceed to Checkout, while Secondary buttons are View Cart, Post Comment and Apply Coupon.
To customize the appearance of the buttons you can see the Buttons panel inside Customizer. There you will get two types of styles for the buttons: Filled and Outline.
The filled buttons have a background color and a text color.
The outline buttons have also a background color and a text color, but the difference consists in the fact that the text color will apply to the border as well. This way, you can create a button with a white background and blue colored text and border, for example, creating the illusion of a transparent background for the button.
Apart from colors, there are also padding controls ( which can be customized according to each device: desktop, tablet, mobile ) and border-radius.
Hooks and child themes
Do you need to make some small changes to your site, and have a basic experience with coding and using hooks?
You can start by downloading our starter child theme and work your way with it.
If you want to use Neve's custom hooks, download the Neve Hooks plugin and navigate to Appearance > Customize > Hooks. There you will find all the custom hooks and an area where you can add your custom code for each hook.
By default, Neve supports breadcrumbs on the Shop/Archive (WooCommerce) and Single Product pages. But Neve also supports the most popular plugins used for breadcrumbs: Yoast SEO, Rank Math SEO, Breadcrumb NavXT, and SEOPress.
Check out the following documentation for more details about it.
Compatibility with AMP
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.
Check this doc for more details about Neve's AMP support.
Some of Neve's starter sites come with built-in one-page scroll navigation. In other words, by clicking on an item in the menu navigation you will navigate to a specific section from that current page. This is done, by using the Menu Anchor widget from Elementor ( or similar widgets ) to add specific IDs to each section.
To link to a section, you would need to link to that ID, like #about for example.
Note: This approach works well for a single page. If you want to make sure the navigation will work the same way on other internal pages as well, make sure you use the full link of your site, on the menu, like https://mysite.com/#about for example.