Atomic Blocks Theme Help File

The Atomic Blocks theme and plugin is developed and maintained by StudioPress, creators of finely-crafted WordPress themes. We built Atomic Blocks to learn the new block editor and share what we’ve learned along the way. This help file will help you become acquainted with the new editor and our new plugin, Atomic Blocks.

What is Gutenberg?

gutenberg block editor

The new WordPress block editor, currently referred to as Gutenberg, is a new way to build with WordPress. Instead of relying on page building plugins, shortcodes, and the like, WordPress is bringing block-based editing to the core editor. The Gutenberg editor uses blocks to create all types of content, replacing a half-dozen inconsistent ways of customizing WordPress, bringing it in line with modern coding standards, and aligning with open web initiatives.

Please check out our Beginners Guide to Gutenberg article to become more familiar with the new Gutenberg block editor.

What are blocks?

When we refer to “blocks” or “Gutenberg blocks” we are talking anything that can be inserted into the new editor to create content. Basically, anything you insert into the new editor will be in the form of a block. The new editor comes with a handful of default blocks such as paragraph, image, gallery, and more, to help you create standard posts and pages. Developers will also be able to provide more advanced blocks to help you create even more dynamic posts and pages.

gutenberg block editor
A look at the new block-based editor.

The Atomic Blocks plugin provides you with a bunch of awesome content blocks that you can use to start building your site. Once the plugin is activated, the blocks will be activated and ready to use on your posts and pages. Atomic Blocks currently includes the following blocks:

How to use the Atomic Blocks theme

The Atomic Blocks WordPress theme can be used without installing Gutenberg or the Atomic Blocks plugin, but we encourage you to install both of the plugins to get the most out of the theme. The theme was built with the new editor in mind and is most powerful with both Gutenberg and Atomic Blocks installed.

Install the Gutenberg plugin

install gutenberg

Before you can use the Atomic Blocks plugin, you’ll need to install the Gutenberg plugin. The plugin is available via the WordPress.org repository, so you can install it in your WordPress admin by going to Plugins → Add New and searching for “Gutenberg”. You can also download it directly from the repository and install it manually. Eventually, the Gutenberg plugin will not be required once the new editor is merged into WordPress core.

Once Gutenberg is installed and activated, you’ll notice that you have a new Gutenberg admin menu item, which takes you to a nice little Gutenberg demo. You’ll also notice that your edit post and edit page views have a new appearance. There are lots of articles about the new editor and how to work with it. Check out the Atomic Blocks blog and Gutenberg News to find the best articles about the new block editor.

Install the Atomic Blocks plugin

install atomic blocks

Once you’ve installed Gutenberg, you can install Atomic Blocks in the same way. You can either go to Plugins → Add New and search for “Atomic Blocks” or download it directly from our website to install it manually.

Once you’ve installed and activated Atomic Blocks, you’ll be redirected to the Atomic Blocks Getting Started page which provides you with all kinds of info about the plugin, block usage, and more. You can also read the Atomic Blocks help file here.

Theme Options

atomic blocks theme options

The Atomic Blocks theme comes with several Customizer settings that you can use to customize your site to your style. To access the theme options, click Appearance → Customize → Theme Options in your WordPress admin.

Theme Options

  • Content Width: This setting will let you change the width of the content area in your posts and pages. Images and text will be constrained to this width unless you are using wide image styles.
  • Search Icon: Enable the Search Icon to add a search toggle to your menu in the header. The search toggle will drop down a search box that users can use to search your site.
  • Font Style: Choose between a sans-serif font style (Muli and Nunito Sans) or a serif font style (Frank Ruhl Libre). This will change the font displayed on the front end as well as in your post editor.
  • Body Font Size: Choose the font size you would like displayed in the main content area of your posts and pages.
  • Title Font Size: Choose the font size you would like displayed in the titles of your posts and pages.

