Add link to color section - Support | Kriesi.at

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
December 9, 2021 at 3:28 pm #1332154

profumopuntoit
Participant

Hello,
I don’t see an option to add a link to a color section.
Or put differently: I want to have a clickable full width image.
One working way is to add a Full width Easy slider with just one image. But this is very costly in terms of page load time
I thought that a Color section with just a background image could be the solution
Thank you
Mauro

December 9, 2021 at 4:26 pm #1332169

Guenni007
Participant

As you stated yourself : Take the fullwidth easy slider.
Big advantage – the image is responsive from the beginning.
– why should it be less performant than a color-section ?

December 10, 2021 at 5:45 am #1332220

Rikard
Keymaster

Hi,

Thanks for helping out @guenni007 :-)

Best regards,
Rikard

December 10, 2021 at 10:42 am #1332266
Guenni007
Participant
But if you like to have that :
place your color-section ( let content decide the height of that section ) and give a “meaningfull” custom-class to it.
(in my case: full-clickable-image ) –
place an image alb inside with your settings you like – and the link – then:
```
.avia-section.full-clickable-image .container {
  max-width: 100%;
  padding: 0;
}

.avia-section.full-clickable-image .container .content {
  padding: 0;
}
```
December 10, 2021 at 12:33 pm #1332304
Guenni007
Participant
next possibility is : transfer the first link inside that color-section to the color-section itself.
best would be to give a custom-class to that color-section – in my testpage it is: section-link
```
function transfer_first_link_as_section_link(){
?>
<script type="text/javascript">
(function($) {
$(document).ready(function(){    
    $('.avia-section.section-link').each( function() {
      var LinkSection = $(this).find('a:first').attr('href');
      var LinkTarget = $(this).find('a:first').attr('target');
      if (typeof LinkSection !== "undefined"){
        $(this).on("click", function(){
          if (LinkTarget === "_blank"){
            window.open( LinkSection, '_blank' ); 
          } else {
            window.location.href = LinkSection;
          };
        });
        $(this).css('cursor','pointer');
      };
    });
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'transfer_first_link_as_section_link');
```
see: https://webers-testseite.de/profumo/
December 10, 2021 at 3:49 pm #1332340

Yigit
Keymaster

Hi,

Thanks for your help @Guenni007 :)

Best regards,
Yigit

December 10, 2021 at 7:12 pm #1332369

profumopuntoit
Participant

Thank you Guenni007
I thought that using a slideshow would load extra js and css with lots of DOM elements and unused declarations
I hoped that adding a full width image could be simpler than what you propose. Sincerely, I don’t want to go through all that complications that you kindly suggested simply to add an image!
Maybe in a future release that would be more straightforward.
Ideally on ALB menu >Media elements > Fullwidth image
or even better
on ALB menu >Media elements > Image > Styling > Fullwidth
so that any image could be presented full width
Thank you
Mauro

December 11, 2021 at 11:36 am #1332403

Guenni007
Participant

I helped here because it is my nature to help others, even though I did not understand the meaning behind it. A visitor of your site does not expect that a full-width element – in the end even an element covering the whole screen – represents a link. The part is called CTA for a reason. It calls to action. Buttons do this by changing the color or having extra icons on hovering – images by enlarging or casting shadows etc. pp.
Just look at my page again, would you expect to trigger any action by clicking the section? – and that although I thought of setting the hand as a cursor. That’s why it’s still acceptable to use a column as a link element – but the outer enclosing layout element ?

December 11, 2021 at 10:00 pm #1332437

Mike
Moderator

Hi,

@profumopuntoit please take another look at @Guenni007’s “section-link” solution above as it does what you originally asked for:

I thought that a Color section with just a background image could be the solution

and it only has three steps:
1: add the script to your functions.php file.

2: and your background image and a custom class “section-link” to a color section.

3: add a code block section to the color section with the link you wish to use.

quite easy and works great, thank you for sharing @Guenni007

So while we do not have a built-in option right now, this is a good solution you should try, I have submited a feature request to the Dev Team for a full width option in the image element, for their review.

Best regards,
Mike

December 13, 2021 at 6:58 pm #1332641

profumopuntoit
Participant

Dear Guenni007, your help is very much appreciated
I have a modest capability in PHP and in ordinary times I like this kind of challenges and going through something that is not exactly on the point of a mouse, but I was in the urge to modify the homepage with the banner for Christmas holiday that had to be done that very day without delay

Thank also to Mike that made the thread readable and easily feasible also for not techs, and especially for the submission to the Dev Team

Mauro

December 14, 2021 at 12:57 pm #1332745

Mike
Moderator

Hi,
Glad to hear that Guenni007 was able to help you sort this out, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike
Author

Posts

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Add link to color section’ is closed to new replies.