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.
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.
33 comentarios
ole tu polla gorda, me has soluccionado un problema que llevo timepo queriendo arreglar como diseñadorweb!
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!
Hola Nicolás, prueba con un plugin que se llama Make Column Clickable (https://wordpress.org/plugins/make-column-clickable-elementor/). Saludos.
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!
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.
Muchísimas gracias Alberto! Excelente tu amabilidad y predisposición!
Saludos!
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.
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.
Buenísimo tip Alberto 🙂 justo estaba buscándolo para una web .
Un abrazo!
Genial Christian, gracias!
Hola amigo una pregunta como le puedo decir a elementor que trabaje el 100% de altura de la srccion interior? Solo figura el ancho
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.
Trome!! como no se me había ocurrido? jejeje sos lo máximo amigo!
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!
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.
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?
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.
Hola Alberto, muy bueno!! El problema que tengo es que al ponerle el codigo html, me cambia el tamaño de las columnas. Cómo puedo evitarlo?
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.
Muchas gracias Alberto, quería evitar instalar otro plugin, volveré a probar y si no lo consigo me pasaré al plugin.
Saludos
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
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.
Hola Alberto, podrías dejarme el código que usaste, no sé qué escribir!
Gracias!!
Un truco genial para poder hacer toda una sección o columna clicable.
El vídeo es fenomenal!
Algo mas sencillo (claro, 2 años despues, jjj) –> https://www.youtube.com/watch?v=fZZIsXzsJQg
Hola Alberto!
¿Como podria hacer que el href fuera un valor dinámico? Uso ACF y me gustaría que toda la sección enlazara con la ficha del producto. ¿Sería factible?
Hola Victoria, sí, puedes hacerlo, pero necesitarías crear un shortcode para que te coja el enlace de ACF de forma dinámica. Otra opción es utilizar el plugin «Make column clickable» que te habilita en la propia columna de Elementor la opción para meter un enlace y también puedes hacerlo de forma dinámica (con el iconito típico de base de datos). Saludos.
Gracias!!!
Gracias por compartir esto.
Ole ole y ole tu polla de oro! Gracias! Máquina, titan, huracan, mastodonte,… Eres un genio!!
¡Eres un genio!!! ¡Muchas gracias no era una urgencia, pero de seguro me va a servir mucho!!!
Super buen articulo me ha servido mucho para mi pagina web.
Estoy buscando la opción de hacer clickeable el icon box, tendrías algo que pueda ayudarme si usar plugin adicionales