Mac SEO Blog

One of the new widgets to come with the advent of Responsive web page design in EverWeb is the FlexBox widget. Debuting in EverWeb version 2.8, the FlexBox widget allows you to combine text, images, video and buttons in almost countless ways to give your site a completely customized look.

Using The FlexBox Widget

You can take advantage of the FlexBox widget in a number of different ways. Here some tips on how you can get the best out of the widget:

1. The FlexBox widget is ideal for use on a Responsive Page Layout, however it can also be used on a Fixed Width Page Layout as well. Although not officially supported as you cannot take full advantage of the widget’s capabilities, you can still create great web page designs.
2. If you use the FlexBox widget as a full width object on a Responsive Page Layout, you do not have to embed it in a Responsive Row widget.
3. If you are using the  FlexBox widget as a Fixed Width object, then you will need to embed it in a Responsive Row Widget. If using the widget in a Fixed Width Page Layout you do not have to do this.
4. If you want to add a filled background to the widget, such as a color or image fill, you will need to embed the FlexBox widget in a Responsive Row widget first. With the Responsive Row widget selected, use the Fill Options in the Shape Options tab to change the background to a different color or image. In EverWeb 3.0 this will become simpler as you will be able to add background fills directly to the FlexBox widget itself without the need to use a Responsive Row widget to achieve the effect.
5. When used as a Full Width object, you can apply left and right Margin Settings to the widget using the Metrics Inspector.
6. Save time and effort by duplicating Embedded Objects. The FlexBox is ideal for creating a series of embedded objects in a row that all have the same styling and formatting. Create the first Embedded Object by clicking the ‘Add’ button under the Embedded Objects list box. Add an image or video, text content and a button as you require. Next format and style the Embedded Object as required. When you have finished, click on the ‘Duplicate’ button to replicate the Embedded Object. You now only need to change the second Embedded Object’s image or video, text content and button text and links. You do not need to adjust the formatting and styling as it is already set up.
7. If you cannot add an image to an Embedded Object, first select the Embedded Object in the list. Next click on the Object Type dropdown menu and make sure that you select image. The ‘Choose…’ button in the Image Settings section will now become available. The same applies if you cannot add a video URL, but in this instance select ‘Video’ from the Object Type dropdown menu to make the ‘Video URL’ input box available.  

FlexBox Widget Videos on YouTube

The 8th and final tip is to check out our FlexBox widget videos on YouTube! The first video is called ‘The FlexBox Widget‘ and the second is called ‘Using the FlexBox Widget’s Reverse Wrap Feature‘.

EverWeb on Social Media

You can also find EverWeb on the following social media platforms:

Facebook

Flipboard

YouTube

Twitter handle @ragesw