How to build these 10 beautiful homepage layouts in only a few minutes

Creating a compelling homepage is important and fun - so here are 10 layout possibilities. We used our free 18 tags theme when building these, but hopefully they will give you inspiration, whatever theme you are using (Canvas and Storefront users note that most of these layouts are possible with our extensions) .  I've also provided a short explanation under each image on how each page was built.  If you have any questions, please feel free to leave them in the comments area below. 

Left hand vertical navigation


foody

How the Left hand vertical navigation home page was put together

  1. First I selected the left hand vertical navigation for the primary menu
  2. Using the in built page customizer that comes with 18 tags, I uploaded the background image
  3. I then made the header (now on the left) 80% transparent
  4. I then add font awesome icons to the menu items
  5. I uploaded my logo in header setttings
  6. Finally I made the primary navigation menu items upper case and changed the color in primary menu settings

 

 

Full screen hero

Alternative menu

How the Full screen hero home page was put together

  1. First I hid the header by using the in built page customizer 
  2. Then I uploaded the background image and set it to cover
  3. Then using our free Pootle pagebuilder plugin I added and styled the text
  4. Then I hid the footer

 

 

Rockband

Rockband

How the Rockband home page was put together

  1. First I selected the inline logo option in primary menu
  2. Then I changed the background color of the header and made it slightly transparent
  3. Then I added contact information and social icons in header options
  4. Then I added the text and aligned it using our free Pootle pagebuilder plugin
  5. Then I added the big call to action button using the free shortcodes ultimate plugin

 

 

The Story

The Story

How The Story home page was put together

  1. First I hid the header using the in built page customizer
  2. Then I uploaded a background image
  3. Then I styled the footer widgets
  4. Then I aligned the text using our free Pootle pagebuilder plugin
  5. Then I finished things off by choosing the footer and body text fonts and colors

 

 

Boxed layout

boxed layout

How the The Boxed layout home page was put together

  1. First I selected the boxed layout option in layout and chose the box background color
  2. Then I set the background color of the website to black
  3. Then I chose the centered logo option setting in primary navigation
  4. Then I added a slider using our Photography extension for Pootle pagebuilder
  5. Then I added a row with two columns using the Pootle page builder
  6. Then I added font awesome icons to the menu
  7. Then I styled the menu, increased the letter spacing and font size

 

 

The low poly hamburger

low poly hamburger

How the Low Poly Hamburger was put together

  1. First I selected the hamburger menu option in primary menu
  2. Then I uploaded a background image for the page, using the in built page customizer
  3. Then I added some text using our free Pootle pagebuilder plugin
  4. Then I added a transparent overlay to the content area to make the text more punchy

 

 

The Grid

Griddy

How The Grid was put together

  1. First I selected the hamburger menu option in primary menu
  2. Then I uploaded a gallery using the Photography extension to Pootle pagebuilder
  3. Then I added some text using the Pootle pagebuilder plugin
  4. Finally I changed the color of the hamburger menu to match the colors of the background image

 

 

Just Words

simple and clean

How the Just words home page was put together

  1. First I selected the hamburger menu in primary menu options
  2. First I hid the header using the in built page customizer
  3. Then I hid the footer
  4. Then I added the text using our Pootle pagebuilder plugin

 

 

It has to be Red

Clean Hamburger

How the 'It has to be Red' home page was put together

  1. First I selected the hamburger menu in primary menu options
  2. Then I changed the background color of the home page to be red - using the in built page customizer
  3. First I hid the header using the in built page customizer
  4. Then I hid the footer
  5. Then I added the text using our Pootle pagebuilder plugin

 

 

Transparent menu

Transparent menu

How the Transparent menu home page was put together

  1. First I selected the selected the centered logo option in primary menu settings
  2. Then I changed the background color of the menu and made it slightly transparent
  3. Then I uploaded a background image for the home page using the in built page customizer option
  4. Then I styled the menu items in primary menu options
  5. Then I added the text using our free Pootle page builder plugin

 

 

10 thoughts on “How to build these 10 beautiful homepage layouts in only a few minutes

  1. These are beautiful and very inspirational. Thank you for posting.

    You mentioned that Canvas users could build most of these with Pootlepress plug ins. I would love to hear which plugins are required for the left-hand vertical navigation.

    Cheers!

    1. Thanks Leigh,

      That left-hand nav would fall into the ‘most criteria’ for Canvas. i.e it’s not possible with Canvas (or our extensions). However we’ll most likely be adding this option (as well as a hamburger menu) into Storefront Pro.

  2. Hello Jamie. If I were from the UK, I would surely say “bloody awesome!” Seriously, this is extremely useful to us pokey non-coders and committed fans of the Pootlepress products. THANK YOU!

  3. Thanks George , I’ll take bloody awesome :)

  4. Hi Jamie, Beautiful examples. I bet these sites load blazingly fast! I’m loving the built in customizer on 18 Tags. So much less bloat than most WordPress themes, with just as much functionality. Thanks!

    Jordan

  5. Hi Jamie,
    Nice round up post and thanks for the examples.

    Can you clarify if this requires a Pootle plugin or if it’s native to Canvas?

    “First I selected the hamburger menu in primary menu options”

    If it requires a Pootle plugin, is it this: cx-menu-customizer-2.2.0?
    And do you have to delete the Pootle ALLIGN MENU RIGHT to use/configure?

    Please advise and thanks for the great Canvas extensions!

    1. Hi Paul,

      The hamburger is currently only available in our new 18tags theme.

      1. Roger that.TX for the reply.

  6. Hi Jamie,
    Is this new theme compatible with Woo Commerce?
    It looks amazing.
    Thanks

    1. yes it is :)

Leave a Reply

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