Creating a Store Demo Style Page with Pinnacle

Creating a Store Demo Style Page with Pinnacle

posted in: Pinnacle Theme | 0
UPDATE: We have a new plugin called the Kadence Importer. You can now install the plugin, choose the shop demo and install all that content in one click. Check it out here: Kadence Importer

Getting Started:

  • Go to Settings > Reading.
  • Set the Front page display as a static page.
  • Choose your home page for the front page and leave the posts page blank.
  • Save changes.

Reading Settings ‹ Pinnacle Premium — WordPress

 

Setting up the Home Page:

  • In the admin area go into Pages and select Home (if you do not already have a home page created then select add new and title the page “Home”).
  • Select the page builder tab.
  • Create four rows, each with one column, and add a Visual Editor widget to each.

 

STORE

Visual Style #1-
  • In the first visual editor widget add a title for your page and center-align it.

Edit Page ‹ Pinnacle Premium — WordPress2

 

  • Once saved, click the toolbar on the top right of the row and click “Edit row”.
  • Open the Attributes tab and type “wide-grey” under Row Class.

 

STORE2

 

  • Open the Layout tab and set the Padding Top to 60 and Padding Bottom to 1.

 

STORE3

Visual Style #2-
  • Use this shortcode to add your product image:
    [kt_imgsplit height="555" image="http://themes.kadencethemes.com/pinnacle-premium-2/wp-content/uploads/2014/08/home_coffee_02.png" imageside="left"]

    -Set to your desired customs and add your own image URL.

  • Add a title and description for your product.
  • Using the Pinnacle Shortcodes, add 20px spacing.
  • Use this shortcode to add a “Buy Here” button
    [btn text="Buy Here" border="5px" bordercolor="#444" tcolor="#444" bcolor="transparent" thovercolor="#ffffff" bhovercolor="#444" link="http://themes.kadencethemes.com/pinnacle-premium-2/product/ethiopia-single-origin/" size="large" font="h1-family"]

    -be sure to change the destination link to your own.

  • Add this shortcode to split the image from the description:
    [/kt_imgsplit]

 

Edit Page ‹ Pinnacle Premium — WordPress4

 

  • Once saved, click the toolbar on the top right of the row and click “Edit row”.
  • Open the Attributes tab and type “wide-grey” under Row Class. STORE2
  • Open the Layout tab and set the Padding Top to 1 and Padding Bottom to 80.

STORE5

 

Visual Style #3-

*Visual Style #3 is just like Visual Style #2 only slightly different shortcodes.

  • Use this shortcode to add your product image:
    [kt_imgsplit height="555" image="http://themes.kadencethemes.com/pinnacle-premium-2/wp-content/uploads/2014/08/home_coffee_03.png" imageside="right"]

    -Set to your desired customs and add your own image URL.

  • Add a title and description for your product.
  • Using the Pinnacle Shortcodes, add 20px spacing.
  • Use this shortcode to add a “Buy Here” button:
    [btn text="Buy Here" border="5px" bordercolor="#fff" tcolor="#fff" bcolor="transparent" thovercolor="#444" bhovercolor="#fff" link="http://themes.kadencethemes.com/pinnacle-premium-2/product/montana-blend/" size="large" font="h1-family"]

    – be sure to change the destination link to your own.

  • Add this shortcode to split the image from the description:
    [/kt_imgsplit]

Edit Page ‹ Example — WordPress6

 

  • Once saved, click the toolbar on the top right of the row and click “Edit row”.
  • Open the Attributes tab and type “wide-grey” under Row Class.

STORE2

  • Open the Layout tab and set the Padding Top to 80 and Padding Bottom to 80.

STORE6

Visual Style #4-
  • Repeat steps from Visual Style #3.

Theme Options:

Theme Options > Site Header-
  • Set “Center logo with menus on sides” as the header style.
  • Choose to enable both sticky header and shrink header.
  • Enable transparent header until scrolled.
  • Upload your logo for transparent header.
Theme Options > Logo Options-
  • Set Logo Container Width to 33%
  • Upload your logo or customize logo font.
Theme Options > Footer-
  • Choose the 5th option beside Footer Widget Layout.
Theme Options > Home Slider-
  • Choose to place the header behind slider.
  • Select Kadence Slider beside “Choose a Home Image Slider”. *Note you will have to create your slider in the Kadence Slider plugin.
  • Choose to show arrow at the bottom of slider.
Theme Options > Home Layout-
  • In the homepage layout manager enable Page Content only

Theme Options ‹ Example — WordPress8

 

Adding Menus:

  • Go to Appearance > Menus.
  • Here you need to create three separate menus. One for the left side of the header (left navigation), one for the right side of the header (right navigation) and one for the footer (footer navigation).
  • Be sure to set menus to proper navigation’s under Menu Settings.

Footer Settings:

  • Go to Appearance > Widgets.
  • Add a Text widget to your Footer Column 1 and add this shortcode to the widget
    [space size="40px"]
  • Add a Pinnacle: Image widget to the same column and upload your logo image.
  • Add another Text widget to Footer Column 1 with this shortcode:
    [space size="30px"]
  • Add a Pinnacle: Social Links widget to your Footer Column 2 and add in your own social links.
  • Add a Text widget to Footer Column 2 with this shortcode:
    [space size="10px"]

Widgets ‹ Pinnacle Premium — WordPress9

 

  • To set up your footer menu go to Appearance > Menus and select Mobile Navigation.
  • To edit your footer credits go to Theme Options > Misc Settings.
  • You can center the footer menu and credits by pasting this in your custom css box in Theme Options > Custom CSS:
.footernav {
 float: none;
 text-align: center;
}
.footernav ul {
 margin: 0 auto;
 float: none;
 padding: 0;
}
.footernav ul li {
 list-style: none;
 float: none;
 display: inline-block;
}
.footercredits p {
 text-align: center;
}