HTML editor

To edit HTML code, add an HTML element, or a pop-up or section from the Other tab.

HTML tab

Use this tab to create your own elements or add third-party widgets to your page.

To add counters and other widgets to all your site's pages, go to Settings → Analytics or Settings → Code Injection.

You should avoid writing any JavaScript code in <script> tags; use the JavaScript tab instead.

Pay special attention to the structure: an unclosed tag can ruin your site's content placed under the HTML section.

Visibility on devices

You can manage visibility of any content on different types of devices using the attributes:

[data-hidden="desktop"] — to hide content from desktop computers and show only on mobile devices;

[data-hidden="mobile"] — to hide content from mobile devices and show it only on desktop computers;

[data-hidden="all"] — to hide content from all types of devices.

<div class="text" data-hidden="mobile">
    Hidden on Mobile
</div>

<div class="text" data-hidden="desktop">
    Hidden on Desktop
</div>

Links

You can open pop-ups or the cart using anchor links:

To follow an anchor link or element ID, use a link that looks like:

<a href="#about">Go to section "About"</a>

Use the same notation to open a pop-up by specifying the pop-up ID as an anchor link:

<a href="#form">Show pop-up with form</a>

To open your cart, use the #cart anchor link:

<a href="#cart">Open cart</a>

You can change the behavior of links using the following attributes:

[data-goal="GOAL_NAME"] — it is the name of a goal that will be sent to your analytics service;

[data-action="ACTION_NAME"] — it specifies the type of an action that happens on following the link. This attribute triggers the goal set up in your analytics service. If the attribute isn't specified, then the link value is used.

ACTION_NAME	Goal	Additional attribute	Description
link by default	link_open	href="URL" — Link URL target="_blank" — Open in a new tab	Open a link / Open a pop-up / Open the cart / Follow an anchor
cart	add_to_cart	data-product-image="/img/2000018200_600.jpg" — Path to a product image data-product-name="Product name" — Product name data-product-price="1000" — Price for a product unit data-product-count="1" — Quantity of products to be added	Add to the cart
file	file_load	href="URL" — Path to a file download — Force downloading files that can be opened in the browser (PDF files, images)	Download a file
modal	modal_open form_open done_open product_show quiz_start	data-modal-id="MODAL_ID" – ID of a pop-up to be opened	Open a pop-up
close	modal_close	–	Close a pop-up (only for pop-ups)
none	–	–	Don't handle

Example of adding to the cart:

<a 
    data-action="cart"
    data-product-image="/img/9512942_1150.webp"
    data-product-name="Black Hoodie"
    data-product-price="15990"
>
    Add product to cart
</a>

Example of opening a pop-up:

<a 
    data-action="modal"
    data-modal-id="form567"
>
    Show pop-up
</a>

Example of triggering a goal:

<a 
    data-action="none"
    data-goal="my_custom_goal"
    href="#anchor"
>
    Go to anchor and run the goal "my_custom_goal"
</a>

Opening images in a pop-up

To open images as the lightbox in a pop-up, use the [data-lightbox="IMAGE_URL"] attribute. Specify the alt attribute to describe images.

By default all images with the data-lightbox attribute are grouped into the carousel. If you want to restrict the search area of such images, use the .lightbox-container class.

Example of using these attributes:

<div class="lightbox-container">
    <img
        alt="Image #1"
        src="/img/2000018199_600.jpg" 
        data-lightbox="/img/2000018199_1920.jpg"
    >

    <img
        alt="Image #2"
        src="/img/2000018200_600.jpg" 
        data-lightbox="/img/2000018200_1920.jpg"
    >
</div>

Lazy loading of images

You can set up the lazy loading of images. Lazy loading means that images start to load only when they enter the viewport.

Use the following attributes:

[data-lazy-bg="IMAGE_URL"] — to add to an element the inline background-image style when an image enters the browser's viewport

<div data-lazy-bg="/img/2000018199_%optimalWidth%.jpg"></div>

[data-lazy-src="IMAGE_URL"] — to add to an element the src attribute when an image enters the browser's viewport

<img width="100%" data-lazy-src="/img/2000018199_%optimalWidth%.jpg">

[data-inline-bg="IMAGE_URL"] — to add to an element the inline background-image style when the page starts loading

<div data-inline-bg="/img/2000018199_%optimalWidth%.jpg"></div>

[data-inline-src="IMAGE_URL"] — to add to an element the src attribute when the page starts loading

<img width="100%" data-lazy-src="/img/2000018199_%optimalWidth%.jpg">

Use the %optimalWidth% variable in the file path to load an optimal width version of the image.

Learn more about the path formats in the Files tab.

NOTE:
For Lazy loading to work properly, the width and height of each image should be explicitly specified in the CSS styles.

CSS tab

LESS pre-processing language is used in the CSS tab. You can use any features described in the documentation on LESS.

Scope

The scope of styles is defined by the :scope selector. However, if you don't specify this selector, the whole code will be wrapped in it automatically. Thus, two examples below are identical:

:scope {
    color: red;
    
    &:hover {
    	color: blue;
    }
}

color: red;
    
