Demo Homepage

This article will guide to the steps to create contents like demo site  homepage. This page required menu, team member and gallery content. Please make sure you have already created these contents first.

  1. Go to WordPress Dashboard > Pages and click Add New
  2. Select Page Slider in Page Options box and check Hide Page Title on the right side.
  3. Check Make Menu Transparent option.
  4. Add page title and content. Then find Content Builder Box Option box on the bottom and check Enable Content Builder.
  5. Find Page Attributes box at the bottom right side. Select Page Fullwidth as page template.
  6. Once you are done. Click Publish button

Content Builder Modules

Now you created a page. Next is to create its content using Content Builder module. Below are screenshot of all modules used in Homepage 1 demo page.

  • Text Block (Philosophy) – Add padding: 30px 0 60px 0; for custom CSS field and add below code for its content 
    [one_half] <img src="http://themes.themegoods2.com/capella/demo/wp-content/uploads/2014/07/chef.jpg" alt=""/> [/one_half] [one_half_last] <h2>WE ARE SPECIALIZED IN <br/>SPICY MODERN FUSION FOOD</h2> <div class="page_caption_desc" style="margin-top:10px;margin-bottom:20px;">The Art of Cooking</div><hr class="thick" style="margin-bottom:30px;"/><br/>Morbi leo risus, porta ac consectetur ac, vesti bulum at eros. Aenean lacinia bibendum nulla sed consec us eget urna mollis ornare vel euleo. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient monte siculus mus.Maecenas sed diam eget risus varius blandit sit amet non magna. <br/><img src="http://themes.themegoods2.com/capella/demo/wp-content/uploads/2014/07/signature2.png" alt=""/> [/one_half_last]
  • Text Block (Chef Recommended) – Upload your background image and add padding: 20em 0 20em 0; for custom CSS field. Enter below code for its content 
    <div class="ppb_header_wrapper"> <h1 class="hasbg">Chef Recommended</h1> <div class="sub_header">Signatures dishes recommend by our chef</div> </div>
  • Menu Classic (Chef Recommended Menu) – Select 3 Columns layout, selected filterable menu category you want and enter 6 items option. Add padding-bottom:30px; for custom CSS.
  • Text Block (Popular Dishes Header) – Enter title, upload your background image and add padding: 20em 0 20em 0; for custom CSS and use below code for its content 
    <div class="ppb_header_wrapper"> <h1 class="hasbg">Popular Dishes</h1> <div class="sub_header">Our most popular menu</div> </div>
  • Menu Simple (Signature Menus) – Enter title and select 2 columns layout. selected filterable menu category you want and enter 12 items option. Add padding-bottom:30px; for custom CSS.
  • Text Block (Ingredients) – Enter title, upload your background image and add padding: 20em 0 20em 0; for custom CSS field. Enter below code for its content 
    <div class="ppb_header_wrapper"> <h1 class="hasbg">Ingredients</h1> <div class="sub_header">Only the best ones from all over the world</div> </div>
  • Text Block (Gallery) – Enter below code for its content 
    [one_half] <h2>We Created best dinning experience for you & your family</h2> <div class="page_caption_desc" style="margin-top:10px;margin-bottom:20px;">Simply but Delicious experience</div><hr class="thick" style="margin-bottom:30px;"/><br/>Morbi leo risus, porta ac consectetur ac, vesti bulum at eros. Aenean lacinia bibendum nulla sed consec us eget urna mollis ornare vel euleo. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient monte siculus mus.Maecenas sed diam eget risus varius blandit sit amet non magna. [/one_half] [one_half_last] [tg_thumb_gallery gallery_id="3094" width="220" height="220"] [/one_half_last]
  • Team – Enter title, select 3 columns layout and upload your background image.
  • Full Width Button – Enter title and link URL.

 

Tagged: