FlexBlock Update: Block Identification, Video Enhancements & More

Since launching FlexBlock, many of you have dived right away into the process of designing new amazing blocks and page sections, to bring to life some of your most wild and long-desired website ideas. The beauty of FlexBlock is that it allows you to surpass your theme’s limits (which let’s agree are not that narrow) and boldly experiment with site ideas without the need to know how to code or hire a developer to help you implement it.

Currently FlexBlock allows you to create daring, fun and extraordinary layouts, by using images and videos, playing with fonts, colors and overlays, and easily adding links to any element or text that you need. Amazing, right? If you’ve been creating with FlexBlock for a while now, do share your feedback with us as we have plenty of new, exciting features in the pipeline.

We’re also happy to announce the release of version 1.2 for FlexBlock. Here’s what’s new and thrilling about this update:

1. Block Naming

Up until today, when using multiple FlexBlocks on the same page, things were getting slightly confusing due to the fact that you couldn’t rename the blocks or insert a preview to easily differentiate between them without having to access each. We solved that!

Now, you can rename any block created with Flex. To do that either click on the block to activate it, inside your page editor, click on its title and write the new name (see example below).

Or you can access your Flex Builder’s editor, tap on its name in the top left corner and add the new name for it (see example below).

2. Block Previews

Another option that we believe will greatly help you with identifying your blocks built with Flex is the option to add a screenshot preview. All you need to do is enable the Screenshot On Save option and it will save your new blocks with a preview image. 

NOTE: If the screenshot option is enabled, saving the FlexBlock will take a bit longer than usual. Also note that the screenshot option is disabled by default.

3. Notifications

We’ve implemented a notification system for various events or actions occurring within the FlexBlock editor. Two of the most important and helpful ones are:

  • The notification reminding you that you haven’t created a mobile version for your block. Once this notification appears, the mobile editor trigger will light up as well, guiding you where to proceed to create your mobile block version. 
  • The other helpful notification is Save. If you click on the notification, it will open will open in a new tab a preview of the page that your currently working on – showcasing how your new Flex Block looks, so you can instantly see the results.

See the video below for an example of how both notifications work. 

4. Self-hosted Videos + Autoplay on Mobile

We have extended the Video element to allow you to add video files from your website into your FlexBlock. When editing any Video Element, you will see a Video Source switch in the editor sidebar, with two options – Embed and Self Hosted (see example below).

Additionally, now you can have videos (both embeds and self hosted) autoplaying on mobile devices too. Note: For the Autoplay option to work on mobile devices, make sure the “Muted” option is also enabled, as this is a mobile browser requirement. If you skip the “Muted” option, your video won’t autoplay.

FlexBlock v.1.2. Self hosted video functionality

5. Layer Locking

Selecting by accident layers that you don’t need to edit can quickly become annoying. For that reason, we added the Lock Layer option to FlexBlock v. 1.2. By enabling this option, you make the element non-clickable. See image below for an example. 

FlexBlock v.1.2. Layer Locking functionality, icon

Since the elements you lock become non-clickable, you will not be able to trigger the editor sidebar the regular way (by double-clicking the element). Instead, you will need to use the Layers sidebar to edit locked elements. Any element can be edited by double clicking the according layer or by pressing the Edit Layer button (see image below for example).

FlexBlock v.1.2. Layer Locking functionality

6. Mobile Quick-Add

When you have multiple elements overlapping each other, and you only want to add certain ones to the mobile version of the block – things can get tricky. Especially when you need an element that lays below others that cannot be easily reached and clicked. 

With v.1.2, all Desktop elements that have not been added to the Mobile View will appear in a list, below the layers. Clicking an element from this list will add it to the mobile view and remove it from this list. This allows you to easily keep track of all elements and easily sort out what’s going only on mobile or only desktop. 

Flexblock v1.2. Mobile quick add layers list

How to Update

If you already have FlexBlock installed on your website, just update to v.1.2 to get these new features (sometimes you’ll also be required to clear your caches to see the new updates).

If you’re new to FlexBlockdownload it from here. Be sure to also consult the documentation and tutorialsto enjoy its full potential.


So are we! Imagine all the possibilities and design layouts you can implement on your website with FlexBlock. All it takes is a daring idea, a dose of motivations and a good cup of coffee or tea to make the process more flavorous. Do show us what you create with FlexBlock either through this form or by posting a screenshot on Facebook or Instagram and tagging @flothemes in your post! And remember, there are so many more updates and features coming up!

What Are You Looking For ?
We need cookies to run our site optimally, by continuing to browse you agree to our cookie policy for our required cookies. If you’d like to update your cookies, check out how to clear cookies for your browsers here.