WPArenaWPArena is a premium online resource site of WordPress and is focused on providing excellent WordPress Tutorials, Guides, Tips, and Collections.

How to use Atomic Blocks to efficiently create WordPress pages and posts

Are you a WordPress admin? Or have you created your own personal WordPress site for blogging or selling a product or service? If you fall into one of those categories, you probably know a couple of things: WordPress is easy to use. WordPress made some profound changes to its interface. Both of those items are […]

0
293
How to use Atomic Blocks to efficiently create WordPress pages and posts
Are you a WordPress admin? Or have you created your own personal WordPress site for blogging or selling a product or service? If you fall into one of those categories, you probably know a couple of things:
  • WordPress is easy to use.
  • WordPress made some profound changes to its interface.
Both of those items are interconnected for most, but for some, the new interface isn’t quite as intuitive as it could be. In fact, some might find the new block-based UI a bit cumbersome, especially for creating posts that include more complicated blocks. If that sounds like you, you might be interested in Atomic Blocks, a WordPress plugin that makes it such that anyone, from a first time user to those in the custom software development business, can create posts and pages that include the likes of:
  • Post Grid. A full-width section with title, paragraph text, and customizable button.
  • Container Block. It allows you to combine several blocks into a single section.
  • Testimonial Block. Add customer or client testimonials with included avatar, text, and citation.
  • Inline Notice Block. A colorful notice or message with text, title, and dismiss icon.
  • Sharing Icons Block. A block dedicated to social sharing.
  • Author Profile Block. A block dedicated to user profiles.
  • Accordion Block. An accordion text toggle with title and descriptive text.
  • Customizable Button. Add a stylized button to a page or page with size, shape, target, and color options.
  • Drop Cap Block. Add a stylized drop cap to the beginning of your paragraphs.
  • Spacer and Divider. Add an adjustable spacer between blocks, with an optional divider.
  • A/B Pricing. Add a block to illustrate price comparisons.
As you can see, the list of included blocks can help you create posts and pages with more flexibility and speed. Let’s take a look at the installation and usage of Atomic Blocks.

What you’ll need

The only thing you’ll need is a WordPress site (version 5.2 or higher) that allows you to install plugins. That means you’ll need to also have admin login credentials for the site you’re working with. Don’t worry; Atomic Blocks isn’t even remotely challenging to install or use, so you won’t have to hire an IT software outsourcing company to get it done.

Installation

Installing Atomic Blocks is easy. Log into your WordPress site as an admin user. In the left navigation, click Plugins and then click Add New. [caption id="attachment_41965" align="alignnone" width="400"]add new plugin button Created with GIMP[/caption] The WordPress sidebar navigation. In the resulting page, type Atomic Blocks in the Search plugins field. [caption id="attachment_41966" align="alignnone" width="780"]plugin search page wordpress repository Created with GIMP[/caption] Searching for the Atomic Blocks plugin. You should see the Atomic Blocks plugin listed. Click the entry and then click Install Now. [caption id="attachment_41967" align="alignnone" width="585"]find atomic blocks Created with GIMP[/caption] Installing Atomic Blocks. After the installation completes, click Activate, and Atomic Blocks is ready for you. [caption id="attachment_41968" align="alignnone" width="577"]activate atomic blocks Created with GIMP[/caption] Activating the newly-installed plugin.

Using Atomic Blocks

Begin creating a new post or page on your WordPress site. In the new post or page, create a title block, and then click the + button to add a new block. [caption id="attachment_41969" align="alignnone" width="476"]my title block Created with GIMP[/caption] Creating a new block in WordPress. When you click the + button, a drop-down will appear. Scroll down until you see the Atomic Blocks listing. [caption id="attachment_41970" align="alignnone" width="430"]atomic blocks options Created with GIMP[/caption] The Atomic Blocks listing in the block creation drop-down. Click the Atomic Blocks listing to expand it and reveal all of the available blocks to add to your post/page. [caption id="attachment_41971" align="alignnone" width="471"]atomic blocks Created with GIMP[/caption] The available blocks that can be added. Say you want to add an accordion block (a block that expands to reveal text). Click AB Accordion. When the block appears, add the shown text in the upper space and the hidden text in the lower space. [caption id="attachment_41972" align="alignnone" width="646"]atomic block options Created with GIMP[/caption] The Accordion block ready for your text. To readers, that block will appear with the shown text and a right-pointing arrow (indicating there’s more to see). Clicking on that arrow expands the accordion to reveal the hidden text. [caption id="attachment_41973" align="alignnone" width="447"]atmc blocks Created with GIMP[/caption] The Accordion block in action. Continue building your post/page, using the various blocks provided by Atomic Blocks. Once you’re done, either preview or save and publish your page.

Conclusion

If you’ve ever wished there was an easier way to create more complex WordPress pages and posts, without having to learn how to code, Atomic Blocks is probably the exact tool you’ve been looking for. Add this plugin to your WordPress site and take your post and page design to the next level.
M
WRITTEN BY

Muhammad Abdullah

Tech geek, movie enthusiast, and blogger.

Responses (0 )