How to define specific action (scroll) when click on picture

Hello,
I want my page to scroll down to a specific section when I click on a specific picture. Unfortunately I have no clue how to do this… can you please help? Thank you!

Hi Vivien,

You can achieve that by adding the Link into the image of the specific section id with the #, please find the video describing the settings.

https://www.awesomescreenshot.com/video/2251858?key=673e9b853f24187ee77e84c81548ce6e

Hope it helps.
Thanks

Well, the thing is that the picture is not an image but a text.
In the screenshot you see 3 different pictures and if you click on each, it should scroll to a different section but as it is a text and not an image, I don’t know how to do it.

The HTML for the pics starts as follows
div class=“x-bnb-image-grid”

So I think I have option A - text but nowhere to include the # for scrolling link or Option B - image but there I do not know hot to put text on top of my image?

Thank you!

Hi Vivien,

To add a link to your text as Option A, please use the HTML in the text element and follow the HTML code below.

<a href="#sectionone">Go to Section One</a>

image

I suggest that you will stick with Option A because Option B will require a lot of steps but they will have the same output.

Hope that helps.

Thank you.

Hello,
unfortunately that does not work because then it looks like this:


Means the pic gets super big, the text appears in red above and nothing works anymore…
I screenshotted the whole HTML code I have in there, there must be an error somewhere?

Thank you!

Hello Vivien,

In order to help you with your concern, we need to check your settings. I would request you to please share your details in a secure note. Please provide the following details

  • WordPress Login URL
  • Admin level username and password
  • Exact Page URL

You can find the Secure Note button at the bottom of your posts

Thanks

Hello Vivien,

Please go with option B and use this custom HTML content in one of your text elements.

<div class="x-bnb-image-grid">

  <a href="#DIY">
    <span class="bg"><img src="https://thiswonderfullife.de/wp-content/uploads/2021/01/Do-it-yourself-1.jpg" style="height: 100%;width: auto !important"></span>
    <div>
      <span>Do it yourself!</span>
      <small>Anleitungen zum Selbermachen</small>
    </div>
  </a>

  <a href="#Reviews">
    <span class="bg"><img src="https://thiswonderfullife.de/wp-content/uploads/2021/01/Review.jpg" style="height: 100%;width: auto !important"></span>
    <div>
      <span>Reviews</span>
      <small>Shop- und Website Feedback</small>
    </div>
  </a>

  <a href="#Premium">
    <span class="bg"><img src="https://thiswonderfullife.de/wp-content/uploads/2021/01/Indi.jpg" style="width: 100%"></span>
    <div>
      <span>Individuell</span>
      <small>Premium & All Inclusive</small>
    </div>
  </a>

</div>

As you noticed, each of the <a> were linked to the section ID of each respective sections that you want to link.

Kindly let us know how it goes.

Yaaasssssss!! Thank you so much! That’s exactly what I wanted. I lost sight of the wood for the trees…

Hi Vivien,

You’re welcome and it’s our pleasure to help you. If you have any other concerns regarding our theme features, feel free to reach us.

Thank you.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.