First project – WeBlocks
?

Help Center

My program is not working

1) To see changes from WeBlocks, automatically refresh your Webflow website without cache using CMD+Shift+R or Ctrl+F5 or use Cache Killer Chrome Extension. We are using file caching to make your website run fast.

2) Make sure you are adding a script/code to the footer. JQuery code works only in the footer in Webflow. To make it work in the header or embed code, you must add the JQuery library manually.

3) In this tutorial, I show how to test the WeBlocks program to ensure it works properly.

How to connect WeBlocks with Webflow

1) On a Free plan, you must copy and paste the code manually. Code is available after clicking on the settings icon in the top right corner. Remember about coping WeBlocks library too.

2) On a Lite or Pro plan, you need to copy and paste the script to Webflow once. The script is also available after clicking on the settings icon.

Can I rename/delete the project?

We are working on it. Sorry for the inconvenience; we are planning to add this feature asap.

How can I cancel subscription?

You can cancel your subscription at any time here.

Can I pay only by PayPal?

Yes, at this moment, PayPal is the only way to pay for a subscription, we are working on adding new payments, but it’s not available yet.

Can I add more than one range slider?

This is not possible with WeBlocks yet; we recommend using this solution.

I’m getting DevTools warning

This warning is not making any problem for your program. We are investigating this topic.

I need more than one CMS Slider and it doesn't work

Make sure all classes for CMS collection and slider navigations are different for every slider

"Set Timeout" block doesn't work

This block doesn't work in connection with block "self". Make sure you are defining object without using "self" block.

Can you help me with connecting Airtable to Webflow

We decided to stop focusing on Airtable integration. For this functionality we want to recommend you this tool.

Can I add WeBlocks code to other web builders like Wordpress?

Yes, it is possible to add code to any HTML code, but some functionalities like multi-steps are built especially for Webflow. We are giving the support only for projects made in Webflow.

My WeBlocks project is not saving

WeBlocks data is saved every 7 seconds. We are working on functionality to inform users if data are not saved before quitting the platform.

'Update input' block doesn't work with checkbox and radio inputs

Please, change Webflow input settings from Default to Custom.

How to round the number for range slider output?

You can use "Round number" block, which you can find in Math.

Can I ask you a technical question?

We are not offering custom technical services, but we want to make sure there are no problems or bugs from our side.

For Webflow or coding related questions we recommend using Official Facebok Webflow Forum

I have a different question
Welcome to the Beta version of the new WeBlocks user interface. We are creating new tutorials for this version, it's coming soon.
Go back to previous UI
You can come back to new UI by openning project again in the dashboard
Events

On click

This event is triggered when seleceted element is clicked

On mouse over

This event is triggered when mouse is getting over seleceted element

On mouse out

This event is triggered when mouse is getting out of seleceted element

On click (first/second)

This event is triggered on click in selected element, with action for even and odd clicks

On input change

This event detects change in selected input

On form change

This event detects any change in inputs in selected form

On form submission

This event is detects any change in selected input
Define object

Define object

Define object with class, id, tag or attribute [bloc]

Object children

Define object using child relation

Object parent

Define object using parent relation

Object siblings

Define object using siblings relation

Object next

Define object by finding next object in Webflow structure

Object previous

Define object by finding last object in Webflow structure with selected class, tag or attribute

Object last

Define object by finding last object in Webflow structure with selected class, tag or attribute

Object number

Define object by finding element number 1,2,3.. in Webflow structure with selected class, tag or attribute

Self

Define object using only element triggered in the event. It will not trigger other elements with same class, tag or attribute, only this one.

By attribute

Define object using only element triggered in the event. It will not trigger other elements with same class, tag or attribute, only this one.

Current link

Define object by using Webflow "Current Link" tag
Actions

Set CSS

Change style of the element using CSS properties

Add class

Add class to selected object. Class will be added to element as a combo class.

Remove class

Remove class from selected object

Set text

Change text in selected element

Update input

Change value in selected input based on the input name.

Hide/Show

Hide/Show selected object

Animate

Change style of the element using CSS properties and animation transition

Update image

Update image in selected object using image URL(src)

Redirect to URL

Redirect to selected URL

Refresh page

Refresh the page

Set attribute

Change selected attribute of selected object

Console log

Use console log to test your application

Alert

Send an alert to the user

Set delay

Set timeout and run selected actions with a delay
Helpers (Get)

Get element index

Find what index/number element has in Webflow/HTML structure

Get attribute

Get the value of selected attribute in the selected object

Get parametr

Get the value of selected parameter from URL

Get input value

Get value of selected input based on its name

Get text

Get text of selected element

Get style

Get selected CSS property of selected element
Variables

Variables

Use variables to store date in your program

Create variable

Create new variable

Set variable

This event is detects any change in selected input

Get variable

This event is detects any change in selected input

Change variable

This event is detects any change in selected input
Multi Step

Multi Step

Those blocks are used to create a multistep form
Logic

If Statement

Set a condition for your action

Else

Set an action which should run if the condition is not true

True

A single block specifying true

False

A single block specifying false

And

The and block will return true only if both of its two inputs are also true

Or

The or block will return true if either of its two inputs are true.

Compare

Check if a condition is true
Loops

Loop each elements

Loop repeats its body for each element selectes by class, tag or attribute

Loop For

Loop advances a variable from the first value to the second value by the increment amount (third value), running the body once for each value

Loop While

"Repeat while" loop repeat its body while selected condition is true

Break

The break out of loop block provides an early exit from a loop
Math

Number

Single number block

Calculation

Single calculation block

Round number

Round number to selected decimal place

Thousands separator

This block will add comma, dot or other selected thousands separator to the number

Angle calculations

Single block for angel calculations
Text

Text

Single text block

Change Case

Change text to upper/lower case.

Join Texts

Join two or more texts into one

Replace in text

This block allows to replace part of text into another text
Functions

Functions

Function is sequence of program instructions that performs a specific task
Local Storage

Get Local

Get value from local storage

Set Local

Set value to local storage

Change text to number

Local values are displayed as text, if you want to calculate the you need to change variable into number.
API

Read API

This block is used to use API endpoints explained better in youtube video "Webflow 10000 CMS limit workaround"
Custom code

Custom code as an action block

Block to add your custom code

Custom code as a helper block

Single block to add your custom code

Run a script

Run a code from specific script
Others (Functional)

CMS Slider

Create CMS Slider, explained better on YouTube channel

Range Slider

Create Range Slider, explained better on YouTube channel

Mode Switcher

Create Mode Switcher, explained better on YouTube channel
Get access to Pro Features:
Webflow Connection
Project Export and Import
5000 Blocks per project
Upgrade

SHORTCUTS

CTRL/CMD+E | Find Block

CTRL+scroll | Zoom

CTRL/CMD+K | Collapse/Expand Block

CTRL/CMD+F | Search Workspace

Alt+MouseDrag | Get Single Block

CTRL/CMD+D | Disable/Enable Block

CMD+C CMD+B | Copy/Paste Beetwen Projects

Need help? Check out WeBlocks Forum
<!-- 1. Open Webflow project or page settings -->
<!-- 2. Go to "Before </body> tag" -->
<!-- 3. Paste library and script tag -->
<!-- 4. Paste generated code inside of script tag -->

<script src="https://weblocks.io/library.js"></script>
<script>
// Paste code here
</script>
Copy
This is a simple demo of generating code from blocks and running the code in a sandboxed JavaScript interpreter.
blocks left