Secciones y columnas clickables en Elementor

Hola, el caso que os traigo hoy es algo muy básico pero que Elementor, a día de hoy, no tiene contemplado. Vamos a ver cómo hacer columnas o secciones en las que se pueda hacer click.

Puede darse la ocasión de que nuestro diseño requiera que una columna completa o incluso una sección pueda ser clickable. En las propiedades de ambos widgets dentro de Elementor no tenemos opción de agregar un enlace, por tanto, tenemos que ingeniárnoslas para hacerlo de un modo más manual.

En este ejemplo tenemos una sección principal que a su vez tiene dentro una sección interior con dos columnas: una imagen y un texto. Podemos aplicar enlaces individualmente al encabezado y a la imagen pero no a la columna negra que contiene el encabezado. Este es el problema.

Ejemplo banner clickable

Evidentemente, podríamos hacer que todo fuera una imagen y añadirle un enlace directamente en el widget de Elementor, pero esto es una mala práctica y nos limita a la hora de ajustar el diseño para diferentes dispositivos.

Vamos a ver cómo hacerlo de otra forma.

Si te ha gustado, comparte!

Share on whatsapp
WhatsApp
Share on facebook
Facebook
Share on twitter
Twitter

25 respuestas

  1. Excelente!! Muchas gracias por la información, me sirvió mucho!
    Pero tengo un problema más: necesito que la columna entera me abra un popup (que hice con el plugin Master Popups), pero al colocar la clase del popup en el espacio para la url, de la misma manera que lo hice con la imagen de la columna, no me funciona.
    Cómo puedo hacer para que la columna entera me abra un popup?
    Muchas gracias!
    Saludos!

      1. Alberto, muchas gracias por tu respuesta!
        Estoy usando ese plugin, que funciona perfecto con url del estilo https://www.direccion.com.
        El problema surge cuando quiero poner la clase del pop up que hice: mpp-trigger-popup-836. Colocando esa misma clase, en la url personalizada de la imagen sí me funciona y me hace clickeable la imagen para que aparezca el pop up.
        No sé por qué no funciona esa clase en la url de la columna, por ahí tendré que indicarla de otra manera?
        Desde ya muchas gracias!!
        Saludos!

        1. Buenas,

          Sólo lo he hecho con popups de Elementor, no de ese plugin en concreto. Mira este vídeo a ver si puedes hacer algo parecido para obtener la URL del popup y enlazarlo desde la columna: https://www.youtube.com/watch?v=VZ4J7g_LSDw

          Si te interesa adentrarte un poco más en Elementor, que sepas que tenemos la comunidad privada en elemenpros.com 😉

          Saludos.

  2. Hola Alberto,
    ¿Como podria hacer que el href fuera un valor Dinamico? uso JetEngine y me interesaria que toda una sección en lazara con la ficha de Producto.

    1. Hola Miguel, esto puedes hacerlo con los listings de JetEngine. Tienes que definir uno y meter toda la información que quieras allí dentro. Luego le dices que haga link a toda la sección. Saludos.

    1. Hola Marcelo, el alto también se puede configurar en el tab de disposición pero no tienes tantas opciones como con la sección padre. De todas formas, si a la sección padre le pones Altura mínima 100vh y le dices que en posicionamiento «Estirar», la sección interior debería coger todo el alto.
      Otra opción es aplicarle CSS a la sección interior dentro de Avanzado, la regla sería: selector { min-height:100vh }

      Espero que te sirva, saludos.

  3. Hola Alberto, quisiera saber como poner un botón- enlace en Elementor de WordPress para que lleve de mi pagina a una pagina de Checkout en Hotmart o configurar un boton que lleve a mi Whatsapp o a mi facebook messenger, ya lo intente y no funciona, porfavor ayúdame!

    1. Hola Isabel, lo del botón es simplemente arrastrar el widget de botón donde quieras y poner el enlace del Checkout que te da Hotmart. Para lo de WhatsApp puedes usar esta página que te crea el link o si no usar un plugin tipo join.chat. Saludos.

  4. Hola Alberto,
    Muy bueno el truco y sencillo. Yo quiero poner un enlace en una «Caja de icono». Este elemento por si mismo ya deja poner una url, el problema es que me cambia la tipografía y el tamaño y color del icono. Lo que me gustaría es mantener la tipografía y el icono añadiendo un enlace. He utilizado este truco y aunque el enlace funciona, me sigue cambiando la tipografía, no de todos los elementos, pero sí de la descripción. ¿Se te ocurre alguna solución?

    1. Hola María, esto seguramente sea porque te está cogiendo los estilos de enlace de tu tema. Hay varias formas de solucionar esto:
      1) Hacer los estilos globales con Elementor: https://elementor.com/help/theme-style-global-settings/
      2) Sobreescribir con una regla CSS el estilo del enlace. Puedes meter este código dentro de Avanzado -> CSS Personalizado.
      selector a { font-family: TuFuente; font-size: 20px }
      Tienes que modificarlo para poner la fuente que quieras usar y el tamaño en pixels.

      Saludos.

    1. Hola Eva, pues no debería. De todas formas, si este código no te funciona bien siempre puedes ir a por la opción del plugin. Se llama Make Column Clickable y funciona bastante bien. Espero que te sirva, saludos.

  5. Buenas!

    Tengo un logo como header y no me deja modificar el link al que quiero que se redirija al pulsar.

    He intentado aplicar este código HTML tal cual lo has especificado en el vídeo y no hace nada. He probado a desactivar el link predertminado del logo, pero tampoco nada. No sé si hay algo que impide aplicar este código en logos o que…

    He probado con foto, pero queda grande. E iconos, pero no me carga el archivo svg…

    Si me pudieras ayudar, sería genial
    Gracias

    1. Hola Marina, no entiendo muy bien porque no te deja aplicar un enlace a esa imagen? no está hecho con Elementor? Si quieres escríbeme al formulario de contacto y me pásame alguna captura e intento ayudarte. Saludos.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *