Hello,
What is the technique/element to implement this? It looks like a full section that, when moused-over, changes to a different display and becomes clickable:
Here’s the BEFORE:
…and here’s the AFTER (whole section is a button/clickable link):
Hello There,
Thanks for posting in!
Regretfully there isn’t an option where a section can be clickable. You can only have elements that may be clickable such as the Classic Creative CTA button. This does not look like what you have in mind. You can make use of it though to start with and modify it to look like what you have wanted. Please also understand that what you have in mind can only be available with custom development which is outside the scope of our support.
Thank you for your understanding.
Thanks - Looks like the Classic Creative CTA element is right tool for the job. After playing with various margins and padding values, I don’t see how to expand the size of that element to fill the entire section/row/column. Is there a trick to that?
Hi,
You need to select a No Container Layout to make it fill the entire width of your site.
If that doesn’t help, please provide us your site url so we can take a closer look.
Thanks
Thanks! My page is already set up with the Blank - No Container | Header, Footer template…
I’ve looked at the page source, they are indeed using the Classic Creative CTA element. It seems the x-container style is slightly different, which I assume might be what is enabling the full-box-button effect. Here’s the snippet of page source I pulled from the BEFORE/AFTER site that I’m trying to emulate:
<div id="x-section-7" class="x-section" style="margin: 0px;padding: 0px; background-color: transparent;" >
<div class="x-container" style="margin: 0px auto;padding: 0px;" >
<div class="x-column x-sm x-1-1" style="padding: 0px;" ><a class="x-creative-cta slide-top" href="https://example.com" target="_blank" style="padding: 100px 30px 50px 30px; color: hsl(0, 0%, 100%); background-color: hsl(50, 99%, 47%);" data-x-element="creative_cta" data-x-params="{"animation":" slide-top","bg_color":"hsl(50, 99%, 47%)","bg_color_hover":"hsl(150, 50%, 48%)"}"><span class="text" style="font-size: 36px;">Donate to Kathy today!</span><span class="graphic"><i style="margin: 0; font-size: 36px;" class="x-icon-dollar" data-x-icon=""></i></span></a></div>
</div>
</div>
…and here’s what I’m pulling from my site (still under construction - what is the preferred way to provide you with login credentials?)
<div id="x-section-8" class="x-section cs-ta-center" style="margin: 0px;padding: 0px; background-color: rgb(100, 125, 167);" >
<div class="x-section-separator x-section-separator-top x-section-separator-angle-in" style="height: 50px;"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" preserveAspectRatio="none" class="angle-top-in" style="fill: rgb(100, 125, 167);"><polygon points="0,100 50,100 0,0"/><polygon points="50,100 100,100 100,0"/></svg></div>
<div class="x-container max width marginless-columns" style="margin: 0px auto;padding: 0px;" >
<div class="x-column x-sm x-1-1" style="padding: 0px;" ><a class="x-creative-cta slide-top" href="https://example.com" style="padding: 25px 25px 25px 25px; color: #ffffff; background-color: hsl(0, 95%, 50%);" data-x-element="creative_cta" data-x-params="{"animation":" slide-top","bg_color":"hsl(0, 95%, 50%)","bg_color_hover":"rgb(22, 255, 77)"}" ><span class="text" style="font-size: 36px;">Donate to John Today!</span><span class="graphic"><i style="margin: 0; font-size: 48px;" class="x-icon-dollar" data-x-icon=""></i></span></a></div>
If it is possible to make a css change to this container/row/element - can it be targeted to just this specific section instead of globally?
Thanks again.
Hi,
It’s a setting in your row element.
If that doesn’t help please provide admin login in Secure Note(key icon)
Thanks
1 Like
That worked. Thanks!
We are delighted to assist you with this.
Cheers!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.