Page 1 of 1

Add a link to a field in the layout grid

Posted: Sun Jan 07, 2018 10:49 am
by heynen
Dear all,

I would like to set a different link for every field in a layout grid (every rectangle should link to a different subpage).

How can I do this?

Thank you!

Malte

Re: Add a link to a field in the layout grid

Posted: Sun Jan 07, 2018 11:05 am
by Pablo
You cannot assign links to grid columns, you will need to place (linkable) objects inside the grid.
A grid is used for layout purposes only, it does no have have a size. So without child elements it would not be visible in the browser.

Re: Add a link to a field in the layout grid

Posted: Sun Jan 07, 2018 12:42 pm
by heynen
Thank you for the fast answer, again!

The problem in my case is: The background of the layout grid is an image. In the layout grid, there is some text so that the text is placed on this image.

I need the link on the whole area of the image. (If I place the link on the text, the link will just cover a part of the area).

So how can I achieve this?

Thank you!

Malte

Re: Add a link to a field in the layout grid

Posted: Sun Jan 07, 2018 12:56 pm
by Pablo
This is not possible. The grid itself is just guide for the layout, it does not have a height, so it will not get mouse events.
But you can assign a link to the container of the text (via events). Of course this will disable all standard click behavior of the object (and text).
For example, you will not longer be able to select the text because click trigger the link.

Re: Add a link to a field in the layout grid

Posted: Tue Feb 13, 2018 10:36 pm
by heynen
Thank you, that worked!

Would it be possible in future releases to define an event that changes the look of the mouse pointer (so that users get a hint that they can click on that area)?

Re: Add a link to a field in the layout grid

Posted: Wed Feb 14, 2018 3:31 am
by crispy68
Take note of the ID of the text box and add this to your page HTML on the 'Between <head></head> tags' tab:

<style>
#wb_Text1{cursor:pointer;}
</style>

Change 'Text1' to match your ID

Re: Add a link to a field in the layout grid

Posted: Mon Mar 23, 2020 8:23 pm
by heynen
That worked as well!

I have now a pretty good solution:

1) For the whole layout grid, I define an event "onklick" - "Link". So a click on any part of the layout grid will lead to another subpage.
2) For the same layout grid, I define that the mouse will change to "pointer": I go to "HTML" - "Custom Style", and add the code (directly in the layout grid)

Code: Select all

<style>
#wb_LayoutGrid11{cursor:pointer;}
</style>

Does anyone know if it is possible to define the "cursor:pointer" behaviour for a whole group of objects (so for any layout grid that has a certain style)?

Re: Add a link to a field in the layout grid

Posted: Mon Mar 23, 2020 8:34 pm
by crispy68
give your layout grids a 'class' and then in the CSS target that class.

Re: Add a link to a field in the layout grid

Posted: Mon Mar 23, 2020 9:50 pm
by heynen
Thank you!

Sorry I am a total newby when it comes to working with "styles" and "classes"

Could you explain where I define a class in WYSIWYG web builder?
Or could you link to a tutorial that explains?

Re: Add a link to a field in the layout grid

Posted: Mon Mar 23, 2020 9:51 pm
by heynen
PS: I like the "cups of coffee" counter on your web page!

Re: Add a link to a field in the layout grid

Posted: Tue Mar 24, 2020 12:09 am
by crispy68
PS: I like the "cups of coffee" counter on your web page!
Thanks!

There are 2 steps.

1. Click on Page --> Page HTML --> Between <head></head> tags

enter the following:

Code: Select all

<style>
.pointy{cursor:pointer;}
</style>
The class name is 'pointy' but it can be whatever you want to call it.

2. Right click on the layout grid, choose the 'Inside Tag' and enter:

Code: Select all

class="pointy"
Everything you give this class to will have the pointer cursor.

Re: Add a link to a field in the layout grid

Posted: Tue Mar 24, 2020 8:09 am
by heynen
Thank you crispy!
Great advice.
Will add it to the page now.

Malte

PS: Have added it now. Works perfectly! This saves me a lot of time: I can now copy any layout grid, without having to change the added code!