Visual clues like this work well for homepage designs where there is a large, or full page background/image/video at the top.
This is because some visitors won’t realise that there is more to view on the homepage and won’t scroll down.
By placing a prominent arrow somewhere within the first section of the homepage you can encourage visitors to click the arrow and scroll down to find out more about your offer.
This code snippet is about adding the downarrow feature to the home page of the Altitude Pro Genesis child theme.
WordPress Resources Used
- Genesis Extender plugin is used to add the CSS
- Altitude Pro theme was used in the demo and this blueprint is only suitable for this theme.
View Demo Site
I have prepared a demo site to show you the results of this blueprint. Click the button to see the demo.
Click To View Demo
Step By Step Video Instructions
Step By Step Written Instructions
- Decide Where Clicking The Arrow Takes The Visitor
Normally this will be a section on the home page that is further down. In the demo I chose this to be the widget area called Front Page 4. You can choose any that suits you. This means that the class I will specify in the code snippet is .front-page4
But you will specify whichever class corresponds to the section you choose to have the arrow jump to.
- Decide which section you want the arrow to jump to.
- Make a note of the corresponding class name. It will be something like .front-page-2
- Click on the SEO menu item of the Genesis Club Pro plugin, in the sidebar on your dashboard.
- Next click on the Scripts tab
- Paste the following into the Home Page Script box.
- Replace .front-page-4 in the above script, with the class name you noted in the previous step.
- Add The CSS
- While in Genesis Extender custom, click on the CSS tab
- In the large box enter the following
- Click on Save Changes
- Review Your Work
- Refresh your home page.
- An arrow should appear in the top section and when you click it, you should be taken to the section you specified in the code.