{"id":2607,"date":"2021-06-22T08:55:03","date_gmt":"2021-06-22T08:55:03","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=2607"},"modified":"2023-04-24T12:25:38","modified_gmt":"2023-04-24T12:25:38","slug":"how-to-design-a-wordpress-blog-using-elementor","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-design-a-wordpress-blog-using-elementor\/","title":{"rendered":"How to Design a WordPress Blog Using Elementor"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2607\" class=\"elementor elementor-2607\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6e16b53a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6e16b53a\" 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-64ffd08d\" data-id=\"64ffd08d\" 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-66a26cd6 elementor-widget elementor-widget-video\" data-id=\"66a26cd6\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=ptito0-JEE4&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-79b0dcda elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"79b0dcda\" 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-748a550\" data-id=\"748a550\" 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-5cb72c71 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"5cb72c71\" 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-1551\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1551\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1552\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1552\" 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-1551\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1551\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1551\" tabindex=\"0\" hidden=\"false\"><p>In this video, Elementor educator &amp; designer Dave Foy shows step-by-step how to recreate the popular Flywheel blog.<\/p><p>Dave Foy teaches non-coder designers how to build their businesses faster and more profitably 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-1552\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1552\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1552\" tabindex=\"0\" hidden=\"hidden\"><p><br \/>hi i&#8217;m dave roy from design build web<br \/>and i&#8217;m here today to show you how to<br \/>use the amazing new single builder in<br \/>elements or pro so in today&#8217;s video to<br \/>show you the power of the new single<br \/>builder i&#8217;m gonna recreate a really nice<br \/>single blog post design from a company<br \/>you might have heard of using elements<br \/>or pro so the blog post design will be<br \/>recreating is from the blog published by<br \/>flywheel flywheel you might already know<br \/>are a really great specialist wordpress<br \/>hosting company here&#8217;s the blog post<br \/>design from flywheels blog i&#8217;ll be<br \/>recreating today their blog post layout<br \/>is really very nice indeed<br \/>high impact fold with header image at<br \/>the top lovely white clean player<br \/>layouts fairly narrow main content<br \/>column here which makes the text really<br \/>easy to read nice short line lengths<br \/>couple of sidebars either side of the<br \/>main column with some extra<br \/>functionality and content and if we&#8217;re<br \/>is right down past the article itself we<br \/>have an email signup box plus comments<br \/>links tomorrow articles the latest three<br \/>full width email signup section and<br \/>links to flywheel social channels now<br \/>there&#8217;s no way we&#8217;d be able to recreate<br \/>this design using our themes pre-built<br \/>single post template but we certainly<br \/>can achieve this with elements or pro<br \/>i&#8217;ll show you let&#8217;s get started just a<br \/>few quick bits were set up first in<br \/>elemental settings style content width<br \/>i&#8217;ll change the default content width<br \/>from<br \/>flywheels blog layout the fonts they use<br \/>are monster out for headings and source<br \/>sans pro for body copy both google fonts<br \/>so we can use those in elements or right<br \/>away also in a couple of places flywheel<br \/>use museo sans rounded which isn&#8217;t a<br \/>Google font but is available in Adobe<br \/>Typekit<br \/>so I just connected to my Typekit kit<br \/>with its ID under the integrations tab<br \/>here so I can also use that font in<br \/>elements or really easy a couple of<br \/>other things to very quickly mention<br \/>before we get started for speed<br \/>I already recreated flywheels header the<br \/>logo and now using elements or pros<br \/>header builder feature so in my<br \/>templates under header I added a new<br \/>header and I just use elementos blocks<br \/>feature as a starting point so it was<br \/>really quick to make took minutes I then<br \/>set this header template to replace my<br \/>themes header really easy and I did the<br \/>same for the footer to using elements or<br \/>prose footer builder now the single post<br \/>template are be creating today will be<br \/>automatically applied to all our blog<br \/>posts so before the video I already<br \/>added a few blog posts you can see here<br \/>under all posts I&#8217;ve literally just<br \/>copied and pasted the content from the<br \/>last few flywheel blog posts so you can<br \/>see there&#8217;s the title here the main body<br \/>content is here<br \/>and I added a featured image to each<br \/>post &#8211; that&#8217;s the main full-width header<br \/>image at the very top of each post<br \/>I assigned each post to a different<br \/>author and it&#8217;s the same author name for<br \/>each post as it is on the flywheel blog<br \/>in fact I added each author as a new<br \/>user in my test site here and I added<br \/>each post to the same category that fly<br \/>will use as well okay that&#8217;s enough<br \/>setup we&#8217;re ready to roll first job we<br \/>need to create our blank single post<br \/>template that&#8217;s in element or my<br \/>templates and under the single tab<br \/>because we want to create a template for<br \/>single posts so I&#8217;ll add new single onto<br \/>select post type we want this particular<br \/>template to be applied to single blog<br \/>posts only so I&#8217;ll choose post if it&#8217;s<br \/>template a name for future reference<br \/>single blog post is good and click<br \/>create template at this point we&#8217;re<br \/>given the chance to choose a prebuilt<br \/>black and white template one of element<br \/>source blocks and this is a very useful<br \/>feature I used it to make the header<br \/>earlier but for this we want total<br \/>control a blank page so I&#8217;ll click X to<br \/>close notice the header at the top here<br \/>now this is being pulled in from the<br \/>header template I created earlier it&#8217;s<br \/>good to be able to see this while we&#8217;re<br \/>designing the rest of the page first job<br \/>we need to set this template so it&#8217;s<br \/>using the entire full width of the page<br \/>so we have the full canvas to play with<br \/>to do that come down to the Settings<br \/>icon bottom left and then under general<br \/>settings let&#8217;s change the page layout to<br \/>elements or full width that will give us<br \/>the full width of the page to play with<br \/>but it will keep the header and footer<br \/>which is what we want<br \/>next when building this template we&#8217;ll<br \/>also need some real content from our<br \/>actual blog post to work with so let&#8217;s<br \/>choose which of our existing blog posts<br \/>we want to use as a preview when<br \/>building the template so to do that more<br \/>still in settings under preview settings<br \/>now you can see he&#8217;s already suggesting<br \/>the latest post here it&#8217;s called the<br \/>best free stock photo sites in 2018 and<br \/>that one&#8217;s great so I&#8217;ll apply and<br \/>preview now nothing appears here yet and<br \/>that&#8217;s because we haven&#8217;t added any<br \/>dynamic content we haven&#8217;t had any<br \/>elements or widgets that&#8217;s ok let&#8217;s<br \/>remedy that now let&#8217;s flip back to<br \/>flywheels blog post starting at the top<br \/>the first element is this full width<br \/>header image so back to our single post<br \/>template<br \/>I&#8217;ll click add new section we only need<br \/>one column and we want this image to<br \/>always stretch full width and change its<br \/>shape appropriately at different screen<br \/>sizes so rather than adding an image<br \/>widget we need to add our image as a<br \/>background to this section so I&#8217;ll click<br \/>the section Settings icon in the middle<br \/>of the section and then in the section<br \/>settings on the left under style and<br \/>background remember the image at the top<br \/>is our posts featured image I could add<br \/>a background image manually here from my<br \/>media library but then every blog post<br \/>review would have the exact same image<br \/>every time not good we want a dynamic<br \/>featured image pulled in automatically<br \/>from each post we&#8217;re viewing so to do<br \/>that instead click dynamic and featured<br \/>image that&#8217;s now pulling in the featured<br \/>image dynamically from the post we&#8217;re<br \/>using to preview exilim we can&#8217;t see<br \/>much of the image though that&#8217;s because<br \/>background images aren&#8217;t inline content<br \/>so they&#8217;re not adding any height to the<br \/>section yet we need to tell this section<br \/>to be a certain height so that we can<br \/>see the image properly there are a<br \/>number of ways of doing that but the way<br \/>I&#8217;ll handle it here in this section<br \/>settings under the Layout tab and in<br \/>height<br \/>I&#8217;ll choose min height<br \/>I could set this height in pixels but<br \/>I&#8217;d prefer to set the height as a<br \/>relative measurement so if instead I set<br \/>this using VH that stands for viewport<br \/>height that will then be a percentage of<br \/>the height of each visitors screen I<br \/>think 40 looks pretty good there I find<br \/>using VH helps the image be visible<br \/>properly at different responsive screen<br \/>sizes this background image needs<br \/>positioning properly now so back to the<br \/>style tab still under background<br \/>I&#8217;ll set position to be top center<br \/>repeat we want that to no repeat we<br \/>don&#8217;t want this image to continually<br \/>tile over and over again under size I&#8217;ll<br \/>set that to cover cover make sure that<br \/>the image always covers the entire<br \/>section perfect all right let&#8217;s have a<br \/>quick preview and that is looking good<br \/>let&#8217;s keep moving looking back at the<br \/>flywheel blog design so let&#8217;s add these<br \/>three columns now so back to our<br \/>template I&#8217;ll add a new section to three<br \/>columns I&#8217;ll roughly resize these four<br \/>now by dragging them so left can be<br \/>around about 10% right I think it should<br \/>be around about 25% I&#8217;ll be the middle<br \/>roughly 60% or so later we can click<br \/>each column settings and type the exact<br \/>percentage we want and you can set<br \/>different widths for tablet and mobile<br \/>too I won&#8217;t be looking at responsive in<br \/>this video just purely for time all<br \/>right let&#8217;s take the middle main column<br \/>first we need the title of the post<br \/>dynamically pulled in from each blog<br \/>post so to do that we&#8217;ll use elements or<br \/>pros post title widget so click the<br \/>widget menu appear and scroll down to<br \/>the theme elements section this is where<br \/>all the widgets are that allow us to use<br \/>elements or as a theme builder so here&#8217;s<br \/>the post title widget I&#8217;ll drag it in<br \/>notice it&#8217;s automatically pulling in the<br \/>title of the preview post we set earlier<br \/>which is great<br \/>our flywheels post titles use montserrat<br \/>as the font so in style and typography<br \/>I&#8217;ll set Monserrat<br \/>I think there&#8217;s also a little bit more<br \/>line height so I&#8217;ll set that at one<br \/>point two M&#8217;s<br \/>check that against their design<br \/>yeah looks good so far now notice<br \/>there&#8217;s a gap between their header image<br \/>and the content below so we&#8217;ll add that<br \/>to ours too now I always like to add<br \/>space him working downwards if I can so<br \/>I&#8217;ll add margin to the bottom of this<br \/>header section so click the Settings<br \/>icon up here and margins in advanced<br \/>I&#8217;ll unlink the margin values and we<br \/>just want to set the bottom March into<br \/>next we have the date and the author<br \/>name so for that we need the post info<br \/>widget and that is under the theme<br \/>elements as well because it&#8217;s dynamic<br \/>content I&#8217;ll drag it in<br \/>now we don&#8217;t need all that info just a<br \/>day I&#8217;m the author so I&#8217;ll delete time<br \/>and comments and I&#8217;ll switch day and<br \/>author around edit the dates<br \/>I&#8217;ll remove the link to date archives<br \/>and turn off the icon I&#8217;ll set it to<br \/>none<br \/>then edit the author<br \/>remove the icon here too<br \/>and then in the before field just type<br \/>by now I need to sort out this gap so<br \/>I&#8217;ll set that in style I&#8217;ll set that to<br \/>seven go check flywheels blog and their<br \/>post info font size is a little bit<br \/>smaller so back to our template and<br \/>under text<br \/>I&#8217;ll set the size 2-16 instead<br \/>preview that check flywheel again their<br \/>headline and post info are a little<br \/>tighter to each other than I was so back<br \/>to our template I&#8217;m a few ways of doing<br \/>this but here I&#8217;ll add a little bit of<br \/>negative bottom margin to the post title<br \/>that will pull the date and author up a<br \/>bit<br \/>again that&#8217;s looking awesome so far now<br \/>to add the post content so we need to<br \/>pull in the main content field of our<br \/>blog posts as a reminder that&#8217;s the<br \/>contents of this field here when we<br \/>added our blog posts to do that we need<br \/>the post content widget this time I&#8217;ll<br \/>just start typing here to find it<br \/>instead of scrolling there it is<br \/>I&#8217;ll drag it into place and there&#8217;s the<br \/>content from this post I&#8217;m really happy<br \/>with that<br \/>now I already set source Suns Pro as my<br \/>default body phone in elemental settings<br \/>before we began but if I wanted to<br \/>change the styling I could do that<br \/>really easily in the style tab for this<br \/>widget onto the Left column now a<br \/>reminder we have an author profile photo<br \/>here for that we need the author box<br \/>widget so I&#8217;ll type that here again to<br \/>filter the list and there it is so let&#8217;s<br \/>drag that in I&#8217;ll leave the sauce<br \/>setting here as current author it&#8217;s<br \/>pulling in the current authors profile<br \/>photo automatically I&#8217;ll turn off<br \/>display name and biography and there&#8217;s<br \/>no need to change any styling this<br \/>narrow column is forcing this image to<br \/>be pretty much the size we need but<br \/>there are loads of options and styling<br \/>controls in this widget if you need it<br \/>then underneath here let&#8217;s have a look<br \/>on flywheel they have the name of the<br \/>current category being viewed so for<br \/>that we need the post info which again<br \/>now we actually need none of these<br \/>options this time so I&#8217;m gonna delete<br \/>all of them put the first one I&#8217;ll edit<br \/>that and I&#8217;ll change the type to terms<br \/>and the taxonomy we want to display is<br \/>categories I&#8217;ll turn off the icon<br \/>and then in style let&#8217;s have the<br \/>alignment centered it has a background<br \/>color background color is set in<br \/>advanced in this widget so advanced<br \/>background classic and I&#8217;ll set the<br \/>color is this ready pink I know I set<br \/>all these colors in the palette in<br \/>alimentos color picker or peer before I<br \/>started and then set the border radius<br \/>to something very round like 30 pixels<br \/>not bad we still need a few text tweaks<br \/>so back to style and text and the color<br \/>I&#8217;ll set the text color to white and<br \/>then in typography let&#8217;s set the weight<br \/>a little bit more to 600 set that to be<br \/>uppercase and I&#8217;ll also set the text<br \/>size just a little bit less to 16 pixels<br \/>all right as quickly check fly wheel not<br \/>bad let&#8217;s keep going next let&#8217;s add the<br \/>social sharing icons so we add the share<br \/>buttons widget why we&#8217;ll use Facebook<br \/>Twitter Linkedin and Pinterest so I&#8217;ll<br \/>switch Google+ for Pinterest and drag it<br \/>to the bottom<br \/>there&#8217;s some styling so the view is icon<br \/>only the skin is framed<br \/>shape is circle and only one column so<br \/>that now fills the full column which<br \/>she&#8217;s great so I&#8217;ll preview that now<br \/>it&#8217;s looking good but a little bit<br \/>squashed first I just want to add about<br \/>section hold in the columns it&#8217;d be very<br \/>useful especially on smaller screens<br \/>leaving some breathing room I&#8217;ll<br \/>actually do that for every section that<br \/>we add to the page and I also want to<br \/>add a bit more breathing space more<br \/>white space between the left and middle<br \/>columns here so I&#8217;ll add about 20 pixels<br \/>right hand pad into the left column to<br \/>add some space inside it so click the<br \/>column settings and then in advanced<br \/>unlink the padding values and out of 20<br \/>pixels right padding let&#8217;s preview that<br \/>and yep I&#8217;m pretty happy with that so<br \/>far so that&#8217;s the main column and the<br \/>left column is now time to build the<br \/>right-hand column so over to flywheel<br \/>here&#8217;s their right hand side bar until<br \/>now I&#8217;ve shown you every single setting<br \/>step by step I don&#8217;t want this video to<br \/>be really really long so I&#8217;m now going<br \/>to build the right-hand side by myself<br \/>but I&#8217;ll fast forward the video and then<br \/>quickly explain how I build each part so<br \/>there&#8217;s an email signup box a list of<br \/>posts and I&#8217;ve worked for local by<br \/>flywheel and a little call-out here if<br \/>we go back to our template but fast<br \/>forward pass me building the entire<br \/>sidebar here it is<br \/>here&#8217;s just a heading widget set to be<br \/>age 3 and in style I set the text color<br \/>to light blue and in typography set the<br \/>font to montserrat a lighter font weight<br \/>element or pro form widget now we don&#8217;t<br \/>have the styling controls to place the<br \/>button inside the form field as flywheel<br \/>did though I could achieve it with some<br \/>custom CSS and this looked perfectly<br \/>fine though and I&#8217;d argue it&#8217;s a little<br \/>easier to understand there&#8217;s nothing<br \/>special styling wise here the main thing<br \/>to know is in the style tab of the form<br \/>widget and under field<br \/>I set the border radius on the email<br \/>field to be really rounded again 30<br \/>pixels and also the exact same with the<br \/>button too I dragged in a space a widget<br \/>here set to 20 pixels there are a few<br \/>ways you can add more space between<br \/>elements vertically I just went with the<br \/>space of widget here because it&#8217;s very<br \/>easy the top posts section I actually<br \/>duplicated the first heading are made<br \/>and interact the duplicate here and then<br \/>just turned off uppercase in the<br \/>typography settings notice in advanced<br \/>under border I added a light gray bottom<br \/>border to the heading and also some<br \/>padding but I just added 10 pixels<br \/>bottom padding to the heading so that<br \/>there&#8217;s 10 pixel space between the text<br \/>and the border line and for the top post<br \/>list well the element or post widget is<br \/>perfect for this to get a simple list of<br \/>posts I just used the classic skin in<br \/>one column and set to only four posts<br \/>send each post image off and turned off<br \/>the excerpt and the metadata and the<br \/>read more as well under query that&#8217;s<br \/>where you set which posts to show here I<br \/>actually created a new category earlier<br \/>called top posts I assigned the blog<br \/>post that I want to appear here to that<br \/>top post category and they&#8217;ll just be<br \/>the most important posts you want to<br \/>highlight then down at the bottom in<br \/>exclude I chose current post so we don&#8217;t<br \/>see the actual post that were viewing in<br \/>this list and finally in style<br \/>under layout I set rows gap to zero now<br \/>this still leaves a gap between the post<br \/>there is a minimum it won&#8217;t let you set<br \/>less than but it looks great to me and I<br \/>set the alignment to center and finally<br \/>under content set the text color to gray<br \/>and the typography to monserrate 16 size<br \/>and that&#8217;s top post done then there&#8217;s<br \/>another space widget here the local by<br \/>flywheel ad now I actually created this<br \/>as a separate template in the template<br \/>library just in case we want to use this<br \/>advert easily in other places on the<br \/>site too so just in my templates I added<br \/>a new page template here it is so in the<br \/>section settings I actually set the<br \/>content width of this to just 350<br \/>I don&#8217;t want it wider than that ever so<br \/>it forces it to that size then in the<br \/>column settings I added a background<br \/>color to the single column here then in<br \/>the Advanced tab of the column I added<br \/>some padding inside the column to create<br \/>a bit of space<br \/>and all this is is just an image some<br \/>text and a button and this bit here this<br \/>little flag is also a separate image now<br \/>I added that image to the top of the<br \/>column but then in that image widgets<br \/>custom CSS<br \/>adding a bit of CSS to position this<br \/>image exactly where flywheel hover<br \/>sticking out of the side that&#8217;s not<br \/>essential but it is a nice effect then<br \/>once I finish building this particular<br \/>template are then dragged in the<br \/>template widget here and from the<br \/>drop-down chose the template that I<br \/>created and this call-out here is really<br \/>straightforward it&#8217;s just a heading text<br \/>and an image I won&#8217;t talk you through<br \/>all that right let&#8217;s preview this that&#8217;s<br \/>looking pretty good<br \/>now I just think there needs to be a bit<br \/>more breathing room between these two<br \/>columns a bit more space so I&#8217;m going to<br \/>add a little right-hand padding to the<br \/>middle column here so back to the<br \/>template I&#8217;ll click the column Settings<br \/>icon on the middle column and then in<br \/>advanced and padding let&#8217;s unlink the<br \/>padding and try let&#8217;s say 30 pixels yet<br \/>preview that again<br \/>yeah that&#8217;s looking great almost there<br \/>so now let&#8217;s fix the final parts of this<br \/>template and that&#8217;s the elements that<br \/>appear at the end of the article itself<br \/>so back over to flywheels blog again and<br \/>scroll to the end of the article first<br \/>the email signup box at the end of the<br \/>article now notice this is a box with a<br \/>gray line all around it and a yellow<br \/>border at the bottom and then inside<br \/>that box is a heading text and a form<br \/>and they&#8217;re all wrapped inside this box<br \/>and there&#8217;s also a funky little yellow<br \/>tag sticking out of the side okay back<br \/>to our template<br \/>I could just start adding ahead in<br \/>widget a text widget a form widget the<br \/>problem is they all need to be wrapped<br \/>in a box with a gray border so we need<br \/>something that will wrap around all<br \/>those elements another way to do that is<br \/>to nest a new column here inside our<br \/>main column and we can then apply the<br \/>border and the padding inside it to that<br \/>nested column itself that&#8217;s really easy<br \/>I&#8217;ll drag in a columns widget the<br \/>columns widget actually comes with its<br \/>own section so first in the section<br \/>settings I&#8217;ll set the columns in this<br \/>section to be no gap because we don&#8217;t<br \/>want any space around this email box the<br \/>columns widget comes with two columns by<br \/>default I&#8217;ll just delete one of them we<br \/>only need one and now I&#8217;ll add in the<br \/>heading and the text and the form I&#8217;ll<br \/>fast forward the video to do that<br \/>because you don&#8217;t need to see every step<br \/>there<br \/>just ahead in widget a text editor<br \/>widget and the farm widget I forgot to<br \/>mention earlier in the form widget<br \/>settings you can integrate the form with<br \/>various email marketing services like<br \/>MailChimp or drip or even vias appear to<br \/>hundreds more now I&#8217;ll need to add a bit<br \/>of padding to the inside of the column<br \/>too just for a bit of breathing space<br \/>I&#8217;ll do that now<br \/>in the gray border all the way around so<br \/>we in the column settings I&#8217;ll add a one<br \/>pixel gray border all the way around<br \/>choose a nice light gray color here the<br \/>box has got rounded corners so let&#8217;s<br \/>have an 8 pixel border radius and there<br \/>was a yellow border at the bottom too<br \/>and we can&#8217;t have a separate bottom<br \/>yellow border with these settings but we<br \/>can fake that using box shadow so in box<br \/>shadow I&#8217;ll firstly set the yellow color<br \/>for the shadow a nice solid yellow color<br \/>then just set everything to 0 because we<br \/>don&#8217;t want any spread or blur like with<br \/>normal shadows now I&#8217;ll just set the<br \/>vertical shadow to 4 and that gives us<br \/>the solid line perfect now let&#8217;s just<br \/>sort the little yellow tag sticking out<br \/>the side and I&#8217;m gonna drag in an image<br \/>widget to the top<br \/>then choose the image I already added it<br \/>to my media library earlier was that in<br \/>style I&#8217;ll set the image size to around<br \/>[Music]<br \/>then in advanced we need a little custom<br \/>CSS here to position it exactly where we<br \/>want it so I&#8217;ll go down to custom CSS in<br \/>advance and just have a little play with<br \/>those and that he&#8217;s looking good right<br \/>we&#8217;re almost there what&#8217;s next on<br \/>flywheels blog ah blog comments so I&#8217;ll<br \/>come back to our template to add those<br \/>firstly I&#8217;ll just drag in a spacer now<br \/>we need the post comments widget that&#8217;s<br \/>just another dynamic widget so it&#8217;s<br \/>under the theme elements in the widget<br \/>menu here are the only available skin<br \/>and styling right now for this widget at<br \/>the time of recording anyway its theme<br \/>comments this uses the currently active<br \/>themes design and layout for the comment<br \/>forms so for now that&#8217;s totally fine it<br \/>doesn&#8217;t look exactly like flywheels but<br \/>it&#8217;s okay then we have links to more<br \/>articles underneath this is now a<br \/>completely new block on the page it&#8217;s a<br \/>whole new section so we&#8217;ve broken out of<br \/>the main content column now out of that<br \/>three column layout so in our template<br \/>or add a new section it can be one<br \/>column in the section settings in style<br \/>I&#8217;ll give it a really light background<br \/>color<br \/>and again for speed I&#8217;m going to fast<br \/>forward this next bit and then explain<br \/>why I did so this image is just an image<br \/>widget this is just a head in widget I<br \/>also added a good bit of padding to this<br \/>section just to create some room inside<br \/>the section itself and then for the<br \/>posts themselves an element saw has a<br \/>post widget which is perfect for this<br \/>drag that in<br \/>okay we&#8217;ll want the cards skin three<br \/>columns is great<br \/>we only want three post property Oh use<br \/>only the medium-large version of each of<br \/>the featured images that&#8217;s totally fine<br \/>the image ratio on flywheels blog is<br \/>very small is about not 0.3<br \/>in metadata we don&#8217;t want day or<br \/>comments<br \/>the badge over the image we can remove<br \/>that flywheel don&#8217;t display one and then<br \/>down to query now that just means which<br \/>posts we want to show now we want to<br \/>leave this as showing post that&#8217;s great<br \/>but further down in advanced let&#8217;s say<br \/>order by two random I&#8217;ll just pull in<br \/>random post which is fine for this<br \/>purpose important here we need to always<br \/>exclude the current post from displaying<br \/>in this block this block is more<br \/>articles so we don&#8217;t want the same<br \/>article being suggested that we&#8217;ve just<br \/>been reading and then in style tab on<br \/>the card we don&#8217;t want each card to have<br \/>a box shadow so let&#8217;s turn the hoff here<br \/>then under content so we&#8217;ll make the<br \/>title nice kind of dark grey<br \/>we want the title font to be Montserrat<br \/>under the excerpts make those around<br \/>sixteen pixels size<br \/>and then for the reidmar there can be<br \/>the same<br \/>okay let&#8217;s just preview that quickly<br \/>he&#8217;s looking pretty good one more bit to<br \/>do let&#8217;s check flywheels blog one more<br \/>time so the last part of the layout is a<br \/>full-width email signup block at the<br \/>bottom of the page it&#8217;ll be hard to get<br \/>this exact layout and effect without a<br \/>fair bit of custom CSS code the precise<br \/>way this laptop image sits within this<br \/>block especially responsibly now their<br \/>layout is hand coded I don&#8217;t want to go<br \/>down a CSS rabbit hole here in this<br \/>video so let&#8217;s get pretty close<br \/>using just elements or standard controls<br \/>and there&#8217;s a little bar underneath with<br \/>links to fly with all social channels as<br \/>well so once more for speed I&#8217;m going to<br \/>build this book fast forward and then<br \/>explain what I did so this is a new<br \/>section it&#8217;s got two columns with a<br \/>purple background color<br \/>this is just an image widget I&#8217;ve not<br \/>changed any styles on this but in the<br \/>section itself in advanced<br \/>notice I added top padding so that&#8217;s<br \/>that space here I added some left and<br \/>right padding to give breathing room on<br \/>smaller screens I&#8217;ve done that for every<br \/>section but notice there is zero bottom<br \/>padding that&#8217;s just so that the image<br \/>sits on the bottom of the section I<br \/>didn&#8217;t want a gap down here and then<br \/>here on the right is a head in widget<br \/>this is set to Museo sans rounded which<br \/>is a Typekit font I set that integration<br \/>up earlier and the standard element or<br \/>form with a bit of styling and that&#8217;s<br \/>pretty much it it&#8217;s not exactly like<br \/>flywheels but it is close and then<br \/>finally that footer social channels bar<br \/>so this is just a two column section<br \/>with a dark purple background and I set<br \/>the columns to be 50% with each this is<br \/>ahead in widget now I set this one to be<br \/>right aligned just so it sits over here<br \/>and then the social icons widget with a<br \/>bit of styling shake set to me circle<br \/>and then in style just a bit of custom<br \/>collar styling that my friends is the<br \/>entire single post template complete<br \/>whew<br \/>now of course at every stage we should<br \/>also have checked responsive to tweak<br \/>how it all looks on tablet and mobile<br \/>but if I go back and do that in this<br \/>video we&#8217;re all going to be here all day<br \/>I&#8217;m sure you&#8217;ve got better things to do<br \/>so sticking to desktop mode for now<br \/>let&#8217;s have the moment of truth let&#8217;s see<br \/>how our template looks when it&#8217;s applied<br \/>to all our blog posts so first we need<br \/>to publish our new template and we now<br \/>set the display conditions meaning where<br \/>did we want this template to be applied<br \/>so add condition and we don&#8217;t want it<br \/>apply to all singular or that will apply<br \/>to all pages and other things too we<br \/>only want blog posts so it&#8217;s all posts<br \/>and then publish and job done okay let&#8217;s<br \/>see how this looks I&#8217;ll come over to the<br \/>list of posts in the WordPress admin<br \/>panel hover over the top post and view<br \/>and yet that looks great so here&#8217;s that<br \/>post featured image the post date author<br \/>the author profile all pulled in via<br \/>element source dynamic which is that&#8217;s<br \/>for you another one<br \/>and this looks great as well all this<br \/>dynamic data pulled in from the blog<br \/>post that we&#8217;re currently viewing right<br \/>now at one more<br \/>and there we go featured image post<br \/>title date author category content as<br \/>well as all the other elements that we<br \/>added to and that&#8217;s it now we have one<br \/>master single template that powers all<br \/>our blog posts in future if we want to<br \/>redesign our blog all the way across our<br \/>site we can do it in one place by<br \/>editing our single template in<br \/>elementals library<br \/>Annie&#8217;s greats and not be restricted by<br \/>our themes single post design hope you<br \/>enjoyed this video I&#8217;d love to hear what<br \/>you think if you&#8217;ve got any questions or<br \/>comments drop them below this video and<br \/>I&#8217;ll do my best to answer huge thanks to<br \/>the Elementor team for having me as a<br \/>guest today be great fun thanks guys<br \/>I&#8217;ll see you all soon<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview In this video, Elementor educator &amp; designer Dave Foy shows step-by-step how to recreate the popular Flywheel blog. Dave Foy teaches non-coder designers how to build their businesses faster and more profitably with Elementor. Transcript hi i\u2019m dave roy from design build web and i\u2019m here today to show you how to [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":9710,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[41],"class_list":["post-2607","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","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>How to Design a WordPress Blog Using Elementor - 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\/how-to-design-a-wordpress-blog-using-elementor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Design a WordPress Blog Using Elementor - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this video, Elementor educator &amp; designer Dave Foy shows step-by-step how to recreate the popular Flywheel blog. Dave Foy teaches non-coder designers how to build their businesses faster and more profitably with Elementor. Transcript hi i\u2019m dave roy from design build web and i\u2019m here today to show you how to [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-design-a-wordpress-blog-using-elementor\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-22T08:55:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-24T12:25:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Design-a-Blog.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"23 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Design a WordPress Blog Using Elementor - 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\/how-to-design-a-wordpress-blog-using-elementor\/","og_locale":"en_US","og_type":"article","og_title":"How to Design a WordPress Blog Using Elementor - Academy","og_description":"Overview Transcript Overview In this video, Elementor educator &amp; designer Dave Foy shows step-by-step how to recreate the popular Flywheel blog. Dave Foy teaches non-coder designers how to build their businesses faster and more profitably with Elementor. Transcript hi i\u2019m dave roy from design build web and i\u2019m here today to show you how to [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-design-a-wordpress-blog-using-elementor\/","og_site_name":"Academy","article_published_time":"2021-06-22T08:55:03+00:00","article_modified_time":"2023-04-24T12:25:38+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Design-a-Blog.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"23 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-design-a-wordpress-blog-using-elementor\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-design-a-wordpress-blog-using-elementor\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"How to Design a WordPress Blog Using Elementor","datePublished":"2021-06-22T08:55:03+00:00","dateModified":"2023-04-24T12:25:38+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-design-a-wordpress-blog-using-elementor\/"},"wordCount":5345,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-design-a-wordpress-blog-using-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Design-a-Blog.jpg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-design-a-wordpress-blog-using-elementor\/","url":"https:\/\/elementor.com\/academy\/how-to-design-a-wordpress-blog-using-elementor\/","name":"How to Design a WordPress Blog Using Elementor - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-design-a-wordpress-blog-using-elementor\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-design-a-wordpress-blog-using-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Design-a-Blog.jpg","datePublished":"2021-06-22T08:55:03+00:00","dateModified":"2023-04-24T12:25:38+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-design-a-wordpress-blog-using-elementor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-design-a-wordpress-blog-using-elementor\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/how-to-design-a-wordpress-blog-using-elementor\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Design-a-Blog.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Design-a-Blog.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-design-a-wordpress-blog-using-elementor\/#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":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"How to Design a WordPress Blog Using Elementor"}]},{"@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\/2607","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=2607"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2607\/revisions"}],"predecessor-version":[{"id":9447,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2607\/revisions\/9447"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/9710"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=2607"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=2607"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=2607"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}