Cómo cambiar la altura y el ancho de los bloques en WordPress

Hacer que los bloques de WordPress tengan exactamente el tamaño correcto solía requerir CSS personalizado o soluciones complejas.

Lo sabemos porque hemos pasado incontables horas ayudando a los usuarios con este problema exacto. Pero gracias a las recientes actualizaciones de WordPress, controlar las dimensiones de los bloques se ha vuelto mucho más simple.

Lo que sorprende a muchas personas es que en realidad hay varias formas integradas de ajustar los tamaños de los bloques en WordPress. A través de mucha experimentación, hemos identificado los métodos más confiables que funcionan en diferentes situaciones y temas.

En esta guía, compartiremos las formas más fáciles de cambiar la altura y el ancho de los bloques en WordPress.

¿Por qué cambiar la altura y el ancho de los bloques en WordPress?

Si bien el editor de bloques de WordPress facilita la adición de contenido, los tamaños de bloque predeterminados no siempre se ajustan al diseño que tienes en mente. Ajustar la altura y el ancho de un bloque es una forma sencilla de tener más control sobre la apariencia de tu página.

Aquí hay algunas razones clave por las que podrías querer cambiar el tamaño de un bloque:

• Mejorar el diseño visual: Puedes crear diseños más equilibrados y de aspecto profesional al controlar el tamaño exacto de tus elementos.
• Mejorar la legibilidad: Ajustar el ancho de los bloques de texto puede hacer que tu contenido sea más fácil de leer, especialmente en pantallas anchas.
• Garantizar la capacidad de respuesta: Dimensionar los bloques correctamente ayuda a que tu contenido se vea bien en todos los dispositivos, desde computadoras de escritorio hasta teléfonos móviles.
• Crear énfasis: Hacer un bloque más grande o más pequeño puede llamar la atención sobre llamadas a la acción importantes o información clave.

Dicho esto, veamos cómo puedes cambiar fácilmente la altura y el ancho de los bloques en WordPress.

Cubriremos algunos métodos diferentes, y puedes usar los enlaces rápidos a continuación para saltar al que deseas usar:

• Método 1: Cambiar la altura y el ancho del bloque usando la configuración del bloque
• Método 2: Cambiar el ancho del bloque usando el bloque de columnas
• Método 3: Cambiar la altura y el ancho del bloque usando el bloque de grupo
• Método 4: Cambiar la altura del bloque usando el bloque de portada
• Extra: Crea páginas hermosas usando bloques avanzados en SeedProd

Método 1: Cambiar la altura y el ancho del bloque usando la configuración del bloque

En este método, te mostraremos cómo cambiar la altura y el ancho de un bloque usando la configuración predeterminada de WordPress.

Actualmente, WordPress no ofrece las mismas opciones de redimensionamiento para todos los bloques. Sin embargo, el editor de bloques proporciona muchas maneras de redimensionar la altura y el ancho de diferentes bloques.

Empecemos con el bloque de imagen en WordPress.

Primero, puedes cambiar la alineación del bloque de imagen haciendo clic en el botón 'Alinear' en la barra de herramientas encima del bloque.

Aquí, elegir la opción 'Ancho Amplio' hará que el bloque tenga el mismo ancho que el contenedor. O, la opción de alineación 'Ancho Completo' hará que el bloque ocupe todo el ancho de la página.

También puedes redimensionar un bloque yendo al panel 'Configuración del bloque' a la derecha y desplazándote hacia abajo hasta la sección 'Configuración'. Desde aquí, puedes redimensionar un bloque desde el menú desplegable 'Tamaño de imagen'.

También puedes ajustar el ancho y la altura del bloque escribiendo el tamaño de píxel preferido en los cuadros 'Ancho' y 'Altura' en la sección 'Dimensiones de la imagen'.

Debajo de eso, también puedes ajustar el tamaño del bloque por porcentaje.

Otra forma de redimensionar un bloque de imagen es hacer clic en la imagen misma, lo que muestra un borde azul con anclajes circulares.

Luego, simplemente arrastra estos anclajes para cambiar la altura y el ancho del bloque de imagen.

Una vez que hayas terminado, haz clic en el botón ‘Actualizar’ o ‘Publicar’ para guardar tu configuración.

Método 2: Cambiar el ancho del bloque usando el bloque de columnas

