1. Home
  2. Apetita
  3. Creating “Homepage” (Front Page)

Creating “Homepage” (Front Page)

Step 1. Create “Hemepage”

 

From your site WP dashboard, add a new page, assign Home, name it “Home” or similar for your convenience

Tip: to creata a pget to to: Pages -> Add New

Step 2. Set a static front page

 

Before going any further you need your freshly created page set as a front page. By default WordPress displays the latest posts there – to change please do the following

  1. Go to Settings -> Reading 
  2. Front page displays -> A static page
  3. From the dropdown choose your page

Step 3. Building your “Homepage”

 

Apetita uses WordPress built in menu to create / set the layout of your homepage. There are up to 8 spaces you can use. To start create your pages you would like to use in you home page, in our example we have created 8 plain pages, we named them Page 1 to Page 8

Next we go to Appearance -> Menus and create menu, name it for example Home Blocks, assign Home block location to it. Save and refresh your page.

It should look similar to this, it may be missing separators, if you wish to have them go to Theme Settings -> Navigation -> Home Navigation and enable Show separators at the bottom of the page.

Step 4. Use “Home Blocks” to make it unique

Each of the blocks (menu positions) can have a unique look, to achieve it we use so called Home Block (HB) to give them that look.

To create one go  Home Blocks -> Add Home Block 

Each Home block can have all, or some of following settings.

  1. Name – only visible to you
  2. Home Block Type – function given block has
  3. Block Header – name that will appear on the frontpage
  4. Block Description – short description under or next to the header
  5. Position – what position the block will have
  6. Image Upload – if you choose Logo/Image as Type
  7. Featured Image – optional image you can upload, will appear on frontpage
  8. Enable/Disbale link – decide if the whole block is clickable
  9. Enable/Disable hover – decide if you want to have hover
  10. Block Content Color – color of your content
  11. Block Content Overlay – color of the overlay for that block

 

Create all Home Blocks you will need and link them with Pages

Step 5. Assign Home Block to menu items

Go to Appearance -> Menus open position and and choose which Home Block to use for that position.

 

Save and refresh, it should look something like this.

 

Keep assigning Home Block to your menu items until you are happy with the results.

Step 6. General notes

1. If you want to have an empty block, set is to Empty block, it will look display nothing in this block.

2. If you need to have image background go to the page which is your Homepage and upload featured image, or if you wan to  have slider upload more pictures in the uploader at the bottom of the page.

By default there is overlay on your homepage, if you want to disable it or adjust the colors you can do so Theme Settings -> Navigation -> Home navigation -> Overlay color (very bottom of the page)

3. If you want to have the same layout on your mobile page make sure you mark your menu to be used as Mobile Home Block too.

Or you may create a new, separate menu and give your mobile page a unique and different look. We encourage you to do so.

Was this article helpful to you? Yes No