Getting ready

Step 1: Things to do before you start designing

First look at the demo themes to get an idea of what Generate Press looks like. But remember, even the free theme can be customized quite a bit.

View as many sites as you can, looking for…

  • Color schemes you like.
  • Typography and font combinations you like.
  • Homepage and landing page layout designs you like.
  • Blog listing page designs you like.
  • Landing page designs you like.

When you’ve got your fonts, color scheme and layout, go to Unsplash and find some starter photos.

Now you’re ready to start designing your site…

Fonts

Set your body font, line height and paragraph margin using your chosen font. The content of your site now has your basic font settings. Set the font family, font weight and size for h1, h2, h3. Use the mobile icon buttons to set headline sizes for mobile phones etc.

Colors

Use the Generate Press settings to set background and text colors for…

  • Header
  • Content
  • Navbars
  • Sidebars
  • Footers etc

Blog layout

  • Choose grid or Masonry layout.
  • Then configure your blog type listings the way you want them to display.

Should you use a page builder such as Beaver Builder or GenerateBlocks to build your custom page layouts?

Using GeneratePress and GenerateBlocks you can build almost any layout built on good design principles. You don’t have to use you don’t have to use a page builder such as Beaver Builder.

You can use Beaver Builder if that’s what your clients want. I would still use Beaver Builder for clients who want to keep using the classic editor and only need a few fancy page layouts. For instance. If you’re using the classic editor and you want to build a lot of responsive layout grids as part of your design, Beaver Builder will really speed up your workflow.

As you design and build your site keep in mind the acronym KISS and focus on the word simple. Bells and whistles can too easily appear amateurish. Simplicity, elegance and style go hand in hand. If you want to build a classy looking website that converts viewers in to doers, keep it simple.