Core Figma skills
Learn frames, layouts, reusable components, typography, colour and global styles.
Design with clarity.
Build with Elementor.
Move from your first Figma frame to a finished, responsive WordPress website with Elementor.
Get the Elementor courseFigma foundations, then a practical Elementor build.
A DESIGN THAT'S READY TO BUILD
Good ideas,
built with purpose.
Design first, so your Elementor build has a clear direction and clients can contribute before development begins.
01
Design faster in Figma.
Explore layouts, typography and colour in Figma, then shape a complete one-page website before opening Elementor.
02
Make collaboration smoother.
Bring clients into the design process, gather feedback and agree the direction before building it in Elementor.
03
Build the design in Elementor.
Use Containers, Flexbox and global styles to turn the approved Figma design into a responsive Elementor website.
THE ELEMENTOR COURSE, FROM START TO FINISH
One project.
From Figma to Elementor.
Learn the shared design foundations, then rebuild the same website with Elementor for WordPress.
01START WITH THE FOUNDATIONSDesign a website in Figma
Learn the Figma basics, then work through a complete one-page website design for a UI/UX designer.
- Set up frames, layouts and an 8-point grid
- Choose colour, typography and global styles
- Create reusable components and develop a clear design process
By the end, you’ll have a finished design and a foundation in the tools that make the next step smoother.
02THE WORDPRESS BUILD PATHBuild the design with Elementor
Rebuild the Figma design in Elementor using the Container widget and Flexbox. Apply global styles to keep the site consistent, then check each landing-page section and make the finished design responsive.
- Build flexible layouts with Elementor Containers and Flexbox
- Apply typography, colour and global styles
- Recreate each page section and refine mobile responsiveness
Course outline: Modules may be split or combined during course development to support the learning experience.
WHAT'S INCLUDED
Useful skills.
Practical support.
Focused lessons help you learn the process and apply it to a real design.
Time-saving techniques
Build a repeatable workflow with practical tools and clear, jargon-free instruction.
Build with Elementor
Take the project from design to a responsive WordPress site using Elementor Containers and Flexbox.
Bonus lessons
Go further with additional lessons that expand on the core course skills.
FROM COURSE STUDENTS
What students learned.
This course has been the missing piece in my web design process.
“I was impressed with this course. This is my first time using Figma, and Paul made it feel approachable. The additional resources and templates further complement the video modules. Combining the excellent video and resources with an approachable style suited for both beginners and the more technically experienced, there is something for everyone, and I certainly learned a few things.”
“Based on the strength of all the free content I’d consumed on Paul’s YouTube channel, I signed up for Figma to WordPress before the course even existed. I figured Paul was a safe bet, given that he demonstrates an instructor’s heart and regularly publishes useful video content. I am extremely happy with my purchase. The modules are all well-structured and logical. I’d been noodling with Figma for some time, but the first module finally made it click for me. Learning about Figma components alone was a revelation. I also appreciated Paul’s ‘Rosetta Stone’ approach. Building the same project with Elementor, Gutenberg and Bricks shows the strengths of each, but also shows to good effect of Paul’s underlying approach to designing websites that will be useful regardless of the platform you settle on. And, if you are thinking (like me) of migrating some websites from one platform to another, you couldn’t ask for a better course. I totally recommend it.”
What if the course isn’t right for me?
You can request a refund within 30 days of purchase, minus payment processing fees. Requests are discretionary and subject to the full refund policy.
How are the lessons delivered?
Training is delivered through a multi-part video series with additional written or printable information. After registering, you’ll receive an email with course links. Videos are recorded in full HD.
What format does the course follow?
Lessons are step-by-step and hands-on. Each module focuses on one part of the design and build process with practical, actionable steps.
What software or tools do I need?
You’ll need a free Figma account, WordPress installed locally or on a hosted server, and Elementor. The source course recommends the free Elementor version, with Pro preferred. Hosting and software may involve separate costs.
Can I enrol later?
Yes. When you enrol, the source course describes lifetime access, including future updates. Availability and payment details are shown on the course page.
How can I pay?
The source course page lists credit or debit card payment through PayPal or Stripe.
What happens after I enrol?
You’ll receive an email with details for accessing the course. Existing WPTuts course members can use their current login details, subject to any pre-launch sale terms.
Some course links are affiliate links. If you buy through one, WPTuts may earn a small commission at no extra cost to you.
READY TO BUILD YOUR FIGMA DESIGN?
Design it in Figma.
Build it with Elementor.
Learn a practical design-to-build workflow, from your first Figma frame to a responsive Elementor website.
Get the Elementor courseCovered by the 30-day refund policy. Terms apply.