FlexBlock Update: Block Naming, Video Enhancements, Parallax & 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 some thrilling features and updates, released with version 1.2, 1.3 and 1.4 of FlexBlock. Make sure you update to the latest version.

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.

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. 

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).

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. 

7. Parallax

(Available with v. 1.3) When adding an Image element to your block, now, on the right side bar you will find the option to Enable Parallax along with the Parallax Factor scale, which allows you to control the amount of movement you want to add to the scrolling experience of the user. See an example on our FlexBlock landing page.The default will be set to 20. We do encourage you to test the lower and higher values, to see how it works and find that sweet spot for your own website.

8. Multi Select for Elements

(Available with v. 1.3) Need to move, delete or duplicate several elements at once? Now you can easily do it with the Multi Select option. Hold on to your Command (Ctrl for PC users) key while selecting the needed elements, by clicking on them. Move them around, as shown in the example below.

Alternatively, you can select an area on your screen with your mouse, and all elements located in that area will be selected and marked with a blue frame (see example below).

To select all elements at once, press Command + A keys.
Clicking on a selected element while holding your Command key will deselect it.

Building out a layout that requires copying the same section, again and again? Select all the elements you need and click on the Duplicate option on your right sidebar. Or delete multiple elements at once.

9. Button Hover Effects

(Available with v. 1.3) Add some fun animation effect for your buttons on hover. You can tweak the following 3 categories to get the look and experience you want: button border color, button background color and button text color.

All of these options you will find in your sidebar under Hover State.

10. Sidebar Orientation

(Available with v. 1.3) To make your designing experience smoother, we’ve also included the option to easily move your sidebar to the left or right side, so it doesn’t overlap any of the elements on your screen while you’re working on them (see below).

11. Image Opacity

(Available with v. 1.4) Want to use an image as background and need to make it slightly transparent? We’ve added an Image Opacity option which allows you to easily change an image’s visibility.

12. Gradient Background Option

(Available with v. 1.4) For more complex and interesting color usage while building your blocks, we’ve introduced the option of a gradient. All you need to do is add a shape element, fill it with a color and enable the Use Gradient option, then play with the Gradient Range to find that sweet spot for your design. The gradient can gradually make your shape element transparent or merge it into a second color.

13. Custom Classes

(Available with v. 1.4) If you love playing with Custom CSS to spice up your website design and know how to use it – we’ve added a special section for you to add Css snippets. It’s available for every element that you work with, and located at the bottom of your sidebar, under the label Custom Classes.

14. Advanced Text Styling Options

(Available with v. 1.4.1) To offer you more control over how your texts look in FlexBlock, we’ve enhanced your styling options. Now you can highlight and tweak each word separately, as shown in the example below.

How to Update

If you already have FlexBlock installed on your website, just update to v.1.4 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 FlexBlock, download it from here. Be sure to also consult the documentation and tutorials to enjoy its full potential.

Excited?

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!