back to Themify.me

Design Tips

This tutorial shows you how to design various common layouts with Themify Flow.

Download & Install Demo

You can download the source file that is used on the demo. Follow the steps below to install the demo theme on your WordPress site with Themify Flow activated. The demo theme will help you to understand how things are done.

  • Extract source zip file (you should have a folder ‘design-tips-source’ with a .xml and .zip file inside)
  • To import the Flow theme: go to WP-admin > Themify Flow > Flow Themes > Add via Import and upload the ‘theme-design-tips.zip’ (refer to the documentation for more info on how to import Flow themes)
  • To import the sample posts and pages: go to WP-admin > Tools > Import > click "WordPress" and upload the ‘sample-content.xml’

Basic Terminology

Lets start with some basic terminologies so you can follow this article easier.

  • Row Styling = to apply row styling, click on the "brush" icon on the row top bar
  • Module Styling = to apply module styling, click on the "brush" icon on the active module (active module means the modules that are dropped in the layout)
  • Row Options = to access row options, hover the "menu" icon on the row top bar and select "Options"
  • Module Options = to access module options, click the "pencil" icon or double-click the active module
  • Refer to the Starter Guide for more info on how to use Flow

screenshot

Page Layouts

Header Styling (demo)

Header styling is a good place to start learning the Styling panel.

Edit the Header template part, then:

  • On "Site Logo" module, click "brush" icon > choose "Site Logo Text" > select "Kaushan Script" font and enter "8" em font-size
  • On "Site Tagline" module, click "brush" icon > select "Dancing Script" font and enter "1.3" em font-size
  • On "Menu" module, click "brush" icon:
    • On Styling panel, click "Advanced" tab to show all styling options
    • Select "Menu Link" from the top Styling panel, pick black background color, select "Oswald" font, and click the "All-cap" (AA) icon
    • Select "Menu Link Hover" from the top Styling panel, and pick red background color
    • Select "Dropdown Container" from the top Styling panel, check "Apply to all borders" checkbox, pick black color, select "Solid" and enter "2" px (this will add a thick border on the menu dropdown container)
    • Select "Dropdown Link" from the top Styling panel, pick white background color, and pick black font color
    • Select "Dropdown Link Hover" from the top Styling panel, pick red background color, and white font color (this will make reversed background color effect on menu dropdown link hover)
  • To make the custom width divider:
    • Drop in "Divider" module, pick black color, and enter "3" Stroke Thickness
    • On the "Divider" module, click "brush" icon > enter "70" width (this will restrict the divider width to 70px)

screenshot

Fullwidth Fluid Layout (demo)

To achieve fullwidth layout:

  • On Page template > on the first row options where the "Page Title" and "Page Content" module is placed > select "Row Width = Fullwidth"
  • On the row styling > choose "Row Container" from top Styling panel > pick a background color > enter "4"% all padding (this will add some padding space around the content)
  • Then choose "Row Inner Container" from top Styling panlel > pick a background color and enter "4"% all padding again (this will add some padding in the inner row container)

screenshot

Full Height Header (demo)

To achieve full height header layout:

  • On Header template part > Row > Options > select "Row Height = Fullheight"

screenshot

Fullwidth Menu Bar (demo)

To achive fullwidth menu bar in header:

  • On Header template part, drop in a Menu module on a new row
  • Click the row "brush" icon to open the row styling panel, then specify the "Row Container" background color

screenshot

Boxed Widgets (demo)

To archive boxed widgets styling in sidebar:

  • On Sidebar template part, click the "brush" icon on the "Widget Area" module
  • On the styling panel > select "Widget Container", then:
    • pick a background color
    • enter 20px all padding
    • enter 20px margin-bottom

screenshot

Fixed Header (demo)

Now lets do something a little more advanced. The great thing about Flow is that you can either use the built-in Styling panel to style the appearance of the site or write your own Custom CSS. In the following example, you will learn how to use Custom CSS to make a fixed header.

First, create a horizontal header:

  • On Header template part > Row, select 2-column layout
  • Drop in Site Logo module on the left column
  • Drop in Menu module on the right column
    • On the Menu styling, set right text-align so the menu links will align to the right side
  • On the row styling, pick a row background color and row link color

screenshot

Next, add the ‘fixed-header’ custom class in the template:

  • In Template Options, add ‘fixed-header’ Custom CSS Class (this will add the class in <body> tag)

screenshot

Finally, add the follow CSS code in Themify Flow > Custom CSS to make the headerwrap to have fixed position (read more about Custom CSS):


/* fixed header */
.fixed-header {
	padding-top: 100px;
}
.fixed-header #headerwrap {
	position: fixed;
	z-index: 1;
	width: 100%;
	top: 0;
	left: 0;
}
.fixed-header.admin-bar #headerwrap {
	top: 32px;
}

screenshot

Overlap Content (demo)

Similar as the previous example, add ‘overlap-content’ in Template Options and then add the Custom CSS from below. It will bring the middle container above and partially overlap with the header. Remember the custom CSS class in the Template Options should match with the CSS code.


.overlap-content {
	background: #000;
}
.overlap-content #middle {
	margin-top: -100px;
	background: #fff;
	position: relative;
	z-index: 1;
	padding: 0 3%;
}

screenshot

Boxed Page Layout (demo)

The following Custom CSS will add max-width and shadow to the pagewrap container:


.boxed-layout {
	background: #eee;
}
.boxed-layout #pagewrap {
	background: #fff;
	max-width: 1160px;
	margin: 30px auto;
	box-shadow: 0 0 15px rgba(0, 0, 0, .1);
}
.boxed-layout #header .tf_row_inner, 
.boxed-layout #middle, 
.boxed-layout #footer .tf_row_inner {
	padding: 0 3%;
}

screenshot

Archive Layouts

Grid Posts (demo)

Grid posts layout is very easy to do with Flow because it comes with built-in grid styling.

  • Create or edit an Archive template
  • Drop in an "Archive Post" module and select the ‘4-column’ layout icon

screenshot

Boxed Grid Posts (demo)

To style the grid post layout with boxed styling:

  • On the "Archive Post" module, click the "brush" icon
  • Select "Post Container" from the top Styling panel > pick a background color, enter "20" px all padding, enter "50" px margin-bottom, and specify a solid border

screenshot

Single Layouts

Grid Single Post (demo)

To achieve the grid single post layout:

  • Create or edit a Single template
  • On the row where the "Single Post" module is, select a 2-column row layout
  • Place the "Single Post" module on the left column and the "Comments" module on the right column
  • Then place the "Next/Prev Post" module on a separate row

screenshot

Boxed Single Post (demo)

Styling boxed single post template is very much the same as the previous examples. Basically, you would add background-color and padding to the row container where the post module is placed.

  • Create or edit a Single template
  • On the row where the modules are dropped > row styling > choose "Row Container" > pick a background color and enter "4"% all padding

screenshot

Flow Template Options

Flow Template Options is a nice and useful feature, that’s definitely note worthy. When you’re adding/editing a post or page, go to the the "Flow Template Options" meta box, this will allow you to choose which Template (Header, Sidebar, and Footer) you can apply to any specific page. It’s a great feature that gives you the ability to swap different header, sidebar, and footer without having to create multiple templates.

screenshot