Video Transcript:

The FlexBox widget gives you countless ways of combing text, images, video and buttons in to a section of a responsive page.

In this example, I am going to recreate this section of my page… The section has 4 columns each headed by an image, with some text below the image and a button below the text.

When I preview the page, the controls in the FlexBox widget adjust automatically when I reduce the browser width to fit any device the page may be displayed upon.

To create this section, start by adding a responsive page to the site.

Next, drag and drop the FlexBox widget on to the page. As the FlexBox is empty, we need to add objects in to it.

Click on the Add button in the Embedded Objects section. This creates a ‘Control’ which contains objects such as the image, text and button found in our example.

I am going to name my Control ‘Music 1’ 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 make sure that the ‘Object Type’ dropdown is set to ‘Image’.

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

Let’s add an image… Scroll down to the Image Settings section and click on the Choose… button. Select the image you want to use…

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

Enter the button text you want in the field ‘Button Text’. Again, the widget updates in the Editor Window..

I can change the button properties e.g. I can change the 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 ‘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 of 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.

Im my example I am going to change the Horizontal alignment to Center. The widget will update again.

Now scroll up to the Object Sizing Options section. In this section, I can adjust the width of the Control using the Default, Minimum and Maximum width settings.

I am going to set the Default and minimum width values at 250 pixels wide so that the control will display properly on mobile devices.

I am going to set the maximum width to 300 so that all four controls will be  grouped as I want them on desktop devices. You can set the value higher if you want or at zero which will use the full width available on the device the page is being displayed upon..

I am going to change the ‘Spacing’ between Controls to 20. This will give the controls enough left and right margin as well as enough spacing between each control.

My last step is to align all objects in the Control. In the Control Alignment section, set vertical alignment to middle and horizontal alignment to Center.

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.

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

With the four controls complete, I am now going to add some display formatting to the widget.

At top of the widget settings, I can add a top and bottom margin to the widget. I am going to use a value of 20 for each.

If I want, I can set a maximum width value for the widget e.g. you may have a very wide display e.g. 2500 pixels wide,

At that width, the four controls will look too spaced out. I can put my own limit on how wide I want the widget to stretch using the Max Content Width field. For example, I may want it to be only 1600 pixels wide. In my example, however, I will leave the value at zero.

If I want to change the order in which each control wraps as the width of the browser window changes I can use the wrap objects drop down and change it to reverse order or no wrap at all.

With the FlexBox widget complete I now want to add a background colour to it.

With the widget still selected, go to the Shape Options tab. Add a background colour fill by selection Color Fill from the Fill section’s drop down menu.

When finished, preview the page to test it by adjusting the browser width.