Si el bloque que deseas redimensionar no tiene controles de tamaño integrados, como el bloque de Párrafo, entonces este método es para ti. Actúa como una solución alternativa al colocar tu bloque dentro de un contenedor que puedes controlar.

Para este método, colocaremos nuestro bloque dentro del bloque Columnas. Es un contenedor donde puedes agregar diferentes bloques en cada columna. Luego, puedes redimensionar esos bloques ajustando la altura y el ancho de las columnas.

Primero, haz clic en el botón ‘Agregar Bloque’ (+) en la esquina superior izquierda de la pantalla.

Desde aquí, localiza y agrega el bloque de Columnas al editor de Gutenberg. Luego, se te pedirá que elijas una variación.

Después de eso, el diseño de la columna se mostrará en la pantalla, y ahora puedes agregar el bloque que desees haciendo clic en el botón ‘Agregar Bloque (+)’ dentro de una columna.

Una vez que se haya agregado el bloque, puedes controlar su ancho ajustando la columna en la que se encuentra.

Simplemente selecciona la columna y, en el panel de configuración del bloque a la derecha, puedes cambiar el ancho de la columna en la sección 'Configuración'. Esto, a su vez, redimensionará el bloque dentro de ella.

Una vez que hayas terminado, simplemente haz clic en el botón ‘Publicar’ para guardar tus cambios.

Así es como se veía el contenido en nuestro sitio web de demostración después de redimensionar y alinear dos bloques de párrafo dentro de un bloque de dos columnas.

Método 3: Cambiar la altura y el ancho del bloque usando el bloque de grupo

También puedes ajustar el ancho y la altura de los bloques usando el bloque de Grupo. Te permite agrupar los bloques deseados y darles estilo juntos.

Primero, debes hacer clic en el botón ‘Agregar Bloque’ (+) en la parte superior. Luego, localiza y agrega el bloque de Grupo al editor de contenido.

Una vez que hagas eso, el bloque de Grupo mostrará tres opciones de diseño diferentes. Para este tutorial, usaremos el diseño ‘Grupo’.

Después de eso, el botón ‘Agregar Bloque’ se mostrará en la pantalla. Ahora puedes agregar cualquier bloque que desees.

En este tutorial, agregaremos y redimensionaremos un bloque de Encabezado, un bloque de Párrafo y un bloque de Imagen.

Para agregar múltiples bloques al Grupo, haz clic en el botón ‘Seleccionar Grupo’ de la barra de herramientas del bloque.

Una vez seleccionado el Grupo, simplemente haz clic en el botón ‘Agregar Bloque’ (+) en la parte inferior.

Una vez que hagas eso, se abrirá la barra lateral de configuración del bloque a la derecha. Desde aquí, puedes ajustar fácilmente el diseño, la justificación y la orientación de todos los bloques.

Cambiar el diseño también cambiará los diferentes tamaños de bloque. Puedes configurar estos ajustes hasta que estés satisfecho con el resultado.

Una vez que hayas terminado, haz clic en el botón ‘Actualizar’ o ‘Publicar’ para guardar tu configuración.

Así es como se veía el bloque de Grupo en nuestro sitio web de demostración.

Método 4: Cambiar la altura del bloque usando el bloque de portada

Este método de redimensionamiento es para ti si deseas usar el bloque de Portada y establecer una altura mínima específica para una sección. Es ideal para crear banners de ancho completo o imágenes destacadas que tengan texto y otro contenido encima.

Primero, haz clic en el botón ‘Añadir Bloque’ (+) en la parte superior y busca el bloque de Portada.

Una vez que hayas hecho eso, se te pedirá que elijas un color o subas una imagen de la biblioteca de medios de WordPress. Esta imagen o color se utilizará como fondo para el bloque de Portada.

A continuación, simplemente arrastra y suelta cualquier bloque que desees dentro del bloque de Portada.

Después de eso, necesitas hacer clic en el bloque de Portada para abrir su configuración de bloque en la columna de la derecha.

Desde aquí, desplázate hacia abajo hasta el panel ‘Dimensiones’, donde puedes ajustar la altura del bloque de Portada usando píxeles.

Finalmente, no olvide hacer clic en el botón ‘Guardar Cambios’ para almacenar su configuración.

Para obtener instrucciones más detalladas sobre cómo usar el bloque de Portada, es posible que desees consultar nuestra guía para principiantes sobre Imagen de Portada vs. Imagen Destacada en el editor de bloques de WordPress.

