Free Tutorials and Advice for Non-Coder Graphic Designers on How to Build Websites

How to Switch to HTTPS – The Ultimate Guide for WordPress Non-Coders

You might already know: Google are on a mission to get ALL websites on the internet onto SSL.

They’re gradually rolling out more and more ways to force you to make your websites secure. Fairly soon they’ll display warnings on ALL websites in Chrome that aren’t HTTPS.

Now you don’t want yours or your clients websites flashing up scary ‘Not Secure’ warnings to visitors. That is definitely bad for business!

So the upshot is: if you haven’t already, you need to switch your WordPress websites to SSL.

How to Use the NEW Elementor Nav Menu Widget

A while ago, I made a tutorial showing you how to build your own custom header with Elementor.

That tutorial relied on a 3rd party plugin to handle the navigation menu. It wasn’t a bad solution… but at the time, it’s all we had.

Until now, Elementor has been purely focused on building static pages and templates.

That all changed today.

The NEW Nav Menu widget is released TODAY in the new version of Elementor Pro (affiliate link). Woooo hoooooo!!

How to Create Dynamic Page Headers with the New GeneratePress Premium

In this video, I’ll show you the beautiful new way of creating and managing page headers in the new GeneratePress Premium, version 1.4.

It’s a totally new approach that’s elegant, flexible and dynamic. Very powerful in fact!

With this new feature, you definitely don’t need a page builder like Elementor to create those nice full width or full screen hero image page headers. In fact in this particular demo, I haven’t even got Elementor installed!

FREE LIVE WEBINAR – Level Up Your Elementor Skills: 10 Killer Tips & Tricks

Whether you’ve only just started using Elementor, or you’ve been using it for a while, have you ever wondered….?

How other designers achieve the latest ‘wow’ layout and styling effects?
Am I making life harder for myself than it needs to be with Elementor and WordPress?
Am I missing key techniques that would improve the quality of my websites or speed up my workflow?
How do I take my web design work to the next level?

Well I’m pleased to say… I’m running a live 45 minute webinar training session, that will make it all clear.

I’ll be revealing (at least) 10 of my best tips and tricks, designed to help you level up your skills and start using Elementor like a boss!

How to Design a WordPress Single Post Template with Elementor

The default WordPress way of adding and displaying content is really easy.

You add a page or post. Fill in a few fields. Hit publish.

And when you view that page or post, WordPress uses your theme’s ‘single post template’ to display it on the front end.

There are loads of advantages to this typical approach:

It’s really easy to add content to the site. Just fill in some fields.
It’s easy to maintain, because the design of your posts is controlled in just 1 template.
It’s client proof—they can’t ruin your design.
It’s efficient and saves time.
It gives you—the designer—total control over design consistency.

Your theme does have styling controls for single posts and pages in the Customizer. For a lot of people, this is the only styling control they need.

But as a non-coder designer, you’re using Elementor because it gives you total custom drag-n-drop control of your designs.

How to Control Responsive Column Layouts in Elementor—REVISITED

Controlling the column layout for different responsive screen sizes in Elementor used to be…. errrrm…. less than ideal.

You created your column layout for desktop; you were stuck with that for tablet; and then for mobile, it all dropped to a 1 column layout.

You could tweak the mobile view in an obscure hidden setting that a lot of people couldn’t find, but… still not great.

I even made a video about a month ago showing you a hack for controlling the column layout better on tablet. A plugin came out to handle it too.

Well I’m delighted to say that the latest version of Elementor has made all this soooo much easier and flexible and powerful.

How to Create Your Own Custom Header with Elementor

You might already know that Elementor is an amazing WordPress page builder.

It allows non-coder designers like yourself to build 100% custom-designed WordPress pages, exactly as you want them. It’s really visual, and it’s drag-n-drop. It works in the way designers think, with no code required (hurray!)

But if you’re like many designers, once you’ve used Elementor for a while, you might soon find yourself thinking:

“Hmmm… my theme still handles my header – my logo and navigation area. I wonder if I can use Elementor to design my website header as well?”

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

Are you a non-coder designer who wants to build gorgeous, custom-design, responsive websites quickly and easily?

You want to drag-n-drop… and code is definitely NOT your cup of tea?

Well, today I’ve launched a brand new video mini-course, showing you exactly how to do just that!

Elementor Pro Tip: How to Control the Column Layout In Tablet View

Generally speaking, Elementor’s responsive editing features are pretty good.

But a lot of people get stuck trying to fully control the column layout in the tablet view. The editor doesn’t really give you any control, at least not at the moment. If you want to control how many columns there are side-by-side on tablets, using the default controls…. you’re out of luck!

[PART 2] How to Create More Complex Nested Layouts

I recently made a video called ‘How to Create More Complex Nested Layouts with Elementor‘.

I showed you a method first where I create a section with the ‘Add New Section’ button, and then dragged the columns widget in for further rows. I mentioned that I didn’t recommend this method because it can cause layout consistency issues. But… I didn’t elaborate on why!