Using The FlexBox Widget's Reverse Wrap Feature

Responsive Websites with great easy to use features, that's EverWeb!

In this video I am going to show you how you can use EverWeb’s FlexBox widget to create this style of page.

In the responsive page there are three rows, the first has an image on the left and text on the right.

The second row has the order reversed with the image on the right and the text on the left.

The third row reverts back to the image on the left and the text on the right.

This view is fine on a desktop and tablet computer but on a mobile I want the rows to be displayed as a column with the order being image, text, image, text, image, text.

To achieve this I first add a FlexBox widget to my responsive page.

In the Embedded Objects section, I add a new object and call it Image. Next I select the ‘Object Type’ to Image.

I next set the default, minimum and maximum width values all to 300 so that the image will display as I want it to on all device types. The spacing between objects is set to 10.

I then delete the text associated with the object before scrolling down to add my image file which has a height and width of 300 pixels.

Next I add a second object to the list and I call this ‘Text’. Again I set the default, minimum and maximum width of the object to 300 with a Spacing of 10.

I then scroll down to the Styled Text Editor and enter my text and style it as I want.

The widget is almost setup. I want to add a left and right margin to the widget so I go to the Metrics Inspector and enter 30 for the left and right margin.

The widget is complete.

I now secondary click on the widget and duplicate it.

I then click on the Image object in the Embedded Objects list to select it, and change the image file to the second image I want to use. In this example I am going to leave the text as it is.

I now need to reverse the order of the image and text in the widget so I drag the text object to the first position in the Embedded Objects list.

Finally, I need to go to the top of the widget and set ‘Wrap Objects’ to ‘Reverse Wrap’.

I now have two rows set up. For the third row, I go back to the first FlexBox widget, secondary click on it and select Duplicate. I then drag the widget below the reverse wrap widget.

With the third widget select, I again change the image to the one I want. In this example I am again going to leave the text as is it.

Now that I have completed the third widget I can preview to see the results showing the effect I want.