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 obtener 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.
• Asegura la adaptabilidad: Dimensionar los bloques correctamente ayuda a que tu contenido se vea genial 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.

Entendiendo el tamaño de los bloques de WordPress

Antes de sumergirte en los métodos, es útil entender las diferentes formas en que WordPress te permite definir las dimensiones de los bloques:

Término	Qué significa	Cuándo Usarlo
Píxeles (px)	Una unidad de tamaño fijo que no cambia según el tamaño de la pantalla.	Usa píxeles cuando quieras que algo mantenga exactamente el mismo tamaño en todas partes.
Porcentajes (%)	Una unidad flexible que se ajusta según el contenedor padre.	Usa porcentajes para que tu diseño se vea bien en todos los tamaños de pantalla.
Ancho amplio	Una alineación de WordPress que hace que un bloque sea más ancho que el área de contenido, pero no a pantalla completa.	Usa esto para hacer que las secciones destaquen sin extenderse por toda la página.
Ancho Completo	Una alineación de WordPress que extiende un bloque de borde a borde en la pantalla.	Prueba esto para secciones principales, banners o imágenes de fondo grandes.
Altura Mínima	Establece la altura más pequeña que un bloque puede tener, pero permite que crezca si es necesario.	Opta por esto cuando quieras que las secciones (como los bloques de Portada) mantengan una altura constante.

Ahora, 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

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

Si bien WordPress no ofrece exactamente las mismas opciones de redimensionamiento para todos los bloques, el editor de bloques proporciona varias formas potentes de ajustar la altura y el ancho de varios bloques.

Empecemos con el bloque de imagen en WordPress.

Para un bloque de Imagen, puedes ajustar su ancho usando las opciones de alineación. Haz clic en el botón 'Alinear' en la barra de herramientas encima del bloque.

Elegir 'Ancho Amplio' hará que la imagen ocupe la mayor parte de tu área de contenido, mientras que 'Ancho Completo' la extenderá por toda la página.

También puedes ajustar el tamaño de visualización de la imagen yendo al panel 'Configuración del Bloque' a la derecha.

En la sección 'Configuración', usa el menú desplegable 'Tamaño de Imagen' para elegir entre opciones preestablecidas como Miniatura, Mediana, Grande o Tamaño Completo.

Esto cambiará las dimensiones de la imagen para que coincidan con el ajuste preestablecido seleccionado.

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 controlar principalmente el ancho de los bloques internos ajustando el ancho de las columnas. La altura de la columna se ajustará automáticamente para adaptarse a su contenido.

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

El bloque Grupo es excelente para organizar múltiples bloques y administrar su diseño y espaciado. Si bien no establece directamente la altura y el ancho de los bloques individuales dentro de él, puedes controlar las dimensiones generales del grupo y cómo se organiza su contenido.

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 lo agregues, el bloque Grupo ofrecerá opciones de diseño como 'Grupo', 'Fila' o 'Pila'. Para este tutorial, usaremos el diseño predeterminado '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.

Ajustar estas configuraciones de diseño influirá en cómo se organizan los bloques y cuánto espacio ocupan dentro del grupo. Puedes configurar estas opciones 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, puedes 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, que 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.

Paso 1: Instalar y Activar 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.

Paso 2: Crea una Nueva Página de Destino

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 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.

Paso 3: Cambiar el tamaño de las dimensiones del bloque de imagen

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 espaciado alrededor y dentro del bloque de imagen cambiando a la pestaña 'Avanzado' en la parte superior del panel de configuración.

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

Aquí, puedes agregar valores para ajustar el margen del bloque (espacio exterior al bloque) y el relleno (espacio interior al bloque) según tus necesidades.

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

Paso 4: Ajustar la altura del bloque separador

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.

Paso 5: Configurar el relleno del bloque de botón

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 aumentar el tamaño vertical del botón arrastrando el control deslizante 'Relleno vertical', que agrega espacio encima y debajo del texto del botón.

Para aumentar su tamaño horizontal, arrastra el control deslizante 'Relleno horizontal', agregando espacio a la izquierda y derecha del texto.

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

Preguntas Frecuentes sobre cómo cambiar el ancho y la altura de los bloques

Aquí hay algunas preguntas que nuestros lectores han hecho con frecuencia sobre cómo cambiar el ancho y la altura de los bloques en WordPress:

¿Cómo reduzco el tamaño de un bloque en WordPress?

Puedes reducir el tamaño de un bloque en WordPress ajustando su ancho, relleno o tamaño de fuente en la configuración del bloque. Comienza seleccionando el bloque y reduciendo las dimensiones o el espaciado hasta que se vea bien.

¿Cómo cambiar el tamaño de un bloque de texto en WordPress?

Puedes cambiar el tamaño de un bloque de texto en WordPress cambiando el tamaño de fuente en la configuración de Tipografía. También puedes ajustar la altura de línea o el espaciado si el texto aún se siente demasiado grande.

¿Cómo ajustar el espaciado de bloques en WordPress?

Puedes ajustar el espaciado de bloques en WordPress editando la configuración de margen y relleno. Recomendamos reducir primero el relleno si hay demasiado espacio dentro del bloque.

¿Cómo cambio el tamaño de una página web en WordPress?

Puedes cambiar el tamaño de una página web en WordPress cambiando la configuración de diseño en tu tema o constructor de páginas. Puedes intentar cambiar entre diseños de caja o de ancho completo según el diseño que desees.

¿Cómo reduzco el tamaño de un sitio web en WordPress?

Puedes reducir el tamaño de un sitio web en WordPress reduciendo los tamaños de fuente, el espaciado y los anchos de los contenedores. Comienza haciendo pequeños ajustes en diferentes elementos en lugar de cambiarlo todo a la vez.

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 de los mejores temas de WordPress compatibles con Gutenberg.

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