How to Roll Your Own Custom Layout in Under 30 Minutes—FREE Elementor Mini-Course

How to Roll Your Own Custom Layout in Under 30 Minutes—FREE Elementor Mini-Course


Hi there. I’m going to show you how to build a gorgeous,
clean, responsive layout, in well under 30 minutes. It’ll be drag-n-drop, it’ll be 100% custom
design, and no code required whatsoever. So if you’re a non-coder designer, this is
especially for you. I’ll be using WordPress and the amazing Elementor
page builder plugin, and in a series of short and to-the-point videos I’ll be showing you
exactly how you can build layouts like this quickly and easily. An d then at the end I’ll have a bonus video
with 5 of my Elementor workflow tips and tricks. Alright, time to check out the page we’re
building. So here’s the page. It’s designed by John Fraskos from AnalogWP,
and a massive thanks to John for very kindly letting me use it for this walkthrough. You can actually grab this design template
from his site, it’s called Pulse, as well as a whole load of other free and premium
Elementor templates as well. Just remember, when I’m talking you through
the design decisions I’m making, just remember that the design and the original template
is all John’s work. You can follow along with this build with
any WordPress theme, and we’re just using the blank Canvas template that comes with
Elementor. I’ll be using the free version of Elementor
apart from 1 Pro widget, but I’ll tell you a free alternative for that too when we get
to it. And we’re using all default Elementor settings,
apart from I’ve disabled global colors and fonts. And I’ve also added the brand colors to
Elementor’s color picker already, in the left menu here. And one last thing before we get started… I’m a big believer that my email subscribers
always get my best stuff, so a quick heads-up… after THIS video, you can then head over to
my site to subscribe to see the entire series, plus the bonus video that I mentioned. I’ll give you the details shortly. Alright – that’s enough talk – let’s go. We’ll start off by creating the page. That’s Pages and Add New to create the new
page. I’ll give it a title – ‘Landing page – Pulse’
will be fine. And I’ll choose the Elementor Canvas template,
that’s the full width blank canvas template that comes with Elementor. I’ll save the actual WordPress page now
so it saves our title and template settings. So I’ll hit Publish. Clicking Edit with Elementor launches Elementor
to edit this page. Here we basically have our Elementor widgets
on the left, all our functionality, and the live page preview area on the right. And we’re going to drag the widgets into
the preview area to build our page. Each block of the design is a section – a
section in Elementor is a full width row or block that stretches all the way left and
right across the screen—if you’re using a full width template like the Elementor Canvas
or maybe if your theme comes with a full width template. So to make our first section, we click Add
New Section here. I’ll choose this configuration for now,
we can tweak that more later. You can see the skeleton of the columns structure
here. The Section settings are accessed by hovering
over any part of the section or its columns. Just click section and that section’s settings
appear here on the left. In the Layout tab, you can see that all content
in this section will be boxed by default, and that just means that it’ll be constrained
by default to the Content Width you set in Elementor’s main settings. We’ll leave Columns Gap at default. Content position by default places all content
in this section at the top, but I’m going to set this to middle, so the content is always
in the middle of the section, no matter how tall it is. Firstly, I want to add the base flat purple
background color to the entire section. So still in the section settings, up to style
and a classic background – and a classic background is either a color or an image. Choose the colour – I already set this in
the color picker. Back up to the widget chooser menu here to
reveal all the widgets again – I’ll choose Heading. Drag it into place. I’ll overtype the text here. Actually I don’t want this to be an HTML
heading as such, so just a paragraph tag will do. But using the heading widget like this is
handy when you don’t need all the formatting tools that come with the text editor widget. Anyway let’s style it. So in the Heading widget settings, up to style,
make it white. Typography settings are always off by default,
to allow your theme’s styles to shine through. But we’re going to turn it on, I’ll type
in the size in pixels here, 13 pixels is nice. Set the font. In the bonus follow-up video to this I’ll
show you a much better idea for setting your fonts, but for now and for speed let’s just
choose Muli here. We’ll do it the long way round for now. Font weight 700. Nice and bold. We’ll make it uppercase. Letter spacing, I’ll just bump up the space
between the letters a bit. Alright back to the widget chooser menu. Now we want a bit of breathing room between
our headings, so I’m going to pop in a spacer just to add some nice breathing room here. 20 pixels tall is fine. And we need the next heading, so back to the
widgets again, drag in the main Heading. I’m going to type in the text. I’m going to leave this as an H2, which is
a sub-heading. Arguably it should be H1 maybe if it’s the
very main heading on your page, but I’ll leave it as H2 for now. Let’s style it. Make it white, turn typography on. I’m going to use the slider for pixel size
here, up to, ummm, 65. Set the font again: we’re using Playfair
Display. 700 weight. I’m going to decrease the letter spacing to
-1.5 to make it tighter. Now I going to need another spacer here under
the heading. I could just drag in another spacer widget,
but seeing as we’ve already got one set to 20 pixels here already, I’m just going
to duplicate this existing one, then drag it down here into place. Now we need some text. So I’m going to choose a Text editor widget. And just make sure when you drop it in that
you place it under the spacer. I’ll pop in the text. Styling – I’ll set the text white, I’ll
turn on typography. I’ll make this 18 pixels. And font family for this one is Muli as well. That all looks fine. I’ll save this now. Get into the habit of saving regularly. For speed, there’s a keyboard shortcut for
saving: it’s CTRL+S on Windows, CMD+S on Mac. Saves you a bit of time keep dragging your
mouse over to click the button. Right back up to the widgets again. Now we need to pop in the signup form. The form widget we’re using here is an Elementor
Pro feature, and Elementor Pro is a paid add-on. You could instead use something like the free
Contact Form 7 plugin to make the form and then paste in its shortcode here. I have to say, I love the form designer that
comes with Elementor Pro, it’s really easy to style and it’s consistent with all the
other Elementor widgets as well. But it is the only Pro widget we’ll be using
for this design. First thing, get rid of the fields we don’t
need. We only need email here. We’ll set the text for the field label that
appears above the field AND also the placeholder that appears inside the form field, we’ll
set them both the same, but I’m going to actually hide the label here so we don’t see it. I’ll set the input size to Medium. And I’ll make the button medium too just so
they’re the same size. Styling – make the field text uppercase, and
I’m going to take the default rounded corners off by setting the border radius to zero. And now the button… I’ll set that uppercase too, and I’ll just
choose the background colour that we already set in the color picker. I’m going to turn rounded corners off on the
button too, zero border radius. Ok our next job is to drag our image into
the right hand column. So we go back up to the widgets – drag in
the image widget. I need to now choose the image from the media
library. I’m going to back in later and set the alt
text on all the images, and the alt text is just a brief description of the image. But I’m gonna skip that for speed for now. John Fraskos who designed this landing page,
he actually already created and uploaded all his images at the very largest sizes they’ll
ever need to be for the design, which is really good practice… So I can just set the image size to full here. I’ll align the image over to the right so
it’s always over to the right of the column, that’s just good for cases where the width
of the column it’s in is wider than the image. The image will remain flush over to the right. Let’s have a quick preview, we’ll click the
preview arrow tab here. Not too bad so far. I’m going to go back and just adjust those
column widths by dragging them here, and I want those to be 40/60. That’s better already actually, a much better
balance. The text has more breathing room. And just like before with the save button,
I don’t have to click the preview tab over and over again. There’s a keyboard shortcut – CTRL+P on
Windows and CMD+P on a Mac. Save again. Make sure you save often, so you can always
roll back to previous saves. You can go up to the Revision History tab
in the left hand menu. Right let’s apply that funky background
effect to the entire section. Because so far we just have a flat purple
colour. So we need to edit the section by hovering
and clicking Section here. Over to Style. And you can see the color that we’ve already
applied here. I’m going to add the image of the shapes first,
the background image. So I’m going to select the image, and I’ll
choose this transparent PNG background image. Notice how at the moment it covers the entire
section – and actually by default background images do that, they tile and repeat over
and over again, unless you set them to do otherwise. So down to the settings here. I’ll set it to no-repeat, and that’ll stop
it repeating. We’ll set it to be in the centre but on
the right of the whole section, so center right. I’m going to set attachment as fixed, so it
stays in a fixed position when we scroll the page. And I’ll set the size to auto. Preview quickly… now you can see when we
scroll the background image stays in a fixed position. On the design we’ve also got a nice gradient
effect, instead of just the flat purple color. We could apply the gradient to the main background,
but instead we’re going to apply the gradient as a background overlay, so that’s going to
overlay over the top of the existing background, and it’s going to let some of that flat color
show through as well. You’ll see what I mean in a moment. But down to background overlay. Choose gradient. I’m going to choose the bright blue for the
first color, and this rich purple for the second. We’ll tone it down in a bit. The first color can stay all the way over
to the left, but the 2nd color let’s move its location a bit. The angle is 180 degrees at the moment, straight
up and down, but in John’s design it’s more interesting than that. So let’s change the angle of the gradient
right over, and then to finish, l just need to reduce this overlay’s opacity, its transparency,
so it’s just a subtle gradient over the top of that flat colour but it shows some
of the flat colour as well. And that looks beautiful. Save and preview with the keyboard shortcuts
again. And you can see how that nice gradient works
also in conjunction with that fixed background image too. Now we also have the funky shapes at the bottom
of the section, so we’ll use this section’s shape divider settings for this. So still in the style tab. So we want the shape at the bottom of the
section. Let’s choose Waves. Have a little play with the width and the
height. And we can leave everything else as it is. And I’m just going to give that a quick preview,
see what we’ve got…. yep that looks really nice! Ok we’ve got our content in, but now we
need to give this whole section some more breathing room, you might have noticed it’s
really crushed at the moment (although that’s partly because I have the whole browser window
zoomed in for this video, just to make it easier for you to see what’s going on). But we definitely need more breathing room
all the way around this section. To do that, we need to come up to this section’s
advanced tab. To add spacing in web design, you’ve either
got margins or padding. Margins adds more space outside things, padding
adds space inside things. And here we want more space inside the section,
so padding it is. Unlink the padding, so we can have a different
value for each one. And I’m gonna go with 160 top and bottom,
80 pixels left and right. And that just really allows all that to breathe. In the design, the bottom of the image actually
overlaps the bottom of the section, it cuts right across the wave shape, it looks really
nice. And to do that we’re going to use negative
margins. Negative margins are a great trick for all
sorts of layout effects which I’ll be going into lots more depth on in other training. But here right now, I just want to pull everything
under the image up, I want to pull the whole section up. You’ll see the effect in a moment. So I’m going to add more and more negative
bottom margin to the image, to pull the section under it up. And you can see more clearly when we preview,
how the image now cuts across the top of the waves shape and the bottom of the section,
and that looks really good. Quick save again. Alright, just a few more small tweaks. We have the default columns gap setting on
this section, if you remember, and default columns gap, although it adds 20 pixels between
each column, the way it does that is by adding 10 pixels padding all the way inside each
column. I’m actually going to remove that default
10 pixels padding, I’m going to go to Column settings and advanced and set all padding
values to zero. And the reason is really, we’ve got plenty
of natural spacing here already in the design. And I’m gonna do that the same for the 2nd
column too. Finally, we just need to quickly check some
responsive basics, just for speed for now. There’s lots more we can do with responsive
editing in Elementor, but for now… just click the responsive icon down here. Check tablet… and mobile… and yep, you
can see, that large amount of padding that we added to the whole section earlier for
desktop, it just won’t look that great on smaller screens. To fix that… I’ll first go back to tablet here, we’ll
tackle tablet first. Then we’ll just go up to this section’s
padding settings again. Tablet and mobile automatically take on whatever
you set for desktop by default. You can see there’s now a tablet and mobile
icon, we’re on tablet right now. We need to override what we set for desktop
before, so I’ll unlink the padding, make it 80 and 40 instead of 160 and 80. And that’s better. Alright, and click mobile – now mobile takes
on whatever was set for tablet, but we’ll override that and make that 40 and 20. And that looks way better on smaller screens. Just scroll down… you look down here, on
now mobile our columns are now on top of each other, which is great, but they are a bit
pushed up together. So what I’m going to do here is just add a
bit of bottom margin to the bottom of column 1, and that’s going to just push column 2
away from it. If you remember, margins are on the outside
of elements. And I think that looks good! Ok, so we’ll save. I’ll use the responsive menu down here to
cut back to the desktop view. And that looks really really nice. Section 1 – done. So that’s the end of part 1. Hope you found that useful to see the process
and the design decisions made and just how easy Elementor makes it to build responsive
layouts like this. Now please leave me a comment below and let
me know what you think, or if you have any questions. Subscribe to my YouTube channel if you haven’t
already. As I mentioned at the start, my email subscribers
get all my best stuff, so to get the rest of the series and the follow-up bonus tips
video, just hop over to designbuildweb.co/elementor-mini-course/. See you soon. [music]


