Personalize your Site Appearance

Heap takes full advantage of the Customizer to make managing colors, fonts, layout and more settings, throughout your site as easy as possible.

And what better way to make style changes than with live preview? Simply change any setting and see it take effect right way from Appearance  Customize.

Theme Options

One of the most important components, that can be found under Appearance → Customize → Theme Options, where you’ll see options related to Logo, Scrolling, Header Elements, you’ll be able to add share services, play with your Custom JavaScript snippets or Import Demo Data.


You will find all the settings related to colors in the Appearance → Customize → Colors. By clicking on it, you have access to a number of different sub-sections with controls for the color of various elements on your site. We have grouped them in order to keep you focused on a specific area at a time (like the header or the footer). Each color option comes with an interactive color picker, allowing you to select any imaginable shade. If you already know what you are after, simply type in the HEX color code (in case you wish to put the exact same color in multiple settings).


Here you can find three major sections — Header, Content and Archive, where you can make different customizations like Setting the Logo Height, Making the Navigation Bar Sticky, Choosing the Menu Placement, Setting the Width of the Container, Showing the Main Sidebar in the Single Post Pages, Choosing Where to display the Share Links and much more.Here you can find four major sections — Header, Content,  Archive and Footer, where you can make different customizations like Changing the Logo Height, Making the Navigation Bar Sticky, Choosing the Menu Placement, Setting the Width of the Container, Choosing the Parallax Movement and much more.


This section allows you to change the blog settings in order to better match your personal style. You have the possibility of Choosing the Layout for Blog Archives (Masonry Grid or Classic List), Selecting the Number of Columns of masonry archives based on various screen sizes, Adjust the Excerpt Length and change the Excerpt “More” Text, Choosing to show or hide Archive Breadcrumbs, Managing Posts Meta Data, Showing a Sidebar in the Archive Pages and more.


Heap delivers the whole 600 Google Fonts library at your fingertips. You can change each font by going to Appearance → Customize→ Fonts. Be aware of using more than three different fonts — being consistent with fonts creates a unified look for your site. If you are after premium fonts like the ones offered by TypeKit or the like, you will need to insert manually the code they provide via a child-theme.

CSS Editor

Now you have the ability to insert your own custom CSS code straight into the Customizer and get a live preview of it. If you are looking for some CSS tweaks,  have a look around in our CSS playground section.

This article applies to Bucket, Heap, Mies, and Rosa as they share the same underlying structure.

Updated on May 8, 2017

Was this article helpful?