How to Style Blocks in a Headway Themes Grid Layout
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.
Step 3) Click the right arrow (toggle button) to display the Design Editor.
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:
For this example, let’s change the background color of the Navigation Bar and the Font.
Step 6) Click to select Background.
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.
Step 9) From the Color Picker either drag to select a new background color or enter a Hex value in the textbox.
Step 10) Click the Save button on the top toolbar to save any changes.
Step 11) Click the Fonts button
Step 12) Click on customize to the right of Font Family to display a Pencil icon.
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.
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.
Step 17) If you are familiar with CSS, you can style your element from here.
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.
Styling the Global elements works the same as outlined in the Navigation 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.
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.