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.
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
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');
});
TODO cartApi
TODO statApi
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}
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)
/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.