How to Create a Blog Step by Step for Beginners 2018 with Elementor and Monstroid 2

How to Create a Blog Step by Step for Beginners 2018 with Elementor and Monstroid 2


hey what’s up everyone in this tutorial
we’ll have a look at how to create a blog on the WordPress I will go through the
entire process step by step explaining to you how you can do some
things better and faster so the first thing you usually do once you have
installed the WordPress you go out there and search for the ideal WordPress theme
that will suit your idea well the thing is there is a lot of wordpress themes
out there but it’s hard to find one that will be easy to work with will load fast
and will have a lot of customization options right in the package so you
don’t have to download a load of hundreds of other plugins to start
working with these theme but such a theme actually does exist so for my
tutorial I’ll be using monstery – WordPress theme that goes with elemental
editor right away and a bunch of chat add-ons which are the best adders four
elements are out there you’ve got a ton of these plugins and you can do a lot of
stuff with this and with elements are bound together you can find the link to
this theme in the description under this video and download it right away
you can learn more about Monster – WordPress theme and jet adults if you
check other videos on our Channel and if you want to know how to install monster
2 on your WordPress website you can also find the corresponding tutorial on our
channel for now I’ll not be stopping at how to install mods straight to how to
activate the license you can find that all on the tutorials in our channel on
this specific video we will focus on how you can turn this default theme into the
website that you need into a blog in this case so I have just installed
monster it on the clean WordPress installation and you see that it’s
already given me thee hence that I should install WooCommerce because
monster it has inside a couple of plugins that go with WooCommerce and
allow all comers to work together with Elementor so we can set up an online
store use an alum answer which is a great great thing but all different
having a look at it a little later now for this point what I’m going to do
is to go and start off with choosing the template choosing this skin for my
future website how do I do that I go to the left sidebar and I find the
monster it to label in there and then go to Monster – so you see there is a my
license which is activated and I go to skins and here I can see all the skins
that I have inside Monster – right the way once this theme was released it had
about 20 skins but the developers add one more skin every week so you’ll be
getting more and more skins and there really will be no limit in the number of
skins that you’re gonna have in your monster 8 – so you see that you can
review all of those and find this style that applies you the most so I guess
that for the blog there is a number of options I guess this one would be great
for a travel blog like there is a lot of great pictures and you can simply swap
those generic features with your own and the great layout will still be there you
know just get a ready-made design that you simply swap the generic content with
your own and you’re good to go you don’t really need to do anything ok for a blog
I guess it’d also be great but you see there is a gallery so it’s more for the
photographer so I guess we’re gonna stop with this because we’re not about the
travel blog by just a simple blog maybe lifestyle fashion you know you said that
you can actually preview a demo and we’re gonna jump right in the demo
because I want to see how it looks before I actually install it on my
website so here we go a home page where to find you a to the elements this also
can be used for photographer but if you’re a blogger can
also a lot of personal information about you so your readers could read it you
see there is a number of other pages but very good and totally change domain you
right there so don’t care about it just yet all right so I guess looks pretty
nice so let’s go back to the dashboard and let’s simply press install here we
go since I have installed all these plugins with the first my installation
of monster 8 the default skin I’ll skip to demo content and I’ll append demo
content so it will just add the new demo content to all the post pages media
library elements etc it will add the demo content to the existing content on
my website it’s not gonna delete anything so I’m not losing any of my own
content so once you install one skin over your skin that is currently on your
website just choose app and if you don’t want to lose the content that you
already have this is important so now we’re waiting until it is uploaded I’m
gonna skip this through so we don’t have to wait the whole time here we go the
demo content has just finished uploading and we’ve got a number of actions we
could take that the theme is offering to us and the first theme that you could do
is to go and have a look at how your theme looks now but I will start with
the header and with the mania customization so first off I’ll need to
choose what links will be in my menu so I’ll go to appearance menus here it goes
with a jet menu I can create a mega menu but for a blog well this actually could
be a good idea so probably we’re gonna try to do that so menu structure this is
the footer menu and I’ll need the main menu
I want to customize this one alright here it goes so this is the main
menu that we have so there’s the home page about page portfolio since this is
just just a blog website let’s remove the portfolio and contact
I guess that the contact pages that would want to be there maybe someone
will want to get in touch with you let’s click Save menu so now in order to edit
the halyard that we have on our website we need to go to a month straight my
library and here are going to have all the theme parts that are applied through
your website to your current skin that you’re working with alright so for now
we have two themed parts that are active this hallor and this footer and they’re
applied to the entire site and yes you can also set the active conditions like
you can choose separate hazard templates to be applied to the home page and to
the rest of the site which is a pretty interesting feature so I’ll start off
with the Heather and I go and add it with Elementor so here we go now you see
it they had her here you can insert your logo and here will be having the
navigation so they’ll give the breadcrumbs and the menu itself so I’ve
locked on wait for links in there and you see my menu it has chosen right
there so you can insert the PNG and SVG file both in there so so here you can
insert your logo I’m gonna grab the PNG file from the media library and also add
the SVG file well that’s way too big so I’m going to add the pedal on the right
so it keeps the logo in place and move it a little bit to the top I’ll use the
negative margin one more thing that I could change is the color of the lamps
here in the menu and they can go to the sell tab scroll down find the main menu
items hover and go to the text color and put the color in there that I like now
here we go now it is pink and looking really nice also what I’m going to do is
to go to the color picker and here I can set the color scheme for my website that
I’m going to be using on every single page in every single album and and for
now it’s definitely gonna be that pink color and I’m gonna replace this blue
with this if I come up with some more colors to add to my color palette for my
website I’m gonna go back here to the color picker and it can find it right
there if you go to this little hamburger menu click on it and you go to color
picker and it can go there anytime and add your colors that you cannot totally
use later on on your website by the way in order to change the header conditions
as I have mentioned if you want to assign different headers to the homepage
into all the other pages on your site you can go to the settings right here
while you are editing the header template and you’ll find the conditions
tab where you see at the option called general and here you can choose to what
parts of your site you want to apply this header template it can be either
entire site singular page or the archive so if it’s singular you simply choose
the post type and start typing in the name of the post that you want this
header to be visible on or it can also be what’s a page and then I start typing
in home and it has the homepage and now this particular
header is now assigned to the homepage only see that simple all right
let’s leave it as entire site and click update yeah and in case you are having in case
you’re having some inconveniences like this one and if you’re having some
inconveniences your links suddenly turned blue while while you were editing
them they’re black weird so let’s go to alimentar settings and disable default
colors and disable default fonts this will make alimentar inherit the
colors and the fonts from your theme and will not put its own colors and fonts in
your designs so sometimes it can be quite irritating and I go back to the
wordpress dashboard and I’m gonna go and add the footer template with element
sorry here it is and same thing here I want to change this logo to my own logo
I’ll go ahead and replace this logo again but now I’ll be using the white
version of my logo here it goes and same thing here I’ll make it way smaller by
adding the padding on the right and some negative margin at the top here
we go so here you have these social links so I could go ahead and insert the
links to my social media right there for now they’re just some generic links so
you just will go ahead and change there here I change the description here goes
the icon list you could also change it in here it’s sort of a vertical menu and
it can serve as a vertical menu and you just insert the links that you wish to
be there and you change the text but what I could do is add the vertical menu
instead of this icon list so let’s drop it just in there and add main menu here it goes and then I would just go
ahead and change the topography settings all right here we go and also remove the
background or I better would do it the same way it is done in there so uh
normal there will be a little bit more transparent and then hover they will
become white okay now I will delete this one and here we go now there is our
vertical menu I also want to move it a little bit to
the left alright here we go we’re done with the menu then the newsletter here
enter your email the subscribe button this description can also be changed
subscribe to my newsletter and just something like so and here you can edit
the copyright message or you can also just fully remove it and replace it with
something else alright well done with the footer
let’s click update it is saved and I’m going back to my disparate here we go
we’re done with the header and the footer now it is time to go and see what
pages with God and edit them one by one right so now let’s go and have a look at
the pages with God if you have appended the demo content but not replaced your
content you’ll have a lot of pages in here that not belong to this skin so we
can move them to the bin or you know they just simply may be there so now we
have four pages I have already done that so they’re in the bin I have all the
pages that not belong to the skin that and that I’ll not need for my website
alright and now I’ll go through all of these pages one by one and sell them
change their look adjust the way so I like it
okay so here goes the home page should we start with the home page
let this be and let’s click add it with Elementor
alright so here goes our home page you can scroll down and find the widgets
that you want to remove right away it could be the counter don’t really see
the points of the counter mmm portfolio it could be if you’re a also a
photographer in addition to being a blogger services well actually it could place here what
you do as a blogger I don’t think you really need that though but where you’re
going to totally change it later first of all I want to work on this section at
the top so what I will do I will insert at this picture right there and what you want to do is to change the
color and the text let’s change just the name and well blogger traveler journalist I don’t know it can go on and
on and change the text this is actually the animated text widget that goes with
a month straight to inside the jet elements plug-in so here it goes
and now the color so pretty simple we’ve done a couple things but the page is
already changing its overall atmosphere so here doing it any text in there I’ll
just insert some generic text in there so it is there but it doesn’t mean
anything now the button then we could also change the color of the button and what I’ve got here oh well and the
text on the button which could be your just learn more I’m not changing much of
the elements so you can see that it’s really really usable and you don’t have
to do it all the elements in start off again because everything is ready for
you and this is an image what I want to do is to delete it because it doesn’t
really make any sense in here because it’s not a portfolio but it’s not became
sort of empty in there what we could just use a satellite element go to jet
tricks and choose satellite element you can notice that now these that index is
a little bit messed up but we’re gonna totally change that
don’t worry so we simply need to go to the Advanced tab back and change the set
index to zero all right and in here it should be two to be okay so we’ll rotate
it – 90 degrees and try and position it right there where that image was right and yeah let’s change the text I don’t know it could easily be that or
just here it goes and the typography say teenis well that’s looking pretty
interesting and we can go ahead and choose the color for it so here we go
now it is looking a lot more feminine and nice and we haven’t done pretty much
anything yet we have you changed some colors the image and this we added this
text over there yeah so moving on but scroll down and find the next
section that we’ve got in there you have the progress bars which could be a
really interesting feature if you do offer some services or sell your skills
but if you don’t well it doesn’t really make a lot of sense
to place them here so so I’m gonna go ahead and change the image to another
one and change the positioning you you so I would actually delete these
progress bars and this heading will simply be you know just summarizing what
this block owner is writing about alright and what I will do next is
simply go to this box you simply go to this box and grab this widget from there
and drop it into this section we’ll just do three of those alright and for now
I’ll delete this section entirely so what do we got here we have margin that
makes such a big space between them and reduce it to 25 same here and we’ll same
there so now this section is being like a lies below the neighbor in the one
with the image so I’m gonna move this up just a bit so that’s a bit better alright here it goes and a vyas actually
are the image boxes so what I could do is go ahead and choose the images that
you want to insert there you know that could be anything that you want but you
know it could actually do the same but replace the image box with the icon box
so we don’t need images we can simply use icons that will have a really really
wide choice so let’s copy the style to a new
image box and delete all of these all right so I live some generic text in
there and change they head into lifestyle and now let’s change the icon
so let’s just be this one and we can go to the style tab and choose the color of
the icon then let’s change the size just a bit all right
and then I’ll duplicate this icon box twice and next I’ll move on and change
the icons here we go we’re done with this section and it’s time to move on to
the next one portfolio well this well here’s that you have a heading that has
two different colors inside and it is done with the help of this HTML tag and
at the hex code color but there’s also a way to do it with no codes at all so you
don’t need to know anything about how to insert HTML code how to find the hex
color you know and you can do it with the help of the headline widget so let’s
remove like everything we don’t need this could be something like that and
let’s align it to the left and choose the typography cities here we go we didn’t use a single line
of code but it is still looking great is looking just the way it did alright so
and here you see that we have a background image and let’s delete it and
this one is actually the portfolio widget that goes with injured elements
plug-in that is also shipped with the monster it to WordPress theme so what is
special about this widget is that you can add a filter at the top like so and
also add few more button that’s going to hide some of the images to save up some
space on your page like so a pretty great one and I’m not gonna be inserting
the images I’ll just show you how you can do it and you see that every single
object can be opened in the lightbox as well as in the gallery and here’s where
you add the items here is where you add the categories and here is where you
style the filters under the filters tab alright so I’ll just change the color on the hover
and unactive so it matches our color palette bright looking nice and here
could be images of this woman that is running this blog
okay now the counter what are we going to be counting you know if you really
wish you could add the counter to your blog like how many countries you visited
how many pictures she has taken but I don’t really see the point and latest
post latest updates and news and again you see that there is used a line of
HTML code with the hex code color but what am I gonna do is we’re gonna go up
and copy this one and paste it in here delete the hiding that we had there instantly change the text to the one
that you want here we go so here on the showcase all
the latest posts that you’ve got on your website
this is the widget that is called smart post list all right so is going to pull
out all the posts that you add and it can either turn it into a carousel
slider with the help of post widget you know there’s a lot of ways that you can
add posts to your website with monster a to WordPress theme what I want to do
with this particular widget is to go there and edit this button I want to
change the color on how Virts you our pink that were using everywhere in our
theme okay we’re done with the post widget it is pretty great it’s pulling
out all of the posts like automatically don’t have to go and insert them in here
every single time you can also quarry them according to different settings you
see that you can also manually type in the IDS but if you remove these it’s
gonna pull out all the latest posts and news if you say it do it it can also
pull out not only posts or our default post types you can also pull out the
posts from the custom post types from the product pages you know it can query
post by specific category or tags it can include or exclude post by IDs you know
I’ve just got a ton of settings to work with and to make this widget display
your post just the way you want it to and I’m just gonna change the color of
these links to pink and here we go we’re done with the post widget and let’s
scroll down and again of this heading I’ll just copy
this again and paste it delete this one and just replace the text with the text
that I need alright so here it goes some text I’ll just insert some generic text
in there and here adds your number and the link if you wish there is the icon
box and let’s go ahead and change the color alright we’re done here and then
there goes the contact form which is also can be styled right here in
elements or editor with a monstery to theme and you also get a number of
contact forms created with contact form 7 and that is pretty much it for the
home page we’re done in there and let’s update here it is and let’s get back to
the dashboard and jump to the blog page which is not a regular page that you
create by yourself but the page displays all of your posts
in one place here we don’t have the Edit with Elementor button because we’re
going to change the blog layout a different way okay so here we go all at the post that
you’ve got on your website these are just generic posts that went with the
skins I didn’t change them yet I didn’t add my own post and that is why they
look like that okay so now what you can do to change the way
the posts are displayed in there you go to customize and you have to be on the
blog page and I don’t have to leave this page because if you’re in the blog page
you’ll see the blog settings you click on it you go blog and you find the type
of the layout that you want to use overall you have over 50 different
unique blog layouts that you can use inside month story – and they’re also
ten singular post layouts so how do you access all 50 of those so there are five
layouts and every layout is shipped with ten style presets all right I’m gonna go
with creative so it can also be like that and here I can choose the style
that I want to apply and for me this one looks just awesome
so I’m gonna go with this one but I’m going with it nice purple color and
these blue buttons and blue links they don’t really correspond with what I’m
doing with my theme for now so how do I change the general colors of the theme let’s do that while we’re here in the
life customizer we will go to colors if you want to change the background color
of at the website and we go to the color scheme if we want to change the accent
colors right in there so what do we do we click on it and here we will choose
the color that we want here I’ll insert that pink color that I want to be
everywhere on my theme and I just replace this blue in all the instances
that I want right okay this is done a dance apocrypha here
I can change the look of all the headings you see that logo text menu
text breadcrumbs and the buttons you here we go
we have changed the fonts and let’s press publish so all the changes that we
have applies in our life customizer are totally saved all right now what we can
do is to go and change the single blog layout let’s go to this blog post it
doesn’t really matter what blog post you choose so we see breadcrumbs in here so
they are totally in your header all right what you do now is to go to blog
settings and now you see different tabs in here then you had while you were
customizing the blog layout where you display all the posts that you have so
we go to post and you choose whether or not you want a sidebar if you do can put
it on the left side or on the right side what I want to choose the post author
publish date category tags and comments you see here it goes and once you’ve
applied all of the changes you press publish all right now it’s time to close
the live customizer because we’re done changing the blog layouts and it is
looking really great so far and we can go back to oh actually while
we’re still in the customizer what I want to do is to change the general
settings and go to style identity and we can change this side title in here well something like that and who choose
whether it wants to show your tag line or not here goes the logo you can select
the logo over there you see that there are the dimensions the favicon can also
be set right here and can be done in the general side settings so you see go to
change image and this one will let you the feet as favicon just like so and we
could crop it but let’s keep cropping alright and it’s gonna look just like
that on your tab then breadcrumbs social links and page layout alright or as much
done let’s press publish then let’s close it and move on to the next page
pages so we’re done with the home and the blog and there is about me and look
and edited with alum answer all right
here it goes we’ve got a number of sections again and you see that we have
the same one that we did which is actually pretty interesting because
since we already had this same section before we could save that section with
that style that we have applied as a template and then paste it instead of
this one and we can totally do it but just in a second so there is this
counter again and I’m gonna remove it there is this accordion there is looking
pretty interesting okay so there is that image let’s change the image to this one right about me is okay and let’s delete
it and it was what it was this satellite again and we can go to jet tricks you
set alight yes and add the text okay let this just be about and go to styles and you see it’s right there at the top
and you know what I’m thinking we will anyways need the color for this
satellite and we’ll also need the template for this section so what I’m
gonna do now is to save the changes that I have already applied and go back to
the dashboard go to the home page edit with elements art and know what I’m
gonna do real quick is to go to these elements go to jet Trix and grab this
color well I better adjusted just a bit like
so and then I’ll grab this color go to the color picker and add it right here
and click apply this is done we have saved this color damaged scroll down and
find this get in such section and how do I actually save it as a template I need
to right-click on it because now they have this right-click function and I’ll
find self as template option now it takes me to the alimentar library where
I can give a name to my template and this will be contact section alright now
let’s save it and here we go contact section here it is
you have saved this section now update because I have changed the color of that
satellite and go back to the dashboard and continue editing the about me page all right the satellite is still there so what I’m gonna do is to go to styles I’m gonna retreat it again and just move right there where it should be nice and
the next section is well this just telling about who we are and what you do
again so what I guess is right is to insert this image here it goes and we
could position the content of this column at the bottom so we have a lot
more white space there at the top and what we can do there is okay this pain
again we could save that heading as a template to but well let’s just create a
headline one more time just you know you remember this button you know like so and click update and just simply close at this window with
the example of editing and we’re back to our about page you and here we go
this is your accordion so this is the template that we have just created and
you simply go ahead and you edit the tumblers that you have here then there goes my skills which could be
pretty much you know anything you want to tell others about you so in this case
since we’re all about writing and blogging let’s that actually be this
image let’s just copy this headline and paste
it in there here it goes and you could also totally
go ahead and just change these to the topics that you are interested in well
let’s actually do that we don’t really need this column since when we have
three topics for this blog and let this be you fashion let’s it’s a question
fill mean will be here photography and lifestyle okay and then let’s go to the
South sab and it also need to do is to change the color of these text to this
one and then in order not to go to every single one and go to the style tab and
change the color manually let’s simply use the right-click feature in Elementor
and paste this style of the second box alright here it is and the last one we
can now simply delete this section and go to add template and then go to my templates contacts
section blog that’s the one that we have saved and I would use now and here we go
that same contact form that we have styled before and well that is pretty
much it for the about page let’s don’t forget to update and go back to the
dashboard and they on the one which is left is my contacts and we go to edit
with elements are again and here we go there is the contact page I’m gonna change the image one more time
just probably this one will be better yeah this actually looking good and
we’re gonna delete this image and add the satellite and we actually could save
that image with this satellite as a template as well which is a pretty good
idea let’s update yeah you definitely shouldn’t forget
that if you’ll build in a lot of pages and you’re adding the repeating elements
and of course there will be repeating elements because you want your entire
website to be in the same style and all the pages being the same style all right
here it goes heading back to my contacts what I’m gonna do is just insert at this
template and then copy the style and paste the style on my image and once I
do that I see that my satellite has just appeared and then I just go and change
the text and it’s probably better if we make it just a little smaller like a
hundred and then there goes this little thing okay let’s go and change the style
of every single one go to the style change and then you simply copy and paste the
style to all of the other elements here it goes and then the last one is again
the contact section and we delete it and we go and choose one of the templates
that we have saved here it is this one was probably the fastest one okay let’s update and let’s head back to
the dashboard and actually visit our website and let’s go through all of the
pages that we have created and see how they’re working so that was the home page that there
goes about so here it is with the accordion there was the about page then the blog
page here it goes and the contact so I hope this video was helpful and
insightful for you and you learned a little bit more and how you could work
with Mon straight to WordPress theme you can find the link to this theme in the
description under this video and download it right away thank you so much
for watching don’t forget to subscribe to our Channel and click that like
button go ahead and check more videos on Mon story too and other WordPress themes
on our channel hope you enjoyed this video and I’ll see you in another one

2 thoughts on “How to Create a Blog Step by Step for Beginners 2018 with Elementor and Monstroid 2

Leave a Reply

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