Occasionally we need to use custom HTML to obtain the layouts shown on our demos in specific widgets. The code below is what was used on this theme. It is best to enter this code directly into the HTML editor function of your editor. Some areas may require that you enable the Ion Icons (Under General) and Scroll Reveal (Under Javascripts) features in the theme configuration.

Image and Content Fader:

The S5 Image and Content Fader is shown on the homepage in the Custom 1 position. You can enter any custom HTML into each slide. Simply enter the images and into the default fields in the back end of the widget. This demo uses 1775x1016 images, but you can use any image size; just make sure they are all the same size. Features like size, zoom, slide effects, and others are controlled in the widget's settings. For setup instructions for please visit: http://www.shape5.com/documentation/WordPress/Extensions/S5-Image-and-Content-Fader





Image Slide 1 Text:

Image Slide 2 Text:

What to Expect

There is a custom HTML widget that is published to the Top Row 1.1 position with a title of "-titleleft". The background image is controlled under the Main/Layout tab in the theme options. There is a second custom HTML published to the Top Row 1.2 position. Scroll reveal must be enabled for the transition effect in the Top Row 1.2 position.



What to expect text:


What to expect image code:

Horizontal Accordion:

This area consists of the S5 Horizontal Accordion menu published to Custom 2 position. Widgets must be published to the following positions: "Horizontal Accordion - Slide#1" through Slide#4. Ion Icons must be enabled for the icons to appear. The available Ion Icons can be found: http://ionicons.com/



Example code for one of the slides:

Get Your Tour Tickets:

There is a custom HTML widget that is published to the Top Row 2.1 position. The background image is controlled under the Main/Layout tab in the theme options. There is a second custom HTML published to the Top Row 2.2 position. Scroll reveal must be enabled for the transition effect in the Top Row 1.2 position.


Tour Tickets Title (Top Row 2.1):
Tour Tickets Button (Top Row 2.2):

Our History:

There is a custom HTML widget that is published to the Top Row 3.1 position. Scroll reveal must be enabled for the transition effect in the Top Row 3.1 position. There is a second custom HTML published to the Top Row 3.2 position. The background image is controlled under the Main/Layout tab in the theme options.


Our History Images (Top Row 3.1):
Our History Text (Top Row 3.2):

Masonry Widget:

This widget is published to the Above Columns 1 position, and does not use any custom HTML. The images are defined as the featured image in the settings of each post. The background image is controlled under the Main/Layout tab in the theme options. For setup instructions for S5 Masonry please visit: https://www.shape5.com/documentation/WordPress/Extensions/S5-Masonry

Countdown and today at the park:

The countdown timer will show up in the Bottom Row 1.1 position. You can change all the settings for it in the Theme Specific area of Vertex. There is a custom HTML widget published to the Bottom Row 1.1 position with a widget style of "titleleft". It also uses an additional widget class of "hide_580" so that this widget is hidden at 580 screen width when the countdown timer is also hidden. The widget on the right is published to the Bottom Row 1.2 position with a style of "titleright".

Countdown and today at the park:

The S5 Instagram Feed widget is published to the Custom 5 widget position with a widget style of "overlaytitle right". Its set to show 6 images at once with a fixed height of 250.

Lodge with Us:

There is a custom HTML widget that is published to the Bottom Row 2.1 position with a widget style of " titlecenter". Scroll reveal must be enabled for the transition effects in this position. The background image is controlled under the Main/Layout tab in the theme options.



Code:

S5 Quick Contact Popup and Controller:

The S5 Quick Contact is heavily customized to work with this theme for reservations. Along with the widget there is a controller area, which allows the user to first select a few inputs and then those inputs are passed into the S5 Quick Contact widget to complete the form and submit it. That controller is shown below: .



When the button in the controller area is clicked the S5 Quick Contact opens in an overlay screen that covers the site. You can also open the S5 Quick Contact by adding onclick="s5_Custom 7_open()" to any element. Click on the Reserve Now button below for an example.

Reserve Now

Setup Process:

1. Publish the S5 Quick Contact widget to the Custom 7 position to all pages. This will not actually show on the page, this position is only contained in the overlay area that covers the site when triggered. Configure the widget as desired.

2. Publish the controller code to any widget position in a custom html widget, on the demo it is published to Custom 3 position.

3. In the theme options you need to define which fields from the S5 Quick Contact widget that you would like to show in the controller area. Enter the number of the fields you would like to show separated by commas. For example if I want to show the second, fifth and seventh fields, I would enter 2,5,7 in this field.



4. If you would like to add a button that opens the overlay area you can simply add onclick="s5_Custom 7_open()" to any element. The Reserve Now button shown above uses the following code:

Quote:

This is a custom HTML widget published to the Custom 6 widget position.



Code:

Footer Area:

The logo pulls from your main site logo. This can be disabled from the Vertex theme specific area. The address and time info is a custom HTML widget published to the Bottom Row 3.1 position, the code is below. The 2 menus are standard WordPress menus published to the Bottom Row 3.2 and Bottom Row 3.3 positions. In the Bottom Row 3.4 position is published the S5 MailChimp widget.



Code:

Social Icons:

The social icons are not shown on this demo but they are stylized for position Custom 8 and they do come with the site shaper. They are a custom html widget. Ion Icons must be enabled for the icons to appear.



Social Icons: