Want a down arrow on my hero header.

Also, how would I incorporate the text in the current hero banner on the home screen

"Granite & Quartz Countertops Quoting & Consultation:
PHONE: 587-876-1211 | EMAIL: INFO@ROCKYMOUNTAINGRANITE.CA
Calgary, AB"

on the one that I am working on, with the phone number linked as it is.

https://rockymountaingranite.ca/

Hi Brenan,

Use this CSS to place the arrow at bottom center:

.inside-page-hero a img {
    position: absolute;
    bottom: 1em; /*adjust the number depends on your need*/
    left: 50%;
    transform: translatex(-50%);
}

For the text question, I'm not sure I fully understand.
Do you just want the text to show in page hero? Or there're some specific needs?

Let me know :)

Essentially, I just want to display our contact information on the hero banner on this page: rockymountaingranite.ca/test so that the phone number can be clicked to call.

Also, how can I make the arrow fade out when I scroll down, or take me to the content once it's clicked?

Essentially, I want the arrow to behave like this https://www.quietparks.org/

Again, thanks so much for the help, I'm a huge noob :)

It's ok to be a noob :)
​
​You could add html like this to your header element which assigned to the front page content area:​

​<span class="contact-info">
<p>Granite & Quartz Countertops Quoting & Consultation:</p>
<p>PHONE:<a href="tel:587-876-1211">587-876-1211</a> | Email: <a href="INFO@ROCKYMOUNTAINGRANITE.CA">INFO@ROCKYMOUNTAINGRANITE.CA</a></p>
<p>Calgary, AB</p>
</span>

​For the arrow fade out effect, it will require JavaScript, but we can achieve the scroll down effect easily with the smooth scroll option activated which you already are. For example, if you'd like the page scroll to the "Test" part when click on the arrow, try to follow the steps below:

​1. Edit the "Test" H1 text in html mode, give it an ID: <h1 id="home-main-content">test</h1>.

​2. Link the arrow image to the ID: #home-main-content.
​
​Let me know :)

Hey Ying,

I appreciate the information regarding the fade out effect.

Could you possibly go a little bit more in depth on how to link the arrow image? I'm pretty lost haha.

Thanks so much, again

It seems the arrow image has had the link done, good job!

Now you just need to add id="home-main-content" to the Test h1 text in html editing mode.
https://www.screencast.com/t/6aV0gCZMeQn
https://www.screencast.com/t/wlckx2klFs

Let me know.

Thanks ying, that worked stellar :)

I'm just in the process of integrating this banner on the home page, and I have one more issue.

The page is just a hair too wide. I would like the scroller on the bottom of the page not to be there.
https://rockymountaingranite.ca/

Would you be able to help me remedy this?

Also, the second button I made titled "hero button" isn't responding to the CSS I'm trying to change it with.

Thanks :)

Hi Brenan,

Glad it works!

Do you mean you want the arrow at the bottom of the page not in page hero?

If so, could you please open a new topic?
It's easier for us to track and solve problems, thank you for your understanding :)