Personalize your Site Appearance

Heap takes full advan­tage of the Cus­tomiz­er to make man­ag­ing col­ors, fonts, lay­out and more set­tings, through­out your site as easy as pos­si­ble.

And what bet­ter way to make style changes than with live pre­view? Sim­ply change any set­ting and see it take effect right way from Appear­ance  Cus­tomize.

Theme Options

One of the most impor­tant com­po­nents, that can be found under Appear­ance → Cus­tomize → Theme Options, where you’ll see options relat­ed to Logo, Scrolling, Head­er Ele­ments, you’ll be able to add share ser­vices, play with your Cus­tom JavaScript snip­pets or Import Demo Data.


You will find all the set­tings relat­ed to col­ors in the Appear­ance → Cus­tomize → Col­ors. By click­ing on it, you have access to a num­ber of dif­fer­ent sub-sec­tions with con­trols for the col­or of var­i­ous ele­ments on your site. We have grouped them in order to keep you focused on a spe­cif­ic area at a time (like the head­er or the foot­er). Each col­or option comes with an inter­ac­tive col­or pick­er, allow­ing you to select any imag­in­able shade. If you already know what you are after, sim­ply type in the HEX col­or code (in case you wish to put the exact same col­or in mul­ti­ple set­tings).


Here you can find three major sec­tions — Head­er, Con­tent and Archive, where you can make dif­fer­ent cus­tomiza­tions like Set­ting the Logo Height, Mak­ing the Nav­i­ga­tion Bar Sticky, Choos­ing the Menu Place­ment, Set­ting the Width of the Con­tain­er, Show­ing the Main Side­bar in the Sin­gle Post Pages, Choos­ing Where to dis­play the Share Links and much more.Here you can find four major sec­tions — Head­er, Con­tent,  Archive and Foot­er, where you can make dif­fer­ent cus­tomiza­tions like Chang­ing the Logo Height, Mak­ing the Nav­i­ga­tion Bar Sticky, Choos­ing the Menu Place­ment, Set­ting the Width of the Con­tain­er, Choos­ing the Par­al­lax Move­ment and much more.


This sec­tion allows you to change the blog set­tings in order to bet­ter match your per­son­al style. You have the pos­si­bil­i­ty of Choos­ing the Lay­out for Blog Archives (Mason­ry Grid or Clas­sic List), Select­ing the Num­ber of Columns of mason­ry archives based on var­i­ous screen sizes, Adjust the Excerpt Length and change the Excerpt “More” Text, Choos­ing to show or hide Archive Bread­crumbs, Man­ag­ing Posts Meta Data, Show­ing a Side­bar in the Archive Pages and more.


Heap deliv­ers the whole 600 Google Fonts library at your fin­ger­tips. You can change each font by going to Appear­ance → Cus­tomize→ Fonts. Be aware of using more than three dif­fer­ent fonts — being con­sis­tent with fonts cre­ates a uni­fied look for your site. If you are after pre­mi­um fonts like the ones offered by Type­Kit or the like, you will need to insert man­u­al­ly the code they pro­vide via a child-theme.

CSS Editor

Now you have the abil­i­ty to insert your own cus­tom CSS code straight into the Cus­tomiz­er and get a live pre­view of it. If you are look­ing for some CSS tweaks,  have a look around in our CSS play­ground sec­tion.

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?