EverWeb

DOWNLOAD

Subscribe to our Video Channel

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

EVERWEB VIDEO TRAINING LIBRARY

Responsive Image Gallery Widget

Video Transcript:

EverWeb’s versatile Text Section widget is designed for use in responsive pages. The widget lets you combine text with an image and buttons in almost limitless ways.


You can use the widget as a full width object or within a Responsive Row widget to create just the look that you want.


Here are just a few examples of what the widget can do…


In the following example I am going to create a Responsive Row that contains three Text Section widgets as you can see on screen… Each Text Section widget will include an image, text and three buttons.


Start by drag and dropping a Responsive Row widget on to your responsive page layout.


Next drag and drop a Text Section widget on to the Responsive Row widget.


At the moment, the widget only contains some default text, so I am going to use the Widget Settings to add my own image, text and buttons.


I first want to add my image so I tick the “Use Custom Image’ checkbox and select my image using the Choose… button.


If I want I can align the image to the top, left or right but I am going to leave it as Top so that my text always stays below the image.


I can also add some space around the image. In my example I am going to do this by setting Padding to 30.


Use the Fill Style options to customise how you want the image displayed. I am going to use the ‘Scale Down’ option.


Use the Custom Image Dimensions if you want to set the width and height of the image. I am going to use a width of 300 so that the image fits properly when viewed on mobile devices.


When changing the image width, you can set the height to ‘auto’ so that the image always retains its proportions.


In the Text Settings section I am going to replace the default text with my own. To change the text font and size, highlight the text and then use the Toolbar to make your changes.


Now I am going to add my three buttons to the widget. In the Custom Buttons section, tick the ‘Use Custom Buttons’ checkbox. You can now add the buttons you want.


Click on the Add button below the ‘Custom Buttons’ list. A button is added to the list. Name the button as you want. Add two more buttons and again name them as you want.


Once you have added the buttons, you can choose to have them always display vertically by checking the ‘Always arrange vertically’ box.


Use the Fonts button to change the button font appearance.


Use the General Options section to alter the dimensions and spacing of the button.


When customising a button remember to select it first in the Custom Buttons list before starting to customise it.


Use the Edit Link… ‘Link…’ button to link the button to a page in your website or to an external web page.


The Button Appearance and Mouse Over Button Appearance sections let you choose button colors in normal and Mouse over states. Change these colours as desired.


Now that I have finished, I am going to set the width of the Text Section widget to 325 in the Metrics Inspector so that it fits properly on a mobile devices as well as on desktop devices.


With my widget complete, I am going to duplicate the widget as I want three in a row on my page. When duplicating the widget, remember to secondary click on the duplicate and add it to the responsive row using the Embed in option.


Customize the widgets as you want.


To add padding between each of the three Text Section widgets, click in the Responsive Row widget and use the Insert Margin option. In my example, 20.


Preview to see how the page will look before publishing.