&:hover {
    color: blue;
}

Using the :scope selector lets you apply styles to the whole page, not only to the current element:

:scope {
    /* Styles for current element */
}

/* Styles for whole page */

Responsive design

To redefine styles for mobiles, switch to Mobiles phones in the upper corner of the CSS tab. You can also use the .adaptive-desktop / .adaptive-mobile classes applied to the body.

List of classes applied to the body:

className	Description
adaptive-desktop	Current site's display mode — PC
adaptive-mobile	Current site's display mode — Mobiles
is-touch	Device with touch screen
is-pointer	Device with cursor
is-ios	iOS device (iPhone, iPad)
is-android	Android device
is-safari	Safari browser
is-chrome	Chrome browser
is-edge	Edge browser
is-firefox	Firefox browser

Example of using classes:

// Red colored element in Chrome for iPhone
body.adaptive-mobile.is-ios.is-chrome {
    :scope {
    	color: red;
    }
}

CSS variables

You can use system CSS variables in your styles. See the list of applied variables below:

Variable	Description
var(--currentColor)	Current text color
var(--contrastColor)	Color contrasting to current text color
var(--bgContrast)	Color contrasting to current background color (it differs from --currentColor in case when text color isn't set to Auto)
var(--lightColor)	Light color
var(--darkColor)	Dark color
var(--100vw)	100% screen width
var(--100vh)	100% screen height
var(--coverHeight)	Height of full-screen sections (it doesn't change when the screen size is changed slightly)
var(--scrollbarWidth)	Scrollbar width on the current device
var(--containerWidth)	Container width (1150px)
var(--containerMaxWidth)	Maximum container width (100%)

JavaScript tab

Use the Javascript tab to write your own logic.

⛳️ jQuery is already loaded.

⛳️ The code is run in the DOMContentLoaded event.

Uploading dependencies

You can upload any JS/CSS files using the require method. Using this method works the same way as adding JS/CSS code in the HTML tab.

The method accepts two arguments:
urls: string | string[] — file path or list of paths to be uploaded (CSS or JS files)
callback: () => void — function that will run after the uploading is complete

Example:

function main() {
    console.log('THREE.js loaded', THREE);
}

require(
    ['https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js'], 
    main
);

Element / section entering the viewport

You can use sectionApi, modalApi, elementApi objects when you work with HTML sections, pop-ups or elements. Any element can also use its parent object, i.e. sectionApi or modalApi depending on the location of this element.

Available object fields:

Object field	Description
id	Unique section ID
is	Element type (section, modal, element)
content	DOM element of the content container of the section
area	DOM element of the section We recommend using content instead.
inBeside / wasBeside	Section is beside the viewport / was beside the viewport
inScreen / wasScreen	Section is in the viewport / was in the viewport
inView / wasView	Section is more than 25% visible / was more than 25% visible
inFocus / wasFocus	Section is in the viewport center / was in the viewport center
isVisible / wasVisible	Section is visible or hidden now / was visible at least once

Example of using API:

function triggerOnScreen() {
    const images = elementApi.content.querySelectorAll('img');
    
    console.log('Element on screen, images in element:', images);    
}
    
// Element is on screen on page loaded
if (elementApi.inScreen) {
    triggerOnScreen();
} 
    
// Listen events on element screen state change
elementApi.on('screen', ({ state }) => {
    if (state) {
        triggerOnScreen();
    }
});

Available events in the element / section:

Event name	Description
beside	Section will soon appear in the viewport
screen	> 1px of the section is visible in the viewport
view	> 25% of the section is visible in the viewport
focus	Section is crossing the viewport center
visible	Section became visible or hidden (its state changes from display: none to display: block). It applies to pop-ups, elements in tabs, etc.
resize	Element size has changed
open	Modal was opened
close	Modal was closed

Example of event description:

elementApi.on('screen', ({ state, first }) => {
    console.log('Element is in|out screen', { state, first });
});

sectionApi.on('resize', () => {
    console.log('Section resized');
});

Files tab

Use this tab to upload files accompanying your code.

🚨 Files are not deleted after an HTML section was removed

🚨 All files are available for all pages of your site

Enable image optimization option affects the way file paths are listed. If this option is turned on, then the links to optimized images are generated (their settings depend on the setup in the Settings → Speed Optimization.

You can specify your own path to an image.

Supported path formats:
/img/{id}_{size}_q{quality}.{extension}
/img/{id}_{size}.{extension}
/img/{id}.{extension}

Variable	Description
%id%	Unique image ID
%size%	Image width If the original size of an image is less than this value, the image is generated in its original size.
%quality%	Image quality An optimal value is in the range of 65—85 depending on the file format.
%extension%	Image format (AVIF, WebP, JPG, PNG, GIF)

Example:
/img/19790179_1280_q65.webp — an HD image in the WebP format and 65 quality (1280x1021px, 250Kb)
/img/19790179_1920.jpg — a Full HD image in the JPG format (1920x1532px, 460Kb)
/img/19790179.jpg — an original image (3024x2413px, 1558Kb)

To speed up the performance of your pages, try to find an optimum size of each image.