Elementor: Cómo superponer columnas aplicando márgenes negativos

La columna de Elementor no funciona

Comúnmente se ve este visual con imágenes de artículos más anchas que el texto del artículo. Se ve en la nueva opción de bloque de imágenes “anchas” de WordPress Gutenberg y en blogs como Medium.Los llamo break-out porque los fondos “se salen” de su contenedor tradicional de tamaño envolvente. Son grandes, llamativos e impactantes. Añade un widget de sección interior dentro de una sección de ancho completo para crear este widget personalizado de Elementor.

El relleno sobre un vídeo de fondo da un nuevo aspecto a la tradicional imagen principal de ancho completo. Desgraciadamente, el relleno por sí solo no consigue este aspecto, por lo que es preferible utilizar una combinación de margen y tamaño de caja. Yo lo he combinado con esquinas redondeadas para conseguir un bonito efecto.

Quédate también con el widget Elementor Image y el efecto Polaroid. Este tratamiento fotográfico clásico no centra verticalmente las imágenes. En su lugar, mantiene el relleno inferior más pesado para elevar la imagen. Es un truco popular en las bellas artes. En el diseño web, lograr este aspecto utilizando un borde + relleno combo a la imagen padre.

¿Cuál es la diferencia entre margin y padding en Elementor?

El margen se utiliza para espaciar un elemento en relación con otros elementos de la página. El relleno, por otro lado, se utiliza para crear distancia entre el contenido ..y el borde.. de un elemento. De esta forma podemos ajustar la apariencia del propio elemento..

¿Cómo configuro el margen automático en Elementor?

Cuando edite una Sección, verá que en la pestaña Avanzado los márgenes derecho e izquierdo no son editables, y están establecidos en automático. Esto se debe a que, en Elementor, una sección es siempre una fila completa. Si quieres restringir el contenido dentro de la sección tienes que ir a Sección > Diseño y ajustar el ancho del contenido.

  Cómo optimizar el espacio de trabajo del editor de bloques de WordPress 5-x

Elementos superpuestos de Elementor

Cuando se trata de la versión pro, no sólo obtendrás elementos más avanzados para construir el contenido de la página, sino que también podrás construir toda la página incluyendo el contenido de la página, el encabezado de página, el pie de página, el blog y la entrada de blog con datos dinámicos.

Esta opción se utiliza generalmente cuando estamos construyendo páginas de destino sin secciones predeterminadas de encabezado y pie de página. Utilizamos este diseño para recrear las secciones de encabezado y pie de página de una manera diferente (en su mayoría mínima).

Y, finalmente, la última sub-sección está dedicada a “Configuración avanzada” y podemos hacer uso de las opciones dentro de esta sección sólo si tenemos Elementor Pro. En pocas palabras, esto es sólo para personas con licencia Pro.

Como se puede ver en la imagen de arriba, la primera sección que estamos a punto de construir debe ser dividido en dos columnas. Estaremos colocando la imagen-héroe dentro de la columna de la izquierda y el texto dentro de la columna de la derecha.

Una vez que abra el panel “Historial” haciendo clic en el “Icono Historial”, podrá ver claramente su actividad histórica en la página con los puntos de restauración sobre los que puede hacer clic y haciendo clic en uno de ellos restaurará la página a ese punto específico en el tiempo.

Relleno por defecto de Elementor

En mis pruebas he encontrado que la razón principal de esto es el ancho de sección por defecto que está fijado en 1140px. La alineación es más notable si el ancho de contenido por defecto del tema es mayor que el del plugin.

  Cómo hacer copias de seguridad en WordPress

Sería mucho más fácil si, sea cual sea el valor de separación de las columnas, los usuarios siempre vieran que el ancho del texto coincide con el ajuste del ancho del contenido (en el caso del ejemplo es 1140px). No tendrían que volver a ajustar el ancho del contenido. ¿No te parece?

El problema que veo es cuando empiezas a crear diseños un poco más complejos. Los canales no tienen todos el mismo ancho. Si tenemos 3 columnas con el espaciado predeterminado entre ellas, la columna del medio siempre se verá como el doble, ya que está tomando el canal de la columna izquierda y derecha.

@arielk ¿alguna actualización con esto? Estoy teniendo un tiempo difícil tratando de construir algunos diseños de cuadrícula más avanzados. Por ejemplo, en el diseño de abajo, estoy buscando hacer una cuadrícula utilizando columnas e imágenes de fondo. El problema comienza con el uso de columnas anidadas en ciertas áreas, ya que los canalones no funcionan igual. He adjuntado la plantilla JSON para mostrar hasta donde puedo llegar 🙂

Relleno Elementor

Sticky Header Effects para Elementor añade opciones útiles que faltan en la función de cabecera “pegajosa” introducida en Elementor Pro 2.0. Ofrece a los usuarios la opción de cambiar el color de fondo y la altura cuando el visitante comienza a desplazarse por la página. Esto permite un efecto de menú “transparente” que puede convertirse en cualquier color, semitransparente o sólido, una vez que el visitante comienza a desplazarse.

El efecto de “encogimiento” está restringido por el tamaño del contenido de la sección de cabecera. Como logotipos, imágenes, menús, widgets, y también todo el relleno y los márgenes de esos elementos. Esto también incluye el relleno y los márgenes de las propias secciones y columnas.

  Cómo actualizar WooCommerce sin tirar abajo tu tienda online

He utilizado “Elementor Header & Footer Builder” plugin y me doy cuenta de un poco de espacio de área de contenido ir dentro de la sección de cabecera. He utilizado margin-bottom pero aún así, este problema se mantuvo. A excepción de este problema, que es un buen plugin.

Pero me encontré con algunos conflictos molestos con Efectos de Movimiento de Elementor (no estoy seguro si se trata de un Elementor o un problema Sticky Header plugin) – para obtener este plugin para que funcione correctamente, tuve que establecer Efectos de Movimiento Sticky ajuste a NINGUNO.