You are here:
< Back

Step 1:


In the WordPress admin area, find and open up a page or post where you want to display the Arrow. In the editor you will see a blue down arrow icon. Click on the icon to display the Arrow properties dialog.

1. Click on down arrow icon

Step 2:


A pop up box will display the Arrow properties with pre-filled typical values as a guide. After you are happy with the parameters, click the OK button.

PropertyDescription
CSS IDFor developers, this is CSS ID of your choice, so you can target it with CSS or Javascript.
CSS ClassFor developers, the CSS Class of your choice so you can target it with CSS or Javascript.
Arrow TypeStyle of the Arrow.
Animation TypeThe type of animation movement the arrow will make, such as bouncing, pulsing etc.
Arrow Size ( px )Size of the arrow in pixels.
CSS Color ( HEX Value )The color code of the arrow, for more information about HEX values click here.
Duration Time (ms)Duration of the arrow (in milliseconds) before it disappears.
Bouncing Speed (ms)Rate at which the arrow bounces in milliseconds.
Click moves to IDEnter CSS ID in order to allow users to click on the Arrow and be moved to a specific location on the page.
Disappear After ScrollingIf checked, the Arrow will disappear after user scrolls down.
Disable BouncingDisable the arrow from bouncing up and down.
Disable Duration If checked, the Arrow will stay visible permanently instead of disappearing after duration set in Duration Time field.


2.arrow-properties3

Step 3:


The screenshot on the right shows the shortcode that will be inserted into the page/post editor after you click OK in the Arrow properties dialog.
You can also edit the shortcode directly in the editor or erase it and start over from Configure the Plugin – Step 1.
If you are happy with the Arrow settings continue to the next step.
Note: This will insert a new shortcode into the editor

outputted-code2

Step 4:


As a last step, update or publish your post or page. Then go to your website, find the page and verify that your down Arrow is displayed and works as expected. It should appear at the bottom of the page, possibly with some delay based on your Arrow parameters.
If you need to adjust your settings, go back to the page editor and either manually adjust the Arrow shortcode settings or insert a new shortcode using the Arrow button (old shortcode will need to be removed or overwritten).

publish-update