Hello everybody and welcome to our channel.
My name is Robert and in this video, I will
show you everything you need to know about
our Neve WordPress theme, and how to use the
latest version step by step.
First, I will install the theme and show you
how to import a ready-made website from our
Starter Sites library.
After that, I will edit some pages with Elementor
to show you how easy it is to make Neve look
as you want.
The final step would be to Customize things
like the Layout of my website, add new things
to my header and footer, and slightly adjust
the style to match the overall design.
By the end of this video, you will understand
what is the difference between Neve Pro and
the free version which you can easily install
on your dashboard by searching Neve over here.
The theme is also listed as one of the most
Popular WordPress themes so you can find it
in this tab.
Just click Install and activate, then if I
take a look at my homepage right now, the
only thing I can see there is my old content
or just the regular Hello World post which
comes as default with every new installation
of WordPress.
You can start using the power of Neve as it
is right now and just play around with the
options in the customizer which I will walk
you through step by step a little bit later,
so keep watching.
For a new website, I would recommend using
a free demo from our Starter Sites library
under Neve Options, which will give you access
to complete websites you can import with just
a couple of clicks.
We've added a search form lately to make it
easier for you to find what you need based
on specific keywords, like doctor, lawyer,
travel, and so on.
These Starter Sites, as the name suggests,
come with everything you need to get started.
Just pick your preferred page-builder or use
the default WordPress editor in this drop-down
before picking a demo, click preview and then
import the full website.
I would like to use Elementor in this video,
so I'll select it in this drop-down and pick
the Doctors 2 demo, which is one of our latest
creations.
Let me click preview to show you everything
you get once this demo is imported.
This is the homepage with six sections where
everything is customizable and I'll show you
how to add even more sections and elements.
Pages available through the header menu will
be created for you and you just need to edit
the content.
The Book Appointment button in your header
menu is a unique feature of the Header builder
of Neve which I'll show you how to use through
the customizer.
Contact would be an important section on the
homepage too and you can easily copy the section
from your contact page and paste it as the
last section on your homepage, but I will
show you how to do that once everything will
be imported.
So, let's go ahead and click import for this
demo.
If you keep these buttons on, it will put
together images, text, and everything you
saw in the preview.
Some of the images will not be imported, though,
but don't worry, you will be able to download
them from our collection, which can be easily
accessed through this link.
The process will import and activate two important
plugins: Elementor, which is the page-builder
used for editing existing pages and to create
new content, and Orbit Fox by ThemeIsle, which
is a multipurpose plugin filled with lots
of useful features like Social Sharing, Menu
Icons, Template Library and many more.
So, just click import and wait until the process
will finish Installing Plugins, Importing
Content, Customizer Settings, and Widgets.
If finished successfully, these icons should
turn green and now you can go back to the
Sites Library, View Website, or simply Start
Adding Content.
If you don't like this demo and want to replace
it with another one in our Sites Library,
you can reset WordPress and start over.
Be aware to use the reset option only on websites
that you don't worry about losing content,
like the one I use in this video which is
made for testing purposes.
To see how you can reset WordPress to its
initial state check out the link to the video
in the description box below.
By the way, if you want to learn a specific
thing about Neve, you can use the timestamps
I put in the description box and jump straight
to the desired step anytime.
Let's check out the look of my website compared
to the way it was before importing this demo.
If I reload the page in this tab, it should
show up the homepage of the Doctor 2 demo.
So, here we are.
This is the first thing people will see on
my website and if I want to change things
like the image in the background of my first
section, the background overlay, or anything
else on this page, I need to click Edit with
Elementor above.
Don't click Edit Page because it will launch
the Block Editor of WordPress and this demo
is built with Elementor so you won't see anything
in that window.
If you accidentally click Edit Page don't
worry, just click this blue Edit with Elementor
button and you'll be back on track.
Ok.
So, If you want to change the backgoud image
of the first section, you should click on
the six dots over here that stands for Edit
Section.
Go to the Style Tab and change this image
in the Background Overlay settings.
You can pick another image from your media
library or upload a new one.
Let me pick this one and click Insert Media.
As you can see, the image in the background
is different now and you can play around with
the settings, but let me delete this image
first so you can have a clear look at what
is happening next.
The background can be Classic with a simple
color, or you can use a Gradient instead,
Video or Slideshow.
The nice thing about the Slideshow feature
is this Ken Burns Effect you can turn on after
selecting some images.
Now you can add a black or blue overlay below
to make the text readable.
You can add shadow to your text, change the
color and typography over here and drag over
any available widget of Elementor.
You are free to edit the existing content
or create new sections populated with new
things like rating, counter, progress bar,
and so on.
Talking about new sections, I would like to
open my contact page in a new window, which
is also made with Elementor, copy the entire
Get In Touch section and paste it as a new
section below Patients Testimonial.
Cool.
I think you understand how versatile Elementor
is and now you know how to use its power to
create something unique for your business.
The About page, Services, and Service Details
are entirely created with Elementor, only
the blog page belongs to WordPress and contains
articles that you will edit using the block
editor.
But if you want to change the Layout of this
page, the Typography, some Colors, the Header,
and Footer of your website and other things
like Buttons, Menus, and Widgets?
Well, to do that, you need to access the Customizer.
The settings you change here will not affect
content on the pages created with Elementor.
Will only change things on pages and posts
created with the Block Editor of WordPress
so remember that if you want to change the
color or typography for these elements, you
should open that page in a new tab, click
Edit with Elementor and go to the style settings
of that element.
Let me close this page and go back to the
Customizer.
As a Pro user of Neve, you get access to features
like Header Booster, Blog Booster, and many
other things that will enhance the user experience
for you and your visitors.
But I will compare some features with what
you get as a free user in the following steps,
so keep watching.
Right here, you get access to four submenus
under Layout settings; Container settings,
Content and Sidebar, Blog and Archive as well
as settings for the Single Post layout.
Let me go to the blog page and open the first
article to show you what's happening if you
change things around in the Single Post menu.
As you can see, the order of your Elements
is Title and Meta followed by the Thumbnail,
Content, and so on, but if you want to change
that, just click, hold you click and drag
the title below the thumbnail, for example.
To enable Post Navigation, click on the eye
over here and if you want to disable things
like Tags, for example, simply turn them off
like so.
Let me go back to the Blog page and show you
what's happening if you play with the settings
available under the Blog and Archive menu.
The first thing you will see here is the Blog
Layout which comes with three options.
One of the best looks is the Masonry style
which can display up to four columns as the
Grid Layout.
But this Hello World post without a featured
image makes the blog page look ugly so let
me go back to my dashboard, go to Posts, All
Posts and click trash then delete it permanently.
Fast forward, I've added three more articles
to give you a better look over the blog page
when there is more content.
So, let me go back to Customize, Layout, Blog,
and Archive settings, and navigate to the
blog page, which looks much better now.
This is the Excerpt and you can adjust its
Lenght over here, then you can switch the
Post Pagination from Number to Infinite Scroll.
Change the Post Content Order and turn off
specific items.
For a photography blog, you would turn off
everything excepting the thumbnail which will
make visible only the featured image of your
blog posts.
If you want your thumbnails to pop out a little
bit, add some shadow and turn on the Show
Author Avatar if you want to display your
Avatar near the Title and Meta info.
Turning back on the visibility of your Title
and Meta, you get access to even more options
for changing the Meta Order and you can turn
on things like Category and Date, which are
turned off by default.
Don't worry about the character size in your
Titles, for now, I will show you how to adjust
them in the Typography tab, so keep watching.
One more thing before moving on is to show
you again that you can change the order of
your metadata as well as your post's content.
In the Content and Sidebar Layout options
you can use sitewide settings or turn on Advanced
Options which will give you control over the
position of your sidebar on Blog / Archive,
Single Post, and Other separately.
It means that if I go to my blog page, for
example, and switch to the left sidebar layout,
it will show up the content in my sidebar
on the left, like so.
And I can adjust the width of my content with
this cursor.
Same things for the Single Post layout settings
that can go to the right of my page but it
will contain the same widgets I'll show you
how to customize under the widgets menu.
The Other sidebar layout settings stand for
pages created with the block editor of WordPress.
One more thing left here is the Container
settings which you can use to change the width
of your container for Desktop, Tablet, and
Mobile view.
And then you can set up Contained of Full
Width for the Default Container Style, Blog,
and Archive as well as for Single Post.
I do prefer the Contained Style which can
be slightly adjusted above, and you can see
how it works on my blog page.
Cool.
Now click Publish and go to the Header builder
of Neve
This is probably one of the best WordPress
header builders I've seen so far which works
without installing additional plugins.
You can create up to three different sections
that will show up in the header area of your
website on each post and page.
Pro users of Neve get access to even more
features and components when they turn on
the Header Booster module, and one of the
best Pro features, I guess, is the Conditional
header builder which means that you can create
and display separate headers on you Shop and
Blog page, for example.
To edit my menu, I need to click on this pencil
icon, go to Primary Menu and click the Edit
Menu link over here.
Remove unnecessary or duplicated elements
like home, services, about and so on, and
click publish.
You can add new items as well from your Pages,
as Custom links or from your Posts, Categories,
and Tags.
For a full WordPress Menu Tutorial, follow
the recommended video above or check out the
link in the description box.
Let's go back to the Header Builder.
The Book Appointment button is this one over
here and you can edit the link, its text,
and also the Layout and Style of this button
over here.
You can remove this button and create a new
one like so but remember that you can use
it only once.
If you want to use more buttons in your header
area, get Neve Pro and turn on the Header
Booster module which will give you access
to more features like Sticky and Transparent
Header.
The background and style settings of my Header
Main section appears in the left sidebar once
I click on this gear icon over here.
Then I can change the Row Height, Text Color,
and Background which could be Color or Image.
If I switch to image, I can use a Featured
Image, if set, upload a custom image and apply
Overlay Color to match the section below.
Let me show you an example of the header with
the Featured Image turned on.
If I go to a blog post and turn on the Use
Featured Image option, that image will show
up in my header, and if I go to another blog
post, the header image is different.
Cool, right?
What would you do next is to go to your Primary
Menu and change the color of your items to
something more visible?
And you can adjust the Typography settings
as well, which could be different for tablets
and mobile devices.
The Header Bottom section can contain a Search
Form and a Button, for example, or you can
use a custom HTML element which can be anything
you want.
As a Pro user, you get access to components
like Social Icons, Contact, Language Switcher,
Multiple Buttons HTML, and more.
In the end, your header area could look like
this but you are free to use your imagination
to create something even better.
And you can do that separately for Mobile
and Desktop devices.
To change the content of any component, click
on that component over here, or use the pencil
icon which shows up at the bottom left of
each component in the preview, when hovering
over.
A nice feature in the Logo and Site Identity
component settings is that you can change
the maximum width of your logo separately
for Desktop, Tablet, and Mobile.
To set up a site icon, you need to upload
a custom image over here which will show up
in browser tabs, bookmark bars, and within
the WordPress mobile apps.
Every component of your Header Builder is
highly customizable by using the General,
Layout, and Style settings.
Let's go to the Footer Builder of Neve which
contains this Copyright text as default.
Above this, you can use components like Footer
Menu, Footer One, Two, Three, and Four.
You are free to use any WordPress widget available
over here in these four components, like a
calendar, an image, gallery, video as well
as simple text to display more things about
your business in the footer area which will
show up on every page and post.
And you can change the position of these components
just by dragging them over the place you want
to put them.
To change the background color of the Footer
Bottom section, click on this gear icon and
go to the Style tab.
The color right now is a dark shade of blue
but you can make it green, red, or whatever
your choice might be.
Alternatively, you can use a custom Image
with Overlay Color and if you turn on the
Use Featured Image option, it will show up
the Featured Image of the Post or Page you
navigate on.
Cool.
Let's see what we can do in the Colors and
Background section of the Customizer.
As a free user, you can change five things
here, Link Color, Link Color on Hover, Text
Color, Background, and you can set up an image
as your Backgoud if you want that.
I the Typography settings, General, I can
switch my Font Family from Open Sans to something
like Roboto, which belongs to the Google Fonts
collection.
I can Transform my text in this drop-down,
change the Weight, Size, Line height as well
as the Letter Spacing over here.
All these settings are available separately
for Desktop, Tablet, and Mobile devices, which
is perfect for mobile-friendly websites.
If you want to change the size of your titles
that show up on the blog page, you must go
to Headings and change the Font Size of H2,
like so.
The text size below belongs to the Font Size
settings under General.
I forgot to mention that as a Pro user of
Neve you will be able to edit the Read More
text and make it a button, with a custom design.
How cool is that?
Talking about buttons, here is the place where
you can adjust the look of your buttons.
Buttons created with Elementor will not be
affected, but all of your WordPress buttons
will get the new color set here, as you can
see on the button in your menu.
Switch the Style from Filled to Outline, change
Normal as well as the color on Hover, Border
Radius, Width, and Padding for each Style
separately.
The same settings are available for the Secondary
button too, which is the button that shows
up as Post Comment below your posts, Read
More, and so on.
Under Menus, you can create, manage, and delete
everything in your WordPress navigation system.
To create a new menu, click here and if you
just want to edit an existing menu, select
that menu above.
The location of an existing menu can be changed
under View All Locations which means that
you can create a footer menu, for example,
and select it in this drop-down to display
it there, if the Footer Menu component is
added in the Footer Builder.
To use icons near your menu elements, exit
the customizer, go to Orbot Fox settings,
and turn on the Menu Icons module over here.
Then go to Appearance, Menus, and use this
plus button to insert custom icons near each
element, like so.
After saving your menu, it should look something
like this on the front end.
Widgets are pieces of content that show up
on your blog page and near each article if
turned on under Layout settings, where you
need to go to Content and Sidebar settings.
Remove existing widgets like so, or add any
available Widgets over here.
As a default, your Homepage Settings are set
to a Static Page where Home is the Homepage
and Blog would be your Posts Page.
Sure, you can change them with custom pages,
or set it up as your latest posts if your
website is just a blog.
In Additional CSS you can adjust things that
are not available through the Customizer of
Neve if you know how to use custom CSS.
But be careful with this because it can break
down your entire site if not used correctly.
That's it
If you have questions, please leave a comment
below and I will answer each of you guys.
For more help, check out the documentation
of Neve or contact our support team, link
in the description box.
Keep up the good work and stay tuned for new
videos.
Thanks.
