My Kiosk Pro: Tips on Editing the Template

This article includes some basic tips for the My Kiosk Pro templates offered. For additional help with the design editor, check out  Webydo's video tutorials or contact us.

Change the page background

  1. Deselect any selected elements by clicking on the background.
  2. Open the Design panel (located on the right side of the screen, marked by an icon showing a triangle in a circle): 
  3. In the Design panel, click the trash can icon to remove an existing image background.
  4. Click the image icon to add a new background. To change the color of the background, click the colored circle.

A screencast showing this process is available  here

Changing the height of the page

By default, our templates have a set height of 768 pixels, which is the display (or CSS) pixel height of a landscape view iPad. This height is the combined height of the main content view plus the page footer. 

The footer is considered a shared element across all pages in your site. Adjusting the footer on one page will change the height of the footer on every page in your site. The minimum height of the footer is 50 pixels, which is the default in our templates. This can be changed using the Footer guide, which is shown at the bottom left of the screen after collapsing the Elements panel. Hovering over this guide will show you the total page height and it is possible to click into this and type in a value if needed.
087f90cf1331da160b30f26eb2d0cd25.pngIf you need to change the height of an individual page, you can adjust the Content guide. The Footer will move along with the Content guide to adjust the height of the page, but the height will not change on other pages.

A brief video showing how the Content and Footer guides work is available here

View form submissions in My Kiosk Pro

  1. Click 'Dashboard' in the navigation.
  2. Click the envelope icon next to your site to view form submissions.
Receive email notifications when a form entry is submitted
  1. Select the form element you've created.
  2. Open the 'Properties' window.
  3. Enter your email address in the 'Send Notification Email To' field.
Disabling zoom within the page
  1. Open the Pages panel. 
  2. Click the Code tag </> for any page. 
  3. Click 'Add Code to All Pages' tab. 
  4. Click into the 'Head of Page' section and add <meta name="viewport" content="user-scalable=no">
  5. Save. 

A screencast showing this process is available  here.

Still stuck? How can we help? How can we help?