Neve is a super fast, easily customizable, multi-purpose theme. It’s perfect for blogs, small business, 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.
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.
Check this doc for more details about Neve's AMP support.
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 optimized for e-commerce, business, social media, blogs – you name it -comes with dozens of Gutenberg blocks that are all you need to build beautiful pages.
Import Neve Demo content
This feature is the fastest and easiest way to set up your website with Neve.
Once you've installed and activated Neve, a notice will pop-up in your dashboard which will get you started with our. There are multiple demo contents which can be easily imported, among which stands the content from our Neve demo website.
By agreeing to this, Elementor will be automatically installed in order to facilitate the process. This 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. Click on "Preview" button and if everything looks fine, click on "Import".
Also, there is another way of importing demo content if the notice does not show up. Please navigate to Appearance > About Neve > Sites Library and choose the template you would like to import. Once you've chosen your desired "outfit" for Neve, you can Preview the changes or Import them directly.
Neve also detects if your previous theme was Zelle. If you want to switch to Neve, but you really love Zelle's frontpage 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 is described above. After clicking on Get started with Neve, you should be redirected here:
You can find more details about what can Neve do, and how to do it by navigating to Appearance -> Neve Options.
Front Page Setup
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. For this part, we'll be talking about the Neve Original demo from the list of demos mentioned above.
Setting up Subscribe to Newsletter
In order to use this feature, you would need to have a MailChimp or SendinBlue account. The first thing to do is to go to your Front page and Edit it with Elementor:
Once you are in the Elementor editing page, scroll down until you reach to the Subscribe to Newsletter section so you can edit it to fill in the Access Key and the List ID. Retrieve the Access Key (API key) from your personal MailChimp / 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 coresponding field as you can see below:
Editing the appearance for the footer sections
At the bottom of the frontpage there is an HTML widget which contains some CSS code made for disabling the animations for mobile devices / tablets and some fixes for Internet Explorer.
In order to edit the behaviour / appearance of this part of the Frontpage, you will need to go to the Frontpage and press on Edit with Elementor:
Once you're on the Elementor editing page, you'll need to scroll down until you reach to the footer sections as seen below:
By clicking on the white area below the message written in red you'll be able to see the CSS code capable of adding extra features to the footer sections for mobile devices and tablets. As the comments above each snippet describes, each piece of CSS code has its own customizable purpose.
As an example, the following code will disable the animation when the screen width is lower than 768px (tablet or phone):
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, as seen above.
- Gutenberg integration
- Colors & Background
- Header/ Footer builder
- Additional CSS
- Custom hooks
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 already existing sections integrated in Neve by clicking on the Template Library button and you can further customize them with Gutenberg:
- Container width - Option to control the width ( in pixels ) for the containers across the site.
- Container Style - Individual options for each type of page to control the layout of the containers. You can choose from Contained or Full Width.
For example, you can tweak the width of every post's container:
Page specific layout: The individual page layout can also be customized from the sidebar available in every page's settings. Please go WP-admin → All pages → Your_page.
The content width / sidebar can also be controlled from Appearance -> Customize -> Layout -> Content /Sidebar. The width is displayed as a percentage. By default, the content width is set to 100% when there is no sidebar located on the page and to 70% when a sidebar is enabled. You can return to the default values anytime by pressing on the circular arrow located on the right.
There are 2 options:
- The first option is for customizing the Sitewide Content Width and will apply the selected content width in the same way for all compatible items.
2. The second option is to Enable Advanced Options and tweek each item individually according to your personal preferences. Advanced Options include items like: Blog / Archive, Single Post page, Shop Page, Single Product page and Others.
For example, this is how tweaking the sidebar width for the blog page looks like:
Blog / Archive - with this you can control the layout of the sidebar and the content width for the Blog and archive pages.
Single Post - is addressing the width of the content and the sidebar position on a post's page.
Shop / Archive - can be used to control the sidebar layout / content width on the Shop page and the archive pages associated with the Shop page.
Single Product - is made for controlling the sidebar or the content width on a single product's page.
Others - this applies for all the other types of pages which are not listed above.
Also, the content width / sidebar layout can be customized from the metabox which can be found on every page's settings. Please go to WP-admin → All pages → Your_page and you should see something like this:
There is where you can also enable/disable elements from the page, like the entire header area, footer area or the title. The options are the same for posts.
Blog / Archive - is meant for choosing your blog page layout, the excerpt length for your posts, post content order and even customizing the metadata order.
For example, this is how displaying the posts in a 3 column layout looks like:
Single Post - the possibility to reorder / display / hide the elements on single posts/pages.
Having problems with the comments form area not displaying? Make sure you check this doc.
Single Product - 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.
Header / Footer builder
The latest update of Neve adds a new versatile builder for the header and footer areas of your site. With just a few drag-and-drops you can create your perfect header and footer.
The header builder has three rows in which you can easily drag-and-drop and arrange the available components you can find at the bottom of the builder. 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.
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 and the skin mode ( background ) which can be either light or dark.
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.
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 which 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 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 drag-and-drop and arrange the available components you can find at the bottom of the builder. 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 frontpage.
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:
- General - allows customizing the font family.
- Body - allows customizing the font family and the size for all the strings found in the body of each section.
- Headings - allows customizing the font family and the size for every string acting as a header.
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 options for color, padding ( 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.
Undo unwanted changes
Elementor provides a simple way to revert unwanted changes made to your website. If you would like to return to an older version of your Elementor built Homepage, you can simply navigate to History located in the bottom menu bar of Elementor. Choose the version where you would like to return to, and press on the round arrow.
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.