Build a Dynamic Review Template w/ Elementor & Advanced Custom Fields

hi i'm matt from build that website and here's what we'll be building in today's video it's a stylish mobile-friendly review widget built with elementor pro and the free version of advanced custom fields meaning all this content is being pulled in dynamically from the custom fields attached to the post now this is just the first in a series of tutorials that is going to teach you how to unleash the full power of wordpress elementor and custom fields so make sure you subscribe seriously like right now now if you want this completed elementor template you can download it for free the link is in the video description and you also may have noticed that the featured product in this tutorial is cloudways hosting which is where i've moved all my high traffic and most important websites that's because cloudways is super fast but it's also affordable and it includes all the critical features i need like free ssl certificates unlimited staging sites and automated backup it's a true managed vps host at a fraction of the cost of competitors like wp engine and it's even cheaper than high quality shared hosting for example here's what siteground is asking me to pay to renew my shared plan for one more year plans start at 10 a month and they're billed hourly so there's no lock-in or long-term contracts you don't have to pay up front for some multi-year contract you can try cloudwise completely free for three days by going to cwdeal.com or using my link in the video description and if you want to sign up you can use coupon code btws to save 20 on your first month all right let's get started building before we get started let's take a quick look at the tools that i'll be using for this tutorial it's only two plugins required we're using the free version of advanced custom fields which in my opinion is the best plugin to manage custom fields in wordpress and we're going to be using elementor and elementor pro now elementor pro which is the premium version of elementor is required for this tutorial because it's the only one that can connect with custom fields and dynamically include content in our template that we're going to build now if we go over to my custom fields section here you can see i've created one field group and it's called the review product field group and if we just take a look at it you can see i've created a number of fields uh we've got product name product image which is an image product price which is number we've got some score widgets that we're gonna use to create rating star uh like ratings and we've got some pros and cons and a little blurb about the product and to save time i'm not going to walk through the exact process of creating these custom fields but there's tons of really good tutorials on youtube they'll take you through the process step by step and one last thing i've done is for the display rules i've shown to display this on the exact post that i'm using for this tutorial so this is where the field group is going to show up but you could also target it to entire taxonomy for example like any category your reviews category you can make it so that all review posts have these custom fields available and we'll just go over to the posts and here's the post i've created and if we click the edit button you'll see that i have no content in the post at all but here are all the fields showing up and i filled in most of the fields already we'll fill in the last remaining ones as we finish this tutorial and you can sort of see the range of different field types we have we have simple text fields image fields we've got this nice slider where you can select a number range from predetermined values set from 1 to 100 and we have the same thing down here for a review score which is set for from zero to five that we'll use for a star rating widget we've got a url for an affiliate link and uh some more texts so that's pretty much it for preamble so let's start building so i do recommend that you use whatever template you're going to plan on displaying this in uh so if you typically would have this in a post that has a sidebar build it on a post that has a sidebar so you get a good idea how it's going to fit in the flow of your existing content it'd be so annoying to spend all this time building something and then it doesn't display properly because the widths are a lot different than they were when you were building so we're going to start completely from scratch we're going to grab a new section here and we're going to build this bit by bit so we're just going to keep adding a number of rows so the first thing we're going to do is grab an intersection and we're going to delete one column so it's just a one row intersection all right so first off let's add a couple headings for our box and basically we're going to have the product name here and the product price over here so let me make some space because we're going to fit two on a line so i'm going to delete some space in the placeholder and let's change the styling so we will uh maybe make the font size 30 pixels so it's a little bit smaller and before i duplicate it i also want to go to the advanced tab here of the heading in under positioning we're going to switch the width instead of default which is the full width of the container we're going to switch it to inline so it only takes up as much space as the content and now we can duplicate this so we'll right click and go to duplicate and you can see that automatically it puts the inline elements right next to each other but we actually want them on opposite sides of the row and to do that we're going to go to our row settings here or our column settings i guess and if you just click here it will take you to the layout tab of the column and for horizontal alignment instead of the default which puts these elements right next to each other we want to go to space between which maximizes the space between the elements and it will put them on opposite sides of our row this is a really handy trick once you get the hang of it just know that it can only be used for positioning inline elements that can't be used for any other type of element positioning so next let's connect our dynamic fields to these so first this is going to be the name so we'll go to the content for this heading and you'll see you can edit the text manually and fill in whatever you want but we actually want the dynamic tag so if you just click outside of the text box whoops if you click outside the text box you'll have this option to choose dynamic tags and up here you could choose any information that's already in the in the post for example if you want to use post taxonomies or the post title you could insert that but we're going to use the custom fields that we created so if you scroll to the bottom it says acf for advanced custom fields and we want to choose an acf field now it doesn't take you right to the selection view so you actually have to click this little wrench icon after you've chosen acf field and we're going to choose the key that we want to pull the field from so we're going to choose the review product name and you can see it dynamically pulls in the information from the post that we're working on now which is super useful as we're building this and then next up we're going to make this one the price so we'll do the same thing go to dynamic tags scf field and for the key we're going to choose review product price and i don't want to just put this naked number by itself i actually want to put a dollar sign and maybe um what the billing period is so you can go to this advanced tab down here and there's a before and and after so for the before i'm going to put a dollar sign and for the after i'm going to put per month just like that now it's kind of hard to visualize what we're building we just have like text spaced apart on a blank white page so i like to sort of build my box structure early on and i'm not going to put the box wrapper around the entire section but i'm going to put it around the inner column of the section so it's like the outermost column not this inner section but i want the outer section column and we're going to go to style and border and we'll set the border to solid and for the width we'll make it one pixel all the way around and for our color we'll set it to something really light we'll try this very light gray and you can see we now have this this little box around our view widget so let's move on to our next row so we're going to grab another intersection and we'll just put it below the previous one and this will be a three column layout so we'll go to add new column and to get the widths correct i want this one to be 25 this one to be 25 and this one is going to be 50 and what we're going to put here is a product image and overall score and then maybe some rating scores for like various attributes of the service so first we'll add an image let's choose a custom size and we'll go with uh 400 by 400 because later on when the when these columns get responsive you might actually want a larger image image size than is displaying right here and just like with the headings we can choose a dynamic field so we'll go to dynamic tags go down to the acf image fields and from the settings select the key which is the review product image and you can see it automatically pulled that in now if you want you can specify a fallback image like a default like hey sorry we don't have the image image uh and that's something you can make yourself in photoshop and then just add that as the fallback but we're not going to put a fallback i will do a little bit of styling so maybe we could put a little border so we'll go solid let's say three pixels for now and we'll just do uh like a dark gray border next up we're going to have the overall score so we're going to grab another heading and by the way if for seo purposes you're not comfortable making these h2 headings where they are by default you can switch the html tag to anything else so you can make it like a span for example or use a lower heading level so that has no impact on your seo but just for demo purposes i'm going to keep it simple and stick with the h2 and we're going to pull in a dynamic field again so we're going to go to acf field and if we go to settings we want the overall score now you can see that our overall score is not showing up in here and if you wonder why if i just go back to my post over here you can see our overall score is one of these rating sliders and unfortunately the acf integration with elementor can't pull in those and recognize them as number fields but the good news is that wordpress actually can so if we go back and we change the field types we'll delete that and we'll go back to dynamic and instead we're going to make it a post custom field because in the end advanced custom fields are actually post custom fields so we're going to click post custom fields and now you'll see the revere review product overall score is available so we can select that and it automatically pulls it in so that's a nice little hack to use the range sliders um with elementor so you don't have to use just the generic fill in a number boxes now let's style this a little bit i'm going to make the font size bigger let's go 90 pixels for now and i want to center it and we'll give it vivid turquoise color now you'll see that this is again sort of aligned towards the top of our column and if you want it to be centered vertically in the column that's really easy to do again we're going to go back to the column settings so just left click there and in the vertical align we're just going to choose vertical line middle and that moves it down nicely so it's just centered right in the middle of this column hey if you're enjoying this video could you take a second to hit that like button and make sure to subscribe so you don't miss any of our upcoming videos thanks all right next up let's do the review stars so let's go for the widgets and we want star rating and we'll just drag that right in here and the first thing we're going to do is we're going to set a title and so we'll just call it feature one and the reason you would not use a dynamic title is if all your products are of the same category and so they all have the sort of same features that are being reviewed like it might be price or support or speed or whatever that's what we're doing in this case so you want these features to be consistent across all your posts and just change the star rating for each feature so just change the star rating instead of having the default of five we're gonna go to dynamic tags and we'll go to acf number field settings and for the key we want product rating one so it's pulling that in it was four and a half stars for that one and we'll just duplicate this and now we're going to change this one to feature two and don't forget it's very important that we also change the dynamic tag for this one so we need to disconnect that tag and change this to product rating two so that's a five star rating and finally let me show you how to create a completely dynamic one so maybe you want to insert a custom feature for every post so instead of using a predetermined title let's just duplicate this and we're going to get this information from a custom field so we'll go down to acf custom fields and in the settings we want to make the title get pulled from the review product custom rating label now nothing's shown up and that's because we actually haven't named it yet so let's go back to our post and you'll see we have this field here review product custom writing label and for example we could make it speed click update and if we go back to our front end and we just refresh the page you can see it's now pulling in the value from that custom field and actually i do need to do one more thing here so you can see it doesn't have the colons like the other two features so we can just use the advanced tab to add a colon after that and then it looks identical now if you don't like the spacing if you feel like they're too far spaced apart there's a couple things you could do so we could go to the column settings by default in the column settings you can see that there's 20 pixels between every widget but we can change that to a lower number so we can make that for example 5 or 10 pixels between the widgets and then they get moved a little bit close together and then we can use the vertical alignment to say push them to the middle now if you want to horizontally align them you can't do that here because they're not inline elements if you switch the horizontal line it doesn't do anything we can go to each element individually and click the center for the alignment and do the same for this one center and center and i think that looks good so we'll just leave that for now all right that row is complete so let's add a new row and we're just going to grab another intersection put it below the old one and this is only going to be a one column section so we can delete one of these columns here and we'll go and i'm just going to grab the text editor and there's the placeholder text but we're going to use a dynamic field again and we'll go down to acf fields and for this key we're going to pull in the review product blurb and let's move on to the next row grab a row bring it down and this one is going to be a two column layout this can be the pros and cons section so let's first grab a heading and we'll use an h3 level heading h4 level heading we'll say and this one is gonna be pros and i think i want to be a little bit smaller so let's go 23 pixels looks about right and we're gonna change the color to like a greenish color prose and then we'll just duplicate that and we'll change this one to cons and we're not going to be using dynamic tags for this because this is consistent across all the layouts this isn't like a dynamic field that we have to pull in uh we're going to change the style of the cons to a reddish color and then now we can add some pros and cons and this will be dynamic so for that i think we're going to use the icon list widget first we can just delete these widget styles that we don't like and yes we want this to be dynamic as well so we can go in here and for the text we go to the dynamic tags and we'll go down to acf fields and under the key i'm going to choose review pros 1. and you can see that pulls that right in and let's we have to style this yet let's add the other uh pros and then we'll style the list and then we can duplicate it over the cons so let's add two more we'll just clone it and then all we have to change for each is just the key so we're just going to go to the settings icon and this will be review pros 2 and the third one will be review pros 3. and you can see it's now pulled in each of these unique pros that i've added as custom fields on the post so let's just do a little bit of styling go to style and you can choose the space between yours and see what looks good to your eye i think that looks pretty good right there and for the text let's go to typography and we're just going to tweak the size a little bit and i just want to make sure that everything can fit so maybe we'll do 14 pixels just in case you have a longer pro and you can change the text color or the icon color so maybe let's do that we'll do the icon colors and we'll what's this green color let's copy that and we'll make the icon color match so now that that's done let's duplicate this list and we'll drag it over to the cons and now all we have to change well is everything so we're going to go here so let's change our icon and we can just change the list style we're at it so let's get this text color copy go to the icon color paste and now we can connect the dynamic tags so we just got to go here and under our settings we're just going to switch the key to cons 1 and we can duplicate this item and sometimes it doesn't show it up right away but we can just click update and if you refresh the page that should get pulled in now and we'll go back and we're going to switch this to review cons number two now what you'll notice is i actually haven't set or view cons number two so one disadvantage of using the icon list widget for these lists is that if you don't have something filled in in this box it's just going to display the icon without the text it won't hide the icon as well and there's no good way to hide the icon so the alternative to this would be to use something like a wysiwyg widget you can make an unordered list in the back end and then have advanced custom fields pull that in and you could add the icons with css if you want but otherwise just make sure you always have two cons for every product and i'll quickly go atticon click update it pulls that right in all right so let's take a quick styling break and add some more detail between these elements to help create separation inside of our layout and we're just going to add some simple borders to some of these columns but before we do that let me show you a little tweak that allows you that will save you a lot of time if you end up wanting to change the border color of multiple elements so first we're going to go back to our one board that we already have so we'll go to our column that we set up the border on before and under style settings border so we'll go to the color picker and instead of just sticking with this color we're actually going to click create new global color and we're just going to do this temporarily once you're done finalizing your layout you could delete it or keep it if you think you would reuse it other places in your theme but for now i'll just name it my border color and we'll click create and what you see now is if we go if we go to our next widget here so i'm going to go to this intersection and we'll go to style border solid and we're going to disconnect these values so they're not linked and i'm just going to add a 1 pixel border on the bottom and from the color picker i'm going to go to custom [Music] and there you can see is the universal border color we just created and that automatically pulled in that color and what's neat so if i go to my site settings global colors and if i change this to say this red color it changes the borders for everything that's linked to that color so that saves you a lot of time if you for example set up borders between all these elements and now you just want to change them in one fell swoop we'll set it back to our leg gray for now and i'm just going to put a bottom border on all these rows unlink select the border color and do the same thing for this row border solid unlink bottom and we'll select border color is our sort of dynamic color again and click update all right now that is a very light border color so maybe we just want to make it to slightly darker gray so like i said we can go to site settings global colors and instead of eee we could try ddd and that just makes it a little easier to see now you can see that our borders don't go to the edge here and what's happening is there's actually some inner padding on this element i'm not sure if it's the column here let's see if it's the column if we go to padding zero yep that's the one so you want the column the outer column not the whole outer section and that will pull our borders right to the edge and then we may want to add a little bit of white space in some of these sections and you can either do it from the entire section or at the column level and for now i'm going to start at the column level and just so you have a little bit more fine grained control so we'll just go to our advanced tab and we'll go to padding and let's try 10 pixels all the way around and we might need to bump that up a bit and we can do the same thing down here advance padding let's try 10. i might want to make unlink them in for example make the left padding maybe a little bit more to move that over and we can do the same thing in this column now one of the reasons to do the padding on the inside or the inner columns versus the outer sort of intersection and they'll come down to personal preference but you'll see again so if we were to add a border between these two elements here so if i want to go to border and go to solid and we're going to unlink these and just add a left border and again we're going to do that same global color and you'll see now it goes top to bottom now if we had added padding on this section and put say 15 pixels of padding all the way all the way around then the border doesn't quite touch the top and so that might be a look you're going for and if you like that you can keep that as it is and if you prefer your borders connect top to bottom then you just delete that padding so one more place i do want to add some inner padding is on the header up here we'll go to 15 pixels looks about right maybe and we'll unlink it on the top and bottom i think maybe i only want 10 pixels that looks pretty good now you remember that our whole outer wrap is from the sort of inner column which goes around the whole section and can't actually reach it by clicking on here unfortunately because now it's overlapping with this section so if you're trying to get to an element that's overlapping you can go to the navigator and you can see this is the inner column here but if we want the whole outer column and you can see the dotted lines going across you can easily access the setting for that column even if you can't quite get to click in here because of elements overlapping so that's a nice trick and we're going to add some top border now you can't specify different border colors for different sides of a single element unless you use custom css but because the whole section wrapper is overlapping the column here they sort of have the same boundaries we can just put a border on the section and i just want to add a top border so we're going to go to style border and go to solid and unlink them and i only want the top and we'll start with four pixels maybe and we're gonna try we can go for like a dark blue and you know if you're in love with box shadow like i am under the box shadow settings we could also get a box shadow it's a little bit unhealthy actually how much i enjoy box shadow and we can just add a little bit of blur maybe a little bit of vertical and for the color which can make it very very subtle it's easy to overdo box shadow and we'll click update and just take a peek so now it pops out from your background a little bit it looks pretty nice i think all right next up we're going to put a button for our product here so somebody can click to go through to the website and we'll just go search for button drag that down here and actually what i'm meant to do is i want to grab another row it's always good to just do a separate row for everything and we'll delete that throw our button in there and let's start out with the basics so we'll go so start by centering our button and we'll change the text and we can maybe change this to a network medium button let's add an icon and we'll just pick from the icon library and i'll look for an arrow this should do the trick insert i want the arrow to be after and let's go to the style and i'm going to change the background to this nice sea foamy kind of color now i want my button to be wider and one of the things that annoys me about elementor is it doesn't easily let you set the button widths now we could go to the settings and under the style settings for example we could just adjust the padding so we can make like the right padding to get as wide as you want and we can make this 10 on top and 10 on the bottom and that does work the issue is if you want a button that's pretty wide but then if you're doing that with padding then it's harder to make it responsive as the screen shrinks and yeah you can set like the responsive size for each screen size using the responsive mode here but sometimes it's just easier to do things with css so we'll just delete all this stuff and what we can do is since you're using the pro version of elementor anyway because that's the only way you can use the dynamic fields we're going to go to the custom css feature and it's so easy to write custom css in here because it lets you skip all the other preamble and just go selector and then what we actually want is the a element which is the button so the selector targets the wrapper the outer sort of wrapper of this element then we want to target the button and we're going to write two rules one is width let's say 75 of the screen and now that's actually too wide on a bigger screen that'll look nice on a mobile screen and then we're just going to set a max width and let's say that's 350 pixels so it will be responsive and it will never be too big for the screen it will never be more than 75 of its container and the larger size it would be is 350 pixels so that's the styling done and then of course we need to connect a custom field because where are we getting this link from so instead of manually typing a link here we're going to use the dynamic tags again and we're going to go down to our acf url field and we've already filled that in now one thing i almost forgot with this element and i had to took me a second to figure out what was going on is once again you have to specify which field to use so even though you selected the acf url field you have to go back through the settings and to the key and we're going to choose the product link field and now it should pull that in dynamically and click update and we'll go to preview the changes and you can see that when you click the preview button in elementor this preview changes button it doesn't actually pull in any of the custom fields properly and that's sort of an annoying quirk of elementor working with custom fields but all you have to do is just delete this sort of url parameter that's attached to the end of the url and just make sure that you're working on a published post and then when you just load the full post not the preview version it will pull in all the fields and if you hover the button now you can see in the lower left corner it's got the urlcwdeal.com which is being pulled in from that custom field and if you click it it'll take you to my free trial offer for cloudways where you can try it completely free no credit card required for three days just using that link and one thing i might want to do if this was my site is i would probably want to add a target to open this in a new window instead of the same window that's something i generally prefer to do so in the button settings and that's easy enough to do if you go to the link settings here on the side the link options and you can add a nofollow attribute if you like to do that for your affiliate links and you could also open it in a new window this design is coming along really nicely but i want to make a couple more styling tweaks we'll just add some little subtle design tweaks and then we're going to get into responsiveness we're going to i'm going to show you how to make this look good across a range of screen sizes so it doesn't get too compressed or weird looking when somebody's browsing on a mobile device versus a desktop so first let's add a couple more borders so i think i want to add a left border on this element here styling borders solid unlink we're just going to add a left border and for the color we're going to select from the global widgets we're going to choose the same border color that we're using for everything else and i think i want a bit more spacing around this button so we're going to go to the advanced tab and we'll unlink these and we just want some more margin on the top and bottom so let's try 25 pixels to start i think that looks pretty good and finally i want to add a little bit of a label just so you know what this score means and i could probably hack it together by jamming some elements in here and then messing with the margin and the positioning and stuff um but i'm just going to do with css because it's a lot easier and i like to fit some css into every tutorial even though i know elementor advertises like uh no code but it's a nice skill to have so let me show you how to do that and we're just going to go to this element here we're actually going to align it to the sort of square shaped column here so we're going to go to the settings advanced and the first thing we're going to do is we're going to give it a class so you can see i've already named it i gave it the class overall score and while we're at it let me give our entire section here a score this is like the big the entire section that accompanies our review widget that we're making and i'm just going to give it an id so we're going to go to advanced and we'll call it the review widget and this just makes it really easy if you ever want to use css to target very precisely which elements on your site do and do not get affected so click update and then i'm going to go back to the column settings here and under advanced we're going to go to custom css and i'm going to start writing my rule so we're going to use what's called a pseudo element and i'm going to target the id review widget and inside of that we have the overall score class which remember we added here so i use the pound sign for ids and the period sign for classes and because the uh overall score class is inside of this bigger container you put this one first this one second and then we're going to be targeting the before pseudo-selector but if we drag this out you'll see that it fits just fine and we'll write our rule so the first thing you have to do is you have to create the pseudo-elements and the way you do that is you declare content and so if we were previewing it you'd be able to see that this was now created but if we add some content you'll really be able to see it so we're going to call it the overall score and you can see now that sort of jumps up next to our widget but that's not where we want it so we're going to change the positioning and we're going to make it position absolute and now it gets taken out of the flow of the document and doesn't affect the position of any other elements now we're going to position this across the top of this column here but for you to better see where the element is sitting let's add a background color really quick and i'm just going to paste in that same color that we're using for a score here and i'm also going to change the font color make it white and now you can see that it's basically an inline element it's only taking up as much space as the content in it but we want to stretch this across the entire top of our column here so to do that we're going to sort of set some boundaries so we're going to say top 0 and if you change that to bottom 0 just you can see what this does you can see it moves it and it fixes it to the bottom of the elements but we want it on the top and we want it affixed to the left side so we'll go left 0 and we want its right border affixed to the right side so zero pixels from the right and you can see it now stretches the entire width and then if we want to center the text all we have to do is go text align center and voila i think that looks very nice now it's time to get into the responsiveness and i know some people don't like going through the responsive tweaks but if you set everything up properly with your columns here it's actually really not that hard if you know a couple tricks about how to fix responsive issues that pop up and it's really really important to make sure that your designs look good on all range of screen sizes you get so many visitors through your mobile browsers and there's nothing worse than coming to a website and the layout is completely broken when you're on a mobile browser so first let's just uh click the update button we're going to preview how this is going to look on a mobile device and an easy way to do that at least in chrome browser if you go to inspect if you look for this icon over here and you click that little responsive view you can select from a range of devices to see how it looks on different screens or you can go through the responsive device and with the responsive view you can actually move the screen and see how it moves exactly across the full range of screen sizes which helps you catch break points that you might miss when you just check different device sizes so we're just going to squeeze this and see what breaks and this is my sidebar over here that's pushing it if this was a full width layout it would be looking a lot better right now that's getting squished getting squished and so this is the first thing that breaks um our text is too wide for this content box and so it breaks into two lines which makes this look off so that's number one thing you also see the text is now overlapping our little pseudo element that we created and if we push it a little bit further now it's completely covered by the pseudo-element and now we hit that mobile break point and the only issue that we have on the mobile break point as we get smaller is we just have a little bit of overlap between the numbers here and our pseudo-elements and as i scroll down i don't really see anything else wrong so it's just that one thing and if i was nitpicking maybe you would want a little bit more spacing uh around the image or maybe we want to delete the border on the smaller screen size so let's go through these tweaks one by one so the first thing that we're dealing with is this is getting squished and yeah we could change the text size on the different screen sizes so that it sort of gets a little bit smaller as we go through but an easier trick to do this um is we're just gonna make this take up uh these two columns take up the full width of the line when we hit the tablet break point and have this one move to its own line and take a hundred percent of the uh next row and so to do that we are gonna have to fix a couple borders and stuff but it's really not going to take that long so first we're going to go to the responsive mode and we're going to click on tablet view and it's not actually broken here because we're not previewing it with a sidebar but if we did have the sidebar it would be breaking and we're gonna go to the settings for this column and what we want to do is when it hits that tablet breakpoint we want to take up the full width of a row so now you can see it's been pushed to its own row below but these don't get adjusted automatically so we actually actually have to manually set the size for these two so we're gonna set this to 50 and set this one to 50 as well and now they will split the row evenly now what is a little bit hard to see but you might notice is that we have that border left set on this widget that now is sort of unnecessary because it's on its own row and we're missing the borders underneath these widgets so what we can do is we will delete the left border i'll change it to none and we can add a border to both these we'll go to style border solid unlink the bottom one and we want that global border color that we picked and we're going to do the same thing for this column style border and bottom one make sure it's the length color and now we got those two borders coming through we could also add a border left actually just to really round it out so left okay and perhaps we want to add a little bit more padding on the top and bottom um now that this is on its own row so we'll go to the advanced tab for this column unlink these or we can keep them linked actually actually and we'll go just 15 pixels of padding all right so that breakpoint looks pretty good and then let's go to the mobile mode and now we have the issue where the score is overlapping and so the way we need to fix that and actually i think we need to fix that in tablet mode too is we just need to add some padding to the top of this column to make sure that it gets pushed down at least as much as the size of this element up here so let's go up here advanced and we're going to i'll link the paddings and let's just add some padding top so we'll say 20 pixels of padding up there and then if we preview that in mobile mode it fixed itself because the mobile takes the styles from the tablet view but we could also 25 and 5 just to sort of center it in that container there and everything else looks good i think and for our image let's just go back to the desktop view and i think maybe this image or this border that we're using is too much so let's go uh to the styles borders and let's make it one pixel and we'll make it just a more subtle border i can sort of drag this slider all right i think that looks a lot better off over the full of range of screen sizes so we'll click update and then we're going to go back and preview this one more time so we'll refresh the page here and we'll take a quick next peek at each of the views tablet view looks good mobile looks good and if we preview them you can see there's our break point right there that we've set up and everything looks good and it claps to the next break point and the spacing is good everywhere it looks like good everything i think it looks great all right i've got two last fun tweaks for those of you who really like fine tuning designs so one is i'm going to show you how to fix an issue if you were to add a background color say for this column here uh our pseudo element that we created gets covered up and all we have to do is go to the advanced tab custom css and in the css where we created our pseudo element we just need to add a z index and we'll just change it to two and now that will stack the pseudo element over the background so that's one little fix we can make and next is let's say we want some preamble text as an intro to this section but we don't want to create a whole separate header and add that to our layout we can just do use the before elements but what if we want to style it we can actually write html code directly in this so if we want to put a little span around this and then we can say r take for example like this is what we say about this we'll put a space and you could add a class if you want but we don't actually need one and then if we go to the advanced tab here and we can write custom css for this element and so if we just write selector and then span and if you had added a class to the span you would put that class here and let's write our rule font weight bold and that's an easy way to add a little bit of styling to the pre-text whatever you add before your dynamically inserted content so what else would you like to learn how to build with elementor tell me in the comments below and please also share any cool stuff that you've been building on your own sites do take a quick second to hit that like button and to keep on building make sure to check out these awesome videos right here

Channel: Build That Website

Views: 845

Keywords: elementor tutorial, elementor custom fields, advanced custom fields, elementor review, elementor pro custom fields, elementor pro dynamic content, advanced custom fields tutorial, elementor responsive design, elementor templates, free elementor template, advanced custom fields elementor, elementor pro, wordpress elementor tutorial, elementor tutorial for beginners

Id: bRMRfbRsWAM

Length: 40min 49sec (2449 seconds)

Published: Tue Apr 20 2021