All About EverWeb’s FlexBox Widget!

One of the most versatile and effective ways to get great responsive page design in EverWeb is by using the FlexBox widget. The widget is perfect for when you want to combine text with media such as images or video.

If you’ve never tried out the widget, here’s your guide to getting the best results from it…

Working with Containers within a Container…
.The nature of responsive design means that basically the objects on your page are containers that hold content such as text or images. You place the containers that you want to use within other containers, e.g. you could have a piece of text, an image and a button that you want to group together. Each object here is its own container, and to group them together you put them in to a larger container, the Responsive Row widget. The Responsive Row widget container is a full width container, which is in another container, the page itself.

The FlexBox widget lets you organise, and style, these such containers within it so that you can achieve the effect that you want e.g. you may want to have a full width container that contains text down the left hand side with a button at the bottom of the text, with an image displayed on the right hand side that is the height of the text and button combined. The FlexBox widget makes. building this kind of design easy. Here’s how to do it…

Getting Started with the FlexBox Widget
Before starting to work with the FlexBox widget, make sure that you have your text available and that you have copied your image file in to EverWeb’s Assets List. To do this, click on the Assets tab button in EverWeb’s Inspector window. Next, just drag and drop your image file from its source in to the Assets List.

The next step is to add the flexBox widget to your Responsive page. If you want to try this on a blank page, just click on the Add Page button in the Toolbar then click on the Blank Responsive theme at the top of the left hand column of the dialog box. On the right hand side of the dialog box, click on ‘Home’ then click on the Select button to finish. After adding the page, or selection the responsive page that you want to use, click on the Widgets tab and drag and drop the FlexBox widget on to the page.

The Important FlexBox Widget’s Widget Settings
The FlexBox widget has many ways in which you can customize it, but here we are going to only look at the features that you need. The remainder of the settings you can leave at their default values. Let’s start by adding a Top Margin of 5 and a Bottom Margin of 10 to give space at the top and bottom of the widget.

The next field you should look at is the Wrap Objects field. As you reduce the width of your browser window, the objects in the FlexBox widget will rearrange themselves automatically to fit properly in the space provided. As such, the vertical layout of the FlexBox widget on a laptop will eventually become a vertical layout on a mobile phone. You’ll use Wrap Objects to determine how objects wrap, either left to right, top to bottom (wrap) or right to left, top to bottom (reverse wrap), or do not wrap at all.

The next section to look at is the Embedded Objects section. This is where you add your content to the FlexBox widget. By default, when you add the widget to the page, you will automatically have ‘Styled Text 1’ added to the list of Embedded Objects. Start by clicking on ‘Styled Text 1’ to select it, then replace the default text content in the Control Content section with your own. Style the text as you want.

After replacing the text, scroll down the widget settings until you reach the Button Settings section. Check the ‘Use Button’ box to activate the button settings. Style the button as you want using the Button Settings.

Once finished with the button design, it’s time to add a new embedded object which will be used for adding an image to the FlexBox widget. Scroll back to the Embedded Objects section and click on the ‘Add’ button. Enter a label for the new embedded object e.g. Image 1. Press Enter to confirm the name.Change the ‘Object Type’ field from Styled Text to Image. Next scroll down to the Image Settings section, and click on the Choose… button to select the image that you want to use.

After adding the image, your FlexBox widget is essentially complete.

More FlexBox Options If You Need Them…
Whilst he FlexBox is now complete, you still have more customization options if you need them. The first thing to remember is that you can change the order of the Text+Button and Image objects. In this example, if I want the image displayed on the left and not the right, all I need to do is to drag and drop the ‘Image 1’ object above the ‘Styled Text 1’ object in the Embedded Objects section.

You may also want to play with the Default, Minimum and Maximum width options in order to better scale the embedded objects. If you set any of these values at zero, the object will take as much width as there is available. You can also use a percentage if you prefer e.g. you could set the Maximum Width at 30%. Lastly you may also want to adjust the spacing between each Embedded Object using the Spacing field.

EverWeb’s FlexBox widget is a very powerful and versatile tool for responsive web design. It’s quick and easy to use, but dont forget to always test your designs before publishing to make sure that everything is as you want it.