How to Style Blocks in a Headway Themes Grid Layout

Posted OnMar 29, 2015     CategoryThemes     CommentsNo comment

In this section of the guide to Headway Themes, we will focus on how to add style to your blocks in the design layout.

Step 1) Login to the WordPress Dashboard.

Step 2) From the top toolbar, navigate to Headway -> Visual Editor -> Design.

km-headweay-style-01a

Step 3) Click the right arrow (toggle button) to display the Design Editor.

km-headweay-style-03a

km-headweay-style-04a

Styling the Navigation Bar – Edit Element

Step 4) With the Design Editor open, click the down arrow to the right of Blocks.

Step 5) Click the Edit Element icon as shown below:

km-headweay-style-05a

For this example, let’s change the background color of the Navigation Bar and the Font.

Step 6) Click to select Background.

km-headweay-style-06a

Step 7) Click customize to the right of Color to display a Box icon.

Step 8) Click the Box icon to display the Color Picker.

km-headweay-style-07a

Step 9) From the Color Picker either drag to select a new background color or enter a Hex value in the textbox.

km-headweay-style-08a

Step 10) Click the Save button on the top toolbar to save any changes.

Step 11) Click the Fonts button

km-headweay-style-09a

Step 12) Click on customize to the right of Font Family to display a Pencil icon.

km-headweay-style-10aa

Step 13) Click the Pencil icon to display the Font Family pop-up window.

Step 14) Select the appropriate Font by moving your mouse over the selected font and clicking the Green checkmark.

km-headweay-style-11a

Step 15) Click the Save button on the top toolbar to save any changes.


For each Block there are a number of available style options. We recommend that you take the time to go through each style element and try various options to find the style that suits your needs.


Styling the Navigation Bar – CSS

Step 16) Click the icon to display a CSS pop-up window where you can add your styles directly.

km-headweay-style-12a

Step 17) If you are familiar with CSS, you can style your element from here.

km-headweay-style-13a

Global Styling

Step 18) To modify Global styles, (such as, text, paragraph, blockquote, etc.) click the down arrow to the right of the Global tab as shown below.

km-headweay-style-14a

Styling the Global elements works the same as outlined in the Navigation styling.

Structure Styling

Step 19) To modify Structure styles, (such as body, wrappers, etc.) click the down arrow to the right of the Structure tab as shown below.

km-headweay-style-15a

Styling the Structure elements works the same as outlined in the Navigation styling.

The next step of the guide will focus on How to Setup a Sub-Page in Headway Grid Layout.

 


Leave a Reply

Your email address will not be published. Required fields are marked *

Send this to friend