{"id":2475,"date":"2021-06-22T06:58:40","date_gmt":"2021-06-22T06:58:40","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=2475"},"modified":"2023-02-22T09:13:23","modified_gmt":"2023-02-22T09:13:23","slug":"create-a-dynamic-personal-website-in-wordpress","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/create-a-dynamic-personal-website-in-wordpress\/","title":{"rendered":"Create a Dynamic Personal Website"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2475\" class=\"elementor elementor-2475\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-22e0f4a6 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"22e0f4a6\" 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-61e18668\" data-id=\"61e18668\" 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-4b8d3155 elementor-widget elementor-widget-video\" data-id=\"4b8d3155\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=m-7-XqCJu5k&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-5994d24c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5994d24c\" 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-6bd05c6a\" data-id=\"6bd05c6a\" 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-7aece66f elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"7aece66f\" 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-2061\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-2061\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-2062\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-2062\" 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-2061\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-2061\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-2061\" tabindex=\"0\" hidden=\"false\"><p>In this tutorial, we combine Elementor and PODS (a Custom Fields plugin) to create a dynamic personal website for WordPress. <br \/>You&#8217;ll learn how to:<\/p><p>\u2713 Use dynamic content<br \/>\u2713 Create custom fields with PODS<br \/>\u2713 Edit a single post 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-2062\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-2062\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-2062\" tabindex=\"0\" hidden=\"hidden\"><p>Heffron this is Paul from bring web.com<br \/>and I&#8217;m back with another elementary<br \/>dynamic fields tutorial this time we&#8217;re<br \/>going to take a look at pots which is a<br \/>great plugin for creating custom post<br \/>types and custom fields during this<br \/>tutorial we&#8217;ll going to use pots to<br \/>extend the default wordpress post with<br \/>some new fields and then we will use<br \/>elementor&#8217;s theme builder to display<br \/>them into a single page template let me<br \/>show you what we&#8217;re going to create<br \/>during this tutorial this is a<br \/>healthcare website that displays the<br \/>list of doctors on the homepage by<br \/>clicking on one of the doctors we will<br \/>be taken to the doctors single page<br \/>where we have a lot of information about<br \/>the specific doctor at the top of the<br \/>page we have this cardboard show the<br \/>doctors imaged name and title we also<br \/>have two buttons one for the phone<br \/>number and one for emailing this doctor<br \/>on the right side of this card we have<br \/>the specialty and education of this<br \/>doctor as well as a Facebook page button<br \/>further down the page we have a three<br \/>column layout displaying more<br \/>information about this doctor on the<br \/>Left column we have a card with some<br \/>more contact information and under that<br \/>a list of related doctors this central<br \/>column shows the card with some about<br \/>information on this doctor and the<br \/>presentation video on the right column<br \/>we have two more cards the first one<br \/>being a sign up call to action while the<br \/>second one is a list of share buttons<br \/>everything you see on this page that is<br \/>related to the doctor is coming<br \/>dynamically from our custom fields that<br \/>we&#8217;ve created using pots that being said<br \/>let&#8217;s jump into the wordpress dashboard<br \/>and start building this okay so here we<br \/>are inside of the WordPress dashboard I<br \/>will never get over to posts all posts<br \/>and here you can see that we already<br \/>have a list of some doctors I will click<br \/>on edit from the first one and you can<br \/>see that right now we only have two<br \/>fields the title which is the doctor&#8217;s<br \/>name and the post content which is the<br \/>short description for our doctor and we<br \/>also have here a featured image for this<br \/>doctor so what we want to do now is go<br \/>over to pods and extend this post type<br \/>with some more fields that we will then<br \/>display in our template so I will hover<br \/>here over pods admin and click add new<br \/>and on the screen you can see we have<br \/>two options we have the option to create<br \/>a new post type or taxonomy or custom<br \/>settings page or we have the option to<br \/>and an existing one because we just want<br \/>to add some fields to the pre-made<br \/>wordpress post we will click on extend<br \/>existing and then on this page you can<br \/>see we want content type for post types<br \/>and for the post type we want post then<br \/>I will click on next step and we are now<br \/>on the add new fields screen so I&#8217;ll<br \/>click here on add field and we can go<br \/>ahead and create our first field so the<br \/>first field that we want to create is<br \/>the doctor&#8217;s name so here for the label<br \/>I will type doctor&#8217;s name then I will<br \/>press tab to go to the next input which<br \/>is name and this is the internal name<br \/>that WordPress uses for our custom field<br \/>you can see that once I pressed tab this<br \/>was automatically filled in by pots so<br \/>we don&#8217;t need to worry about that that&#8217;s<br \/>perfect how it is right now and also for<br \/>the fill type we can leave it to plain<br \/>text so I&#8217;ll click on save field and<br \/>then I can go ahead and click on add<br \/>field to add our second one this one is<br \/>going to be doctors jobs so I&#8217;ll write<br \/>here doctors job and once again I&#8217;ll<br \/>press tab to fill in the name leave it<br \/>on plain text and click on save field<br \/>the third field that we&#8217;re going to<br \/>create is going to be the doctors phone<br \/>number so I&#8217;ll click here on add field<br \/>and for the label I&#8217;ll write doctors<br \/>phone number fill in the name of<br \/>matically and here for the field type I<br \/>will change from plain text to fold like<br \/>this and then click on save field if you<br \/>look on the screen right now you will be<br \/>able to see how these fields will look<br \/>like on the front end now I want to add<br \/>a few more fields but just to speed<br \/>things up I will add them on phosphoryl<br \/>and then I&#8217;ll explain what I did<br \/>so now all of our fields are created you<br \/>can see we have a few more field tabs<br \/>here we have email that we use for the<br \/>doctor&#8217;s email we have website that we<br \/>use anywhere that we need a link for<br \/>which is Facebook doctors video URL and<br \/>the doctors website and we also have<br \/>this file image video field type which<br \/>we use for video overlay this one will<br \/>let us upload a picture for this custom<br \/>field so now that all of our fields are<br \/>created I can come here and click on<br \/>save pod and our pod was successfully<br \/>saved so I will navigate again to posts<br \/>all posts and I will click Edit on the<br \/>first one and now you can see if we<br \/>scroll down the page we&#8217;ll have this<br \/>more fields section where we have all of<br \/>our fields that we just created so now<br \/>we can start filling those in and I&#8217;ll<br \/>start with the doctor&#8217;s name I&#8217;ll just<br \/>copy it from here from the top and paste<br \/>it here then the doctors job which is a<br \/>chief medical officer<br \/>[Music]<br \/>and I&#8217;ll quickly do the other so we<br \/>don&#8217;t waste any time filling in<br \/>information<br \/>okay so we&#8217;ve filled in all the fields<br \/>and now I will click here on add file to<br \/>choose the video overlay we already have<br \/>some uploading images which is this one<br \/>and I&#8217;ll click on add file and now all<br \/>of our fields are done and filled in<br \/>with information so I can scroll back up<br \/>and click on update and then we can<br \/>navigate over to Elementor and start<br \/>creating our single template so I&#8217;ll<br \/>hover over Elementor and click on my<br \/>templates and you can see that here we<br \/>already have the header and the footer<br \/>created I will not go over how to create<br \/>those because on the channel there are<br \/>plenty of tutorials about creating<br \/>headers and footers so instead I will<br \/>just come here the top I click on add<br \/>new then here for the template type I<br \/>will select single and for the post type<br \/>I will select post I will also give this<br \/>template a name so it&#8217;s easier to find<br \/>like this and then I will click on<br \/>create template now Elementor already<br \/>opened for us the blocks library but we<br \/>don&#8217;t want to use any blocks so I will<br \/>click close here at the top and we are<br \/>now on our page so a few things before<br \/>we actually start creating the page is I<br \/>will go here in the hamburger icon and I<br \/>will click color picker and I&#8217;ve already<br \/>set up a few colors here that I need for<br \/>my design which is like this blue this<br \/>dark blue this gray color all you have<br \/>to do to select those you just click on<br \/>one of the colors that is here<br \/>input your color and then at the top<br \/>click apply so you will have them in the<br \/>color picker I&#8217;ve already done that so<br \/>I&#8217;m not gonna change them all so if I<br \/>return here and click on default phones<br \/>you can see that for the primary<br \/>headline we have monster rat and also<br \/>for the secondary headline so I&#8217;ve<br \/>already chosen some default phones for<br \/>this design now what I want to do is<br \/>come here at the bottom click on the<br \/>settings wheel and for the style of the<br \/>page I will choose a background type<br \/>classic and I will change the color to<br \/>ef ef ef<br \/>which is this light gray color and one<br \/>last thing I will click here on the<br \/>eyeball icon choose the settings and<br \/>make sure that my preview is for this<br \/>doctor dr. Alice and I will click apply<br \/>and preview okay so I&#8217;ll start by<br \/>creating a new section here I will click<br \/>on the plus sign and I will choose a<br \/>free column section then I&#8217;ll go to the<br \/>first column and I&#8217;ll make it 15% in<br \/>width and for the second one I will do<br \/>column I&#8217;m going to drag in the featured<br \/>image widget so I&#8217;ll return to the<br \/>widgets panel and I&#8217;ll drag in the<br \/>featured image I&#8217;ll make sure that the<br \/>image size is set to large and the<br \/>alignment is set to left then I&#8217;ll go<br \/>over to the style tab make the width of<br \/>the image 100 percent and then for the<br \/>border radius here at the bottom I will<br \/>do of 500 border ranges all around to<br \/>make it a circle next inside of the<br \/>second column I will add in a heading<br \/>widget so I&#8217;ll written the widgets panel<br \/>and now drag in a heading widget here<br \/>and for the title I will click here on<br \/>the dynamic link scroll all the way down<br \/>and choose pods field then I&#8217;ll click<br \/>again here in the input and for the key<br \/>I will choose the doctor&#8217;s name you can<br \/>see we have the doctor&#8217;s name coming<br \/>dynamically from our post<br \/>I will then move over to the style tab I<br \/>will change the color to our dark blue<br \/>color here and then for typography I<br \/>will make it 25 pixels a size a weight<br \/>of 500 and 0.82 letter spacing great now<br \/>under this I will add yet another<br \/>heading so I&#8217;ll drag it inside for the<br \/>title I&#8217;ll once again do dynamic and<br \/>choose pods field but this time for the<br \/>key outs like the doctors job I will<br \/>then go over to the style tab and for<br \/>the text color I will do this gray color<br \/>here then for typography I will make it<br \/>a weight of 409 aligned height then I<br \/>will move over to the advanced tab I&#8217;ll<br \/>link the margin values and I will do<br \/>minus 10 pixels margin to the top and 35<br \/>pixels margin to the bottom perfect<br \/>now under this I will add in an inner<br \/>section so I&#8217;ll return to the widgets<br \/>panel and I will drag in an inner<br \/>section under this I will go to the<br \/>first column of this inner section and I<br \/>will make it 70% in width<br \/>meaning that the second one is 30% and<br \/>then inside of it I will drag in a<br \/>bottom we can also close the previous<br \/>settings here at the bottom because we<br \/>don&#8217;t need them then for the text here I<br \/>will select dynamic I&#8217;ll scroll down to<br \/>the pods field and for the key I will<br \/>choose the doctors phone number I will<br \/>also expand here the Advanced Options<br \/>and in the before input I will write<br \/>phone and a column and a space that way<br \/>we provide context for our text inside<br \/>of the button and this phone text will<br \/>be rendered in front of any phone number<br \/>that we have in the post all right so I<br \/>will close this up I will make the<br \/>button justified and I will change this<br \/>size from small to medium then I&#8217;ll go<br \/>over to the style tab I&#8217;ll make sure<br \/>that the text color is set to white and<br \/>the background color is set to our green<br \/>color like so then I will select a solid<br \/>border of one pixel and for the color I<br \/>will do again our green color perfect<br \/>then I&#8217;ll click here on the box shadow<br \/>scroll down to see and for the color I<br \/>will choose this grey color here and I<br \/>will reduce the opacity to 30% if I come<br \/>here to the RGB a you can see the last<br \/>value here is the opacity so right now<br \/>is 0.5 which means is at 50% as you can<br \/>see from this slider as well so I&#8217;ll<br \/>just do 0.3<br \/>and now it&#8217;s reduced to 30% then I&#8217;ll<br \/>change here the horizontal &#8211; to the<br \/>vertical &#8211; &#8211; and the blur &#8211; 20 and I<br \/>will have a very nice subtle drop shadow<br \/>for our body then I will select the<br \/>column in which this button is placed I<br \/>go over to the advanced step and then<br \/>we&#8217;ll onok the margin and the padding<br \/>values and I will just make sure that<br \/>our margin right is set to 10 pixels<br \/>like so now instead of the second column<br \/>of this intersection I&#8217;ll drag in<br \/>another button widget so I&#8217;ll return the<br \/>widgets panel and I&#8217;ll drag in the<br \/>button here for the text I will write<br \/>here email now I&#8217;ll click here on the<br \/>dynamic link for our link input and I&#8217;ll<br \/>scroll all the way to the bottom where<br \/>we can see we have the pods URL field so<br \/>I&#8217;ll click on that and then for the key<br \/>I will choose the doctors email then<br \/>I&#8217;ll once again make it justified and<br \/>the size of medium I&#8217;ll go over to the<br \/>style tab and for the text color I will<br \/>choose our blue color and then for the<br \/>background color I&#8217;ll just come here and<br \/>reduce the opacity to zero to make it<br \/>transparent then I will toast this up<br \/>and I&#8217;ll select a solid border make it 1<br \/>pixel all around and for it I will<br \/>choose our blue color here but I will<br \/>reduce the opacity down to 45% so once<br \/>again we can use this value here right<br \/>this up and I will select the Box shadow<br \/>for the color I&#8217;ll do once again our<br \/>blue color but this time on only 25%<br \/>opacity and then I will do a horizontal<br \/>of to a vertical of 2 and the blur of 10<br \/>perfect now I&#8217;ll select this column here<br \/>and under advanced I&#8217;ll make sure the<br \/>margins and padding&#8217;s are set to zero<br \/>all around and then just do a 10 pixel<br \/>margin to the left<br \/>then I will select the intersection here<br \/>and I&#8217;ll make sure that the column gap<br \/>is set to no gap I will also go under<br \/>advanced and on Ling the padding values<br \/>to make sure it is zero all around now<br \/>inside of our third column I will drag<br \/>in another intersection so I&#8217;ll return<br \/>to the widgets panel and I&#8217;ll drag in an<br \/>intersection I&#8217;ll make the first column<br \/>inside 35% in width<br \/>meaning the second one is 65% and then<br \/>inside of that I will drag in ahead in<br \/>widget for the title I&#8217;ll write<br \/>specialty then I&#8217;ll go over to the style<br \/>tab for the text color I will choose<br \/>this dark grey color we have here and<br \/>for typography I will make it 12 pixels<br \/>in size a weight of 700 I will transform<br \/>it to uppercase and they will do 0.9<br \/>letter spacing like this I will then go<br \/>over to the Advanced tab I&#8217;ll link the<br \/>margin values and do a margin bottom of<br \/>-5 pixels then I will come here right<br \/>click on the handle and click duplicate<br \/>to make a copy of this then all I will<br \/>do is just change the title from<br \/>specialty to education perfect then in<br \/>the second column I will drag in another<br \/>heading widget so I&#8217;ll turn to the<br \/>widgets panel and I will drag it inside<br \/>this time for the title we&#8217;ll click on<br \/>the dynamic link and choose sports<br \/>fields here at the bottom and for the<br \/>key I will choose specialty<br \/>I will then go over to the style tab<br \/>I&#8217;ll choose a light gray color which is<br \/>this one here and for typography I will<br \/>do 12 pixels in size a weight of 409 lat<br \/>your spacing then I&#8217;ll once again go<br \/>over to the Advanced tab and I will own<br \/>in the margin values and outlook -5<br \/>margin to the bottom great now I&#8217;ll come<br \/>here I&#8217;ll right-click on the handle do<br \/>dublicate and this time come here to the<br \/>pottsfield<br \/>and change the key from specialty to<br \/>education there we go now I&#8217;ll select<br \/>the intersection and I&#8217;ll make sure that<br \/>the column gap is setting no gap and the<br \/>contact position is at the middle under<br \/>this I will drag in a divider so I will<br \/>return to the widgets panel and I will<br \/>search for divider and I will just drag<br \/>it inside just like this then I will<br \/>change the color of these two our first<br \/>blue color here and then I&#8217;ll decrease<br \/>the opacity to 40% perfect then I&#8217;ll<br \/>make the width<br \/>tab and they were learning the mark<br \/>values and I will do 20 margin to the<br \/>top and -10 margin to the bottle then<br \/>under this I will add in an icon widget<br \/>I&#8217;ll change the icon to the Facebook<br \/>square icon<br \/>if you can stay on default and here for<br \/>the link I will click on the dynamic tag<br \/>scroll all the way to the bottom and<br \/>choose sports URL field and then for the<br \/>key I will choose Facebook then I&#8217;ll<br \/>align it to the left go over to the<br \/>style tab change the size to 20 to make<br \/>it smaller and then for the primary<br \/>color I will make it our blue color<br \/>perfect now we just did to add some<br \/>margin and padding around so I&#8217;ll select<br \/>the first column here go over to the<br \/>Advanced tab and I will awning the<br \/>padding values and I will do 35 padding<br \/>to the top and to the bottom 10 padding<br \/>to the right and 30 padding to the left<br \/>like this then for the second column<br \/>I&#8217;ll come here to the Advanced tab once<br \/>again and then do 30 all around then I<br \/>will unlink the values and change the<br \/>right one to 90 great and of course our<br \/>third column here where we will have<br \/>just 30 all around like this then I<br \/>would select the section and now it&#8217;s<br \/>time to style this little bit so I&#8217;ll<br \/>change the content width to 11 40 pixels<br \/>then I will change the columns gap to no<br \/>gap and the content position to middle<br \/>I&#8217;ll now go under the style tab and for<br \/>the background type I&#8217;ll do classic and<br \/>I&#8217;ll make the color white like this I<br \/>will then click here on border and I&#8217;ll<br \/>make the border radius 3 pixels all<br \/>around to round up the corners a little<br \/>bit and now we will add a box shadow so<br \/>I&#8217;ll click here in the box shadow for<br \/>the color I will do black with 15<br \/>percent opacity and we will have a<br \/>horizontal of to a vertical of 2 and the<br \/>blur of 5 then under hover here I will<br \/>change the settings to a horizontal of<br \/>to a vertical of 6 and the blur of 10<br \/>also make sure that the color is the<br \/>same black with 50% opacity and that the<br \/>transition duration is set to<br \/>point three now we have this nice drop<br \/>shadow for our section and when we hover<br \/>over it we have this depth effect all<br \/>right so we can continue with our second<br \/>section so I&#8217;ll click the plus sign here<br \/>and I&#8217;ll choose a one column section<br \/>then inside of here I will add in a new<br \/>heading so I&#8217;ll go over to the widgets<br \/>panel and out dragging a heading inside<br \/>for the title I&#8217;ll write more<br \/>information then I&#8217;ll navigate to the<br \/>style tab and for the text color I will<br \/>do our dark blue color and under<br \/>typography I will make it 15 pixels in<br \/>size a weight of 500 I&#8217;ll transform it<br \/>to uppercase and then I&#8217;ll give it zero<br \/>point eight letter spacing then I&#8217;ll go<br \/>over to the Advanced tab I will awning<br \/>the margin values and that will give it<br \/>&#8211; 7 March into the bottle now I will<br \/>select once again the section I&#8217;ll<br \/>change the content position from default<br \/>to middle and then I will go under<br \/>advanced I will olling the margin values<br \/>once again and I will do 50 margin to<br \/>the top and 20 margin to the bottom and<br \/>now our second section is done so we can<br \/>continue on with our third and final<br \/>section so I will click once again a<br \/>plus sign and I will choose a three<br \/>column section then I will select the<br \/>first column and I will choose a column<br \/>width of 30% then for the second one I<br \/>will do 45% meaning that the third one<br \/>is 25% with now inside of the first<br \/>column I want to drag in an inner<br \/>section so I&#8217;ll go back to the widgets<br \/>panel and I will drag it inside for this<br \/>intersection we only want one column<br \/>inside of it so I&#8217;ll right click on the<br \/>second one and click delete then inside<br \/>of here I will drag in a new heading and<br \/>for the title I will write contact<br \/>then I&#8217;ll go over to the style tab and I<br \/>will make it our dark blue color and for<br \/>typography I will make it 20 pixels in<br \/>size a weight of 500 I&#8217;ll transform it<br \/>to uppercase and that will give it zero<br \/>point eight letter spacing then I&#8217;ll go<br \/>over to the Advanced tab I will own in<br \/>the margin values and I will give it 40<br \/>pixels marching to the bottom so we have<br \/>a bit more space between the elements<br \/>then under this I will drag in an icon<br \/>box widget so I&#8217;ll go over to the<br \/>widgets panel and I will search for it<br \/>the first thing that I want to do is get<br \/>rid of the description because we won&#8217;t<br \/>need that<br \/>so I&#8217;ll just delete it now I will change<br \/>the icon from star to WordPress this one<br \/>I&#8217;ll change the view from default to<br \/>stack and the shape can stay on circle<br \/>then for the title I&#8217;ll write website<br \/>and here for the link I will click on<br \/>the dynamic link button I&#8217;ll scroll all<br \/>the way to the bottom of the list and<br \/>choose pods URL field and for the key<br \/>here I will choose doctors website so<br \/>this will now link to the doctors<br \/>website I will also align this to the<br \/>left like this and then I&#8217;ll go over to<br \/>the style tab for the primary color I<br \/>will choose our blue color the lighter<br \/>one then I&#8217;ll give it a spacing of 10<br \/>and the size of 11 to make it much<br \/>smaller<br \/>I will then expand the content here I&#8217;ll<br \/>do the vertical alignment of the middle<br \/>and align left then for the title I will<br \/>do here 3 spacing our dark blue color<br \/>and under typography I will make it 14<br \/>pixels in size with a weight of 300 and<br \/>over to the Advanced tab owning the<br \/>module values and I will do minus 10<br \/>pixel margin to the bottom now we need<br \/>three more copies of this item box so<br \/>I&#8217;ll come here to the handle<br \/>click and choose duplicate and I will do<br \/>that three times so we have four in top<br \/>then I will select the second one and<br \/>for the icon and will change it to sand<br \/>which is this paper plane icon for the<br \/>title here I will choose dynamic this<br \/>time scroll all the way down and choose<br \/>pods field and for the key I will do<br \/>doctors address then I will also a link<br \/>this link to value here because we don&#8217;t<br \/>want these two link anywhere<br \/>perfect now on to the third one here I<br \/>will change the icon to envelope Oh<br \/>which is this one the O stands for<br \/>outline then for the title once again we<br \/>will choose a pods field and this time<br \/>is going to be the doctors email and for<br \/>the link here I will do once again the<br \/>doctors email so this shows the doctor<br \/>emails but also links to the doctors<br \/>email great and now the final one I will<br \/>select it for the icon I will do phone<br \/>for the title once again a pods field<br \/>and the key will be a doctor&#8217;s phone<br \/>number and we want no link just like so<br \/>now it&#8217;s time to style the intersection<br \/>but as you can see these are outside of<br \/>the intersection so I&#8217;ll just quickly<br \/>drag them inside then I will select the<br \/>intersection I&#8217;ll change the content<br \/>position to middle then I&#8217;ll go over to<br \/>the style tab for the background color I<br \/>will choose classic and I will choose<br \/>white then I&#8217;ll go over to the border<br \/>and for the border radius I will do<br \/>three pixels all around to round up the<br \/>corners a little bit then I&#8217;ll click<br \/>here on the Box shadow and on the color<br \/>and right now you can see we have zero<br \/>zero zero zero point five that&#8217;s black<br \/>on 50% opacity and we want to change it<br \/>to 15 percent opacity so adjust here<br \/>I&#8217;ll just write 15 0.15 and now our<br \/>black is on 15<br \/>percent opacity then I will do a<br \/>horizontal of two vertical of two and a<br \/>blur of eight to have this nice soft<br \/>shadow now I&#8217;ll go over to the hover<br \/>here Rick once again on box shadow make<br \/>sure that is the same color black on 15%<br \/>opacity and I will do a horizontal of to<br \/>a vertical of six and a blur of ten so<br \/>now when we hover we have this nice<br \/>effect with the shadow also make sure<br \/>that the transition duration is set to<br \/>zero point three seconds now I&#8217;ll<br \/>navigate over to the Advanced tab and I<br \/>will awning the margin and the pegging<br \/>values for the margin we want to have 40<br \/>pixels to the bottom to make a bit of<br \/>space before the next element and for<br \/>the padding we will have 40 pixels to<br \/>the top and to the bottom and 35 pixels<br \/>to the left and to the right just like<br \/>so great now under this we want to add a<br \/>divider so I will just duplicate this<br \/>one here I will right click and<br \/>duplicate and I will just drag it in<br \/>under our intersection just like so now<br \/>I will change the width to 100% to span<br \/>all the column width I will also change<br \/>the gap from 15 to 5 and under the<br \/>Advanced tab I will do zero margin to<br \/>the top and to the bottom is going to be<br \/>heading under this divider so I&#8217;ll go<br \/>back to the widgets panel and I will<br \/>drag a heading inside and for the title<br \/>I will write related doctors<br \/>I&#8217;ll go over to the style tab I&#8217;ll<br \/>choose our dark blue color now for<br \/>typography<br \/>I will do 15 pixels in size a weight of<br \/>and I will give it zero point eight<br \/>letter spacing under this heading we<br \/>don&#8217;t want to drag in a posts widget so<br \/>I&#8217;ll return to the widgets panel and I<br \/>will search for posts and I will just<br \/>drag it under you can see that this<br \/>already displays some information but we<br \/>want just to style it a little bit so<br \/>the first thing that I want to do is<br \/>change the columns from three to one and<br \/>the post per page from six to two then I<br \/>will change the image position from top<br \/>to left the image size can stay on<br \/>medium the image ratio should be one and<br \/>the image with 25% great now here we do<br \/>want to show the title and the excerpt<br \/>we do not want to show animated data so<br \/>I&#8217;ll get rid of the data and the<br \/>comments and for the read more button we<br \/>want it to be on but we want to change<br \/>the read more text from read more to<br \/>view profile like this then I&#8217;ll go over<br \/>to the query and make sure the source is<br \/>set to post here for other categories<br \/>and times we don&#8217;t have to worry about<br \/>anything the ordered by should be by<br \/>date descending if you want to show the<br \/>latest doctors and here it is very<br \/>important for the exclude to exclude the<br \/>current post because we do not want to<br \/>show the same doctrine that we already<br \/>on and also take on avoid duplicate so<br \/>you don&#8217;t have any duplicate doctors<br \/>order pagination we want none so we will<br \/>just leave pagination none I&#8217;ll then go<br \/>over to the style tab I will align this<br \/>to the left and I will change the rows<br \/>gap to 25 to bring them a little bit<br \/>closer together then under image here I<br \/>will do 100 pixels border radius all<br \/>around that means that the image is<br \/>going to be round and now we will use<br \/>CSS filters to achieve a really nice<br \/>effect so I&#8217;ll just be here<br \/>or CSS filters and for the saturation<br \/>slider I will drag it all the way to the<br \/>left to zero now you can see that our<br \/>image is black and white and if I go to<br \/>the hover I just want to make sure that<br \/>saturation is set to 100 what that will<br \/>do is it will show a black and white<br \/>image but when we hover over it it will<br \/>bring back color into the image so it<br \/>have this really nice subtle effect then<br \/>I will click on content for the title or<br \/>under typography I will make it 13<br \/>pixels in size and a weight of 300 then<br \/>for the excerpt I will change it to 12<br \/>pixels in size and to a weight of 204<br \/>the read more button I will change the<br \/>color to our light blue color this one<br \/>here and on the typography I&#8217;ll make it<br \/>a weight of 400 great so now this is<br \/>done as well and we can move on to the<br \/>second column the first thing that we<br \/>want to drag inside here is a heading so<br \/>I&#8217;ll return to the widgets panel and<br \/>I&#8217;ll drag in a heading inside of the<br \/>second column for the title I will write<br \/>about now I&#8217;ll go over to the style tab<br \/>and for the text color I will do our<br \/>dark blue color and under typography I<br \/>will make it 20 pixels in size a weight<br \/>of 500 I&#8217;ll transform it to uppercase<br \/>and that will give it once again 0.8 the<br \/>letter spacing then I&#8217;ll go over to the<br \/>Advanced tab calling the margin values<br \/>and I will give it 40 pixels margin to<br \/>the bottom so you have a bit more space<br \/>between the elements then under this I<br \/>want to drag in the post content widget<br \/>so I&#8217;ll return to the widgets panel and<br \/>you can see we have here post content<br \/>and I will just drag it inside this<br \/>widget automatically brings back<br \/>information that is inside of our post<br \/>content for the text color I will change<br \/>it to this lighter gray color and under<br \/>typography I will just change the size<br \/>to 13 pixels and the line height to 1.7<br \/>so we have a bit more breathing room<br \/>between the lines<br \/>great now under this we want another<br \/>divider so I&#8217;ll just duplicate this one<br \/>and drag it in I will just change here<br \/>the gap to seven and under advanced I<br \/>will leave zero margin all around then I<br \/>will drag in a video widget under this<br \/>so I&#8217;ll search for video and I will drag<br \/>it in we can leave here the source to<br \/>YouTube but for the URL we&#8217;ll click on<br \/>the dynamic link here scroll all the way<br \/>down and choose pods URL filled and for<br \/>the key we will choose doctors video URL<br \/>and now you can see that the video was<br \/>updated with our dynamic link here we<br \/>can specify the start time and the end<br \/>time for the video so I can just do for<br \/>example forty-three seconds for the<br \/>start and 150 seconds to the end then I<br \/>will change here some settings so we do<br \/>not want this to autoplay but we want it<br \/>to be muted<br \/>we do not want loop we do want player<br \/>controls video info and modest branding<br \/>as well as suggested videos but I will<br \/>leave privacy mode to know then I&#8217;ll<br \/>click on the image overlay and I will<br \/>turn it on and here for the dynamic link<br \/>I will click scroll all the way down and<br \/>choose sports image field and for the<br \/>key here we have just one which is the<br \/>video overlay that we uploading in the<br \/>back end and you can see that now we<br \/>have this beautiful image as our overlay<br \/>for the video then well I see load can<br \/>stay to off in the size fool we want to<br \/>show the play icon and we do not want to<br \/>show a light box I will go over to the<br \/>style tab and just make sure that the<br \/>aspect ratio is set to 16 by 9<br \/>great so our second column is done as<br \/>well let&#8217;s just I like a little bit so I<br \/>will select the column and I&#8217;ll go over<br \/>to the style tab I will choose a<br \/>background type of classic and don&#8217;t<br \/>make the color white<br \/>then I will go over to the border and I<br \/>will do three pixels border-radius all<br \/>around to round the corners a little bit<br \/>then I&#8217;ll click on the box shadow and<br \/>once again we&#8217;ll have the same settings<br \/>so I&#8217;ll make it black 15 percent opacity<br \/>then give it a horizontal of two<br \/>vertical of two and a blur of eight and<br \/>under hover one scan black on 15 percent<br \/>opacity but this time a horizontal of to<br \/>a vertical of six and a blur of ten and<br \/>transition duration 0.3 seconds then<br \/>I&#8217;ll go over to the Advanced tab awning<br \/>the margin and the padding values and<br \/>for the margin I will give it 35 pixels<br \/>to the right to narrow it a little bit<br \/>and for the padding we will do 40 pixels<br \/>to the top and then 35 pixels on all the<br \/>other sides perfect so this is now that<br \/>as well<br \/>and we can now move on on to the third<br \/>column so the first thing that I want to<br \/>do is just add in another intersection<br \/>so I&#8217;ll go over to the widgets panel and<br \/>I will drag it inside we only need one<br \/>column so I&#8217;ll do the second one from<br \/>the inner section then I will drag in an<br \/>icon widget so I&#8217;ll search for it and I<br \/>will drag it inside I will change it<br \/>from the start to the comments icon then<br \/>under style I will choose a primary<br \/>color of our lighter blue color and then<br \/>I will decrease the opacity to 25% so<br \/>I&#8217;ll just drag in the slider a little<br \/>bit and then here I will type 25 like<br \/>this then under this I will drag in a<br \/>heading widget so I&#8217;ll back to the<br \/>widgets panel and I will drag it inside<br \/>I will right get started now and I will<br \/>align it to the center then I will go<br \/>over to the style tab and for the text<br \/>color I will choose our lighter gray<br \/>color<br \/>and under typography I&#8217;ll make it 20<br \/>pixels in size<br \/>I&#8217;ll give it away of 500 I&#8217;ll transform<br \/>it to uppercase and give it 0.8 letter<br \/>spacing now under this I will drag in<br \/>another heading widget like so then here<br \/>for the title I&#8217;ll just paste in some<br \/>lorem ipsum text in dummy text like this<br \/>maybe it&#8217;s a bit too much so out it in<br \/>the last part yes I&#8217;d like so I will<br \/>align it to the center then go over to<br \/>the style tab and for the text color I<br \/>will choose our light gray color and<br \/>then I will reduce the opacity to 70%<br \/>like this then under typography I&#8217;ll<br \/>change the size to 13 pixels I&#8217;ll give<br \/>it a weight of 300 and I will do 1.7<br \/>line height you&#8217;ll have a bit more<br \/>breathing room now under this we want to<br \/>drag in a button so I&#8217;ll return to the<br \/>widgets panel and I will search for the<br \/>button and drag it inside then for the<br \/>text I will right sign up I will align<br \/>it to the center and change the size to<br \/>medium then for the icon I will search<br \/>for a long arrow right which is this one<br \/>here and I will change the position of<br \/>the icon to be after the text and I will<br \/>give it 15 spacing like so then I&#8217;ll go<br \/>over to the style tab I&#8217;ll make sure<br \/>that the text color is white and for the<br \/>background color I will do our blue<br \/>color like this then I&#8217;ll select a box<br \/>shadow for the color here R which is our<br \/>light grey color and then crease the<br \/>opacity to be 30% like this<br \/>and we&#8217;ll then give it a horizontal of<br \/>to a vertical of two and the blur of 20<br \/>so now this is a very very subtle shadow<br \/>for the for this button great now under<br \/>this button we just want to drag in one<br \/>more heading so I&#8217;ll return to the<br \/>widgets panel and I&#8217;ll drag in a heading<br \/>under it for the title I&#8217;ll right sign<br \/>in then I will align it to the center<br \/>I&#8217;ll go over to the style tab and for<br \/>the text color I will do our light gray<br \/>color then under typography I&#8217;ll make it<br \/>I&#8217;ll give it a weight of 500 transfer me<br \/>to uppercase and then do 0.8 letter<br \/>spacing then I&#8217;ll go over to the<br \/>Advanced tab I will awning the marching<br \/>values and I will give it &#8211; 5 pixels top<br \/>margin to bring it a little bit closer<br \/>to our button now this is done as well<br \/>so we can just style the inner section<br \/>itself so I will click on it and I&#8217;ll<br \/>just change the content position to<br \/>middle then I will go over to the style<br \/>tab I will choose a background type of<br \/>classic and I&#8217;ll make it white like this<br \/>then I will click on the border and I<br \/>will choose a bold type of solid I will<br \/>make it 1 pixel in width and I will<br \/>change the color to our blue color then<br \/>for the border it is able to do 3 pixels<br \/>on the round to round up the corners<br \/>once again then for the box shadow once<br \/>again the same settings so it will be on<br \/>black on 15 percent opacity with a<br \/>horizontal of two of vertical of 2 and<br \/>the blur over 8 and under cover it will<br \/>be the same black on 15 percent opacity<br \/>with a horizontal of 2 vertical of 6 and<br \/>the blur of 10 and 0.3 seconds<br \/>transition duration now I will go over<br \/>to the Advanced tab here and for the<br \/>margin I will do 50 pixels to the bottom<br \/>so we have a bit more space between this<br \/>and the next element and under padding<br \/>we will do<br \/>forty pixels to the top L to the bottom<br \/>and 35 pixels to the right and to the<br \/>left right now energies we want to drag<br \/>in another inner section so I&#8217;ll just<br \/>return to the widgets panel and I&#8217;ll<br \/>drag in an inner section here once again<br \/>I will delete this second column because<br \/>we only need one and here I&#8217;ll drag in a<br \/>heading I will right share in the title<br \/>then I&#8217;ll go over to the style tab and<br \/>for the text color I will do our dark<br \/>blue color and under typography I&#8217;ll<br \/>make it 15 pixels in size I&#8217;ll give it a<br \/>weight of 500 transfer me to uppercase<br \/>and then 0.8 to letter spacing perfect<br \/>then under this we want to drag in this<br \/>share buttons widget so I&#8217;ll return to<br \/>the widgets panel and I will search for<br \/>share button and drag it inside as you<br \/>can see here on the left side we now<br \/>have four buttons Facebook Google+<br \/>Twitter and LinkedIn but we want to<br \/>change a few things here so the first<br \/>thing that we want to change is the<br \/>Google+ one you want to change to email<br \/>and also we want to add our fifth item<br \/>so on just click on add item and for the<br \/>network I will choose what&#8217;s up so now<br \/>have five buttons Facebook email Twitter<br \/>LinkedIn and what&#8217;s up now it&#8217;s time to<br \/>style this a little bit so here for the<br \/>view I will change from icon and text to<br \/>just the icon then the skin I will<br \/>change to flat the shape will be a<br \/>circle and the alignment will be<br \/>justified the great then I will go over<br \/>to the style tab and I will change the<br \/>column gap to zero<br \/>I&#8217;ll make the button size 1 then here<br \/>for the color I will change from<br \/>official color custom color and for the<br \/>secondary color I will choose our blue<br \/>color and for the primary color I will<br \/>just drag it to zero opacity so we only<br \/>show the icon not the background great<br \/>now I will go over to the Advanced tab I<br \/>will<br \/>the moral values and I will give it &#8211; 15<br \/>margin to the left perfect now this is<br \/>done we only have to stall the<br \/>intersection itself so I will select it<br \/>and I will change the content position<br \/>to middle then I&#8217;ll go over to the style<br \/>tab I will give it a classic background<br \/>type with a color of white and under the<br \/>border I will choose three pixels all<br \/>around for the border radius then I&#8217;ll<br \/>click on the box shadow and the same<br \/>settings as before<br \/>black on 15 percent opacity with a<br \/>horizontal of two vertical of two and<br \/>the blur of eight and on hover black on<br \/>two vertical of six and blur of 10 with<br \/>now I&#8217;ll just go over to the Advanced<br \/>tab I will all in the margin and padding<br \/>values for the margin I will make sure<br \/>that is zero to the top and to the<br \/>bottom and for the padding I will do<br \/>actually 20 pixels all around then I&#8217;ll<br \/>go over here to this text element and<br \/>delete a little bit of it because it&#8217;s<br \/>too much we don&#8217;t want that much text<br \/>okay I will now go to our first column<br \/>here I&#8217;ll go over to the Advanced tab<br \/>and I will unlink the margin and the<br \/>padding values then I will give it 35<br \/>pixels margin to the right to make it a<br \/>bit more narrow after that I will select<br \/>this column inside of this inner section<br \/>and I will go over to the Advanced tab<br \/>then I will earning the padding value so<br \/>it&#8217;s zero all around perfect now I will<br \/>go over to the third column click on<br \/>advanced and I will earning the margin<br \/>and the padding values to have zero all<br \/>around once again great now I will<br \/>select the section click on advanced and<br \/>I will online the margin value so we<br \/>have zero to the top and the bottom<br \/>perfect so now our template is done you<br \/>can see we have a lot of information<br \/>coming dynamically from our post<br \/>this beautiful video with an overlay<br \/>image to share buttons the card here at<br \/>the top with a phone number the email<br \/>specialty and education and everything<br \/>in between great so the last thing that<br \/>we have to do is to publish this so I<br \/>will click here on publish at the bottom<br \/>and this is the display condition screen<br \/>and because at the beginning when we<br \/>created the template we have selected<br \/>that we want to work with our post post<br \/>type you can see that here we have<br \/>include all posts all which is exactly<br \/>what we need so all we have to do is<br \/>just click on publish here okay so our<br \/>document is now live so we can return to<br \/>the dashboard I&#8217;ll click here on the<br \/>hamburger icon and click exit to<br \/>dashboard and I will go now to view our<br \/>website and we can now see the list of<br \/>Dockers on our front page so I will<br \/>click on the first one which is the one<br \/>that we&#8217;ve worked on and you can see the<br \/>beautiful template that we just created<br \/>but right now if I click for example on<br \/>another doctor light doctor Ellie gold<br \/>here to view his profile you can see<br \/>that we have the exact same design here<br \/>and also for example for doctor grace so<br \/>this was my elementary imports tutorial<br \/>about custom field I really hope you<br \/>enjoy it and that you learn something<br \/>new out of it if you have any questions<br \/>don&#8217;t hesitate to leave them in a<br \/>comment box below I&#8217;ll try my best to<br \/>answer them thanks for watching as you<br \/>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 PODS (a Custom Fields plugin) to create a dynamic personal website for WordPress. You\u2019ll learn how to: \u2713 Use dynamic content \u2713 Create custom fields with PODS \u2713 Edit a single post template with Elementor Transcript Heffron this is Paul from bring web.com and I\u2019m [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":4128,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[41],"class_list":["post-2475","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dynamic-design","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 Dynamic Personal Website - 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-dynamic-personal-website-in-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create a Dynamic Personal Website - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this tutorial, we combine Elementor and PODS (a Custom Fields plugin) to create a dynamic personal website for WordPress. You\u2019ll learn how to: \u2713 Use dynamic content \u2713 Create custom fields with PODS \u2713 Edit a single post template with Elementor Transcript Heffron this is Paul from bring web.com and I\u2019m [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/create-a-dynamic-personal-website-in-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-22T06:58:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-22T09:13:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Create-a-Dynamic-Personal-Website-2.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1921\" \/>\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=\"34 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create a Dynamic Personal Website - 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-dynamic-personal-website-in-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"Create a Dynamic Personal Website - Academy","og_description":"Overview Transcript Overview In this tutorial, we combine Elementor and PODS (a Custom Fields plugin) to create a dynamic personal website for WordPress. You\u2019ll learn how to: \u2713 Use dynamic content \u2713 Create custom fields with PODS \u2713 Edit a single post template with Elementor Transcript Heffron this is Paul from bring web.com and I\u2019m [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/create-a-dynamic-personal-website-in-wordpress\/","og_site_name":"Academy","article_published_time":"2021-06-22T06:58:40+00:00","article_modified_time":"2023-02-22T09:13:23+00:00","og_image":[{"width":1921,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Create-a-Dynamic-Personal-Website-2.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"34 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/create-a-dynamic-personal-website-in-wordpress\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/create-a-dynamic-personal-website-in-wordpress\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"Create a Dynamic Personal Website","datePublished":"2021-06-22T06:58:40+00:00","dateModified":"2023-02-22T09:13:23+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/create-a-dynamic-personal-website-in-wordpress\/"},"wordCount":7824,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/create-a-dynamic-personal-website-in-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Create-a-Dynamic-Personal-Website-2.jpg","keywords":["Guides and Tutorials"],"articleSection":["Dynamic Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/create-a-dynamic-personal-website-in-wordpress\/","url":"https:\/\/elementor.com\/academy\/create-a-dynamic-personal-website-in-wordpress\/","name":"Create a Dynamic Personal Website - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/create-a-dynamic-personal-website-in-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/create-a-dynamic-personal-website-in-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Create-a-Dynamic-Personal-Website-2.jpg","datePublished":"2021-06-22T06:58:40+00:00","dateModified":"2023-02-22T09:13:23+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/create-a-dynamic-personal-website-in-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/create-a-dynamic-personal-website-in-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/create-a-dynamic-personal-website-in-wordpress\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Create-a-Dynamic-Personal-Website-2.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Create-a-Dynamic-Personal-Website-2.jpg","width":1921,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/create-a-dynamic-personal-website-in-wordpress\/#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":"Dynamic Design","item":"https:\/\/elementor.com\/academy\/dynamic-design\/"},{"@type":"ListItem","position":4,"name":"Create a Dynamic Personal Website"}]},{"@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\/2475","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=2475"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2475\/revisions"}],"predecessor-version":[{"id":9461,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2475\/revisions\/9461"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/4128"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=2475"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=2475"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=2475"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}