Demo Homepage

This article will guide to the steps to create contents like demo site  homepage. This page required tour, team member, testimonials, service and blog posts 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 demo page.

Screen Shot 2557-10-26 at 12.20.43 PM

  • Tour Search Form
  • Tour Grid 
    • Title – Best Offers
    • Layout – Fullwidth
    • Order by – Default
    • Items – 6
    • Custom CSS – border-top:1px solid #e1e1e1;
    • Content – Check out our best promotion tours
  • Testimonials
    • Title – What Customers Say
    • Items – 3
  • Text Block
    • Title – Lake Parallax
    • Layout – Fullwidth
    • Background Image – Upload your background image you want
    • Background Parallax Option – Scroll Position
    • Custom CSS – height:600px;
  • Text Block
    • Title – Lake Geneva Switzerland Content
    • Layout – Fixed Width
    • Content
      [tg_header title=”Lake Geneva Switzerland”]
      [two_third]
      Ut wisi enim ad minim veniam, quis nostrud exerci tation ulla.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
      Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
      [/two_third]
      [one_third_last]
      <blockquote>”It was fantastic going on the sled to see the views on the mountains! And the action of it – I loved going fast!”<blockquote>
      [/one_third_last]
  • Service
    • Title – Why Choose Us
    • Order By – Default
    • Items – 3
    • Background Image – Upload your background image you want
    • Background Parallax Option – Scroll Position
  • Blog
    • Title – News & Update
    • Items – 6
    • Background Image – Upload solid black graphic image (You can easily create using photo app for example Photoshop)
    • Custom CSS – margin-top:-1px;
    • Content – Our latest news & promotions
  • Counter
    • Title – Counters
    • Layout – Fixed Width
    • Custom CSS – background:#f3f3f3;
    • Content
      [one_fourth]
      [tg_animate_counter start =”0″ end=”70101″ fontsize=”44″ count_subject=”Happy Customers”]<i class=”fa fa-smile-o”></i>[/tg_animate_counter]
      [/one_fourth]
      [one_fourth]
      [tg_animate_counter start =”0″ end=”109″ fontsize=”44″ count_subject=”Amazing Tours”]<i class=”fa fa-bus”></i>[/tg_animate_counter]
      [/one_fourth]
      [one_fourth]
      [tg_animate_counter start =”0″ end=”6409″ fontsize=”44″ count_subject=”In Business”]<i class=”fa fa-briefcase”></i>[/tg_animate_counter]
      [/one_fourth]
      [one_fourth_last]
      [tg_animate_counter start =”0″ end=”10876″ fontsize=”44″ count_subject=”Support Cases”]<i class=”fa fa-comments-o”></i>[/tg_animate_counter]
      [/one_fourth_last]

Next step is to setup this page to display as homepage. You can follow instructions here.

Tagged: