![\"screenshot_41\"](\"http:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2015\/07\/screenshot_41.png\")
<\/a><\/p>\nIt’s also important to use images of the same size, quality and orientation in your slideshow e.g. \u00a0your images should either be all portrait or all landscape and not a mix of both. Images should be also of the same\u00a0dimension\u00a0and quality\u00a0in your slideshow.<\/p>\n
In the example below we have created a web page for a fictional company, \u2018Fantastic Journees Inc\u2019, with the company name in the top left hand corner of the page. Below the company name is the Image Slider followed by a Navigation Menu with a rectangular colored shape behind it providing\u00a0a background contrast.<\/p>\n
<\/a>The original Image Slider page created in EverWeb 1.7.<\/p><\/div>\n
We can start to update the Image Slider by making it \u2018Full Width\u2019. Select the Image Slider then go to the Metrics Inspector and click on the \u2018Full Width\u2019 button. In addition make the Image Slider \u2018Fixed Position\u2019 at the same time. Lastly, select Arrange-> Always On Top from the menu.<\/p>\n
Next select the company name and make this also \u2018Full Width\u2019, \u2018Fixed Position\u2019 and ‘Always On Top’. If the find that the text is right up against the left hand margin of the page, use the Text Inspector to add a margin in using \u2018Insert Margin\u2019.<\/p>\n
Repeat the above steps for the Navigation Menu and it\u2019s background coloured rectangle. Rearrange any objects that may have moved\u00a0position on page due to the use of \u2018Fixed Position\u2019.<\/p>\n
With the basic page layout updated, let\u2019s update the Image Slider. In this example we are going to add a caption to each slide.<\/p>\n
To add a caption to a slide, select the image file name in the Assets List. Next enter the text \u00a0you want for your caption in the ‘Caption’ box. To change the font size and style, click on the Fonts button and use the Fonts Panel to select the options that you want to use.<\/p>\n
If you want to add a URL link, enter it in the ‘URL’ box. If your visitor clicks on the image they will be taken to the page you have linked. When adding links, make sure you use the full descriptor e.g. \u2018http:\/\/www.fantasticjournees.com\/homepage.html‘<\/a>. Remember to test the link using ‘Preview’ before going live with your changes.<\/p>\n Note that if you enter a link in the \u2018URL\u2019 box, it will override \u2018Click to enlarge image\u2019 if you have ticked it in the Behaviour section.<\/p>\n If you want to add a background colour to your caption select the \u2018Background\u2019 color swatch in the \u2018Caption\u2019 section at the bottom of the Widget Settings. Use \u2018Background Opacity\u2019 to change the background transparency. If you do not want a background color at all set the value to zero.<\/p>\n You can place\u00a0the caption where you want within the Image Slider\u00a0using a combination of \u2018Caption Left\u2019 and \u2018Caption Top\u2019. These options operate like x and y co-ordinates when placing the caption. When you publish the\u00a0page, the caption automatically scales and resizes as you change the size of the browser window as seen in the two screenshots below.<\/p>\n The Image Slider is full width and resizes as you adjust the browser size, as does the Navigation Menu.<\/p><\/div>\n <\/p>\n As the browser window shrinks you see that the caption automatically resizes. You can also see the results of the use of Fixed Position and always on top here as the items below the Navigation Menu scroll under the menu.<\/p><\/div>\n Use \u2018Caption Width\u2019 to define the height and width of the caption text and background box color if you have one.<\/p>\n When creating captions for all of your slide images, try to make the text about the same length for each slide\u00a0so that the caption box remains a consistent\u00a0same size from slide to slide when viewing the slideshow.<\/p>\n In addition to captions, you can now make the slideshow background transparent. This is useful when you use Thumbnails and want the slideshow to blend in with the page background color. See the two screenshots below.<\/p>\n<\/a><\/a>