Site Identity

  • Logo: Upload your own logo image in place of the site title and tagline. You can also choose to hide or show your site tagline.
  • Site Icon: Upload an icon to be displayed in the browser tab of your site.

Colors

  • Accent Color: Change the accent color you see throughout the theme such as links, buttons, and more.
  • Background Color: Change the background color of your entire site. Please note that changing this could require you to change the colors of fonts and other elements that may conflict with your new background color.

This theme has two different menus that can be used throughout the theme.

  • Primary Menu – This is the main menu found in the header of your site.
  • Social Icon Menu This is the social media icon menu found in the footer of your site. See the instructions below to set up the Social Icon Menu.
    • To add a social icon menu, go to Appearance → Menus.
    • On the left side of the Menu page, click the Links menu item to add to your social links.
    • Add the URL for each of your social profiles and a label for the link. The theme will detect which site you are linking to and display a matching graphic. Icons are supported for the following sites: Twitter, Facebook, Google, Instagram, YouTube, Vimeo, Dribbble, Github, Flickr, Codepen, Behance, Dropbox, Pinterest, Reddit, Soundcloud, Spotify, WordPress, LinkedIn, Stack Overflow, Slideshare, Medium, Apple, 500px, RSS and Email. If there is a popular service that isn’t supported and has an icon on FontAwesome, let us know and we’ll add it to the theme!
    • Now that you have the menu created, you need to assign it to the Social Icon Menu in the Theme Locations section
    • Save the menu when finished.

Page Templates

This theme comes with a few different page templates to help you help integrate with Gutenberg and other page builders. To apply a template to a page, use the Template drop down menu in the Page Attributes box.

  • Full Width: This template will stretch the content area to the full width of the content container. Your content will remain centered and have padding on the left and right side. You can also achieve this full width effect for all pages by going to Appearance → Customize → Content Width.
  • Page Builder: This template will stretch your content from one edge of the screen to the other and remove any margins or paddings for the entire content area. Essentially it gives you a blank canvas for your page, with the header and footer still available. This will allow you to use Gutenberg blocks or other page builders to add sections with their own content or padding.
atomic blocks footer widgets

The Atomic Blocks theme comes with a footer widget area that you can use to customize your footer. There are three widget columns that you can use to add widgets. The footer widget columns have a dynamic width, meaning if you only choose to use two columns, the column width will adjust to display the columns evenly in the footer.

Media Alignment Options

One of the aims of the new block editor is to let you build outside of the box, so to speak. One way to do that is by adding wide image styles to your media such as images, galleries and videos. The Atomic Blocks theme provides wide and full-width media styles for you to use. Please note that you will need to have the Gutenberg plugin installed to take advantage of these new styles.

atomic blocks alignment
Alignment options.

After you’ve added a photo, gallery or video to your post in the new block editor, you’ll get a toolbar above the content, as seen in the screenshot above. The toolbar have several alignment options including left, center, right, wide, and full width. Using these, you can determine the width and alignment of your media.

atomic blocks wide styles
Wide image alignment.

Clicking wide alignment will make the content go almost the full width of the page, but it will not hit the edge of the page. Instead, the media will have a padding on the left and right side of the page.

atomic blocks full screen style
Full width image alignment.

Clicking full width alignment will take your media to the very edge of the page, giving you an edge-to-edge, full-screen display.

Eventually, wide and full width alignment will be available for more than media, letting you create sections that expand to the full width of the page to accomodate more dynamic layouts.

Learn more about Gutenberg

If you’d like to learn more about Gutenberg, please visit our Beginner’s Guide to Gutenberg and visit our blog which will have regular tutorials and resources. We also publish a blog called Gutenberg News, which is a curated collection of Gutenberg tutorials & resources!

Finding good photos

Finding good photos for your site can be tough and expensive, but we’ve got a few sites that offer really nice photography for free. Feel free to browse these sites and find some photos that highlight your content.