{"id":2558,"date":"2021-06-22T08:27:01","date_gmt":"2021-06-22T08:27:01","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=2558"},"modified":"2023-02-21T11:19:43","modified_gmt":"2023-02-21T11:19:43","slug":"create-a-wordpress-movie-review-website-with-elementor-and-toolset","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/create-a-wordpress-movie-review-website-with-elementor-and-toolset\/","title":{"rendered":"Create a WordPress Movie Review Website with Elementor and Toolset"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2558\" class=\"elementor elementor-2558\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-65cea0e2 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"65cea0e2\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-776f1f59\" data-id=\"776f1f59\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3fb47320 elementor-widget elementor-widget-video\" data-id=\"3fb47320\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=1IM_MCW9mWs&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-462e62f5 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"462e62f5\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ae68ff1\" data-id=\"ae68ff1\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-20274d87 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"20274d87\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-5391\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-5391\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-5392\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-5392\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-5391\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-5391\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-5391\" tabindex=\"0\" hidden=\"false\"><p>In this tutorial, we combine Elementor and Toolset to create a dynamic movie review website on WordPress. <br \/>You&#8217;ll learn how to:<\/p><p>* Use dynamic content<br \/>* Create custom post types with Toolset<br \/>* Create custom fields with Toolset<br \/>* Build an archive template with Elementor<br \/>* Build a single template with Elementor<\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-5392\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-5392\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-5392\" tabindex=\"0\" hidden=\"hidden\"><p>hi everyone this is Paul from bring up<br \/>that call and I&#8217;m back with another<br \/>element or dynamic filled tutorial this<br \/>time we&#8217;re going to take a look at tool<br \/>set which is a really cool plugin that<br \/>helps us with creating custom post types<br \/>custom fields custom taxonomies and a<br \/>bunch of other really nice features so<br \/>let&#8217;s first start by showing you what<br \/>we&#8217;re going to create you in this<br \/>tutorial this is a movie blog website<br \/>with a nice full width hero section here<br \/>at the top with a search widget inside<br \/>of it a lot of you asked in the comments<br \/>of the last video how to create a custom<br \/>search and custom filters for your<br \/>custom post types and actually toolset<br \/>has this functionality inside of their<br \/>tool set views plug-in sadly for this<br \/>tutorial I won&#8217;t be showing how to<br \/>create that because it gets a bit<br \/>technical and will make the video too<br \/>long maybe we&#8217;ll have a separate video<br \/>in the future explaining how to do it<br \/>however if you needed functionality now<br \/>and we decided to go ahead with tools<br \/>that you can take a look at the<br \/>documentation their website for to see<br \/>reviews on how to create them they do a<br \/>great job explaining it that being said<br \/>let&#8217;s scroll down the page where we can<br \/>see a list of movies that come<br \/>dynamically from the back end and if I<br \/>were to click on one of them like for<br \/>example this one the fighter we can see<br \/>the single page template for that movie<br \/>load up here at the top we have the<br \/>title followed by the trailer and on the<br \/>right side we have a nice social sharing<br \/>widget under the trailer we have the<br \/>plot of the movie as well as the IMDB<br \/>rating followed by a code about the<br \/>movie and then some content here at the<br \/>bottom and lastly we have the image of<br \/>the movie and some general information<br \/>like the genre director writers and a<br \/>few more on the right side we can see<br \/>our latest movies and if I were to click<br \/>on one of them for example Captain<br \/>America we have the exact same design so<br \/>all we have to do if we want to add a<br \/>new movie is just feeling the<br \/>information on the back end and the<br \/>movie is going to follow the exact same<br \/>template that being said let&#8217;s jump into<br \/>WordPress and create that okay so we now<br \/>inside of WordPress and I already went<br \/>ahead and set up something so we don&#8217;t<br \/>waste any time with them I&#8217;ve already<br \/>created the header and the footer we can<br \/>see them here on the front page and the<br \/>page is empty right now it&#8217;s only the<br \/>header and the footer with no content<br \/>here yet I&#8217;ve also went ahead and<br \/>install the required plugins let me<br \/>quickly jump back into the dashboard<br \/>and go under plugins installed plugins<br \/>we will be using three plugins element<br \/>or element or pro and toolset types<br \/>that&#8217;s all we need right now so let&#8217;s<br \/>jump into building a custom post type<br \/>you can see on the Left sidebar under<br \/>Elementor that we have a new entry<br \/>called toolset I will hover over that<br \/>and click on post types on this page we<br \/>can see the pre-built post types of<br \/>WordPress but we don&#8217;t need to worry<br \/>about them so I&#8217;m going to click on add<br \/>new and we&#8217;re now inside of the add new<br \/>post type page here we need to provide a<br \/>bit of information to create our post<br \/>type the first thing being the plural<br \/>name of this post time so I&#8217;m going to<br \/>call that tMI&#8217;s then we need to provide<br \/>a singular name which is going to be<br \/>Navy and then I&#8217;ll press tab to go to<br \/>the slug so it automatically completes<br \/>it with the lowercase version of the<br \/>singular name that&#8217;s perfect for now I<br \/>also want to change the icon so I will<br \/>click on change icon here and I will<br \/>search for tickets and I will choose<br \/>this one tickets out perfect now we<br \/>don&#8217;t need to worry about the labels or<br \/>about the taxonomies right now all I<br \/>want to do is come here to the sections<br \/>to display one editing movie and I want<br \/>to check on the featured image because<br \/>we want to be able to provide an image<br \/>for our custom post type I also don&#8217;t<br \/>have to worry about the options so I<br \/>will go here at the top and for the add<br \/>in mini position after I will choose<br \/>comments because I won&#8217;t discuss the<br \/>post type to be displayed after the<br \/>comments here in the sidebar and I will<br \/>click on save post type and we now have<br \/>a new entry called movies here under<br \/>comments so I will hover over that and<br \/>click on all items and you can see this<br \/>is empty right now so we can go ahead<br \/>and create our custom fields I will<br \/>hover over to set again and this time<br \/>click on custom fields here we can<br \/>create our new field group so I&#8217;ll click<br \/>on the add new group button and I&#8217;ll<br \/>give a name to this group I will call it<br \/>movie yes perfect and now I will click<br \/>Save field group because I want to be<br \/>able to specify where this appears on so<br \/>I&#8217;ll now click back on settings to<br \/>expand this and here it&#8217;s by default<br \/>this group of fields will appear while<br \/>editing on content we don&#8217;t want that so<br \/>I&#8217;m to here and edit and I will check<br \/>here our newly created custom post type<br \/>and then I will click on apply&#8217; perfect<br \/>so now this movie fields group will only<br \/>show up on our custom post side so we<br \/>can now go ahead and create our first<br \/>field I will click on the add field<br \/>button the first field that we are going<br \/>to create is the trailer link field so I<br \/>will choose the URL type of field if you<br \/>look into the top right corner of the<br \/>screen right now you will be able to see<br \/>how this field is going to look like on<br \/>the front end we will link this field<br \/>together with a video widget to<br \/>dynamically display the movies trailer<br \/>into the template that being said I will<br \/>name this field trailer link and he<br \/>tapped automatically filling the slug<br \/>just like this you can see the slug was<br \/>filled in automatically by pressing tab<br \/>we don&#8217;t need to worry about any other<br \/>setting so I will close this up and<br \/>create our second film I will click<br \/>again on the add new field button and<br \/>the second field is for the plot of the<br \/>movie which is a small paragraph so I<br \/>will choose the multi-line type of field<br \/>here once again in the top right corner<br \/>of the screen you can see the result on<br \/>the front end this field will be<br \/>displayed under our trailer describing<br \/>the action of the movie I will therefore<br \/>name this field plot and once again<br \/>press tab to automatically fill in the<br \/>slug we don&#8217;t need to worry about any of<br \/>these settings either so I will close<br \/>this up and create our third field the<br \/>third field that we will create is the<br \/>IMDB rating field so I need to select a<br \/>number type of field this is going to be<br \/>displayed under the trailer on the same<br \/>line as the plot showing our visitors<br \/>what rating this movie has on IMDB we<br \/>will hook this up with an icon box field<br \/>allowing us to have a nice visual way to<br \/>describe our type of rating disease so I<br \/>will name this field rating that being<br \/>said I&#8217;ll quickly create the other<br \/>fields on phosphorus so we don&#8217;t waste a<br \/>ton of time with them okay so now we&#8217;ve<br \/>created all the custom fields that we<br \/>need in case you&#8217;re wondering this one<br \/>with a little aim from this old single<br \/>line custom field that being said I can<br \/>now go ahead and click on save field<br \/>group perfect and we can see that the<br \/>post field group was saved I only want<br \/>to do one more thing before proceeding<br \/>with filling in the information our<br \/>custom post type and that<br \/>creating a custom taxonomy so here on<br \/>tool set I will choose taxonomies and<br \/>now on this page we can see the built in<br \/>WordPress taxonomies we don&#8217;t need to<br \/>worry about them so I&#8217;ll click here on<br \/>add new and now we&#8217;re on a screen pretty<br \/>similar to the one that we&#8217;ve used to<br \/>create our post time so I will now name<br \/>our custom taxonomy I will call it movie<br \/>genres for the singular I will do movie<br \/>genre and for the slug the default works<br \/>and I also want here to change the<br \/>taxonomy type from her article like<br \/>categories to flat like tags you will<br \/>see why when we start using them and<br \/>also I want to associate movies with<br \/>this taxonomy so it only works with this<br \/>one and I will click on save taxonomy<br \/>now if I hover over movies here you can<br \/>see we have our movie genres taxonomy<br \/>and if I were to click on it it&#8217;s a very<br \/>similar screen like the one used to<br \/>create categories and tags we&#8217;ve now<br \/>completed our custom post type setup so<br \/>we can go ahead and fill in the<br \/>information we&#8217;ll start off by creating<br \/>our movie genres those are going to be<br \/>very helpful later on because it will<br \/>allow us to filter movies based on genre<br \/>so I&#8217;ll start with the first one which<br \/>is going to be action I will type here<br \/>under named action and then I will just<br \/>click on add a movie genre because the<br \/>slug is going to be taken care of<br \/>automatically by WordPress now I have a<br \/>few more to add so I will add them on<br \/>fast-forward so you can see that we now<br \/>have here a whole host of movie genres<br \/>that will allow us to filter movies<br \/>based on them<br \/>that being said I will now go ahead and<br \/>create our first movie so I&#8217;ll go under<br \/>add new here so we are now inside of the<br \/>add new movie screen and as you can see<br \/>in addition to the title and content<br \/>inputs that come with the default<br \/>WordPress post we have all the other<br \/>fields that we&#8217;ve created earlier like<br \/>the trailer link plot<br \/>rating and all the others so I&#8217;ll start<br \/>by filling in the title which is going<br \/>to be the fighter and 2010 then I&#8217;ll<br \/>copy paste some of the content so we&#8217;ll<br \/>start with the actual content of the<br \/>page which is in this case Laura hips<br \/>then I&#8217;ve placed in the trailer link the<br \/>plot I will provide the rating which is<br \/>seven point eight on IMDB and I&#8217;ll<br \/>provide a code about the movie the<br \/>country is USA the Raptor writers stars<br \/>what a words this movie won and the<br \/>duration which is one hour 56 minutes<br \/>perfect so we fill in the information<br \/>here and what we want to do is come up<br \/>here and fill in the movie genres and<br \/>because we&#8217;ve set them as tags we need<br \/>to search for them so I know this one is<br \/>a biography so research for biography<br \/>and then click on it and click on add<br \/>and you can see we have it here now and<br \/>this one is also drama and sport so we<br \/>have our genres here the last thing that<br \/>we need to do is set the featured image<br \/>so I&#8217;ll take you on set featured image<br \/>and I will choose the movie poster which<br \/>is this one and click a set featured<br \/>image perfect so now our movie is done<br \/>and I can click on publish and if I go<br \/>here to all items we have our entry to<br \/>fighter here so I can start making a few<br \/>more and I&#8217;ll be back in just a second<br \/>alright so I&#8217;ve added a few more movies<br \/>so we have what to work with now we can<br \/>go ahead and create our first template<br \/>which is going to be the archive so we<br \/>can display our movies in the nice grid<br \/>that I showed you at the beginning so I<br \/>will not hover over element or my<br \/>template and you can see here we have<br \/>the header and the footer that I&#8217;ve<br \/>created earlier now we can go ahead and<br \/>click on add new and here it asks us<br \/>what type of time that you want to work<br \/>on so I&#8217;m gonna click on this and select<br \/>an archive and I will name this movie<br \/>archive so it&#8217;s easier to find and I<br \/>will click on create template once the<br \/>site of Alimentum you can see that the<br \/>library panel for the blocks was<br \/>automatically opened but I don&#8217;t want to<br \/>use it so I will close it up so there<br \/>are two things that I want to do before<br \/>creating the template the first one is<br \/>setting the right preview for our<br \/>archive so and click here on the little<br \/>eyeball icon<br \/>and I will click on settings and you can<br \/>see the right now he says preview<br \/>dynamic content as recent post we don&#8217;t<br \/>want that so I will click on this and<br \/>choose movie archive and click apply and<br \/>preview perfect now the second thing<br \/>that I want to do is set some colors in<br \/>our color picker so it&#8217;s easier to<br \/>choose them so I&#8217;ll click here on the<br \/>hamburger icon and I will choose color<br \/>picker and I want to change this screen<br \/>here with a yellow color that I need<br \/>which is half 81-68 this one and I also<br \/>want to change this green here to 0 0 3<br \/>C 54 which is a nice blue color perfect<br \/>and then we&#8217;ll click on apply now we can<br \/>go ahead and start creating our first<br \/>section soil keep on the plus sign here<br \/>and choose a one-column section going to<br \/>the section settings I want this to be<br \/>boxed and to have a 600 pixel width I<br \/>also want to set a minimum height for it<br \/>and that&#8217;s going to be 700 pixels<br \/>all right here 700 great now I will go<br \/>to the style tab and choose background<br \/>type as classic and choose our image<br \/>which is this nice full width image pick<br \/>on insert media I will also change the<br \/>position to Center Center and the size<br \/>to cover so it shows a bit more out of<br \/>it perfect and I also want to set an<br \/>overlay for the image to darken it a<br \/>little bit on it 1 background overlay I<br \/>will do classic and for the color I&#8217;m<br \/>gonna do black at around 50% around here<br \/>and I will leave the opacity here at 50%<br \/>as well so this is not our first section<br \/>and inside of it I want to add a search<br \/>widget okay so I&#8217;m gonna search for it<br \/>and this this one search form the skin<br \/>is going to be classic placeholder<br \/>search the button type is going to be<br \/>icon and we will leave this magnifying<br \/>glass here for the size I&#8217;m gonna<br \/>increase it a little bit and make it 60<br \/>now under style we want the text color<br \/>to be ba ba<br \/>a nice gray color the background color<br \/>white and the border color this darker<br \/>gray which is 7 8 7 8 7 8 and the border<br \/>size has to be 1 pixels perfect now for<br \/>the button the text color is going to be<br \/>again that several a 7 a 7 a and the<br \/>background color the yellow color we set<br \/>earlier and this is our search now I<br \/>could go ahead and add the second<br \/>section so I&#8217;ll take again on the plus<br \/>side and choose a one column section to<br \/>this section we will leave everything<br \/>here at by default I will just go under<br \/>the style and make sure the background<br \/>color is white and under advanced for<br \/>the padding<br \/>I will unlink the values because I just<br \/>want to add padding to the top at the<br \/>bottom and I will go to the percentage<br \/>and I will do top 3% and bottom 3% break<br \/>now we can add our title for this soil<br \/>search for our heading widget and drag<br \/>it inside it will say in movies the HTML<br \/>tag is going to be an h2 and the color<br \/>is going to be that blue color the dark<br \/>do and for typography the defaults are<br \/>fine I just want the size to be 35<br \/>pixels I only have one more widget to<br \/>add which is this one the archived posts<br \/>and this returns all the post in this<br \/>current archive so I will drag it in and<br \/>you can see we have our movies here but<br \/>they look a bit odd right now so we&#8217;re<br \/>going to work a bit with them the first<br \/>thing that I&#8217;m going to do is come here<br \/>and we will turn off that excerpt as<br \/>well as the read more and I will get rid<br \/>of the date and comments we just want to<br \/>show the image and the title of the<br \/>movie now I want to change this from 3<br \/>columns to 4 columns the image ratio is<br \/>going to be 1.5 and the width is going<br \/>to be 100%<br \/>I will change here the image size to<br \/>large because we want them to be nice<br \/>and crisp how good they look right now<br \/>for a fact now I will go under style and<br \/>for the columns gap<br \/>I&#8217;m gonna do 55 rows gap is going to be<br \/>make it 16 so we bring the title a<br \/>little bit closer and now in the content<br \/>what I have to do is make the title<br \/>color that dark blue that we had and<br \/>also come back here to the layout and<br \/>choose the alignment as Center so our<br \/>title is centered with our images and<br \/>this is pretty much done right now so I<br \/>can click on publish and we have the<br \/>displayed condition screen and click on<br \/>add condition and by default it wants to<br \/>include this template on archives but we<br \/>don&#8217;t want that we just want to use it<br \/>for our movie so I will take here and<br \/>choose movies archive here and then I<br \/>will click on publish now the document<br \/>is live so I can click on the hamburger<br \/>icon and go exit to dashboard I will go<br \/>to visit the website and if I click here<br \/>on movies you can see our template is<br \/>live with all the movies coming from the<br \/>back end right now if I were to click on<br \/>one of those this is what&#8217;s gonna load<br \/>up because this is the default theme<br \/>template so we&#8217;re gonna go and create a<br \/>single template to display our movie<br \/>with all the information that we set up<br \/>in the custom fields now I will go back<br \/>to the dashboard and I will hover again<br \/>under Elementor my templates I will take<br \/>on add new and this time we&#8217;re gonna<br \/>select a single instead of an archive<br \/>and now it asks us what type of post we<br \/>want to use so I&#8217;ll click here and I<br \/>will choose movie and I will name this<br \/>movie single now people create template<br \/>okay so we&#8217;re now inside of the single<br \/>builder and once again the library was<br \/>automatically opened up for us but we<br \/>don&#8217;t need that so I&#8217;m gonna close it up<br \/>and I&#8217;ll add here a new section and<br \/>click on the plus sign and choose a<br \/>one-column section I want this one to be<br \/>boxed in with 1280 width I also want to<br \/>set a minimum height here to 680 pixels<br \/>and make sure that it color<br \/>is in middle perfect now I will go under<br \/>style and for the background type I will<br \/>choose gradient the first color is going<br \/>to be zero five one seven twenty one and<br \/>the second color is going to be the same<br \/>one just a bit more transparent here<br \/>it&#8217;s a very sudden gradient that we use<br \/>here location 0 100 type linear and<br \/>angle 180 perfect now I will go to the<br \/>shape divider and for the bottom I will<br \/>choose the tilt one like this ok so<br \/>that&#8217;s all that we need for this section<br \/>because the second section that we&#8217;re<br \/>going to create we are going to pull it<br \/>off this negative margin to have it here<br \/>on top of this one so I will create a<br \/>new section this one is going to be a<br \/>two column section again boxed with 1280<br \/>with the first column I&#8217;m going to<br \/>select and the column width is going to<br \/>be 86 percent and the second one is<br \/>going to be 14 but it was done<br \/>automatically now I want to go under the<br \/>section settings under advanced and for<br \/>marching I will do a march on top of<br \/>minus 600 pixels and a margin bottom of<br \/>but it&#8217;s going to look perfect in a few<br \/>seconds so I&#8217;ll start by adding a new<br \/>widget is going to be a post title<br \/>widget I will add it here and you can<br \/>see it takes the title that we&#8217;ve set in<br \/>the back end which is the fighter now<br \/>I&#8217;ll go under style the text color I&#8217;ll<br \/>make it white and for typography we want<br \/>the phone to be Tahoma 40 pixels line<br \/>height 1.3 and we also want to go under<br \/>advanced for this and add a padding<br \/>bottom of 25 pixels nice now the next<br \/>thing that we&#8217;re gonna do is add a video<br \/>widget this one and it under this for<br \/>the source we&#8217;re going to leave YouTube<br \/>and here in the URL we&#8217;ll click on this<br \/>little dynamic link scroll all the way<br \/>down and we can see we have to sit here<br \/>and with<br \/>to that field to set date field and tool<br \/>set URL field so I would click on the to<br \/>set URL field and then if I click here<br \/>again it&#8217;s going to ask for the key and<br \/>our key is the only one that we have<br \/>because it&#8217;s we have only one to set URL<br \/>field and that&#8217;s the trader link so I&#8217;m<br \/>gonna click on that and you can see our<br \/>link is now displayed here ooh and it<br \/>looks really nice okay under this I&#8217;m<br \/>going to add a columns widget which is<br \/>this one here and I want to go under<br \/>advanced and do a 50 pixels margin top<br \/>to make a bit more space and also for<br \/>the columns I want the first one to be<br \/>here and the second one is automatically<br \/>new heading and this time I&#8217;m gonna<br \/>click on the dynamic link and scroll all<br \/>the way down and choose to set field<br \/>from here and now I will think again I<br \/>need to choose our key and for the key<br \/>we want to show the plot here you can<br \/>see we have the plot it looks really odd<br \/>right now but we&#8217;re gonna fix it in a<br \/>second so I will now go under style for<br \/>the color I&#8217;m gonna input 5 4 5 9 5 F<br \/>which is a dark gray color then for the<br \/>typography I will leave the family to<br \/>default size 17 pixels weight 300 I want<br \/>to have under style here italic perfect<br \/>line height 1.6 and letter spacing 0.5<br \/>and now it looks really nice on the<br \/>right side I will add an icon pops<br \/>widget we want the icon to be IMDB icon<br \/>which is this one the view is going to<br \/>be default it will have no description<br \/>and for the title I will click here on<br \/>the dynamic link go all the way down to<br \/>that field and I will choose our writing<br \/>field good now I want to make this to go<br \/>to the right side like this and play a<br \/>bit with the styling of it so I&#8217;ll go<br \/>under style and for the primary color I<br \/>will do our dark blue color spacing is<br \/>going to be 19 the size is going to be<br \/>content title I will go with the same<br \/>color and on the typography I will do a<br \/>line in front of 1.8 now it&#8217;s pretty<br \/>much centered with the autumn now I want<br \/>to add a shirts button widget so I&#8217;m<br \/>going to search for it an editing side<br \/>of the page<br \/>we only want Facebook Google+ and<br \/>Twitter so I will delete the Linkedin<br \/>one and I want to change some settings<br \/>here so the view is going to be only the<br \/>icon the skin is okay to be gradient<br \/>shape is going to be a circle columns<br \/>one like this not under style column gap<br \/>a row gap is okay to be 10 so I will go<br \/>under advanced and I will do a 100 pixel<br \/>margin top here now I will go under the<br \/>color settings here and under advanced I<br \/>will do a marching left of 100 pixels so<br \/>our items are nice and small here okay<br \/>we can continue on with the next section<br \/>I&#8217;ll click on the plus sign to add a new<br \/>section and I will choose a single<br \/>column section again I&#8217;ll make the<br \/>content with 1280 pixels and inside of<br \/>this I will drag divided your widget now<br \/>I&#8217;ll choose the style to be dotted one<br \/>pixel weight color black with 100% and a<br \/>gap of 15 perfect now I will move on<br \/>with the next sections well click again<br \/>on the plus sign and this time I&#8217;ll<br \/>choose a two column section it doesn&#8217;t<br \/>I&#8217;ll make it 1280 in width I will go<br \/>under advanced and do a padding top of<br \/>first column to be 70 percent one so we<br \/>have 70% and 30% on the second<br \/>right now in the last one I will add a<br \/>heading field and I will click on the<br \/>dynamic link here choose to set field<br \/>and then for the key I will choose the<br \/>code nice now I want to style it a<br \/>little bit so on the other style for the<br \/>text color I will choose the dark blue<br \/>color and for typography we want the<br \/>phone to be Aleppo 66 pixels a weight of<br \/>advanced and for margin I will do a 30<br \/>pixels bottom margin nice now under this<br \/>I will drag a new widget which is the<br \/>post content which is this one from here<br \/>and you can see it brings back the<br \/>content that we&#8217;ve added what we&#8217;ve<br \/>created this movie so we don&#8217;t need to<br \/>worry about any of the settings this the<br \/>difference look perfectly fine all right<br \/>so under the content I want to once<br \/>again add a columns widget which is this<br \/>one here<br \/>but before continuing I just want to<br \/>make a short point about them if you&#8217;re<br \/>using elemental version 2.2 or later<br \/>this widget was renamed from columns to<br \/>inner section so if you&#8217;re using that<br \/>version or later make sure that you&#8217;re<br \/>looking for inner section instead of<br \/>this one now I will drag that in and the<br \/>first thing that I want to do is select<br \/>the first column here and choose a<br \/>column width of 25% leaving the second<br \/>column at 75% and I will choose here the<br \/>column gap to be no gap then I will move<br \/>over to the Advanced tab and here I will<br \/>do a 40 pixel margin top and bottles all<br \/>right here for it and also I want to do<br \/>a 4% padding all around so here I will<br \/>change it to percent and then loop 4 so<br \/>we have a 4% binding all around our<br \/>section next I will move over to the<br \/>style tab and I will choose a classic<br \/>background type and I will input a color<br \/>which is ef ef ef<br \/>which is this light gray color here and<br \/>also I will go here down to the border<br \/>choose a border type of solid I&#8217;ll link<br \/>the values because we only want to have<br \/>the border to the bottom of this section<br \/>and for the bottom I will do two pixels<br \/>and then I&#8217;ll change the color of this<br \/>to our dark blue color now I want to add<br \/>to the left column a featured image<br \/>widget so I&#8217;ll go over to the widgets<br \/>panel and I will drag in the featured<br \/>image widget here very nice now to the<br \/>right column I want to add a heading<br \/>widget and I want to change the styling<br \/>a little bit so I will go on your style<br \/>here I&#8217;ll make the text color our dark<br \/>blue color and for typography I will<br \/>choose the formula to I will make it 19<br \/>pixels I will choose a weight of 700 and<br \/>I will do a line height of 1.4 very good<br \/>now I want to select this column again<br \/>the right one and change the content<br \/>position from default to needle and also<br \/>go under the Advanced tab and set a 30<br \/>pixels padding to the left like this now<br \/>I need 6 more copies of this heading<br \/>widget because I need 7 in total so what<br \/>I can do is either right click here and<br \/>choose duplicate to double key this<br \/>widget or I can just press ctrl or<br \/>command D to duplicate and now we have<br \/>seven copies of this so we can start<br \/>working with them I will select the<br \/>first one and here you can see our<br \/>little dynamic link so I will click on<br \/>this scroll all the way down and choose<br \/>to set field now nothing shows up<br \/>because we haven&#8217;t chosen our key yet so<br \/>I will click on the to set field here<br \/>and for our key we will choose country<br \/>because that&#8217;s the first thing that we<br \/>want to display also I will go here<br \/>under advanced and in the before in boot<br \/>I will type country and column at a<br \/>space so now we have a label for our<br \/>input here now I will skip the second<br \/>one because that&#8217;s a bit different I<br \/>will create the third one here so I will<br \/>click on<br \/>click again on the dynamic link scroll<br \/>all the way down and just loose it field<br \/>and I will choose the key of director<br \/>and you can see our director shows up so<br \/>I can go under advanced and for the<br \/>before tag I will do director and color<br \/>and a space now I will do the last four<br \/>on fast word and then we will return to<br \/>the second one perfect so now we have<br \/>all of our fields in place except for<br \/>the second one so I will click on that<br \/>and I will once again just a dynamic<br \/>link but this time instead of choosing<br \/>the 2sat field I will actually choose<br \/>this one here post terms because this<br \/>will return our terms for a post and<br \/>right now it&#8217;s empty because we haven&#8217;t<br \/>chosen our taxonomy of choice so I will<br \/>click here on post terms and then for<br \/>the taxonomy I will choose movies on res<br \/>and now we can see our genres for this<br \/>movie displayed here I will also change<br \/>here the separator to space pipe space<br \/>so it looks like this now and under<br \/>advanced in the before input I will try<br \/>to January ok so our little section is<br \/>done so we can continue on with creating<br \/>our sidebar first thing that I want to<br \/>do is scroll up and choose our big<br \/>column here the left one click on<br \/>advanced and I will choose a padding<br \/>right of 40 pixels I will also choose<br \/>the right column here and go under<br \/>advanced as well and this time I will<br \/>add a 90 pixels padding to the left now<br \/>I can go ahead and drag in a heading<br \/>widget I will write in here latest<br \/>movies<br \/>then I will go to the style tab I will<br \/>choose our dark blue color for the tax<br \/>color then I&#8217;ll go under typography for<br \/>the font family I will just a coma I<br \/>will also make this 40 pixels in size<br \/>and then I will go under advanced and<br \/>add a 10 pixel padding to the bottom now<br \/>I can drag in one more widget which is<br \/>the post widget so I will search for it<br \/>and is this one post so I will drag it<br \/>inside of this column but you see that<br \/>by default it tries to return from our<br \/>default WordPress posts but we don&#8217;t<br \/>want that so here on the left side I<br \/>will scroll all the way down and choose<br \/>query for the source I will change this<br \/>to movies I will live here ordered by<br \/>descending and I will exclude the<br \/>current post by clicking here and<br \/>checking on avoid duplicates because we<br \/>don&#8217;t want any duplicate image here then<br \/>I can return to the Layout tab and style<br \/>this a little bit so the skin is going<br \/>to stay on classic for the columns we<br \/>want to show only one we want to show<br \/>three posts per page not six the image<br \/>position can stay to the top we want to<br \/>change the image size to medium large so<br \/>it&#8217;s nice and crisp also the image ratio<br \/>should be 1.52<br \/>then we will leave the title on we will<br \/>disable the excerpt as well as the date<br \/>and comments here and we will also<br \/>disable our read more button so we will<br \/>only show the image and the title now I<br \/>will go to the style tab go to content<br \/>here and for the title color I will<br \/>choose again our dark blue color and<br \/>here in the layout I will make sure that<br \/>the column gap is 30 and the row gap is<br \/>thing that I want to do I just want to<br \/>add some comments to display so I will<br \/>search for the facebook comments widget<br \/>and I will just drag it in here<br \/>and moving under this section so now we<br \/>have our comments the defaults are fine<br \/>with the common count of 10 and order by<br \/>social so now our template is complete<br \/>we have the posts here inside of the<br \/>sidebar we have the trailer and the<br \/>title at the top as well as all the<br \/>other fields that we&#8217;ve set up inside of<br \/>the toolset plugin the only thing that&#8217;s<br \/>left to do is to publish this template<br \/>so I will expand this and I will click<br \/>here on publish<br \/>you can now see the display condition<br \/>screen came up and because when we&#8217;ve<br \/>created this template we&#8217;ve already<br \/>chose our movie custom post type the<br \/>conditions are automatically set to<br \/>include all movies all so all I have to<br \/>do is now click on publish and then we<br \/>can exit to the dashboard I could go<br \/>ahead and visit the website I will click<br \/>on movies and we can now see the list of<br \/>movies that we&#8217;ve set up before so I&#8217;ll<br \/>click on one of the movies for example<br \/>Captain America and you can see we have<br \/>our template live in here so I&#8217;ll choose<br \/>a different movie from the sidebar now<br \/>like this one and you can see it follows<br \/>the exact same template so this was my<br \/>movie block tutorial using two satin<br \/>element or steam builder I really hope<br \/>you found it useful and learn something<br \/>new out of it if you have any questions<br \/>don&#8217;t hesitate to ask them in the<br \/>comments below thanks for watching and<br \/>see you all soon<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview In this tutorial, we combine Elementor and Toolset to create a dynamic movie review website on WordPress. You\u2019ll 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 [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":4223,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[5,10],"tags":[41],"class_list":["post-2558","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dynamic-design","category-integrations","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Create a WordPress Movie Review Website with Elementor and Toolset - Academy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/academy\/create-a-wordpress-movie-review-website-with-elementor-and-toolset\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create a WordPress Movie Review Website with Elementor and Toolset - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this tutorial, we combine Elementor and Toolset to create a dynamic movie review website on WordPress. You\u2019ll 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 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/create-a-wordpress-movie-review-website-with-elementor-and-toolset\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-22T08:27:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-21T11:19:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Movie-Review-Website-with-Elementor-Toolset.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"27 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create a WordPress Movie Review Website with Elementor and Toolset - Academy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/academy\/create-a-wordpress-movie-review-website-with-elementor-and-toolset\/","og_locale":"en_US","og_type":"article","og_title":"Create a WordPress Movie Review Website with Elementor and Toolset - Academy","og_description":"Overview Transcript Overview In this tutorial, we combine Elementor and Toolset to create a dynamic movie review website on WordPress. You\u2019ll 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 [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/create-a-wordpress-movie-review-website-with-elementor-and-toolset\/","og_site_name":"Academy","article_published_time":"2021-06-22T08:27:01+00:00","article_modified_time":"2023-02-21T11:19:43+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Movie-Review-Website-with-Elementor-Toolset.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"27 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/create-a-wordpress-movie-review-website-with-elementor-and-toolset\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/create-a-wordpress-movie-review-website-with-elementor-and-toolset\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"Create a WordPress Movie Review Website with Elementor and Toolset","datePublished":"2021-06-22T08:27:01+00:00","dateModified":"2023-02-21T11:19:43+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/create-a-wordpress-movie-review-website-with-elementor-and-toolset\/"},"wordCount":6190,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/create-a-wordpress-movie-review-website-with-elementor-and-toolset\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Movie-Review-Website-with-Elementor-Toolset.jpg","keywords":["Guides and Tutorials"],"articleSection":["Dynamic Design","Integrations"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/create-a-wordpress-movie-review-website-with-elementor-and-toolset\/","url":"https:\/\/elementor.com\/academy\/create-a-wordpress-movie-review-website-with-elementor-and-toolset\/","name":"Create a WordPress Movie Review Website with Elementor and Toolset - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/create-a-wordpress-movie-review-website-with-elementor-and-toolset\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/create-a-wordpress-movie-review-website-with-elementor-and-toolset\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Movie-Review-Website-with-Elementor-Toolset.jpg","datePublished":"2021-06-22T08:27:01+00:00","dateModified":"2023-02-21T11:19:43+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/create-a-wordpress-movie-review-website-with-elementor-and-toolset\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/create-a-wordpress-movie-review-website-with-elementor-and-toolset\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/create-a-wordpress-movie-review-website-with-elementor-and-toolset\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Movie-Review-Website-with-Elementor-Toolset.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Movie-Review-Website-with-Elementor-Toolset.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/create-a-wordpress-movie-review-website-with-elementor-and-toolset\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Integrations","item":"https:\/\/elementor.com\/academy\/integrations\/"},{"@type":"ListItem","position":4,"name":"Create a WordPress Movie Review Website with Elementor and Toolset"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c","name":"Hodaya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","caption":"Hodaya"},"url":"https:\/\/elementor.com\/academy\/author\/hodaya\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2558","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=2558"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2558\/revisions"}],"predecessor-version":[{"id":9452,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2558\/revisions\/9452"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/4223"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=2558"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=2558"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=2558"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}