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
In this video, you will learn how to install Neve, customize it and how to 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 ( neve.zip) for Neve will be automatically downloaded to your computer.
Note: If the download is not starting automatically, you will have to click on the Download Files button and search for Neve on the list of downloaded products. Once you find it, just click on the Download link.
- After the download is finished, find the neve.zip file on 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 at the top of the screen and a new section will expand.
- Click on the Choose File button and then browse to the zip file ( neve.zip) for Neve and select it.
- Then click on Install Now and allow the process to complete. Then click on Activate.
If you have purchased Neve Pro, follow these instructions. The above steps are for Neve Free version only.
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 ), 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 ). 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.
After the theme is installed and activated, you can go to Appearance > Customizer to start customizing Neve.
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.
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.
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:
- 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.
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.
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
- Logo - Suggested image dimensions: 150 by 100 pixels.
- Site Title - The main title of the site.
- Tagline - A tagline is a short phrase, or sentence, used to convey the essence of the site. In Hestia, the tagline is also used as a title for the latest posts page ( if in Reading -> Settings you have selected "Your latest posts" option ).
- Logo max-width ( in pixels ) > this can be adapted for Desktop, Tablet and Mobile devices.
- Options to show or hide the Site Title and the Site Tagline
- Site Icon - A unique icon for your site.
- Option to align the component.
The Primary Menu component
Offers 4 different skin modes to choose from, options for the menu items colors, an alignment option, and the possibility to add a search or a cart icon at the end of the Primary Menu. It also had Padding and Margin controls, which can be adapted for Desktop/Tablet/Mobile.
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 Sidebar area of the builder. By default, the Primary Menu is added there. To have access to the Sidebar area, make sure the Show Sidebar toggle is checked.
In the Layout tab, you will also find options for alignment, padding, and margin.
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 Sidebar component, like in the picture below. After that, you just need to select Toggle Dropdown from the Layout control.
The second tab called Style is the place where the Skin of the Mobile Sidebar area can be changed. This represents the background of the area and can be either Light ( white background ) or Dark ( black background ).
The Button component
Consists of two fields: Text and Link for the button, and an alignment option.
The HTML component
Consists of an area that allows for HTML code and an alignment option.
The Search Form component
Consists of a placeholder field and an alignment option.
The Search Icon component
Consists of a placeholder field and an alignment option.
The Secondary Menu component ( the old Top Bar menu )
Offers 4 different skin modes to choose from, options for the menu items colors, and an alignment option.
The Secondary Menu is a single level menu. You can't use dropdown menus in this component.
The Cart Icon component
Can be used only if WooCommerce is installed and activated and consists of an alignment option.
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 Copyright component
Consists of an HTML input area and an alignment option.
The Footer Menu component
Consists of four different skin modes to choose from, options for the menu items colors and an alignment option.
The Four Footer components
Each of the four Footer components consists of a widget area, where you can add as many widgets as you wish, and an alignment option.
Colors & Background
- This customizing option gives the opportunity to edit various sets of colors (for menu items, links, texts, and buttons) and choose your own background image for the front page.
Please note that this kind of customizations would not apply for the imported frontpage as it is an Elementor template. If you would like to customize the frontpage's colors, you would need to edit it with Elementor, as seen in the Frontpage setup section above. For example, this is how the blog page would look like if you tweak the colors a little bit:
The typography options are categorized as follows:
- 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.
The typography options include font family, text-transform ( normal, camelcase, lowercase, uppercase ), font weight, font size, line height, and letter spacing.
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.
Neve supports three menus: Primary Menu, Footer Menu, and the Very Top Bar Menu. More Details on How to create and menus.
Adding Button To The Menu:
Just like the icons, you can style each menu item by using various classes. Add the "
Neve supports 4 widget areas: Footer One, Footer Two, Footer Three, Shop Sidebar.
As the name suggests, the Footer One, Footer Two and Footer Three widget areas are situated in the footer of the site and can be filled with the widgets of your choice.
The Shop Sidebar widget area is explicitly available for the Shop page. In it, you can add any widget you would like from the widget list.
You can manage all the widgets from the customizer as well as from WP-admin > Appearance > Widgets.
Do you want to customize specific areas of your website? Add custom CSS to the Appearance -> Customize -> Additional CSS section. If you are new to CSS and WordPress you can also take external freelancer help from websites such as http://upwork.com or http://code able.io.
Need to add a banner at the top of the blog page? Or add a short text just after the header? You can easily do that with Neve's custom hooks.
Neve is built using WordPress Hooks which allows you to easily “hook” your own custom content in the theme’s designated locations.
To make it even easier, we've created the Neve Hooks plugin, which allows you to see all the hook locations and add your content directly in Customizer.
By default Neve doesn't display breadcrumbs. Those can be easily added by using a dedicated plugin. For more information, please check the following documentation.
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.
Gutenberg Blocks and Template Library
Now it's easy to create and customize posts with Neve using specific blocks brought by the Otter plugin. In order to use this feature, you would first need to install and activate the Otter plugin.
While creating a new post with Gutenberg, you can add a new block by selecting Otter from the list and then Section:
Right after choosing the Section block, you will be asked to choose a template. Here there are a lot of options and you can choose the one that will suit you best. Also, you can choose the block's rows or columns ratio according to your preferences:
You can pick from an already existing section integrated with Neve by clicking on the Template Library button and you can further customize them with Gutenberg: