Personalize your Site Appearance

Pile takes full advan­tage of the Cus­tomiz­er in man­ag­ing Theme Options, Lay­out, Col­ors and Fonts 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.

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, Dynam­ic Ajax Load­ing and more in the Gen­er­al sec­tion, whilst on the oth­er sec­tions, you’ll be able to add share ser­vices, play with your Cus­tom JavaScript snip­pets or Import Demo Data.


The lay­out relat­ed set­tings can be found in Appear­ance → Cus­tomize → Lay­out. This sec­tion pro­vides var­i­ous options for the Head­er, Con­tent and Foot­er areas. These fea­tures will allow you to eas­i­ly cus­tomize your website’s lay­out from being able to adjust the Logo height, Nav­i­ga­tion Style to change the size of the Con­tain­er width or enable the 3D Grid and more.


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 shade imag­in­able. 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).


Pile 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 man­u­al­ly insert 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.

Addi­tion­al Read­ings:

This article applies to Pile, as they share the same underlying structure.

Updated on April 18, 2017

Was this article helpful?