Arrow "jump" button?
-
Topic
-
On the Denali demo site Demo 1 home page, there is an arrow image that takes the user down the page. Can you please guide me as to how I would insert this graphic on other pages in the site, and have it function in the same way? Sorry if I am missing something in the documentation about this.
Many thanks.
-
Replies
-
Hi,
In the layout builder you want to use the Hero Unit element or the Hero Unit Slider element (which is essentially a group of hero units). Then within the given hero unit’s options you want to check the option that stretches the hero unit full height of the browser, which then reveals a checkbox for the scroll to section button.
It might be helpful to watch the 5 min theme overview video in the first chapter of your documentation. It’ll introduce you to the layout builder and show you how to quickly create a layout like the demo homepage, which you can then continue to edit.
Actually, I am having problems getting things set up with this. When I insert a Hero Unit, I do not see any option of setting the image to appear in the Hero photo.
In the Hero Slider elements, there is the little gear icon which shows which image is included, but I am not seeing this for Hero Unit. Even duplicating the About Basic template and looking into that Hero Unit settings, I can’t see where that image lives.
I actually have my page all set up the way I want it, and I would love to simply have a jump arrow as described in my initial message. Please see this link: http://www.designforusers.net/2016/about-me/. All I really want is the arrow.
There are actually different ways to setup a hero unit with background image. You can attach the background image directly to the hero unit, or in the surrounding section. These different methods allow for various possible outcomes.
I’m going to try and lay out one route of setting this up how I think you want with some screenshots.
Click to enlarge
Ok I lied… I forgot there is one much easier way to add what you want to the current page you have setup with this theme. On the page you linked to, in the “Page Options” meta box, select for the featured image to be “full screen parallax, above content.”
Result will be like this:
http://demoblvd.com/themes/denali/demo-1/practical-examples/full-screen-parallax-featured/
- You must be logged in to reply to this topic.