Showcase Pro: Front Page Setup

There are 5 Widget Areas on the front page. The before-footer and footer area appear on every page but their setup is not covered in this article.


Front Page 1

The Front Page 1 widget area in the Showcase Pro theme demo uses one Text widget to display text and a button.

Showcase Pro comes pre-loaded with a default image that is used as the background for the Front Page 1 Widget. You may use this default image or go to Appearance > Customize > Front Page Header Image to upload your own. The default image size is 1600 x 1050 pixels.

Go to Appearance > Widgets to add a Text widget to the Front Page 1. Here is the widget code used on the Showcase Pro Demo.


Front Page 2

This is the widget area directly below the hero on the home page.

The layout of this widget area is dynamic to the number of widgets you have activated. The first widget is always 100%, full width, and the widths of the consecutive widgets will adapt depending on how many widgets are activated. For instance, there are 4 Text widgets in the Showcase Pro Demo, the first has the title, and the following three widgets adapt to a three-column layout. Here is a the code from one of the widgets.

To edit the icons, go to ionicons.com and search or browse for the icon of your choice. Hover on the icon and it will give you the class name. In the widget code up above you will see the code <i class="icon ion-arrow-shrink"></i>. Replace "ion-arrow-shrink" with your new icon class name, but leave the class name "icon" since that sets the size of the icon and color.


Front Page 3

The Front Page 3 widget area is in gray and looks like this on the Showcase Demo:

This widget area is designed to have two widget areas, side by side. If you have Photoshop and can edit the iPhone mockup, you can learn how to set that up  here. Here is the code for the Text widgets that were added to the Front Page 2 Widget area.


Front Page 4

The Front Page 4 widget area is in dark gray and is setup to display the testimonial widget.

Here is the documentation on how to  set up your testimonials.


Front Page 5

The Front Page 5 widget area is in white and is designed to show your team members or latest blog posts. Here is a screenshot of how it looks on the Showcase Pro Demo.

Here is the documentation on how to  add team members.