Carbon is a minimally designed, grid-based blogging theme. Ideal for travelers, photobloggers, foodies, and anyone who wants an elegant site with just the right customization options. Easy to set up and maintain, Carbon is fully responsive and flexible, offering predefined layouts for your blog.
Optional Header Image and Intro Message
You can add a header image to your homepage, and add a short intro message to your visitors, letting them know what your blog is about.
The header image with a custom message
Engaging Post Covers
Carbon places the post title, post details, and post excerpt over the featured image of each post, adding subtle visual flair to your stories. In the single-post view, your visitors will enjoy an engaging, full-width experience, while on blog pages you can choose between several layout configurations via the Theme Options panel.
A post cover at the single post page
Flexible Blog Layouts
Take control over the appearance of your posts grid and switch between four blog layouts. You can preview them in the Customizer, and choose the one that works best for you.
Post Titles Visibility
Post titles are shown over the Featured Image by default, but if you are looking for a more photo-tile approach, you can opt to show the post titles on hover, leaving more room for immersive images to engage your readers.
Carbon has one widget area in the right sidebar. If no widgets are added, the layout will be full width.
A full width layout
Your Content in Focus, on Every Device
Carbon is built with a responsive layout that adapts beautifully to any device, whether a smartphone, tablet, desktop, or laptop.
Quick Specs (all measurements in pixels):
- The main column width is
- The sidebar widget area width is
- The featured-image size scales to the size of the browser window and has a maximum width of
1600 and height of
With Carbon, your blog will look stunning out of the box. If you’d like to tweak its appearance, the theme’s settings are accessible via the Customizer.
The most important image in your post is the Featured Image, the full-width image that serves as your post’s “cover.” It’s the first thing your readers see, so it should convey the message of your post.
Featured Images will also show on your blog and archive pages, so Carbon looks best when you have selected one for each of your posts. The Featured Image scales to fit the browser window, and we recommend using images sized at 1600 x 1600 pixels.
If you look at the Carbon demo you will see that the posts have a subtitle under the post title, which is a great way to let your readers know what the post is about. You can achieve this by adding an Excerpt when creating your post.
To add widgets to the sidebar, go to Customize → Widgets and drag any of the available widgets to the Main Sidebar widget area. Leaving this widget area blank will result in a full-width site, without sidebars.
Set up your overall blog layout and other options via Customize → Theme Options.
Carbon lets you change the layout of your blog and archives, and choose one of four options for your posts grid appearance. Select the desired layout and preview its effect in the Customizer.
Posts Grid Titles Visibility
This option lets you decide whether the titles of your posts are shown by default, or if you prefer to show titles on hover. This setting will not have any effect on the mobile version of the theme, where the post titles are always visible.
If the titles visibility is set to “Visible on hover” your posts will only show the titles on hover (right post).
Sticky Post Label
This option allows you to customize the label for the Sticky Post. For example, on the demo, we use the word “Featured.”
Post Details Options
This section allows you to choose whether to show an author avatar and / or the reading time on the post cover.
Author avatar and reading time in the post details
Here you can add some text to your footer, like a copyright notice.
Header Image Text and Description
If you have set a Header Image on your homepage, you will see these two fields. The Header Image Text displays a nicely styled title over the header image, and the Header Image Description field adds some text underneath it. Use these to create an introductory section on your homepage to let your readers know what your blog is about!
A header image with a custom message
Carbon has three menu locations: the Header and Footer areas are best for navigation, while the Social menu at the footer includes links to your social media profiles. Follow the instructions for adding a custom menu to set these up.
The Primary Menu Location is located at the very top, next to your logo
The Social menu location (bottom right) resides below the Footer menu location.
Social Links Menu
Add as many custom social links you wish and the corresponding social icons will appear in the footer. Here is the list of all supported social icons:
- RSS Feed
Read more about how to set up your Social Links menu here.
Carbon offers the ability to add a Header Image to your homepage with a custom message for your readers. To add a Header Image, go to Customize → Header Image and select an image.
Once you have added a Header Image, you can edit the title and description that will appear over it by going to Customize → Theme Options and editing the Header Image Title and Header Image Description fields.
You can choose to use a custom logo by going to Customize → Site Identity and following these instructions.
Customize → Content Options allows you to edit the appearance of your content:
- Display an author bio at the end of each post.
- Choose to show or hide the Post Publish Date, Category, or Tags.
Read more about Content Options here.
Carbon comes with some CSS styles you can add in the HTML Editor. These classes are optional and add a nice touch to your stories.
You can stylize introductory text for your post or page by wrapping the text in a span tag with the class: “run-in”.
<span class="run-in">This is your introduction text.</span>
Give visual emphasis to the first character of your post by wrapping it in a span tag with the class: “dropcap”.
<span class="dropcap">D</span>rop caps are awesome.
You can split a piece of content in two columns by wrapping a
div element with the class of “twocolumn” around it:
This text would appear in two columns.