Cuando cree y organice columnas en su sitio web, éstas deben tener la misma altura para que todo el dise?o tenga un aspecto más ordenado. Esto se puede lograr con el derecho HTML El código implementa esto, pero es realmente desafiante para los usuarios no técnicos que no saben cómo codificar.

Este artículo le mostrará cómo hacer Elementor Las columnas tienen la misma altura e incluyen Flexbox Contenedor. Siga leyendo hasta el final.

?Es realmente necesaria la función isométrica?

Al dise?ar un sitio web, es posible que observe que algunas columnas o widgets tienen alturas incoherentes. La altura suele depender del contenido que contienen. Fíjate bien en la imagen de arriba.

A primera vista, ?le gusta la foto de la izquierda? Podemos predecir que no le gustará. Al igual que a ti, a la mayoría de la gente le parecerá inconexa. Y la imagen de la derecha parece mejor y más ordenada.

Cómo utilizar los isométricos HappyAddons

Esta función funciona perfectamente con todos los widgets de Elementor. También puedes aplicar esta función a widgets de otros plugins de terceros. Asegúrate de tener instalados y activados los siguientes plugins:

• Elementor
• HappyAddons(Complemento de Elementor)

Una vez completados estos pasos, el siguiente paso es seguir el método que se indica a continuación.

Método 1: Uso de isométricos en widgets de Elementor

Para explicar este enfoque, elegimos Elementor del widget de la lista de precios y rellenado algo de contenido para él.

• Seleccionar widget de lista de precios Configure los widgets para a?adir texto, precios, bandas etiquetadas y otros detalles según sus necesidades. La información de cada sección puede no coincidir, por lo que es posible que notes alturas desiguales en el widget de la lista de precios.

• Widgets personalizados A continuación, haga clic en la opción "Editar sección" de la barra de menús.

• Ir a la sección de edición Después de eso, ve a la sección avanzada y verás la opción de contorno, habilítala y entonces verás la magia.

• Activar la opción de contorno A continuación, seleccione el widget que desea ajustar. Aquí puedes desactivar los modos de tableta y teléfono.

• Desactivar el modo tableta y móvil Por último, elige los márgenes adecuados y verás que la altura de todos los widgets es ahora la misma.

• Comprobación de la altura de los widgets Si nos fijamos bien, aunque a?adimos distintos niveles de contenido a cada columna de la lista de precios, al utilizar la función isométrica de HappyAddons, todas las columnas tenían la misma altura y el aspecto general era mucho más ordenado.

Método 2: Usar Isometrics en Widgets HappyAddons

Apliquemos esta funcionalidad al widget HappyAddons. Selecciona uno de los widgets de la barra de menú, y hemos elegido el widget de tarjeta para mostrar todo el proceso de ajuste de la altura.

• Seleccione un widget según sea necesarioWidgets personalizados. Puede a?adir imágenes, texto y otros dise?os. Como los datos de cada sección pueden no coincidir, observará que los widgets tienen alturas diferentes.

• Personalizar el widget seleccionado Ahora, vamos a fijar la altura de cada sección. Haga clic en "Editar sección" en la barra de menú.

• Corregir la altura de la barra de menú Luego ve a la sección Avanzado y encontrarás la opción Isométrico. Actívala.

• Activar la opción de contorno Como se muestra arriba, tienes la opción de desactivar el modo tableta y teléfono.

• Desactivar el modo tableta y móvil Elija la altura adecuada y vea el resultado final.

Método 3: Utilice esta función para que el contenedor Elementor tenga la misma altura

Antes, la función de contorno sólo estaba disponible para dise?os basados en columnas. Pero ahora, puede utilizar esta función para hacer múltiples dise?os alineados verticalmente. Flexbox Las alturas de los contenedores son iguales. Como se muestra a continuación, tenemos dos contenedores en la misma sección, uno más alto que el otro.

• Seleccionar toda la sección Haga clic en el icono de seis puntos para seleccionar toda la sección y vaya a Configuración avanzada.
• Activar la opción de contorno Busque la opción Altura igual en Configuración avanzada y actívela. Selecciona los widgets correspondientes y verás que las alturas de los contenedores se igualan.

resúmenes

De este modo, puede aplicar esta funcionalidad a cualquier widget y contenido que utilice contenedores Flexbox.HappyAddons proporciona una funcionalidad isométrica que permite a los dise?adores resolver de forma rápida y eficaz el problema de las alturas de columna incoherentes, haciendo que toda la página tenga un aspecto más ordenado y profesional sin tener que escribir ningún código complejo.

Contacte con nosotros
?No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de peque?as empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨詢：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres