Editor Support

Useful information around our template editor.

Elements

Building your website

Adding elements: To add elements to your template click the elements tab and select any elememnt you wish and click the thumbnail, it will be added to the bottom of the template and we will scroll you to the newly added template.

Moving elements: Simply hover over the element and when you see the move cursor click and hold down on the element and drag it where you want it to appear within your template.

Deleting elements: To delete the element click on the cog icon placed at the top left within the element, this will show a red trash icon. Clicking this will delete that element.

Watch the Video Preview

Adding Images

Adding images to your template devices or background

Adding images to devices

You can add images to devices within elements.

If you hover any device screen you will see an upload button if you click this you will then be able to add a screenshot to that device.

Watch the Video Preview

Adding background images

You can add background images to every element within the editor except for header and footer elements.

Within a section just click the edit section button at the top left, this will show a dropdown menu that has the background image option. Clicking on this will allow you upload a image to that sections background. You also have the ability to add a colour overlay to that background image, this is a great trick that allows you to modify the image inline at anytime.

Changing Colours

Changing Colours within your template.

Background Colours: To change a background colour of an element simply click the cog icon (top left of the element) and then click droplet icon, this will show the colour picker. Just select the colour you want and then click the green select colour button but choose that colour.

Text Colours: Select the text you want to change and within the tooltip that shows above click the droplet icon (the last icon) and again select the colour within the colour picker.

Watch the Video Preview

Changing Text

Updating text

To update text just click or highlight the text you want to change and start typing.

If you select some text you will see a tooltip above that also allows you to make text bold, italic, strikethrough and underline.

Watch the Video Preview

Fonts

Changing Fonts

We have 12 Google fonts for you to choose from, just click the fonts tab in the editor column and within there you will see 12 buttons, feel free to test them all out within your template. On your site we will only load the one font selected.

Changing fonts will impact the overall template.

Watch the Video Preview

Store Buttons

Appstore & Google Play Buttons

To add Appstore & Google play buttons, got to the Social & Appstore butons tab in the editor column. Here you will see options for adding store urls and the option to change to white or black style buttons and the option to hide or show the on your template. You may see another url if you hover over the link on your live site, but don't worry this just allows Suppo to track clicks used for your realtime stats. When clicking the link you will be redirected to the url you've entered.

Unlike the Page Url these links can be diffrent across templates this is to allow you to add different url's or to add a refferel code to the url so you can better see conversion, if you wish.

Watch the Video Preview

Page Url

Managing your page URL

All pages will have a url and this can be changed at anytime by visiting the template editor and clicking the Page URL tab in the right column.

The page URL will be the same across all the template you create, as only one template is active at anyone time you can change it, switch between template designs and your page will still appear at the same url.

Page urls can only have characters numbers and hyphens and will appear as a subdomain. For example https://myapp.suppo.co/

Custom Url

Using your own URL

If you already own a domain, you can continue on to the instructions for configuring the subdomain.

1. Purchase your domain

You may purchase your domain from any domain registrar. Suppo does not offer domain registration services, so you will need to use a third party to purchase a domain.

2. Configure the subdomain: e.g., www.myapp.com

When you register a domain name, you are registering a top level, root domain. For example, myapp.com. Typically, you will want to configure the subdomain to be www.myapp.com. However, you could also configure your subdomain to begin with app. or portfolio. instead of www.. Once you've decided upon your subdomain, you will need to add a CNAME record to the DNS Records via your domain provider's admin panel. This record will point to your Suppo URL: myapp.suppo.co (replacing myapp with your actual Suppo URL).

Login to your domain provider's admin panel

Open the available domain management page (may also be called the Advanced DNS Editor, DNS Manager or DNS Control Page).

Locate existing CNAME Records or the option to add a new CNAME record if none currently exist (generally found within the DNS Records or Zone Filer Editor).

In the Host/Name/Alias CNAME, enter your chosen subdomain, e.g. www, app or portfolio

In the Points To/Value/Destination field, enter your Suppo URL, e.g., myapp.suppo.co

If you have the option to edit the TTL field, reduce the TTL to 300 seconds

Click to Save or Add Record to save the CNAME record

3. Configure the root domain: e.g., myapp.com

When you register a domain name, you will have a single root domain. If you wish for your site to load on the root domain, you will need to complete one of the following options.

Recommended Option:

