Tutorials

Affero 2

How To Set Up the Slider

Step 1: Navigate to your Page Inspector > Styles Menu and enable the Slider by selecting ‘Slider’ under the Banner Setting option.

inspector  -> iehjfdjg -> aacgbdbc

Step 2: View your project in Edit mode by clicking the edit button.

fhcjhjgg
Step 3: Import or drag and drop an image into your editor.

Step 4: Double click the image and in the popup menu change the Filename to something that includes the word ‘slide’.

ficbecib

 

Step 5: Repeat steps 3 and 4 until you have as many images you want to use in the slider. Affero’s Slider will now do the rest! The order you place your images into the slider, is the order the slider will display them.

 


How to Add Captions to Your Slider

Step 1: View your project in Edit mode by clicking the edit button.

fhcjhjgg

 

Step 2: Copy and paste the code below into your editor. Step 3: Highlight the code you pasted and select “Ignore Formatting” from the Format drop-down menu.

Caption

Step 3: Highlight the code you pasted and select “Ignore Formatting” from the Format drop-down menu.

ignore formating
Step 4: Now highlight the white space between the code and select “Ignore Formatting” again. This is so you can use RapidWeaver’s formatting tools on the caption (e.g. change color or font-size)

Caption

 

Step 5: Add your desired caption in the white space between the pink highlighted code.

Captioning

 

Step 6: Repeat Steps 2-5 until you have your desired number of contents. Just like the slide images, the captions will display in the order that you place them. If you want to leave one slide without a caption just don’t add text in between the pink highlighted code.

NOTE: Sometimes the editor will change your straight quotation marks into curly quotation marks. The curly quotation marks will cause caption to not work. To change them from curly to straight just delete the quotes and retype them.

 


 How to Add Videos (iframes) to the Slider

Step 1: View your project in Edit mode by clicking the edit button.

fhcjhjgg

 

Step 2: Copy and paste the code below into your editor.

<li class=”slide”>

</li>

Step 3: Highlight the code you pasted and select “Ignore Formatting” from the Format drop-down menu.

ignore formating

 

Step 5: Locate the video you want to use on Youtube or Vimeo. Use the share link “Embed” option to get the iframe code. Paste the iframe code into the space between <li class=”slide”> and </li>

iaegjdfi

acaijbef

 

NOTE: Sometimes the editor will change your straight quotation marks into curly quotation marks. The curly quotation marks will cause caption to not work. To change them from curly to straight just delete the quotes and retype them.

 


How To Enable Lightbox on an Image

Step 1: Navigate to your Page Inspector > Styles Menu and enable the Lightbox by selecting checking the ‘Lightbox On’ checkbox under the Toggles heading.

inspector -> iehjfdjg -> aehagchc

Step 2: View your project in Edit mode by clicking the edit button.

fhcjhjgg

Step 3: Import or drag and drop an image into your editor.

Step 4: Double click the image and in the popup menu change the Filename to something that includes the word ‘lightbox’. You can also change the Alt Tag to set what will display as a caption for the image.

Light Box


How To Add A Button

Step 1: Type in your desired button text into your editor and hightlight the text.

ButtonText

 

Step 2: click the Add link button.

cechgeed

 

Step 3: Add a link to where you would like the button to navigate to and then add a ‘class’ with the value ‘button’.

ebejjeeg

 

Step 4: Click ‘Set Link’ and you are done.

Need to update your product? Use the Order Lookup Form to download the latest version.