• Pricing
  • Help
  • Contacts
Log In
Get Started
My Account

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.

Product

  • Features
  • Pricing

Resources

  • Help
  • Logo Maker

Company

  • Terms of Service
  • Privacy Policy
  • Cookie Policy

Contacts

info@flexbe.com

© 2012–2023 Flexbe Inc.
Instagram
Loading...