In this tutorial, we combine Elementor and Toolset to create a dynamic movie review website on WordPress.
You’ll learn how to:
* Use dynamic content
* Create custom post types with Toolset
* Create custom fields with Toolset
* Build an archive template with Elementor
* Build a single template with Elementor
hi everyone this is Paul from bring up
that call and I’m back with another
element or dynamic filled tutorial this
time we’re going to take a look at tool
set which is a really cool plugin that
helps us with creating custom post types
custom fields custom taxonomies and a
bunch of other really nice features so
let’s first start by showing you what
we’re going to create you in this
tutorial this is a movie blog website
with a nice full width hero section here
at the top with a search widget inside
of it a lot of you asked in the comments
of the last video how to create a custom
search and custom filters for your
custom post types and actually toolset
has this functionality inside of their
tool set views plug-in sadly for this
tutorial I won’t be showing how to
create that because it gets a bit
technical and will make the video too
long maybe we’ll have a separate video
in the future explaining how to do it
however if you needed functionality now
and we decided to go ahead with tools
that you can take a look at the
documentation their website for to see
reviews on how to create them they do a
great job explaining it that being said
let’s scroll down the page where we can
see a list of movies that come
dynamically from the back end and if I
were to click on one of them like for
example this one the fighter we can see
the single page template for that movie
load up here at the top we have the
title followed by the trailer and on the
right side we have a nice social sharing
widget under the trailer we have the
plot of the movie as well as the IMDB
rating followed by a code about the
movie and then some content here at the
bottom and lastly we have the image of
the movie and some general information
like the genre director writers and a
few more on the right side we can see
our latest movies and if I were to click
on one of them for example Captain
America we have the exact same design so
all we have to do if we want to add a
new movie is just feeling the
information on the back end and the
movie is going to follow the exact same
template that being said let’s jump into
WordPress and create that okay so we now
inside of WordPress and I already went
ahead and set up something so we don’t
waste any time with them I’ve already
created the header and the footer we can
see them here on the front page and the
page is empty right now it’s only the
header and the footer with no content
here yet I’ve also went ahead and
install the required plugins let me
quickly jump back into the dashboard
and go under plugins installed plugins
we will be using three plugins element
or element or pro and toolset types
that’s all we need right now so let’s
jump into building a custom post type
you can see on the Left sidebar under
Elementor that we have a new entry
called toolset I will hover over that
and click on post types on this page we
can see the pre-built post types of
WordPress but we don’t need to worry
about them so I’m going to click on add
new and we’re now inside of the add new
post type page here we need to provide a
bit of information to create our post
type the first thing being the plural
name of this post time so I’m going to
call that tMI’s then we need to provide
a singular name which is going to be
Navy and then I’ll press tab to go to
the slug so it automatically completes
it with the lowercase version of the
singular name that’s perfect for now I
also want to change the icon so I will
click on change icon here and I will
search for tickets and I will choose
this one tickets out perfect now we
don’t need to worry about the labels or
about the taxonomies right now all I
want to do is come here to the sections
to display one editing movie and I want
to check on the featured image because
we want to be able to provide an image
for our custom post type I also don’t
have to worry about the options so I
will go here at the top and for the add
in mini position after I will choose
comments because I won’t discuss the
post type to be displayed after the
comments here in the sidebar and I will
click on save post type and we now have
a new entry called movies here under
comments so I will hover over that and
click on all items and you can see this
is empty right now so we can go ahead
and create our custom fields I will
hover over to set again and this time
click on custom fields here we can
create our new field group so I’ll click
on the add new group button and I’ll
give a name to this group I will call it
movie yes perfect and now I will click
Save field group because I want to be
able to specify where this appears on so
I’ll now click back on settings to
expand this and here it’s by default
this group of fields will appear while
editing on content we don’t want that so
I’m to here and edit and I will check
here our newly created custom post type
and then I will click on apply’ perfect
so now this movie fields group will only
show up on our custom post side so we
can now go ahead and create our first
field I will click on the add field
button the first field that we are going
to create is the trailer link field so I
will choose the URL type of field if you
look into the top right corner of the
screen right now you will be able to see
how this field is going to look like on
the front end we will link this field
together with a video widget to
dynamically display the movies trailer
into the template that being said I will
name this field trailer link and he
tapped automatically filling the slug
just like this you can see the slug was
filled in automatically by pressing tab
we don’t need to worry about any other
setting so I will close this up and
create our second film I will click
again on the add new field button and
the second field is for the plot of the
movie which is a small paragraph so I
will choose the multi-line type of field
here once again in the top right corner
of the screen you can see the result on
the front end this field will be
displayed under our trailer describing
the action of the movie I will therefore
name this field plot and once again
press tab to automatically fill in the
slug we don’t need to worry about any of
these settings either so I will close
this up and create our third field the
third field that we will create is the
IMDB rating field so I need to select a
number type of field this is going to be
displayed under the trailer on the same
line as the plot showing our visitors
what rating this movie has on IMDB we
will hook this up with an icon box field
allowing us to have a nice visual way to
describe our type of rating disease so I
will name this field rating that being
said I’ll quickly create the other
fields on phosphorus so we don’t waste a
ton of time with them okay so now we’ve
created all the custom fields that we
need in case you’re wondering this one
with a little aim from this old single
line custom field that being said I can
now go ahead and click on save field
group perfect and we can see that the
post field group was saved I only want
to do one more thing before proceeding
with filling in the information our
custom post type and that
creating a custom taxonomy so here on
tool set I will choose taxonomies and
now on this page we can see the built in
WordPress taxonomies we don’t need to
worry about them so I’ll click here on
add new and now we’re on a screen pretty
similar to the one that we’ve used to
create our post time so I will now name
our custom taxonomy I will call it movie
genres for the singular I will do movie
genre and for the slug the default works
and I also want here to change the
taxonomy type from her article like
categories to flat like tags you will
see why when we start using them and
also I want to associate movies with
this taxonomy so it only works with this
one and I will click on save taxonomy
now if I hover over movies here you can
see we have our movie genres taxonomy
and if I were to click on it it’s a very
similar screen like the one used to
create categories and tags we’ve now
completed our custom post type setup so
we can go ahead and fill in the
information we’ll start off by creating
our movie genres those are going to be
very helpful later on because it will
allow us to filter movies based on genre
so I’ll start with the first one which
is going to be action I will type here
under named action and then I will just
click on add a movie genre because the
slug is going to be taken care of
automatically by WordPress now I have a
few more to add so I will add them on
fast-forward so you can see that we now
have here a whole host of movie genres
that will allow us to filter movies
based on them
that being said I will now go ahead and
create our first movie so I’ll go under
add new here so we are now inside of the
add new movie screen and as you can see
in addition to the title and content
inputs that come with the default
WordPress post we have all the other
fields that we’ve created earlier like
the trailer link plot
rating and all the others so I’ll start
by filling in the title which is going
to be the fighter and 2010 then I’ll
copy paste some of the content so we’ll
start with the actual content of the
page which is in this case Laura hips
then I’ve placed in the trailer link the
plot I will provide the rating which is
seven point eight on IMDB and I’ll
provide a code about the movie the
country is USA the Raptor writers stars
what a words this movie won and the
duration which is one hour 56 minutes
perfect so we fill in the information
here and what we want to do is come up
here and fill in the movie genres and
because we’ve set them as tags we need
to search for them so I know this one is
a biography so research for biography
and then click on it and click on add
and you can see we have it here now and
this one is also drama and sport so we
have our genres here the last thing that
we need to do is set the featured image
so I’ll take you on set featured image
and I will choose the movie poster which
is this one and click a set featured
image perfect so now our movie is done
and I can click on publish and if I go
here to all items we have our entry to
fighter here so I can start making a few
more and I’ll be back in just a second
alright so I’ve added a few more movies
so we have what to work with now we can
go ahead and create our first template
which is going to be the archive so we
can display our movies in the nice grid
that I showed you at the beginning so I
will not hover over element or my
template and you can see here we have
the header and the footer that I’ve
created earlier now we can go ahead and
click on add new and here it asks us
what type of time that you want to work
on so I’m gonna click on this and select
an archive and I will name this movie
archive so it’s easier to find and I
will click on create template once the
site of Alimentum you can see that the
library panel for the blocks was
automatically opened but I don’t want to
use it so I will close it up so there
are two things that I want to do before
creating the template the first one is
setting the right preview for our
archive so and click here on the little
eyeball icon
and I will click on settings and you can
see the right now he says preview
dynamic content as recent post we don’t
want that so I will click on this and
choose movie archive and click apply and
preview perfect now the second thing
that I want to do is set some colors in
our color picker so it’s easier to
choose them so I’ll click here on the
hamburger icon and I will choose color
picker and I want to change this screen
here with a yellow color that I need
which is half 81-68 this one and I also
want to change this green here to 0 0 3
C 54 which is a nice blue color perfect
and then we’ll click on apply now we can
go ahead and start creating our first
section soil keep on the plus sign here
and choose a one-column section going to
the section settings I want this to be
boxed and to have a 600 pixel width I
also want to set a minimum height for it
and that’s going to be 700 pixels
all right here 700 great now I will go
to the style tab and choose background
type as classic and choose our image
which is this nice full width image pick
on insert media I will also change the
position to Center Center and the size
to cover so it shows a bit more out of
it perfect and I also want to set an
overlay for the image to darken it a
little bit on it 1 background overlay I
will do classic and for the color I’m
gonna do black at around 50% around here
and I will leave the opacity here at 50%
as well so this is not our first section
and inside of it I want to add a search
widget okay so I’m gonna search for it
and this this one search form the skin
is going to be classic placeholder
search the button type is going to be
icon and we will leave this magnifying
glass here for the size I’m gonna
increase it a little bit and make it 60
now under style we want the text color
to be ba ba
a nice gray color the background color
white and the border color this darker
gray which is 7 8 7 8 7 8 and the border
size has to be 1 pixels perfect now for
the button the text color is going to be
again that several a 7 a 7 a and the
background color the yellow color we set
earlier and this is our search now I
could go ahead and add the second
section so I’ll take again on the plus
side and choose a one column section to
this section we will leave everything
here at by default I will just go under
the style and make sure the background
color is white and under advanced for
the padding
I will unlink the values because I just
want to add padding to the top at the
bottom and I will go to the percentage
and I will do top 3% and bottom 3% break
now we can add our title for this soil
search for our heading widget and drag
it inside it will say in movies the HTML
tag is going to be an h2 and the color
is going to be that blue color the dark
do and for typography the defaults are
fine I just want the size to be 35
pixels I only have one more widget to
add which is this one the archived posts
and this returns all the post in this
current archive so I will drag it in and
you can see we have our movies here but
they look a bit odd right now so we’re
going to work a bit with them the first
thing that I’m going to do is come here
and we will turn off that excerpt as
well as the read more and I will get rid
of the date and comments we just want to
show the image and the title of the
movie now I want to change this from 3
columns to 4 columns the image ratio is
going to be 1.5 and the width is going
to be 100%
I will change here the image size to
large because we want them to be nice
and crisp how good they look right now
for a fact now I will go under style and
for the columns gap
I’m gonna do 55 rows gap is going to be
make it 16 so we bring the title a
little bit closer and now in the content
what I have to do is make the title
color that dark blue that we had and
also come back here to the layout and
choose the alignment as Center so our
title is centered with our images and
this is pretty much done right now so I
can click on publish and we have the
displayed condition screen and click on
add condition and by default it wants to
include this template on archives but we
don’t want that we just want to use it
for our movie so I will take here and
choose movies archive here and then I
will click on publish now the document
is live so I can click on the hamburger
icon and go exit to dashboard I will go
to visit the website and if I click here
on movies you can see our template is
live with all the movies coming from the
back end right now if I were to click on
one of those this is what’s gonna load
up because this is the default theme
template so we’re gonna go and create a
single template to display our movie
with all the information that we set up
in the custom fields now I will go back
to the dashboard and I will hover again
under Elementor my templates I will take
on add new and this time we’re gonna
select a single instead of an archive
and now it asks us what type of post we
want to use so I’ll click here and I
will choose movie and I will name this
movie single now people create template
okay so we’re now inside of the single
builder and once again the library was
automatically opened up for us but we
don’t need that so I’m gonna close it up
and I’ll add here a new section and
click on the plus sign and choose a
one-column section I want this one to be
boxed in with 1280 width I also want to
set a minimum height here to 680 pixels
and make sure that it color
is in middle perfect now I will go under
style and for the background type I will
choose gradient the first color is going
to be zero five one seven twenty one and
the second color is going to be the same
one just a bit more transparent here
it’s a very sudden gradient that we use
here location 0 100 type linear and
angle 180 perfect now I will go to the
shape divider and for the bottom I will
choose the tilt one like this ok so
that’s all that we need for this section
because the second section that we’re
going to create we are going to pull it
off this negative margin to have it here
on top of this one so I will create a
new section this one is going to be a
two column section again boxed with 1280
with the first column I’m going to
select and the column width is going to
be 86 percent and the second one is
going to be 14 but it was done
automatically now I want to go under the
section settings under advanced and for
marching I will do a march on top of
minus 600 pixels and a margin bottom of
but it’s going to look perfect in a few
seconds so I’ll start by adding a new
widget is going to be a post title
widget I will add it here and you can
see it takes the title that we’ve set in
the back end which is the fighter now
I’ll go under style the text color I’ll
make it white and for typography we want
the phone to be Tahoma 40 pixels line
height 1.3 and we also want to go under
advanced for this and add a padding
bottom of 25 pixels nice now the next
thing that we’re gonna do is add a video
widget this one and it under this for
the source we’re going to leave YouTube
and here in the URL we’ll click on this
little dynamic link scroll all the way
down and we can see we have to sit here
and with
to that field to set date field and tool
set URL field so I would click on the to
set URL field and then if I click here
again it’s going to ask for the key and
our key is the only one that we have
because it’s we have only one to set URL
field and that’s the trader link so I’m
gonna click on that and you can see our
link is now displayed here ooh and it
looks really nice okay under this I’m
going to add a columns widget which is
this one here and I want to go under
advanced and do a 50 pixels margin top
to make a bit more space and also for
the columns I want the first one to be
here and the second one is automatically
new heading and this time I’m gonna
click on the dynamic link and scroll all
the way down and choose to set field
from here and now I will think again I
need to choose our key and for the key
we want to show the plot here you can
see we have the plot it looks really odd
right now but we’re gonna fix it in a
second so I will now go under style for
the color I’m gonna input 5 4 5 9 5 F
which is a dark gray color then for the
typography I will leave the family to
default size 17 pixels weight 300 I want
to have under style here italic perfect
line height 1.6 and letter spacing 0.5
and now it looks really nice on the
right side I will add an icon pops
widget we want the icon to be IMDB icon
which is this one the view is going to
be default it will have no description
and for the title I will click here on
the dynamic link go all the way down to
that field and I will choose our writing
field good now I want to make this to go
to the right side like this and play a
bit with the styling of it so I’ll go
under style and for the primary color I
will do our dark blue color spacing is
going to be 19 the size is going to be
content title I will go with the same
color and on the typography I will do a
line in front of 1.8 now it’s pretty
much centered with the autumn now I want
to add a shirts button widget so I’m
going to search for it an editing side
of the page
we only want Facebook Google+ and
Twitter so I will delete the Linkedin
one and I want to change some settings
here so the view is going to be only the
icon the skin is okay to be gradient
shape is going to be a circle columns
one like this not under style column gap
a row gap is okay to be 10 so I will go
under advanced and I will do a 100 pixel
margin top here now I will go under the
color settings here and under advanced I
will do a marching left of 100 pixels so
our items are nice and small here okay
we can continue on with the next section
I’ll click on the plus sign to add a new
section and I will choose a single
column section again I’ll make the
content with 1280 pixels and inside of
this I will drag divided your widget now
I’ll choose the style to be dotted one
pixel weight color black with 100% and a
gap of 15 perfect now I will move on
with the next sections well click again
on the plus sign and this time I’ll
choose a two column section it doesn’t
I’ll make it 1280 in width I will go
under advanced and do a padding top of
first column to be 70 percent one so we
have 70% and 30% on the second
right now in the last one I will add a
heading field and I will click on the
dynamic link here choose to set field
and then for the key I will choose the
code nice now I want to style it a
little bit so on the other style for the
text color I will choose the dark blue
color and for typography we want the
phone to be Aleppo 66 pixels a weight of
advanced and for margin I will do a 30
pixels bottom margin nice now under this
I will drag a new widget which is the
post content which is this one from here
and you can see it brings back the
content that we’ve added what we’ve
created this movie so we don’t need to
worry about any of the settings this the
difference look perfectly fine all right
so under the content I want to once
again add a columns widget which is this
one here
but before continuing I just want to
make a short point about them if you’re
using elemental version 2.2 or later
this widget was renamed from columns to
inner section so if you’re using that
version or later make sure that you’re
looking for inner section instead of
this one now I will drag that in and the
first thing that I want to do is select
the first column here and choose a
column width of 25% leaving the second
column at 75% and I will choose here the
column gap to be no gap then I will move
over to the Advanced tab and here I will
do a 40 pixel margin top and bottles all
right here for it and also I want to do
a 4% padding all around so here I will
change it to percent and then loop 4 so
we have a 4% binding all around our
section next I will move over to the
style tab and I will choose a classic
background type and I will input a color
which is ef ef ef
which is this light gray color here and
also I will go here down to the border
choose a border type of solid I’ll link
the values because we only want to have
the border to the bottom of this section
and for the bottom I will do two pixels
and then I’ll change the color of this
to our dark blue color now I want to add
to the left column a featured image
widget so I’ll go over to the widgets
panel and I will drag in the featured
image widget here very nice now to the
right column I want to add a heading
widget and I want to change the styling
a little bit so I will go on your style
here I’ll make the text color our dark
blue color and for typography I will
choose the formula to I will make it 19
pixels I will choose a weight of 700 and
I will do a line height of 1.4 very good
now I want to select this column again
the right one and change the content
position from default to needle and also
go under the Advanced tab and set a 30
pixels padding to the left like this now
I need 6 more copies of this heading
widget because I need 7 in total so what
I can do is either right click here and
choose duplicate to double key this
widget or I can just press ctrl or
command D to duplicate and now we have
seven copies of this so we can start
working with them I will select the
first one and here you can see our
little dynamic link so I will click on
this scroll all the way down and choose
to set field now nothing shows up
because we haven’t chosen our key yet so
I will click on the to set field here
and for our key we will choose country
because that’s the first thing that we
want to display also I will go here
under advanced and in the before in boot
I will type country and column at a
space so now we have a label for our
input here now I will skip the second
one because that’s a bit different I
will create the third one here so I will
click on
click again on the dynamic link scroll
all the way down and just loose it field
and I will choose the key of director
and you can see our director shows up so
I can go under advanced and for the
before tag I will do director and color
and a space now I will do the last four
on fast word and then we will return to
the second one perfect so now we have
all of our fields in place except for
the second one so I will click on that
and I will once again just a dynamic
link but this time instead of choosing
the 2sat field I will actually choose
this one here post terms because this
will return our terms for a post and
right now it’s empty because we haven’t
chosen our taxonomy of choice so I will
click here on post terms and then for
the taxonomy I will choose movies on res
and now we can see our genres for this
movie displayed here I will also change
here the separator to space pipe space
so it looks like this now and under
advanced in the before input I will try
to January ok so our little section is
done so we can continue on with creating
our sidebar first thing that I want to
do is scroll up and choose our big
column here the left one click on
advanced and I will choose a padding
right of 40 pixels I will also choose
the right column here and go under
advanced as well and this time I will
add a 90 pixels padding to the left now
I can go ahead and drag in a heading
widget I will write in here latest
movies
then I will go to the style tab I will
choose our dark blue color for the tax
color then I’ll go under typography for
the font family I will just a coma I
will also make this 40 pixels in size
and then I will go under advanced and
add a 10 pixel padding to the bottom now
I can drag in one more widget which is
the post widget so I will search for it
and is this one post so I will drag it
inside of this column but you see that
by default it tries to return from our
default WordPress posts but we don’t
want that so here on the left side I
will scroll all the way down and choose
query for the source I will change this
to movies I will live here ordered by
descending and I will exclude the
current post by clicking here and
checking on avoid duplicates because we
don’t want any duplicate image here then
I can return to the Layout tab and style
this a little bit so the skin is going
to stay on classic for the columns we
want to show only one we want to show
three posts per page not six the image
position can stay to the top we want to
change the image size to medium large so
it’s nice and crisp also the image ratio
should be 1.52
then we will leave the title on we will
disable the excerpt as well as the date
and comments here and we will also
disable our read more button so we will
only show the image and the title now I
will go to the style tab go to content
here and for the title color I will
choose again our dark blue color and
here in the layout I will make sure that
the column gap is 30 and the row gap is
thing that I want to do I just want to
add some comments to display so I will
search for the facebook comments widget
and I will just drag it in here
and moving under this section so now we
have our comments the defaults are fine
with the common count of 10 and order by
social so now our template is complete
we have the posts here inside of the
sidebar we have the trailer and the
title at the top as well as all the
other fields that we’ve set up inside of
the toolset plugin the only thing that’s
left to do is to publish this template
so I will expand this and I will click
here on publish
you can now see the display condition
screen came up and because when we’ve
created this template we’ve already
chose our movie custom post type the
conditions are automatically set to
include all movies all so all I have to
do is now click on publish and then we
can exit to the dashboard I could go
ahead and visit the website I will click
on movies and we can now see the list of
movies that we’ve set up before so I’ll
click on one of the movies for example
Captain America and you can see we have
our template live in here so I’ll choose
a different movie from the sidebar now
like this one and you can see it follows
the exact same template so this was my
movie block tutorial using two satin
element or steam builder I really hope
you found it useful and learn something
new out of it if you have any questions
don’t hesitate to ask them in the
comments below thanks for watching and
see you all soon
