In this tutorial, we combine Elementor and ACF (Advanced Custom Fields plugin) to create a dynamic movie review website on WordPress: https://elementor.com/blog/create-mov…
You’ll learn how to:
✓ Use dynamic content
✓ Create custom post types with CPT UI
✓ Create custom fields with ACF
✓ Build an archive template with Elementor
✓ Build a single template with Elementor
however I suppose from ringer calm and
then back with another element or an
advanced custom fix tutorial this time
we’ll use the advanced custom fields
plug-in to create a movie review website
we will combine the advanced custom
fields and custom post type UI plugins
to create a movie custom post type with
some really nice fields and then we will
create a template display all of that
beautifully using elementor’s dynamic
link features let me first show you what
we’re gonna build during this tutorial
this is a movie review website that
starts with a beautiful full width
section here at the top scrolling down
the page we can see a grid of movies
each with an image and title all coming
dynamically from our custom post type by
clicking on one of them the single page
for our custom post type you load up at
the top of the page we have the title
and trailer followed by the plot and I
am liberating under that we have a code
about the movie followed by the actual
content of the review and under that we
have a box with the movie image and some
general information about movie like the
country genres and writers below that we
have the possibility to other comments
and on the right side we have a sidebar
with our latest movies from this website
so we have a really cool looking
template and now it’s time to jump into
WordPress and Bildad alright we are now
inside of the WordPress dashboard and
I’ve already set up some common things
to speed up this video bit I’ve already
plated the header and the footer we can
see them here on the front page the page
is empty right now it contains just the
header and the footer here at the bottom
I’ve also install the plugins that we
will need so let me jump back into the
dashboard and I’ll click on plugins
installed plugins we will be using four
plugins for this tutorial element or
element or pro advanced custom fields
and custom post type you are right now
we are using advanced custom fields
version 4.4 point well what elemental
officially supports advanced custom fit
version 5 version 5 is in early access
but is quite easy to update to so I will
do that now I will hover over appearance
and click on editor here we need to add
this very simple line of code from the
advanced cast of this website here on
the right side I need to click on theme
functions which is the function that PHP
file
I will now scroll all the way to the
bottom of this page and paste in our
code right here the first part is just a
comment so we know what we’ve pasted it
and here is the actual code which is
defined advanced custom fields early
access to version 5 so I will now click
on update file the file was edited
successfully so I will return to our
plugins and now we can see we have the
option to update or transpose of this
version 5 so I hope you can update now
and there’s one more thing left to do so
I will go to the dashboard here and
click on home and now advanced custom
fields asks us to upgrade our database
so I’ll just click on upgrade database
and I will click on ok here that base
upgrade was complete so I will return to
my plugins and our setup is all done so
now we can start creating our website we
will first create a custom post type a
custom taxonomy in the custom post type
UI plug-in
followed by some custom fields using the
advanced custom fields plug-in after
that we will create the archive to
display all the movies as well as the
single template display the movie
including the custom fields using
elementals pro theme builder let’s start
with our custom post type I will hover
here over CPT UI and click on add/edit
cost times on this page we need to
provide some basic information about our
custom post type the first thing being
the post type slug which is the internal
name WordPress uses for our custom post
type and the slug should contain no
spaces and it should be lowercase so I
will name it movie the next thing that
we need to fill in is the plural and
singular label so I will name the movies
and movie now I will scroll down the
page and here we don’t need to worry
about any of those those are just some
labels and the defaults are perfectly
fine here in the settings we need to
change some stuff the first one and it’s
very important we have to change this
has archived from false to true so we
can build an archive for this custom
post type if this is false we can build
our card good now I also want here for
the money I can’t paste in this which is
the item for our custom post type that
will display here in the left side and
also I want to make sure that here the
featured image is sticked on because we
want to be able to provide an image for
our custom post type and I will click
here add post on and you can see on the
left side that our custom post type
movies was added and if I click on on
movies this is right now empty and the
next thing that I want to do is create a
custom taxonomy for our movies custom
post type text enemies are like tags or
like categories but we would provide
different name and for us is going to be
movie Chandra’s so I will again hover
over see ptui here and click on add/edit
economist and you can see this screen is
pretty similar to the one used to create
a custom post type so for the taxonomy
slug I will write movie genres with an
underscore and with lowercase letters
and for the plural labels going to be
movie Chandra’s again and for the
singular labor is going to be movie
Shinra
now we need to attach it to a post type
and I will attach it to our movies
custom post type here again we don’t
need to worry about the labels and all
the defaults are perfectly fine here and
the settings are also perfectly fine
soil people attacks only and now if I
hover over movies here on the Left
sidebar we can see we have our own fish
on rice here that are currently empty so
now we can go ahead and create our
custom fields on the Left sidebar
I will hover over custom fields and
click on fill groups you can see that
right now we have no existing field so
I’ll click on the add new button here at
the top and the first thing that we need
to do is name or fill group so I will
call it movie fields and we’ll now start
adding our fields here target on add
field button and our first field is
going to be the trainer link so we can
display the trailer on the front end if
you take a look onto the right side of
the screen you will be able to see how
this will look like in the final
template
the being said I will label this as
trailer link I will press tab to go to
the field name which is this slot and
you can see that it was automatically
filled in by WordPress so we don’t need
to worry about that now for the fluid
type I will change it from text to URL
here we don’t need to worry about making
it required or about conditional logic
so I will just click your own closed
field now I can click on add field to
add the next one the second one is going
to be the plot which is a short
description about the movie again on the
right side of the screen you can see how
this will look like on the front end so
I will name this now plot again I’ll
press tab to fill in this slug
automatically and for the field type I
will select text area because that’s a
small paragraph and it’s better than a
single line here for the rows we can
change it to 4 so it’s a bit smaller and
I will close this field up the next one
is going to be our IMDB rating so I will
click on add field and you can see how
this will look like on the front end we
will pair this field up with an item box
widget to have a very nice visual way of
displaying beyond liberated so I will
name this field writing and for the
field type I will change it to number
here and I will select a meaning value
of 0 and the maximum value of 10 and I
will toast this field up now I’ll create
the other fields of phosphorus we know a
certain of time with them and then we’ll
continue the tutorial
so we now have olive oil fields in place
but before publishing them we need to
scroll down here and you can see for the
location rules right now show this fill
group if the post type is equal to post
but we want to only display it on our
movies so I will change it to post type
is equal to movie from here now the
settings down here are perfectly fine
for us so I will scroll up and click on
publish now if I hover over movies and
click on add new you can see that our
fields are down here displayed on this
creating a screen but before actually
creating any movies I will first go down
to movie genres and I will create that
first so I’ll start with the first movie
genre which is going to be action so
here under name and we write action and
then I will click on add new movie genre
to add it and you can see that the slug
was filled in automatically by WordPress
so we don’t need to worry about writing
it down on if you want to have it
different from the name the next genre
is adventure so again I will just write
venture and click on add new movie genre
and it goes like this for all of them so
I will quickly create them on phosphorus
we don’t waste time with this ok so now
we have a bunch of movie genres and we
can continue creating our first movie so
I’ll go here under movies and I’ll click
on add new
I’ll start by writing down the title
which is gravity and also the ear puzzle
third thing then I will paste in the
content here we will continue with the
movie fields I will placed in the
trailer link I’ll paste in the plot this
movie has a rating of seven point seven
so I will include that I’ve also placed
in the code the country is UK and USA
I’ll input now the director the writers
the stars and now for the words this
movie 1/7 was first here
let’s make this an uppercase Co abyss
and for the duration it has one hour and
back up and for the movie genres I will
click here and search for drama sci-fi
and thriller and I’ll add those in here
I will also scroll back here and click
on set featured image and I already have
some images uploaded and I will choose
the one for this movie which is this
gravity and I will click on set featured
image and now I can click on publish
here now if I visit this movie you will
be able to see that the page was created
but we are not displaying any custom
fields because by default our theme and
WordPress does not display custom field
so that’s where element or singular
comes into play allowing us to have a
really nice and beautiful way to display
our custom fields that being said I will
return back to the dashboard and I will
create a bunch of other movies so we
have what to work with I’ll be back in a
second and we now have a bunch of movies
so we can go ahead and start creating
our archive so I will now hover over
Elementor and click on my templates to
start creating them you can see we have
the header and the footer in here that
I’ve already created so we don’t need to
worry about those I will come here at
the top and click on add new now our new
template screen is up and for the type
of template we want to work on I will
click here and select on archive and I
will also name my template so it’s
easier to find in the list perfect and
now I will click on create template now
Elementor is loaded up and the library
panel is already opened on the blocks
for the archive but we don’t want to use
them so I will just close them up the
first thing that I want to do is open up
the navigator and for that I can find
your come down here and click on
navigator or just right-click on the
page
the navigator now we have here in this
tunnel and I will drag it to the right
side of the screen until this blue bar
comes up and I will release the mouse
button to pin it in place
perfect now the next thing that I want
to do is set up the preview for this
archive so I’ll come down here and click
on the eyeball icon and click on
settings and right now you can see it
says preview dynamic content as recent
posts we don’t want that we want to
preview as our movie so I will click
here and click movies archive and then I
click apply and preview now I’ve already
set my colors also so if I click here on
the hamburger icon and click on the
color picker you can see that I have
this yellow and this dark blue color
that I’ve already set for our design so
now we can return to the widgets panel
and we can start creating our design so
the first thing that I want to do is add
a new section here I will choose a
single column section and for this
section settings we want to leave this
box I want it to be 600 pixels wide also
for the height I want to click here and
set a minimum height and I will make it
style tab and here for the background
type I will choose classic and then I
will click here to choose an image this
is the image that I want so I hope you
just insert media then I will change the
position from default to Center Center
and I will also change the size from
default to cover so we can see more of
the image next I will click on the
background overlay and here for the
background type I will choose classic
and for the color I will go with black
but I will reduce a bit the opacity
somewhere around here about half and
then here we can also leave this opacity
at 0.5 now the next thing that I want to
do is drag in a search widget inside of
this section so I’ll return to the
widgets panel and I will search for a
petite search widget we have this search
form so I will drag it inside the skin
is going to stay on classic this
placeholder is searched for the button
we want it to be icon and on the
magnifying glass like it is right now
I will increase the size of the icon
from 50 to 60 to make it a bit bigger
the
I will move over to the style tab and
start styling this little bit so for the
text color I will do ba ba ba which is a
light gray color here then for the
background color I will do white for the
border color I will come here and choose
this darker gray which is seven a seven
a seven eight I will do the border size
here the button and for the text color I
will choose again the 7 a 7 a 7 a 1 and
for the background color I will choose
our yellow color like this perfect so
you can now see that our search is done
I will now scroll down the page and
click the plus sign to add a new section
again I want it to be one column I will
leave here the defaults I will just go
to the style tab and make sure that our
background color is white like this then
I will lift the Advanced tab and for the
padding I will earning these values here
I will move to the percentage and I will
do a 3% padding to the top and to the
bottom now inside of this section I
first want to add a heading so I will
return to the widgets panel and I will
add a heading inside and right here
movies then I’ll go over to the style
tab and for the text color I will choose
our dark blue color like this and for
typography I can leave everything as
default except the size which is going
to be 35 pixels so it’s a bit smaller
now under this I want to add the
archived posts widget so I’ll go back to
the widgets panel and I’ll take this one
archive post from here and drag it under
also I want to close this up the
previous settings because we don’t need
it so I’ll take again on the eyeball
icon to hide it now here you can see we
have our movies but we want to change it
a bit the setting so they look a bit
nicer sue first the skin is going to
stay on classic for the columns I’m
gonna change from 3 to 4 columns the
image position can stay on top we want
to change the image size to medium large
so the images are nice
then I’ll change the image ratio to 1.52
and leave the image with at 100%
well I’ll scroll down here and I want to
remove the excerpt I also want to remove
the date and comments from here and the
read more button so we only want to see
the image and the title of the movie
here then I will go to the style tab
here and for the Cullens gap I want it
to be 55 and for the rows gap I want it
to be for it good now under image
spacing here I want to change it from 20
to 16 so the title is a bit closer up to
the image and also I’ll go here under
content and for the title for the color
I will change it to our dark blue color
and this is how it looks right now so
all that’s left to do is to publish this
template so I’ll come down here and
click on publish and you can see we have
our display condition screen here I will
click on add condition and right now it
says it wants to include all archives we
don’t want that we only want include our
movie archives so I will click on here
because you have moved this archive and
we have movies archives and movie genres
we want it for the minis archive I will
click here and then I will click on
publish and right now our archive is
lime so I can go back to the dashboard
now now I can go ahead here and visit
the website I’ll take your old movies
and you can see that our archive
template is live so we have our movies
here now if I click on one of the movies
this is what we currently have
because we have to build our single
template to display all cast of films so
I will return to the dashboard now I
will go here under element or my
template and again I’ll click on add new
this time here I will select a single
template and you see we have a new input
here for the post types royalty here and
I will choose movie for our post type
and that also name our template so it’s
easier to find and I will click on
create template
once again the library panel is
automatically open we don’t need that so
I will close it up I’ll also make
navigator a bit smaller here so we have
a bit more space to work with and I’ll
start by adding the first section so
I’ll click the plus sign here and select
a one column section now in the section
settings I want this to be boxed I have
a width of 1080 pixels I also want to
change here the height to mean height
and do 680 pixels like this make sure
the column position is set to middle and
now I can go to the style tab here for
the background type I will take here on
gradient and I’ll go ahead and set my
first color which is going to be zero
five one seven two one like this then
for the second color we want to input
the same hex code zero five one seven
two one and then just come here and
lighten it a little bit so it’s a very
subtle gradient here the location and
type is okay as well as the angle so
this is the background now I’ll come
down here to the shape divider I will
click on this and for the bottom shape
divider I will select tilt perfect
exactly what you need also I’ll come
here to the Navigator double click on
this section here and name this
background so we stay really nice and
organized then I’ll scroll down the page
click on the plus sign again and I want
to add a new section this time up to
columns section I’ll go to the first
column here and choose the column width
of 86 percent leaving the second one on
to add is the post title widgets will go
here on the widgets panel and I’ll drag
in the post title widget here now I will
go on your style here and for typography
I will change this from fun community
for to Tahoma I’ll make the size 40
pixels choose a line height of 1.3 and
under advanced I will put a padding
bottom of 25 pixels here
now under this I want to drag the video
widget so I’ll go back here and on
search for video and I’ll drag it inside
of here for the URL I will click here on
the dynamic link scroll all the way down
and choose a CF URL club then I will
click on here and for our key I will
select the trailer link and you can see
now that our trailer is visible on the
front end
now under this I want to add a inner
section widget so I’ll go to the widgets
panel and take the inner section and
drag it under the video widget I’ll go
on a first column here and change it to
select the section and go under advanced
and I will link the margin values here
and put a 50 pixels market top like this
now in the first column I want to drag
in a heading widget so I will go here
Twitter’s panel and drag in the heading
widget here I will click on the dynamic
link scroll all the way down and choose
a CF field from here then for the key I
will set here the plot you can see we
have our movie plot here displayed now
we have to style this so I’ll go under
the style tab for the text color I will
choose a gray color which is 5 4 5 9 5 F
like this then for typography I want the
size to be 17 pixels a width of 300 the
style italic the base line height of 1.6
and the letter spacing of 0.5 very nice
now into the second column I want to
drag in an icon box widget so I was
first for it and I’ll drag it inside of
here the first thing that I want to do
is get rid of the description because we
don’t need it so I’ll delete it then
I’ll change the icon position to write
like this next I’ll change the icon from
this star to IMDB
we can leave the view on default and
then here for the title I will click on
the dynamic link scroll all the way down
a CF field and for the key I will choose
the right thinking
so we have our rating displayed now it’s
time to style this so I’ll go honors to
the style tab for the primary color I
will change this to our dark blue color
spacing is going to be 19 and we will
have a size of 55 done under content
here for the title color I will do again
our dark blue color and under typography
here I will do a line height of 1.8 like
this now to the right column over here I
will add our share buttons widget so I
will search for that and I will drag
them in we only want to display Facebook
Google+ and Twitter so I’ll get rid of
the LinkedIn one then I’ll change the
view from icon and text to just icon the
skin can stay on gradient for the shape
I want to change it to a circle
I’ll change here the column from auto to
sure the column gap and row gap is set
to 10 and the color is the official
color now I want to go under advanced
here and do a march on top of 100 pixels
to pull them down a bit like this now I
will go to this column over here and
under advanced for the marching I want
to do a 80 pixels margin to the left
like this now I also want to close our
tree here and double-click on this
section and call it hero Val from these
section settings
I want to go under advanced and under
marching here I will do a 50 pixels
marching to the bottom and for the top
we will do – 600 pixels so I will go to
minus 6 and do 2 zeros and now you can
see the tower sections are overlaid on
top of each other and we can come here
to the title and change the color from
this blue color to white then under this
I will add a new section
it’s going to be a one-color section
again hope for the content width we’ll
leave it at box and do 1280 pixels here
then I will search for the divider
widget and drag it inside of this column
I’ll change the style to doubt it a
waste of one color black with 100% and
gap 15 so that’s all we need for this
section then under this I will add a new
section this time again up to column
section for the left column here I will
change the column width to 70% so we
have 70% and 30% on the other then on
this section here I’ll go under advanced
and under padding I will do 45 pixels to
the top to have more important link here
then here on the first column I will add
in a heading widget again I’ll tick on
the dynamic link scroll all the way down
to the ACF field and for the key I will
choose the code then we can style these
widgets while go under style for the
text color I’ll do our dark blue color
and under typography I’ll change the
font family to laptop set a size of 56
pixels a weight of 900 I’ll set the line
height to 1.2 and I will also go under
advanced and under margin I will put 30
pixels to the bottom like this under
this heading widget I want to drag in
the post content so I’ll go back to the
widgets panel and I’ll drag in this post
content widget here and you can see it
returns our content for this movie
the default are perfectly fine for this
we don’t need to change any of those now
under this I’ll drag in again a
intersection
I’ll make the first one 25% leaving the
second one 75% then in the section
settings here I will change the columns
gap to no gap I will also go under
advanced and I will do a 40 pixels
margin to the top and the bottom and I
will do a 4% padding all around lays
like this
now I’ll go under style and for the
background type I’m gonna choose classic
and set a color here which is ef ef ef
which is this light gray color here
then I’ll go here under border I will
choose border type solid that I will
I’ll link the values here because we
only want to set a bottom border and
here for the bottom I will put true and
for the color our dark blue color now
here in the first column I want to drag
in the featured image widget so I’ll go
back to the widgets panel and you can
see we have here the featured image with
it and I’ll drag it inside and we now
have our movies featured image here then
for the second column I’ll come here and
I’ll do content position to the middle
I’ll also go under advanced and I will
do a 30 pixels padding to the left
inside of this column I will drag in a
heading widget and I’ll go over to the
style tab change the color to our dark
blue color for typography I will change
the font family to laptop size 19 pixels
a weight of 700 and 1,000 for line
height now I want to have six more
copies of this so I have 7 in total what
I can do is either right click here and
click on duplicate work just press ctrl
or command D on the keyboard to
duplicate them now I’ll go here to this
column again and for the widget space
I’ll change it to 10 pixels so we bring
them a bit more together and now we can
start adding the dynamic link to all
these headings Europe so also that the
first one here I’ll click on the dynamic
link choose a CF field
and for the key I will choose the
country now
I’ll – here under advanced and I will do
before I’ll write country comment and
space so we have a label for our key
here then I’ll skip the second one
because that’s a bit different and we’ll
return to it later I will go straight to
the third one here and I’ll take here on
the dynamic link again choose a CF field
and this time for the key I will select
the director and again under advanced
I’ll write director and a comma and a
space now I’ll do the other four on
fast-forward and then I’ll return to the
second one because that’s a bit
different than the others okay so now we
have all of our fields in place except
of the second one so I’ll click on back
and I’ll take again on the dynamic link
but this time instead of come to the ACF
field I come here the top and click on
post terms then here for the key I will
change the taxonomy from tags to movie
genres and you can see we have our
envision dress here and I’ll change the
separator a bit to space pipe space now
go under advanced and I’ll write here
genres before perfect now we have a very
nice-looking section here displaying all
of our movie information and featured
image under this I want to add a
possibility to add comments so I’ll go
back to the widgets panel and I search
for facebook comments and I’ll drag them
inside of the page
and you can see attract this widget
above our section here and if I want to
move it under I can just click here and
drag to move it under there but with a
new navigator here I can just connect
this inner section and then take it and
move it above our facebook comments to
swap places that’s a really nice way of
moving stuff around now all that’s left
to do is fill in the right column here
so I’ll scroll to the top here and I
will drag in a heading widget here I’ll
write latest movies I’ll go on your
style change the color to our dark blue
color and for typography here I will do
the font family Tahoma I’ll make it 40
pixels then I’ll go under advanced and
for padding I will do 10 pixels padding
to the bottom now I want to select this
big column here and under advanced I
will do 40 pixels padding to the right
like this and then for the right column
here the smaller one I’ll go again under
advanced and this time I’ll go to 90
pixels padding to the left so we have a
bit more space here between our sections
then here I will drag in a post widget
so I’m gonna search for it
this one posts I will drag it inside and
right now you can see that it tries to
bring back results from the default
WordPress post we don’t want that so
I’ll come here to the left side scroll
down and click on query then I’ll change
the source from posts to movies we can
leave it here order by date descending
we want to exclude the current post and
we also want to tick on avoiding
duplicate so I have no duplicate movies
here now we can go ahead and style this
I’ll go under layout here the skin can
stay on classic for columns we want to
change it to one column here that post
per page are going to be three of them
in its position top in size medium large
then here for the image ratio I will do
one point 50
with 100% and now here I will disable
the excerpt to read more button and the
date and comments so we only have the
image and the title here
then I’ll go here over the style tab
columns gap 30 rows gap 30 again and
under content I will change the title
color to our dark blue color and we’re
done our template is done you can see
how it looks right now I will also close
this up and you can see we have here at
the top to title the trailer the social
icons as well as the plot and I only be
writing the code our latest movies the
content and the movie information with
the comments underneath the only thing
that’s left to do is to publish this
template so I’ll expand this and click
here down at publish you can now see the
display condition screen came up and
because when we’ve created distemper’d
we’ve already chose our movies custom
post type the conditions are automated
is set to include all movies all so all
we have to do is just click on publish
and our document is live so we can now
go to the dashboard here
and we can once again visit our website
I will take here on movies and if I
scroll down you can see our movie grid
like before but this time if I click on
one of the movies you can see that our
template is like with the title at the
top the trailer here social sharing
buttons the plot and IMDB writing our
code the post content as well as our box
here with the movie image and some
information the ability to add comments
under that and the sidebar with our
latest movies that being said this was
my advanced custom fields and Elementor
tutorial I really hope you enjoyed it
and you learn something new out of it if
you have any questions don’t hesitate to
leave them in the comment box below
thanks for watching and I’ll see you all
soon
