This page is meant to be a reference not a tutorial with the details discussed during a training session. It discusses the gliders on secondary pages not the one on the home page. The one on the home page requires specially cropped images to work and you should work with iEditWeb to modify these.
To place a Glider into a new page, it requires editing HTML. This is only because we fix the dimensions of the Glider yet still want to make it work in a responsive environment. If you are comfortable with HTML you may be able to do this but if in doubt, please let us know and we can help out. If you are uncomfortable with the first steps through the section with the Advanced Style Editor, please skip below the Advanced Style Editor to see how to set up glider panels.
Place the cursor into the area you want the glider. Select Advanced | Edit HTML Source. You will need to place the following code into the location of HTML where you want the glider to appear.
After you hit OK, a blue box will appear.
Select the Palette from the Quick panel and then drag the Glider icon over the newly created blue rectangle. The glider application will appear.
Click on the Glider Application. You will see a new Glider menu appear in the menu bar at the top, Select Glider | Properties from that menu.
Set the width to 500 px and the height to 333 px. Set the other options as shown below.
Click on the CSS
button in the toolbar, Hover the mouse over the glider application and click.
A dialog box like the following will appear. It will have a class named .applicationGlidern
is a unique number of this instance of the glider.
You need to add margin-right: auto and margin-left: auto to that class.
This section begins the easy part, mostly.
Click on the Glider Application, then choose Glider | Glider Panels from the menu at the top of the editor.
At this point you can select a panel to edit by clicking on the tab above the panel. The are where the image goes can actually hold nearly any content including text, tables and images. In our case we are only placing images in the panel. You can add more panels with the icon. You can remove a panel with the icon, You can re-order the panels with the and icons. There can never be less than three panels.
To add an image place the cursor in the panel and select the image add icon . A dialog box will appear so you can select an image file from your computer.
To set the image properties, click on the uploaded image and then select the image properties icon.
The image properties dialog will appear.
You want the width to be 500 pixels and the height 333 pixels. If the image dimensions don't allow this you will need to crop the image. If you don't want to crop the image, you can set the dimensions so the image does not exceed 500 pixels by 333 pixels. The image will just not fill the space all the way. We did set up some of the images this way.
To crop the image, select the Effects/Crop tab. Now click on the crop icon. A red box will appear with grips at the four corners, As you drag the grips around, the red box will change size and shape. The area inside the box will be the image after it's cropped. To get the 500 pixels by 333 pixels size, you must crop the image so the aspect ratio is close to 1.5. After you have set the cropping rectangle, click outside of the rectangle to complete the operation.
To make it so a large image pops up when the visitor clicks on the image, click on the Large Image tab.
Select the options shown below. In this case, we don't worry about the height. Simply set the width to 800 pixels and let the height change to what ever it wants. We don't need to crop a large image since it pops up over the screen. There is a section in this dialog box for a Title and Caption. You don't need to change this since we have set up the styles for your site to hide these.