Home › Forums › Weaver Xtreme Theme › way to make parallax post image clickable?
- This topic has 3 replies, 2 voices, and was last updated 2 years, 5 months ago by
scrambler.
-
AuthorPosts
-
December 8, 2020 at 21:49 UTC - Views: 17 #66344
iempoweru
ParticipantI have looked in the forum and don’t see this topic. I am creating a site with parallax posts for the home page. I have included text in the image instead of overlaying it. One of the things I added was a call for action button. Instead of clicking on the button, I just want them to click on the image.
Here is the page in question: https://beckyapark-global.com/
Thank you in advance. I love everything about weaver xtreme plus themes.
December 8, 2020 at 22:35 UTC - Views: 24 #66345scrambler
ModeratorThe parallax image is set as a background so it cannot be made clickabe.
What you need to do is add the Text as HTML in the manual excerpt box (if you created the area with a parallax post) looking like below
<a class="myparlink" href="http://msn.com"> All your content on several lines <br/>All your content on several lines <br/>All your content on several lines <br/>All your content on several lines </a>
Then add the CSS rule below to the theme Global Custom CSS Rule box to make the link area cover the image.
a.myparlink {display:inline-block;width:100%;}
#post-38-p .parallax-content {text-align:center;}
Once in place post back for final tuning
December 9, 2020 at 13:04 UTC - Views: 11 #66346iempoweru
ParticipantI read about these instructions in the documentation, but, I couldn’t find where to put the excerpt. By accident I found it last night. Duh.
It works great, although I did do some finetuning already. I don’t have access to the main photo, so I just inserted a black background so I could play around with it. I also created a button and made that the clickable element. Now my only question is how do I play with up and down location of the text? I think I will have it align left, but, I would like it to be further down on the image.
I love it and thank you again.
December 9, 2020 at 16:40 UTC - Views: 10 #66348scrambler
ModeratorFor alignment and top padding and any other styling of that parallax content, use the rule I gave you (below) placed in the Theme Global Custom CSS Rule box
#post-38-p .parallax-content {text-align:left;padding-top:80px;}
-
AuthorPosts
- You must be logged in to reply to this topic.