By default, there aren’t many options inside Gutenberg for editing your website’s tablet and mobile designs.
The idea is that the design will adapt automatically to smaller screens, but this doesn’t always work as intended.
To fix this and have more control over Tablet and Mobile, you can install a plugin. Here are our best recommendations.
Best Plugins for Mobile Design in Gutenberg
Use Editor Plus to enhance Gutenberg’s mobile design capabilities.
Or use Spectra to add new and responsive Gutenberg Blocks to your editor.
You can also use both of them together, but it’s likely overkill. For simplicity, we prefer Editor Plus.
Here’s how to set up Editor Plus
Editor Plus enhances Gutenberg with additional responsive controls for your blocks, allowing precise adjustments for mobile and tablet views.
- Setup:
- Go to Plugins > Add New in your WordPress dashboard.
- Search for and install Editor Plus.
- Activate the plugin.
- Usage:
- Edit a post or page.
- Select a block and access new responsive options in the settings.
- Alternatively, on the top-right, you can switch to Tablet or Mobile view.
- Adjust margins, padding, and font sizes for different screen sizes.
- The design changes will only apply to the device view you selected.
Here’s how to set up Spectra
Spectra adds new blocks for you to use inside Gutenberg. It also lets you show or hide blocks based on screen size, offering more flexibility in mobile design.
- Setup:
- Go to Plugins > Add New in your WordPress dashboard.
- Search for and install Spectra.
- Activate the plugin.
- Usage:
- Open a post or page and add blocks from the Spectra category.
- Configure display settings for various screen sizes and preview your changes.
Conclusion
Editor Plus and Spectra are excellent tools to enhance Gutenberg’s mobile design capabilities. Editor Plus is the simpler solution of the two.
You can see Editor Plus in action here, and you can learn more about Spectra here.
