How to Design a WordPress Blog Using Elementor

hi i'm dave roy from design build web and i'm here today to show you how to use the amazing new single builder in elements or pro so in today's video to show you the power of the new single builder i'm gonna recreate a really nice single blog post design from a company you might have heard of using elements or pro so the blog post design will be recreating is from the blog published by flywheel flywheel you might already know are a really great specialist wordpress hosting company here's the blog post design from flywheels blog i'll be recreating today their blog post layout is really very nice indeed high impact fold with header image at the top lovely white clean player layouts fairly narrow main content column here which makes the text really easy to read nice short line lengths couple of sidebars either side of the main column with some extra functionality and content and if we're is right down past the article itself we have an email signup box plus comments links tomorrow articles the latest three full width email signup section and links to flywheel social channels now there's no way we'd be able to recreate this design using our themes pre-built single post template but we certainly can achieve this with elements or pro i'll show you let's get started just a few quick bits were set up first in elemental settings style content width i'll change the default content width from 1140 pixels to 1250 pixels to match flywheels blog layout the fonts they use are monster out for headings and source sans pro for body copy both google fonts so we can use those in elements or right away also in a couple of places flywheel use museo sans rounded which isn't a Google font but is available in Adobe Typekit so I just connected to my Typekit kit with its ID under the integrations tab here so I can also use that font in elements or really easy a couple of other things to very quickly mention before we get started for speed I already recreated flywheels header the logo and now using elements or pros header builder feature so in my templates under header I added a new header and I just use elementos blocks feature as a starting point so it was really quick to make took minutes I then set this header template to replace my themes header really easy and I did the same for the footer to using elements or prose footer builder now the single post template are be creating today will be automatically applied to all our blog posts so before the video I already added a few blog posts you can see here under all posts I've literally just copied and pasted the content from the last few flywheel blog posts so you can see there's the title here the main body content is here and I added a featured image to each post - that's the main full-width header image at the very top of each post I assigned each post to a different author and it's the same author name for each post as it is on the flywheel blog in fact I added each author as a new user in my test site here and I added each post to the same category that fly will use as well okay that's enough setup we're ready to roll first job we need to create our blank single post template that's in element or my templates and under the single tab because we want to create a template for single posts so I'll add new single onto select post type we want this particular template to be applied to single blog posts only so I'll choose post if it's template a name for future reference single blog post is good and click create template at this point we're given the chance to choose a prebuilt black and white template one of element source blocks and this is a very useful feature I used it to make the header earlier but for this we want total control a blank page so I'll click X to close notice the header at the top here now this is being pulled in from the header template I created earlier it's good to be able to see this while we're designing the rest of the page first job we need to set this template so it's using the entire full width of the page so we have the full canvas to play with to do that come down to the Settings icon bottom left and then under general settings let's change the page layout to elements or full width that will give us the full width of the page to play with but it will keep the header and footer which is what we want next when building this template we'll also need some real content from our actual blog post to work with so let's choose which of our existing blog posts we want to use as a preview when building the template so to do that more still in settings under preview settings now you can see he's already suggesting the latest post here it's called the best free stock photo sites in 2018 and that one's great so I'll apply and preview now nothing appears here yet and that's because we haven't added any dynamic content we haven't had any elements or widgets that's ok let's remedy that now let's flip back to flywheels blog post starting at the top the first element is this full width header image so back to our single post template I'll click add new section we only need one column and we want this image to always stretch full width and change its shape appropriately at different screen sizes so rather than adding an image widget we need to add our image as a background to this section so I'll click the section Settings icon in the middle of the section and then in the section settings on the left under style and background remember the image at the top is our posts featured image I could add a background image manually here from my media library but then every blog post review would have the exact same image every time not good we want a dynamic featured image pulled in automatically from each post we're viewing so to do that instead click dynamic and featured image that's now pulling in the featured image dynamically from the post we're using to preview exilim we can't see much of the image though that's because background images aren't inline content so they're not adding any height to the section yet we need to tell this section to be a certain height so that we can see the image properly there are a number of ways of doing that but the way I'll handle it here in this section settings under the Layout tab and in height I'll choose min height I could set this height in pixels but I'd prefer to set the height as a relative measurement so if instead I set this using VH that stands for viewport height that will then be a percentage of the height of each visitors screen I think 40 looks pretty good there I find using VH helps the image be visible properly at different responsive screen sizes this background image needs positioning properly now so back to the style tab still under background I'll set position to be top center repeat we want that to no repeat we don't want this image to continually tile over and over again under size I'll set that to cover cover make sure that the image always covers the entire section perfect all right let's have a quick preview and that is looking good let's keep moving looking back at the flywheel blog design so let's add these three columns now so back to our template I'll add a new section to three columns I'll roughly resize these four now by dragging them so left can be around about 10% right I think it should be around about 25% I'll be the middle roughly 60% or so later we can click each column settings and type the exact percentage we want and you can set different widths for tablet and mobile too I won't be looking at responsive in this video just purely for time all right let's take the middle main column first we need the title of the post dynamically pulled in from each blog post so to do that we'll use elements or pros post title widget so click the widget menu appear and scroll down to the theme elements section this is where all the widgets are that allow us to use elements or as a theme builder so here's the post title widget I'll drag it in notice it's automatically pulling in the title of the preview post we set earlier which is great our flywheels post titles use montserrat as the font so in style and typography I'll set Monserrat I think there's also a little bit more line height so I'll set that at one point two M's check that against their design yeah looks good so far now notice there's a gap between their header image and the content below so we'll add that to ours too now I always like to add space him working downwards if I can so I'll add margin to the bottom of this header section so click the Settings icon up here and margins in advanced I'll unlink the margin values and we just want to set the bottom March into 80 now that looks loads better already next we have the date and the author name so for that we need the post info widget and that is under the theme elements as well because it's dynamic content I'll drag it in now we don't need all that info just a day I'm the author so I'll delete time and comments and I'll switch day and author around edit the dates I'll remove the link to date archives and turn off the icon I'll set it to none then edit the author remove the icon here too and then in the before field just type by now I need to sort out this gap so I'll set that in style I'll set that to seven go check flywheels blog and their post info font size is a little bit smaller so back to our template and under text I'll set the size 2-16 instead preview that check flywheel again their headline and post info are a little tighter to each other than I was so back to our template I'm a few ways of doing this but here I'll add a little bit of negative bottom margin to the post title that will pull the date and author up a bit again that's looking awesome so far now to add the post content so we need to pull in the main content field of our blog posts as a reminder that's the contents of this field here when we added our blog posts to do that we need the post content widget this time I'll just start typing here to find it instead of scrolling there it is I'll drag it into place and there's the content from this post I'm really happy with that now I already set source Suns Pro as my default body phone in elemental settings before we began but if I wanted to change the styling I could do that really easily in the style tab for this widget onto the Left column now a reminder we have an author profile photo here for that we need the author box widget so I'll type that here again to filter the list and there it is so let's drag that in I'll leave the sauce setting here as current author it's pulling in the current authors profile photo automatically I'll turn off display name and biography and there's no need to change any styling this narrow column is forcing this image to be pretty much the size we need but there are loads of options and styling controls in this widget if you need it then underneath here let's have a look on flywheel they have the name of the current category being viewed so for that we need the post info which again now we actually need none of these options this time so I'm gonna delete all of them put the first one I'll edit that and I'll change the type to terms and the taxonomy we want to display is categories I'll turn off the icon and then in style let's have the alignment centered it has a background color background color is set in advanced in this widget so advanced background classic and I'll set the color is this ready pink I know I set all these colors in the palette in alimentos color picker or peer before I started and then set the border radius to something very round like 30 pixels not bad we still need a few text tweaks so back to style and text and the color I'll set the text color to white and then in typography let's set the weight a little bit more to 600 set that to be uppercase and I'll also set the text size just a little bit less to 16 pixels all right as quickly check fly wheel not bad let's keep going next let's add the social sharing icons so we add the share buttons widget why we'll use Facebook Twitter Linkedin and Pinterest so I'll switch Google+ for Pinterest and drag it to the bottom there's some styling so the view is icon only the skin is framed shape is circle and only one column so that now fills the full column which she's great so I'll preview that now it's looking good but a little bit squashed first I just want to add about 30 pixels left and right padding to this section hold in the columns it'd be very useful especially on smaller screens leaving some breathing room I'll actually do that for every section that we add to the page and I also want to add a bit more breathing space more white space between the left and middle columns here so I'll add about 20 pixels right hand pad into the left column to add some space inside it so click the column settings and then in advanced unlink the padding values and out of 20 pixels right padding let's preview that and yep I'm pretty happy with that so far so that's the main column and the left column is now time to build the right-hand column so over to flywheel here's their right hand side bar until now I've shown you every single setting step by step I don't want this video to be really really long so I'm now going to build the right-hand side by myself but I'll fast forward the video and then quickly explain how I build each part so there's an email signup box a list of posts and I've worked for local by flywheel and a little call-out here if we go back to our template but fast forward pass me building the entire sidebar here it is here's just a heading widget set to be age 3 and in style I set the text color to light blue and in typography set the font to montserrat a lighter font weight 300 and set it to uppercase here's an element or pro form widget now we don't have the styling controls to place the button inside the form field as flywheel did though I could achieve it with some custom CSS and this looked perfectly fine though and I'd argue it's a little easier to understand there's nothing special styling wise here the main thing to know is in the style tab of the form widget and under field I set the border radius on the email field to be really rounded again 30 pixels and also the exact same with the button too I dragged in a space a widget here set to 20 pixels there are a few ways you can add more space between elements vertically I just went with the space of widget here because it's very easy the top posts section I actually duplicated the first heading are made and interact the duplicate here and then just turned off uppercase in the typography settings notice in advanced under border I added a light gray bottom border to the heading and also some padding but I just added 10 pixels bottom padding to the heading so that there's 10 pixel space between the text and the border line and for the top post list well the element or post widget is perfect for this to get a simple list of posts I just used the classic skin in one column and set to only four posts send each post image off and turned off the excerpt and the metadata and the read more as well under query that's where you set which posts to show here I actually created a new category earlier called top posts I assigned the blog post that I want to appear here to that top post category and they'll just be the most important posts you want to highlight then down at the bottom in exclude I chose current post so we don't see the actual post that were viewing in this list and finally in style under layout I set rows gap to zero now this still leaves a gap between the post there is a minimum it won't let you set less than but it looks great to me and I set the alignment to center and finally under content set the text color to gray and the typography to monserrate 16 size and that's top post done then there's another space widget here the local by flywheel ad now I actually created this as a separate template in the template library just in case we want to use this advert easily in other places on the site too so just in my templates I added a new page template here it is so in the section settings I actually set the content width of this to just 350 I don't want it wider than that ever so it forces it to that size then in the column settings I added a background color to the single column here then in the Advanced tab of the column I added some padding inside the column to create a bit of space and all this is is just an image some text and a button and this bit here this little flag is also a separate image now I added that image to the top of the column but then in that image widgets custom CSS adding a bit of CSS to position this image exactly where flywheel hover sticking out of the side that's not essential but it is a nice effect then once I finish building this particular template are then dragged in the template widget here and from the drop-down chose the template that I created and this call-out here is really straightforward it's just a heading text and an image I won't talk you through all that right let's preview this that's looking pretty good now I just think there needs to be a bit more breathing room between these two columns a bit more space so I'm going to add a little right-hand padding to the middle column here so back to the template I'll click the column Settings icon on the middle column and then in advanced and padding let's unlink the padding and try let's say 30 pixels yet preview that again yeah that's looking great almost there so now let's fix the final parts of this template and that's the elements that appear at the end of the article itself so back over to flywheels blog again and scroll to the end of the article first the email signup box at the end of the article now notice this is a box with a gray line all around it and a yellow border at the bottom and then inside that box is a heading text and a form and they're all wrapped inside this box and there's also a funky little yellow tag sticking out of the side okay back to our template I could just start adding ahead in widget a text widget a form widget the problem is they all need to be wrapped in a box with a gray border so we need something that will wrap around all those elements another way to do that is to nest a new column here inside our main column and we can then apply the border and the padding inside it to that nested column itself that's really easy I'll drag in a columns widget the columns widget actually comes with its own section so first in the section settings I'll set the columns in this section to be no gap because we don't want any space around this email box the columns widget comes with two columns by default I'll just delete one of them we only need one and now I'll add in the heading and the text and the form I'll fast forward the video to do that because you don't need to see every step there just ahead in widget a text editor widget and the farm widget I forgot to mention earlier in the form widget settings you can integrate the form with various email marketing services like MailChimp or drip or even vias appear to hundreds more now I'll need to add a bit of padding to the inside of the column too just for a bit of breathing space I'll do that now in the gray border all the way around so we in the column settings I'll add a one pixel gray border all the way around choose a nice light gray color here the box has got rounded corners so let's have an 8 pixel border radius and there was a yellow border at the bottom too and we can't have a separate bottom yellow border with these settings but we can fake that using box shadow so in box shadow I'll firstly set the yellow color for the shadow a nice solid yellow color then just set everything to 0 because we don't want any spread or blur like with normal shadows now I'll just set the vertical shadow to 4 and that gives us the solid line perfect now let's just sort the little yellow tag sticking out the side and I'm gonna drag in an image widget to the top then choose the image I already added it to my media library earlier was that in style I'll set the image size to around 40 40 44 [Music] then in advanced we need a little custom CSS here to position it exactly where we want it so I'll go down to custom CSS in advance and just have a little play with those and that he's looking good right we're almost there what's next on flywheels blog ah blog comments so I'll come back to our template to add those firstly I'll just drag in a spacer now we need the post comments widget that's just another dynamic widget so it's under the theme elements in the widget menu here are the only available skin and styling right now for this widget at the time of recording anyway its theme comments this uses the currently active themes design and layout for the comment forms so for now that's totally fine it doesn't look exactly like flywheels but it's okay then we have links to more articles underneath this is now a completely new block on the page it's a whole new section so we've broken out of the main content column now out of that three column layout so in our template or add a new section it can be one column in the section settings in style I'll give it a really light background color and again for speed I'm going to fast forward this next bit and then explain why I did so this image is just an image widget this is just a head in widget I also added a good bit of padding to this section just to create some room inside the section itself and then for the posts themselves an element saw has a post widget which is perfect for this drag that in okay we'll want the cards skin three columns is great we only want three post property Oh use only the medium-large version of each of the featured images that's totally fine the image ratio on flywheels blog is very small is about not 0.3 in metadata we don't want day or comments the badge over the image we can remove that flywheel don't display one and then down to query now that just means which posts we want to show now we want to leave this as showing post that's great but further down in advanced let's say order by two random I'll just pull in random post which is fine for this purpose important here we need to always exclude the current post from displaying in this block this block is more articles so we don't want the same article being suggested that we've just been reading and then in style tab on the card we don't want each card to have a box shadow so let's turn the hoff here then under content so we'll make the title nice kind of dark grey we want the title font to be Montserrat under the excerpts make those around sixteen pixels size and then for the reidmar there can be the same okay let's just preview that quickly he's looking pretty good one more bit to do let's check flywheels blog one more time so the last part of the layout is a full-width email signup block at the bottom of the page it'll be hard to get this exact layout and effect without a fair bit of custom CSS code the precise way this laptop image sits within this block especially responsibly now their layout is hand coded I don't want to go down a CSS rabbit hole here in this video so let's get pretty close using just elements or standard controls and there's a little bar underneath with links to fly with all social channels as well so once more for speed I'm going to build this book fast forward and then explain what I did so this is a new section it's got two columns with a purple background color this is just an image widget I've not changed any styles on this but in the section itself in advanced notice I added top padding so that's that space here I added some left and right padding to give breathing room on smaller screens I've done that for every section but notice there is zero bottom padding that's just so that the image sits on the bottom of the section I didn't want a gap down here and then here on the right is a head in widget this is set to Museo sans rounded which is a Typekit font I set that integration up earlier and the standard element or form with a bit of styling and that's pretty much it it's not exactly like flywheels but it is close and then finally that footer social channels bar so this is just a two column section with a dark purple background and I set the columns to be 50% with each this is ahead in widget now I set this one to be right aligned just so it sits over here and then the social icons widget with a bit of styling shake set to me circle and then in style just a bit of custom collar styling that my friends is the entire single post template complete whew now of course at every stage we should also have checked responsive to tweak how it all looks on tablet and mobile but if I go back and do that in this video we're all going to be here all day I'm sure you've got better things to do so sticking to desktop mode for now let's have the moment of truth let's see how our template looks when it's applied to all our blog posts so first we need to publish our new template and we now set the display conditions meaning where did we want this template to be applied so add condition and we don't want it apply to all singular or that will apply to all pages and other things too we only want blog posts so it's all posts and then publish and job done okay let's see how this looks I'll come over to the list of posts in the WordPress admin panel hover over the top post and view and yet that looks great so here's that post featured image the post date author the author profile all pulled in via element source dynamic which is that's for you another one and this looks great as well all this dynamic data pulled in from the blog post that we're currently viewing right now at one more and there we go featured image post title date author category content as well as all the other elements that we added to and that's it now we have one master single template that powers all our blog posts in future if we want to redesign our blog all the way across our site we can do it in one place by editing our single template in elementals library Annie's greats and not be restricted by our themes single post design hope you enjoyed this video I'd love to hear what you think if you've got any questions or comments drop them below this video and I'll do my best to answer huge thanks to the Elementor team for having me as a guest today be great fun thanks guys I'll see you all soon

Channel: Elementor

Views: 159,402

Keywords: Theme Builder, Single Post

Id: ptito0-JEE4

Length: 28min 52sec (1732 seconds)

Published: Tue Jun 26 2018