Home Forums Weaver Xtreme Theme way to make parallax post image clickable?

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #66344
    iempoweru
    Participant

    I 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.

     

    #66345
    scrambler
    Moderator

    The 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

    #66346
    iempoweru
    Participant

    I 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.

     

    #66348
    scrambler
    Moderator

    For 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;}

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.