The Growtheme gives you a lot of flexibility regarding your Layout and Styling.

You find all Layout and Styling Options within the respective Section inside the WordPress Customizer.

These are your Options:


Page

These are the general Options that will modify the look and feel of all your pages.

Page Width

This sets the maxium width of your page. If you have a small screen the page will almost always strech over your whole browser window, so this setting is especially important for very large screens.

Background Color

The main page background color is used behind every other element on the page itself. By default it is set to an almost not noticeable light gray. You can choose the background color for a specific element like the Header or Navigation inside their respective section instead.

Primary Color

This is the main color of the Growtheme. It is widely used throughout the Template and sets the tone of your Blog.

Call To Action Color

The Call To Action Color is used for elements that should call special visitor attention. For example Optin Forms and Call To Action Buttons. This should be a high contrast color that is only used sparingly.

Custom CSS Code

If you like you can enable some advanced options

One of these advanced Options is writing some custom CSS Code. You can simply write it into this input field and it will be applied to all your pages and posts.

Custom JavaScript Code

This field is usually used for Google Analytics Code, a Facebook Tracking Pixel or similar JavaScript Code.

Content Style

You can choose between a Seperated and Joined Content Style. The difference is simply a small, almost not noticeable gap between the various elements on your page if you choose the default “Seperated”.

Page Padding & Margin

Margin is the spacing elements have to other elements:

Padding is the spacing elements have between the element borders and their content

You can adjust these globally for all elements on your Blog, but a general recommendation is to leave these as they are.

 

Header

Header Width

The Header Width defines if you want the Header to stretch over 100% of your Browser Window, or if you want to contain it within the maximum width of your page.

This is how it looks Full:

This is how it looks Boxed

Header Align

This simply defines how you want to align the Header Content (Logo & Tagline). You can choose between left, center and right.

Left Aligned:

Right Aligned:

Center Aligned:

If you have choosen the Navigation Position as within you may want to adjust the Navigation Align too so it fits with whatever setting you choose for your header.

Header Background Color and Text Color

You are free to choose a different Header Background Color. Just make sure that the Text Color and/or the Logo you use work well with your Background color.

Navigation

You can place the Navigation Bar at three different places:

Before the Header

Within the Header

After the Header

Choose a Menu to Show

You can use the default WordPress Functionality to create various Menus with different Items and show them on different places within the Growtheme. If you haven’t created yet a Menu within WordPress, you can do so within the WordPress Customizer by clicking on the Menu Section:

Or within the WordPress Admin Panel » Appearance » Menus

Similar to the Header Width, you are able to choose between stretching the Navigation over 100% of the Browser Window, or limiting it to the maxium width of your Page.

Full Width:

Boxed:

This simply controls how the links within the navigation are aligned. You can choose between left, right and centered.

Left

Centered

Right

In Combination with the Navigation Position and Header Align Setting you can create different styles.

You can choose a custom Background Color for the Navigation Bar and for the Mouse Hover Effect. If you select a different Background Color, make sure to adjust the Text Color accordingly.

Tip

You can add a Call To Action Button to the Navigation Menu by adding a simple CSS Class to the Menu Point. In order to do that, click on Edit Menu within the Navigation Section:

Than choose the Menu Point you want to show as a Call To Action Button and add the CSS Class button to it.


Content & Posts

Content Background and Text Color

You can adjust the Content Background Color and Text Color.

Content Width

This Setting works exactly like the Header Width and Navigation Width Setting.

Headline Align

This sets how your Headlines and Author Bylines are aligned. You can choose between left, centered and right

Left Align:

Centered:

Right

Feature Image Position

Within WordPress you have the option to upload a featured image for your posts. This setting gives you the ability to choose between four different styles: Left, Right, Full Width and Above Post.

Tip

A well known copywriting tip is to align your feature images to the right. This helps to make the first few lines of your posts easier to read and hook in the readers so they continue reading.

Left:

Full Width:

Right:

Above the Post

If you set the Feature Image Position to Above the Post the look and feel of your post pages will change as well.

Sidebar

You have the option to show a sidebar either on the left or on the right side of your Content, or to hide it completely.

Footer

Footer Width

This Setting works exactly like the Header Width and Navigation Width Setting.

You can edit the copyright text on the left side of the Footer with this Setting

This Setting works exactly like the Header Menu


Popups

You can choose if you want to show or hide the progress bar within your Optin Popups.