We recommend that you create a permanent redirect for your root domain so that it redirects to the subdomain that you previously created. You can set up a permanent redirect by creating 301 redirect that references the subdomain that you created (e.g., www.myapp.com).

If your domain registrar does not offer the option to create a permanent redirect, you can instead create an Address Record.

Alternate Option:

If you are unable to create a redirect, you'll need to create an Address (A or @) record. This option is less preferred as it would require for you to update the entry should the IP Address for Suppo change in the future. To create the Address Record, you will follow these steps:

Login to your domain provider's admin panel

Open the available domain management page (may also be called the Advanced DNS Editor, DNS Manager or DNS Control Page).

Locate the existing A Record (often label as @).

In the Points To/Value/Destination field, enter 77.104.131.203

If you have the option to edit the TTL field, reduce the TTL to 300 seconds

Click to Save the A record

4. Set Custom URL in Suppo

Log in to Suppo, navigate to your templates and hit edit on any of your templates. When the template editor is shown click website url tab at the bottom right of your screen. You will need to fill out both url fields. The first url field is for your subdomain here on Suppo (this will be overridden but is still required when using a custom url) the second is the custom url you are using eg. myapp.com.

Click Save Changes to save the updated information.

Note: DNS changes can take anywhere between 24-48hrs before being seen on the internet. If after 48hrs your DNS changes are not working, please contact your domain provider for help.

A/B Testing

Use A/B Testing to improve conversion

We give you the ability to create multiple templates and you can easily switch between designs instantly. We also give you realtime stats for your templates, with this you would be able to see how one template performed compared to a number of other templates with different designs and content.

With this you can easily see the overall views, unique vistors and the CTR for the one page. In the future we plan on improving stats further so you can limit stats results within a certain date. With this you would be able to see how one template performed over for example 2 week period compared to another over a 2 week period. We have some exciting plans for this so stay tuned.

Watch the Video Preview

Google Analytics

Use Google Analytics with your Website

Create a Google Analytics account

Before you can start using Google Analytics with your Suppo website, you'll need to create a Google Analytics account.

Go to https://www.google.com/analytics/ to sign up for a new account or log in to your existing user account.

Click the Admin button and then the click the Property Settings link or click to create a new account for your site, and set the property options to meet your needs.

Within the Property Settings, you will be able to find your Tracking ID. This will take the form of UA-XXXXX-XX. Copy this ID for use in Suppo.

Set your Google Analytics Tracking ID in Suppo

Once you've copied your Tracking ID, navigate to your Suppo template editor page (any page will be fine as this value persists across all your templates), click the Google Analytics tab at the bottom right and enter the Tracking ID into the Google Analytics field and click Save Changes.

Review Analytics in Google Analytics

Once you've saved your Tracking ID within Suppo, you'll be able to review your Google Analytics results within 24 to 48 hours. You will need to visit http://www.google.com/analytics/ in order to view the tracking results.

Favicon & Touch Icons

Adding Favicon & Touch Icons to your Website

Favicon

A favicon is an icon associated with a particular website, typically displayed in the address bar of a browser accessing the site or next to the site name in a user's list of bookmarks. The size for this icon should be 32px x 32px, the favicon is typically show at 16px x 16px but providing 32px x 32px allows for retina screens.

Apple Touch Icon

Similar to the Favicon, the Apple Touch Icon or apple-touch-icon.png is a file used for a web page icon on the Apple iPhone, iPod Touch, and iPad. When someone bookmarks your web page or adds your web page to their home screen this icon is used.

Custom CSS

Adding Custom CSS to your Website

You can add Custom CSS to your Suppo site in seconds, simply visit the template editor and click the Custom CSS tab at the bottom right of your screen, this will show a simple code editor where you can add your own CSS. We think dev tools will be your friend here, devtools will allow you to test out your css before allowing you to copy and paste any class into the code editor.

You may need to add !important to a class to overide an elements default class. Also please do not include the t-e editable or ui-draggable class, these are only used within the editor and will be removed from your live site.

Contact Us

Contact Form

Drop us a message or just say hello via our contact form and we’ll get back to you.

Contact Form
Twitter

Drop us a message or just say hello via twitter and we’ll get back to you.

Twitter
Email

Drop us a message or just say hello via email and we’ll get back to you.

Email
×
×
×
×
×
×
×