Please note: You must be using OptimizePress version 2.5.7 or above for PlusPack features to function correctly
In this video lets take a look at how you use the OptimizePress Plus Pack Scroll Enhancer element.
- To get started, you will firstly need to open a page with the LiveEditor. Once launched, click on the 'Add Element' button.
- Next, click on the Search box and begin typing in the word 'Scroll'. OptimizePress will go ahead and list all the elements containing the word Scroll. From this list, select the 'Scroll Enhancer' element.
- After you've clicked on the element, you will be taken to the next step of the process and shown a list of scroll enhancers designs.
Click on the design style you want.
- You will be taken to the next step of the element setup and shown a list of options:
Scroll Enhancer Element Top Margin (in pixels) - This sets the spacing between your element and the element underneath it. You can choose to leave this blank or give it a number in pixels.
Scroll to Element (name tag, element ID and CSS Selector) - This assigns where on your page you would like your visitor to go to when they click on the scroll enhancer. We will cover name tags, element IDs and CSS Classes later in the tutorial.
Display Description on Scroll Enhancer Element Hover - This adds some description text that shows when your visitors hover over the scroll enhancer. Ideal for explaining the action you want visitors to take.
Padding (Scroll position offset in pixels) - This sets where the scroll positions ends up after clicking on the scroll enhancer and it goes to your preferred location on the page.
Speed (milliseconds) - Sets the speed of the scroll enhancer when scrolling.
Scroll Effect - Set whether you want the scroll enhancer to scroll to or jump to another element on the page.
Link Animation - Set how you want the scroll enhancer to be animated. You will be able to select from a list of available options.
- In our example, leave all of the fields set to default and click the 'Insert' button.
- Click 'Save & Continue'. Then preview your page. You should now see the animating Scroll Enhancer live on your page.
Click on the Scroll Enhancer and it will take you to the next element below it. This is the default action but you can set different scroll locations on the page.
How to set a custom scroll location
If you would like more control over where you would like the Scroll Enhancer to point your visitors to, you will be able to do so using 'Name Tags', 'element IDs' and 'CSS Classes'.
Setting and Assigning an Element ID
For your scroll enhancer to know where to point to, you will firstly need to assign the element you would like it to scroll to, with an element ID.
- To assign an element ID to an element. Hover over your element and click the small 'cogwheel' icon.
- Next, scroll down in the element settings until you see the option 'Element class'. Give your element id a name. In our example. We've used the word 'Example'.
- Once done, save the changes.
- Next, hover over your Scroll Enhancer Element and click on the 'small pencil' icon to open the settings.
- Go to the 'Scroll to Element' area and type in the name of your element id that you assigned in the previous step. This will tell your scroll enhancer to scroll to that element on the page. In our example, the word typed is '.Example'.
- Update your changes.
IMPORTANT STEP: Insure that you add a '.' (fullstop) in the 'Scroll to section' before the element name, otherwise it will not work.
- Click 'Save & Continue' on the LiveEditor and preview the page. Clicking on your Scroll Enhancer should now scroll to the selected element on your page.
Setting and Assigning a CSS Class
To scroll to a Row on the page, you will need to set a CSS Class inside the 'Row Settings' window. The process will be the same as the 'element ID' setup process. (Refer to the element ID tutorial for further details.)
- Scroll down until you find the field 'Row CSS class'. Then assign it a class name. Click the update button.
- Go to your Scroll Enhancer element settings and again, set the 'Scroll to Element' to the name of the CSS Class ID. Again, making sure that you add a '.' before the CSS Class ID.
- Update the changes and test the page.
Setting and Assigning a Name Tag
There may be times where you would like your scroll enhancer to scroll to specific text element. In order to do this, you can use a 'Name Tag'.
- To get started, add a new text element, then add the text you want to use. Scroll down and click 'Insert'.
- Next, click on the small 'cogwheel' icon to go to the Advanced Element Options.
- Under the 'Code Before Element' field. We must now insert a small bit of html code.
Use the following code snippet, making sure that you replace the Insert name here field with a name of your choice:
<a name="Insert name here"></a>
In this example, we've used davidf as the field name, which looks like this:
- Scroll down and click the 'Update' button.
- Finally, go to your Scroll Enhancer element settings and insert the davidf id under the 'Scroll to Element' field.
Note: For Name Tags, you DO NOT need to insert a '.' before the name and can simply insert the name as normal.
- Save and Preview your page. Then test the Scroll Enhancer. You should now successfully scroll to your assigned text.