Landing Page Setup

Welcome to the new Vatom Landing Page!

By default, the landing page is comprised of elements from your Space "Basics" set in Studio. 

This includes:

1. Cover Image
2. Space Title
3. Space Description

Custom Landing Page

In the "Landing Page" tab of the Space setup, you can customize the landing page even further with a simple JSON file. Customize the following with separate options for Desktop and Mobile:

1. Custom Background Image
   1. Background Position
   2. Background Size
   3. Background Blur Amount
   4. Background Brightness
2. Accent Color
3. Button Styling
   1. Color
   2. Border Radius

Use some or all of the following example JSON

{
  "theme":{ 
     "desktopBackground":{ 
       "backgroundImage":"url('https://resources.vatom.com/abcd1234/desktop-background.png')", 
       "backgroundPosition":"center", 
       "backgroundSize":"cover",
       "blurAmount": "20px",
       "brightness": "0.6"
       }, 
     "mobileBackground":{ 
       "backgroundImage":"url('https://resources.vatom.com/abcd1234/mobile-background.png')", 
       "backgroundPosition":"center", 
       "backgroundSize":"cover",
       "blurAmount": "20px",
       "brightness": "0.6"
       }, 
     "accentColor":"#00F1FE", 
     "buttonStyle": {
       "color": "#fff",
       "background": "linear-gradient(90deg, #FF8000 0%, #FFE431 100%)",
       "borderRadius": "50px"
    }
  }, 
  "features":{} 
}

Background Image

Under the desktopBackground and mobileBackground objects, you can use and customize the look with a custom image. Without specifying the image, Spaces will use the default image set for the Space in Studio. 

You can upload your custom image to Spaces Storage or Studio File Manager and copy the link URL.

The following JSON for desktopBackground uses a custom image and sets blur and brightness settings.

"desktopBackground":{ 
    "backgroundImage":"url('https://resources.vatom.com/abcd1234/desktop-background.png')", 
    "backgroundPosition":"center", 
    "backgroundSize":"cover",
    "blurAmount": "20px",
     "brightness": "0.6"
},

Requirements for Fields are as follows:

• blurAmount should be denoted in pixels (px) and have a prefix of a whole number between 0 and 30 (i.e. between "0px" and "30px"). If this given value does not conform to the above requirements, a default value of "20px" will be used.
• brightness should be a decimal number between 0 and 1 inclusive, with no units as a suffix (e.g. just "0.4"). If this given value falls outside the range [0, 1], it will be clamped to the nearest valid decimal (i.e. if given "30", the value will be treated as "1", or if given "-3", the value will be treated as "0"). If this given value is an invalid decimal number, a default value of "0.6" will be used instead.

Accent Color

Inside the "theme" object, add the property accentColor and use a standard HEX color code.

Accent Color affects the loading bar, and the orange text pictured in the example below.

"accentColor": "#00F1FE",

Button

The "Enter Space" button can also be customized. The below JSON rounds the button corners 50px using borderRadius and fills the button background with a horizontal gradient, pictured above. 

"buttonStyle": {
  "color": "#fff",
  "background": "linear-gradient(90deg, #FF8000 0%, #FFE431 100%)",
  "borderRadius": "50px"
}

Dark Mode

Under theme, you can set Mode to Dark.

 "mode":"dark",