Custom Gutenberg blocks clients can edit without breaking
Build homepage sections as custom Gutenberg blocks with block.json, render.php, locked InnerBlocks and block supports, so editors can't break the layout.
Service · Figma to WordPress
Figma to WordPress, faithful to your design
Send me the Figma file. I build it as a custom WordPress theme with the block editor or Elementor Pro, set up so your team can edit content without breaking the layout.
=== Figma to WordPress ===
- You send:
- the Figma file and a few lines about the project
- Built with:
- the block editor or Elementor Pro
- Editing:
- your team, without touching code
- Tested:
- mobile, browsers, WCAG 2.1 AA and performance
- Quote:
- fixed, per project
- Reply time:
- under 24 hours
What you get
-
A theme built for this design
A custom theme or a child theme built around your design, with its colors, type and spacing set up as global styles.
-
Blocks or Elementor
Custom Gutenberg blocks or Elementor Pro templates, depending on what your team already knows how to edit.
-
Editing without breaking the layout
Each section is set up so editors change text and images, and the structure stays in place.
-
Responsive, accessible and fast
Checked on mobile and across browsers, for accessibility (WCAG 2.1 AA) and for performance, before it goes live.
Designs I’ve built in WordPress
A site built from scratch from a Figma design, and two homepage redesigns built with custom blocks. Each one opens a short case study.
-
Orange County Dental Society
Site for Orange County’s dental association, built from scratch with WordPress blocks from a Figma design, with custom search plugins and an events calendar.
-
Louis Armstrong House Museum
Website for the historic house museum in Queens, New York. I redesigned the homepage with custom blocks and built an importer for its Virtual Exhibits.
-
Counterintuity
Website for a Burbank marketing agency that helps nonprofits. I redesigned the homepage with custom blocks and took care of maintenance and content.
How it works
-
Send the Figma file
Share the link and a few lines about the project. I reply within 24 hours with questions or a first read.
-
Fixed quote and plan
You get a fixed price, scope and timeline before any work starts, so there are no surprises on the invoice.
-
Build on staging
I work in Git on a staging copy and share progress you can click through and compare with the design.
-
Test, launch and hand-off
Mobile, browser, accessibility and performance checks, a deploy without downtime, and notes on how to edit everything.
Common questions
- Blocks or Elementor: which should we pick?
- Whichever your team will keep editing. I build with custom Gutenberg blocks or with Elementor Pro. If nobody has a preference, tell me who will edit the site and I’ll suggest one.
- Will it match the design exactly?
- That’s the goal: spacing, type and colors come straight from the Figma file. Where the design doesn’t cover a screen size or a state, I ask before deciding.
- What do you need besides the Figma file?
- The content or placeholder text, the brand assets, and access to the hosting or a staging site. If there’s an existing site, a login helps me see what has to carry over.
- Can you add to a site that’s already built?
- Yes. I’ve redesigned homepages on existing sites with custom blocks, such as the Louis Armstrong House Museum’s.
How I’ve done this before
Write-ups from the blog, with the code and the decisions behind it.
Have a project like this?
You’ll work directly with me, Rolando Escobar: a senior WordPress developer who has worked with US teams since 2019. Tell me what you need and I’ll reply within 24 hours with questions or a fixed quote.
Tell me about your project rolando@rolandowp.com
Working with an agency? See how I work under your brand. Other services: plugins and integrations, accessibility (WCAG 2.1 AA) and Elementor.
Tell me about your project
A new build, a plugin, or a site that needs care: send me a few lines about it. I reply within 24 hours.