Extra: Crea páginas hermosas usando bloques avanzados en SeedProd

Puedes crear fácilmente páginas hermosas y estéticamente agradables utilizando el plugin SeedProd.

Es el mejor constructor de páginas de WordPress del mercado que te permite crear páginas de destino utilizando bloques, los cuales son súper fáciles de personalizar y redimensionar según tus necesidades.

Varias de nuestras marcas asociadas han utilizado esta herramienta para diseñar todo su sitio web, y a sus usuarios les ha encantado el aspecto fresco y moderno. Para obtener más información, consulta nuestra reseña de SeedProd.

Primero, necesitarás instalar y activar el plugin SeedProd. Para más detalles, puedes leer nuestra guía sobre cómo instalar un plugin de WordPress.

Al activarlo, debes ir a la página SeedProd » Ajustes desde tu panel de WordPress e ingresar la clave de licencia en el cuadro ‘Clave de licencia’.

Puedes encontrar la clave de licencia en la página de tu cuenta en el sitio web de SeedProd.

A continuación, visita la pantalla SeedProd » Landing Pages desde la barra lateral de administración para comenzar a crear una página de destino.

Desde aquí, simplemente haz clic en el botón ‘Agregar nueva página de destino’.

Ahora serás llevado a la pantalla ‘Elegir una nueva plantilla de página’. SeedProd ofrece muchas plantillas predefinidas entre las que puedes elegir.

Después de haber seleccionado una plantilla, se te pedirá que proporciones un nombre y una URL para tu página de destino.

Al agregar estos detalles, simplemente haz clic en el botón ‘Guardar y comenzar a editar la página’ para continuar.

Esto iniciará el constructor de páginas de arrastrar y soltar de SeedProd, donde ahora puedes comenzar a editar tu página. Para obtener instrucciones detalladas, consulta nuestra guía sobre cómo crear una página de destino con WordPress.

Para este tutorial, agregaremos y redimensionaremos un bloque de Imagen y un bloque de Botón.

Primero, necesitarás arrastrar el bloque de Imagen desde el panel de bloques a la izquierda y soltarlo donde quieras en la página.

A continuación, haz clic en el bloque de Imagen para abrir la configuración de su bloque en la columna izquierda. Desde aquí, puedes subir una imagen de tu biblioteca de medios.

A continuación, puedes cambiar la altura y el ancho del bloque usando píxeles o porcentajes.

También puedes ajustar el tamaño y la posición de la imagen cambiando a la pestaña ‘Avanzado’ en la parte superior del panel de configuración.

Luego, simplemente haz clic en el panel Espaciado para expandir su configuración.

Aquí, simplemente agrega valores para ajustar el margen y el relleno del bloque según tus necesidades.

Puedes ajustar el margen y el relleno para las áreas superior, inferior, izquierda y derecha del bloque.

Con Seedprod, también puedes agregar un bloque Espaciador entre dos bloques diferentes para poner algo de espacio entre ellos.

Primero, deberás localizar y agregar el bloque ‘Espaciador’ desde la columna izquierda. Luego, haz clic en él para abrir su configuración.

Ahora, puedes controlar la altura del espaciador usando el control deslizante ‘Altura’.

El bloque espaciador puede ayudarte a crear un sitio web ordenado.

También puedes cambiar el ancho y la altura de otros bloques de la misma manera, incluidos los bloques de Video, Encabezado y Botón.

Simplemente encuentra el bloque Botón en la columna izquierda y arrástralo a tu página.

A continuación, deberás hacer clic en el Botón para abrir la configuración de su bloque.

Desde aquí, cambia a la pestaña ‘Avanzado’ desde la parte superior. Puedes cambiar la altura del bloque arrastrando el control deslizante ‘Relleno Vertical’.

Para cambiar el ancho, arrastra el control deslizante ‘Relleno Horizontal’ en la columna izquierda.

Una vez que hayas terminado, no olvides hacer clic en el botón ‘Guardar’.

Esperamos que este artículo te haya ayudado a aprender cómo cambiar el ancho y la altura de los bloques en WordPress. También puedes consultar nuestro artículo sobre cómo agregar y alinear imágenes en el editor de bloques de WordPress y nuestras mejores selecciones para los mejores temas de WordPress compatibles con Gutenberg.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.