51 thoughts on “How to Roll Your Own Custom Layout in Under 30 Minutes—FREE Elementor Mini-Course

  1. Amazing tutorial! I've been wondering how analogwp make his templates, they are pretty awesome and stylish! So this is a great way to learn, you always explain clear as crystal and don't forget even the small details like saving the template. Greetings from Mexico!

  2. I am glad to see your new video. Amazing tips, and hints. Every time something new. Please carry on.

  3. EXCELLENT tutorial, Dave..and here I thought I may already be beyond learning this… but I've picked up some great tricks…and you are explaining it so well! Greatly appreciated. Thank you!

  4. Do you know a good place to get paid/free templates for small business websites besides in ones in elementor?

  5. Great video Dave! These are really nice for picking up workflow tips along the way (Ctrl+P and Ctrl+S will be getting hit often now!)

  6. As always, you don't go overboard with STUFF we just don't need to know !! Well at this time. Videos are to the point, informative and to top it off !! Your a nice bloke. Listened to you on a old WP Innovator podcast; The tittle was #75 "Transferring Designs to WordPress" but I think you both went off topic a little, but it was great fun .. listening to to two 'Normal Guys" .. None of this "Mines bigger than yours bullsh*t" Just showed what a nice guy you are and why I now check out your blog / site / youtube and still listen to WP Innovator's Podcasts when I out on my 6 mile walk. Cheers Dave.

  7. Don't forget to hop over to https://www.designbuildweb.co/elementor-mini-course/ to grab the full series PLUS a bonus video with 5 of my Elementor workflow tips & tricks. 🙂

  8. Great series. What I would like to know is how to create a hero header on say a homepage and then make it render appropriately on tablet and mobile. Elementor Support suggested having two images, making one displaying on desktop and the other on mobile but worried about page load speed. Perhaps a future video idea?

  9. I've now watched all of your videos here on YouTube and it's a hallelujah moment for me. You're so educational and awesome. I've used Joomla for several years, and built a website for my football club with a premade template, Purity III from Joomlart. It's been okay, but very challenging every time I wanted to change some styling. The T3 Framework is hard for me to change CSS on my own. I almost every time needed to rely on support…

    Now those days are gone. When this season is over for my football club, I'll switch from Joomla to WordPress and build a new site for my football club with Elementor.

    And you also convinced me to get GP Pro. ☺

    Again, thank you very much for your educational videos and I hope to see more of them in the future…

  10. Hi Dave brilliant video – I am at the moment (a Divi User) but OMG !! i,m blown away watching what elementor offers like the section shapes thats a whole load of CSS in DIVI – I think I need to switch – and just read your review of Generatepress fantastic is all I can say – thank you – i,m off now to watch more of your videos 🙂

  11. Great tutorial, just one question: could you have the form at the bottom on mobile version? If so how would you do it? Many thanks

  12. G'day Dave, you make it all look like child's play, champion. Bloody informative, as usual, cheers, Cobber. Keep grinnin'.

  13. This entire series has been absolutely stellar Dave! I'm relatively new to WordPress and abandoned a Genesis child theme to do this on my own using GeneratePress and Elementor. So many great workflows and tips! I've done up to video 3 so far. Send me video 4 and the bonus video ASAP! Thanks Dave!

  14. I've seen that on your page when you click on a section there is an option to choose column or section.
    is a particular add on or is reserved only for pro version?
    i use free version and there is not that option.
    Thank you for your work

  15. What a refreshing set of videos!
    Really like your style which is quite relaxing but engaging. Most importantly though, your years of experience are clear, your depth of knowledge is great and everything is very well articulated. Thanks very much for providing this great content.

  16. Is the Pulse template still accessible? (looks like they may be temporarily disabled)?
    Love this tutorial Dave!

  17. Thanks Dave for the grate in depth tutorial . my problem is the woocommerce never displays all the items of the free shop i’ve tried adjusting all types of settings now am considering FTP route abit scary for me not had any experience with this tool some advise would help, your advise is so clear and precise you make learning a breezes thanks once again you are Thee Guru your Tutorials should come with a health warning “” Will make your Head swell with confidence””
    Hanso

  18. Hey Dave! Where did you get the photos from? Any idea how to recreate them using a graphic designer tool (Not any Adobe product)?

  19. You are definitely the best Elementor teacher out there, everything is so understandable and so pure. Thank you so much, you're the best.

  20. Love this! You're the main reason I chose GeneratePress, Elementor Pro, and WordPress…instead of Squarespace. Really appreciate your website, videos, and newsletter.

  21. Hi Dave, thanks for the videos. I've learnt a lot. Just a question, I'm trying to do this free… How does generatorpress stack up against Astrid…. Or 2019 wp theme? I'm just wondering if there is anything updated as these vids are a while ago…. Thanks

  22. Your content is fantastic Dave thank you. I've learned so much in a couple of days. Not been able to comment as watching on my TV while trying to build. You make it look so easy and your designs (and the designs you showcase) are top notch. Really appreciate it thanks.

  23. Hi Dave thanks for this brilliant tutorial. I want to use this wavey davey header but I want the wavey bit beneath the main page content. Is that possible?

    (I have a long thin header image at the very top, a standard wide menu bar below that, and then a wavey bottomed background that extends down into the page. The bottom overlays the main page of course and I'd like to have content sit on top of it. Hope this all makes sense!)

  24. The best explanation I have heard so far Dave. A very detailed explanation of the basics in creating a website. I highly recommend this to other newbies. Thanks, Dave. I hope you come up with more videos. Keep it going, please.

  25. Love your videos, easy to understand and implement hands on! the analogwp landing page you are using is no longer available on their site.

Leave a Reply

Your email address will not be published. Required fields are marked *