Demo Homepage 1

This article will guide to the steps to create contents like demo site > Homepage 1.

  1. Go to WordPress Dashboard > Pages and click Add New
  2. In Page Options box check Hide Page Title on the right side.
  3. Add page title and content. Then find Content Builder Box Option box on the bottom and check Enable Content Builder.
  4. 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 4 demo page.

Screen Shot 2557-12-02 at 4.46.01 PM

  • Gallery Slider Fullwidth – Select gallery you want to display in slideshow and select auto play option.
  • Text, HTML and shortcode Content – Enter title and add background:#fff;text-align:center; to custom CSS. Then enter below code for its content. 
    [tg_small_content class="textcenter"]Lorem ipsum dosectetur adipisicing elit, sed do.Lorem ipsum dolor sit amet, consectetur Nulla fringilla purus at leo dignissim congue. Mauris elementum accumsan leo vel tempor. Sit amet cursus nisl aliquam. Aliquam et elit eu nunc rhoncus viverra quis at felis. Sed do[/tg_small_content]<br/><br/><img src="http://themes.themegoods2.com/vega/wp-content/uploads/2014/11/signature_white.png" alt="signature" width="161" height="38" class="aligncenter size-full wp-image-1402" />
  • Gallery Archives – Display 6 items and enter background:#f9f9f9;padding-top:10px; for custom CSS.
  • Text, HTML and shortcode Content – Enter title and add background:#fff; to custom CSS. Then enter below code for its content. 
    <div class="animate">[one_half] 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. [/one_half] [one_half_last] 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. [/one_half_last]</div><br/> <div class="animate" style="text-align: center;"> <blockquote>"By managing all aspects of our artists’ careers, we are able to effectively grow our clients’ profiles from the inside out and properly position them for long term success. This is the Velvet Hammer philosophy.”</blockquote> </div>
  • Image One Half Fulwidth – Upload image and set height to 700. Select left alignment and enter below code for its content. 
    <div class="page_tagline">Travel</div> <h2 class="upper_title">Travel & Lifestyle Documentary</h2> <div class="post_detail">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse</div> <br/> <a href="http://themes.themegoods2.com/vega/galleries/gallery-classic/" class="button">Check it out</a>
  • Image One Half Fulwidth – Upload image and set height to 700. Select right alignment and enter below code for its content. 
    <div class="page_tagline">Lifestyle</div> <h2 class="upper_title">World of Professional Photography</h2> <div class="post_detail">Ut wisi enim ad minim veniam, quis nostrud exerci tation </div> <br/> <a href="http://themes.themegoods2.com/vega/galleries/gallery-horizontal/" class="button">Check it out</a>
  • Gallery Slider Fixed Width – Select gallery you want to display in slideshow and select auto play option.
  • Image Three Columns – Upload 3 images you want to display.
Tagged: