Subscribe to our Video Channel

Press the Subscribe button and keep up to date with all our latest videos, tips, tricks and news.


FlexBox Widget

Video Transcript:

The FlexBox widget is incredibly versatile with countless options

combing text, images, video and buttons in to a section of a responsive page.

This video will show you how to use the widget and get the most out of it.

In this example, I am going to recreate this section…

It has 4 columns each headed by an image, then some text and then a button.

To start, drag and drop the FlexBox widget on to a Responsive Page in your website project. As the FlexBox is empty, we need to add objects in to it.

Start by clicking the Add button in the Embedded Objects section of the Widget Settings. This creates a ‘Control’ which contains objects such as in our example where we have an image, text and a button.

I am going to name my Control ‘Music 1’ and then I press Enter to finish.

You can rename a Control at any time by double clicking on its name in the Embedded Options list and entering a new name.

As I want to include an image I need to change the ‘Object Type’ to ‘Image’.

Now I am going to scroll down to the Styled Text Editor. This has some default text that I do not want so I will delete it. I will add my own text here later on.

Let’s add an image… Scroll down to the Image Settings section and click on the Choose… button and select the image you want to use…The widget will update in the Editor Window.

Let’s now add a button… Scroll down to the ‘Button Settings’ section and tick the ‘Use Button’ checkbox.

Enter the button text in the field ‘Button Text’

Again, the widget updates. I can now change the button properties e.g. I am going to change its background color and make the text black on mouse hover.

In my example I have also changed the font to a Google Font, SpecialElite, using the Button Style ‘Fonts’ button.

Use the Link… button to redirect your visitor to another page in your project file or to an external web address when clicking on the button.

Next scroll up to the Control Content section to the Styled Editor and enter your own text.

With the text still highlighted, use the Styled Text Editor tools to change the properties of the text as you wish.

In the Control Alignment section above change the Horizontal alignment to Center. This will force the widget to update on screen.

I can adjust the width of the Control using the Default, Minimum and Maximum width settings. In this example I am going to set the Default at 250 pixels wide, the minimum at 150 and the maximum at 300 which will make the section display properly on mobile and desktop devices. Change the ‘Spacing’ between Controls to 10.

Now that I have finished the Control I can use it as a template for the other 3 controls I want to add.

Scroll up to the Embedded Options section and click on the Duplicate button thee times.You now have four controls: Music 1,2,3 and 4 on screen

Click on ‘Music 2’ and change the text in the Styled Text editor.

Change the image by choosing a different image using the Choose… button in the Image Settings section. Edit the button Link as required.

Repeat these steps by selecting and changing the Music 3 and Music 4 controls.

To move a control to a different place, drag and drop the control name to its new location in the list.

To change the order in which each control wraps as the browser window changes use the wrap objects drop down and change it to reverse order or not at all.

You can set the whole alignment of the Controls in the widget using the Alignment dropdown. This alignment is overridden if you use the alignment options in the Styled Text editor for a selected Control.

With the FlexBox widget complete I now want to add a background colour and some top and bottom padding to it. To do this I need to use a responsive row widget.

Drag itand drop the responsive row widget on to the page and add a background colour fill using Shape Options and a top and bottom padding of 20 using the widget settings.

Next click inside of the FlexBox widget to select it. Secondary click and choose the Embed In option to place the FlexBox widget within the Responsive Row widget.

When finished preview the page and  test it adjusting the browser width.