joomla page builder link

You can create some content into a column using multiple addons (text, image, etc ... ) and then want to have a link that apply to the whole content area. This is possible using Page Builder CK. This option is available on a row or on a column.

Setup the link

Go in the edition of the row or column and scroll until the Link settings

link options

Here is what you can do :

  • Link url : write the link that you want to apply to the content area. This can be an external link, or a link to a menu item, article, etc that you can select using the "+" button
  • Link text : write the text that you want that will be shown over the content area
  • Link icon : you can enable / disable the link icon that will appear on mouseover. Note that you must give it a color to see it.

 

Setup the styles

You can use the 2 panels to style the link in the normal state and in the hover state.

  • Link styles : this is the normal state, that will be always visible
  • Link hover styles : this is the hover state, only active when the mouse is over the item

Note that you must give a color in the text options to see the icon (if you have enabled it). Else the icon will get the same color as the background. You can also setup the font size to get a larger icon.

 

Accessibility

According to the accessibility criteria, a link must not be empty. Else the people with disabilities can not know what it is for.

Page Builder CK will automatically manage that for you. There are 2 solutions :

  • Link text empty (default) : the system will add the text Link to [URL] in the link, and hide it from the screen with CSS
  • Link text custom : you have added your own text and it will be added in the link html code (it will replace the default text). This text is shown on the screen

This way, you link has always a text that indicate what it does. Don't forget to use a useful text if you want to place a custom value in the link

 

Newsletter

Fast and powerful creation, customizable and responsive.

Read More

Favorites extensions

logo maximenuck 110 logo pagebuilderck 110 logo slideshowck 110template creator ck large 449