Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Por defecto, WordPress facilita la creación de hermosas disposiciones de contenido para sus entradas y páginas utilizando bloques. Sin embargo, a veces, es posible que desee cambiar el tamaño de estos bloques para que se vean mejor.

Tanto si desea perfeccionar el aspecto de su página como garantizar la coherencia entre distintos dispositivos, aprender a personalizar las dimensiones de los bloques puede mejorar la estética y la usabilidad de su sitio.

En WPBeginner, llevamos varios años utilizando el editor de bloques y nos hemos encontrado con situaciones en las que necesitábamos ajustar el tamaño de los bloques para que nuestro sitio tuviera un aspecto visual atractivo. En el camino, hemos recogido varios consejos y trucos para cambiar fácilmente el tamaño de los bloques, ayudándonos a mantener un diseño consistente y atractivo.

En este artículo, le mostraremos cómo cambiar fácilmente la altura y anchura de los bloques en WordPress.

How to change block height and width in WordPress

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

El editor de bloques le permite añadir contenido a su sitio web de WordPress utilizando diferentes bloques, incluidos encabezados, párrafos, imágenes, vídeos, audio y mucho más.

Sin embargo, a veces puede que desee cambiar la anchura o la altura de un bloque específico para mejorar su aspecto o la disposición del contenido general.

Ajustar el tamaño de los bloques también puede garantizar que su contenido sea adaptable y se muestre correctamente en todos los dispositivos, incluidos teléfonos, tabletas y ordenadores portátiles.

Por ejemplo, es posible que haya cargado una imagen en el editor de contenido, pero es demasiado grande y hace que la página tenga un aspecto poco atractivo en el front-end.

Preview of an image

También puede cambiar el tamaño del bloque de encabezamiento para alinearlo mejor con el contenido.

Ajustando la anchura y la altura de los bloques, puedes hacer que tus entradas y páginas tengan un aspecto más estético.

Dicho esto, veamos cómo puedes cambiar fácilmente la altura y anchura de los bloques en WordPress. Vamos a cubrir algunos métodos diferentes, y puede utilizar los enlaces rápidos a continuación para saltar a la que desea utilizar:

Método 1: Cambiar la altura y anchura del bloque mediante los ajustes del bloque

En este método, le mostraremos cómo cambiar la altura y anchura de un bloque utilizando 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 ofrece muchas formas de redimensionar la altura y la anchura de los distintos bloques.

Empecemos con el bloque Imagen de WordPress.

En primer lugar, puede cambiar la alineación del bloque Imagen haciendo clic en el botón “Alinear” de la barra de herramientas situada encima del bloque.

Si elige la opción “Anchura amplia”, el bloque tendrá la misma anchura que el contenedor. O bien, la opción de alineación “Ancho completo” hará que el bloque ocupe todo el ancho de la página.

Use alignment settings to resize an image

También puedes cambiar el tamaño de un bloque accediendo al panel “Ajustes del bloque” situado a la derecha y desplazándote hasta la sección “Ajustes”. Desde aquí, puedes cambiar el tamaño de un bloque desde el menú desplegable “Tamaño de imagen”.

También puede ajustar la anchura y la altura del bloque introduciendo el tamaño en píxeles que prefiera en las casillas “Anchura” y “Altura” de la sección “Dimensiones de la imagen”.

Debajo, también puedes ajustar el tamaño del bloque en porcentaje.

Resize an image using block panel settings

Otra forma de cambiar el tamaño de un bloque Imagen es hacer clic en la propia imagen, lo que hace que aparezca un borde azul con anclajes circulares.

A continuación, basta con arrastrar estos anclajes para cambiar la altura y la anchura del bloque de imágenes.

Resize Image block using anchors

Una vez que haya terminado, haga clic en el botón “Actualizar” o “Publicar” para almacenar sus ajustes.

Método 2: Cambiar la altura y anchura del bloque utilizando el bloque de columnas

Si el bloque que desea redimensionar no viene con botones de alineación ni ajustes de redimensionamiento, este método es para usted.

Para este método, colocaremos nuestro bloque dentro del bloque Columnas. Actúa como un contenedor donde puedes añadir diferentes bloques en cada columna. Después, puedes cambiar el tamaño de esos bloques ajustando la altura y la anchura de las columnas.

En primer lugar, haga clic en el botón “Añadir bloque” (+) situado en la esquina superior izquierda de la pantalla.

Desde aquí, localiza y añade el bloque Columnas al editor de Gutenberg. A continuación, se te pedirá que elijas una variación.

Choose the column block

A continuación, la estructura / disposición / diseño / plantilla de la columna aparecerá en pantalla y podrá añadir el bloque que desee haciendo clic en el botón “Añadir bloque (+)” dentro de una columna.

Una vez añadido el bloque, puede cambiar su tamaño utilizando los “Ajustes de columna” situados en el panel derecho.

Add Block using column

Cuando haya terminado, sólo tiene que hacer clic en el botón “Publicar” para guardar los cambios.

Este es el aspecto del contenido en nuestro sitio web de demostración después de redimensionar y alinear dos bloques de párrafos dentro de un bloque de dos columnas.

Column block preview

Método 3: Modificar la altura y anchura del bloque mediante el bloque de grupo

También puede ajustar la anchura y la altura de los bloques mediante el bloque Agrupar. Le permite agrupar los bloques que desee y aplicarles un estilo conjunto.

En primer lugar, debe hacer clic en el botón “Añadir bloque” (+) situado en la parte superior. A continuación, localice y añada el bloque Grupo al editor de contenido.

Una vez hecho esto, el bloque Grupo mostrará tres opciones de diseño diferentes. En este tutorial utilizaremos el diseño “Grupo”.

Choose the Group block and select a layout

A continuación, aparecerá en pantalla el botón “Añadir bloque”. Ahora puede añadir el bloque que desee.

En este tutorial, añadiremos y cambiaremos el tamaño de un bloque de encabezado, un bloque de párrafo y un bloque de imagen.

Add a heading block to the Group block

Para añadir varios bloques al Grupo, haga clic en el botón “Seleccionar grupo” de la barra de herramientas de bloques.

Una vez seleccionado el Grupo, basta con hacer clic en el botón “Añadir bloque” (+) de la parte inferior.

Add multiple blocks in Group

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

Al cambiar la estructura / disposición / diseño / plantilla también cambiarán los distintos tamaños de los bloques. Puedes establecer estos ajustes hasta que estés satisfecho con el resultado.

Configure the block settings of the Group block

Una vez que haya terminado, haga clic en el botón “Actualizar” o “Publicar” para almacenar sus ajustes.

Este es el aspecto del bloque Grupo en nuestro sitio web de demostración.

Group block preview

Método 4: Modificación de la altura del bloque mediante el bloque de cubierta

Este método de redimensionamiento es para usted si desea utilizar el bloque Portada. Le permite mostrar texto y otros contenidos sobre una imagen o un vídeo.

En primer lugar, haga clic en el botón “Añadir bloque” (+) de la parte superior y busque el bloque Portada.

Una vez hecho esto, se le pedirá que elija un color o que suba una imagen de la biblioteca de medios de WordPress. Esta imagen o color se utilizará como fondo para el bloque Portada.

Add the Cover block

A continuación, sólo tienes que arrastrar y soltar cualquier bloque que desees en el bloque Cubierta.

A continuación, haz clic en el bloque Cubierta para abrir sus ajustes en la columna de la derecha.

Desde aquí, desplácese hacia abajo hasta el panel “Dimensiones”, donde podrá ajustar la altura del bloque de portada en píxeles.

Change the Cover block height

Por último, no olvides hacer clic en el botón “Guardar cambios” para establecer los ajustes.

Para obtener instrucciones más detalladas sobre cómo utilizar el bloque Portada, puede consultar nuestra guía para principiantes sobre Imagen de portada vs. Imagen destacada en el editor de bloques de WordPress.

Bonificación: Cree páginas atractivas con los bloques avanzados de SeedProd

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

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

En primer lugar, tendrá que instalar y activar el plugin SeedProd. Para más detalles, puedes leer nuestra guía sobre cómo instalar un plugin de WordPress.

Nota: SeedProd también ofrece una versión gratuita, pero vamos a utilizar la versión premium para este tutorial.

Tras la activación, debe ir a la página SeedProd ” Configuración desde su panel de WordPress e introducir la clave de licencia en la casilla “Clave de licencia”.

Encontrará la clave de licencia en la página de su cuenta en el sitio web de SeedProd.

Paste license key in field

A continuación, visite la pantalla SeedProd ” Páginas de destino desde la barra lateral del administrador para empezar a crear una página de destino.

Desde aquí, sólo tiene que hacer clic en el botón “Añadir nueva página de destino”.

Click the Add New Landing Page button

Ahora accederá a la pantalla “Elegir una nueva plantilla de página”. SeedProd ofrece muchas plantillas prediseñadas que puede elegir.

Después de seleccionar una plantilla, se le pedirá que indique un nombre y una URL para su página de destino.

Una vez añadidos estos datos, pulse el botón “Guardar y empezar a editar la página” para continuar.

Enter your page details

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

En este tutorial, añadiremos y redimensionaremos un bloque Imagen y un bloque Botón.

En primer lugar, tendrás que arrastrar el bloque Imagen desde el panel de bloques de la izquierda y soltarlo donde quieras en la página.

Choose the image block in the SeedProd

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

A continuación, puede cambiar la altura y la anchura del bloque utilizando píxeles o porcentajes.

Change the block size in SeedProd

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

A continuación, basta con hacer clic en el panel Espaciado para ampliar sus ajustes.

Visit the Spacing panel by switching to the Advanced tab

Aquí, sólo tiene que añadir valores para ajustar el margen y el relleno del bloque según sus necesidades.

Puede ajustar el margen y el relleno de las zonas superior, inferior, izquierda y derecha del bloque.

Ajust the margin and padding of the block

Con Seedprod, también puedes añadir un bloque espaciador entre dos bloques diferentes para dejar algo de espacio entre ellos.

En primer lugar, tendrás que localizar y añadir el bloque “Espaciador” de la columna de la izquierda. A continuación, haz clic en él para abrir sus ajustes.

Add the Spacer block

Ahora, puedes controlar la altura del espaciador utilizando el carrusel / control deslizante “Altura”.

El bloque espaciador puede ayudarle a crear un sitio web despejado.

Use the height slider to adjust Spacer block

También puede cambiar la anchura y la altura de otros bloques del mismo modo, incluidos los bloques Vídeo, Encabezado y Botón.

Sólo tienes que buscar el bloque Botón en la columna de la izquierda y arrastrarlo a tu página.

Add the Button block to the website

A continuación, tendrá que hacer clic en el Botón para abrir sus ajustes de bloque.

Desde aquí, cambie a la pestaña “Avanzado” de la parte superior. Puede cambiar la altura del bloque arrastrando el carrusel / control deslizante “Relleno vertical”.

Changing height of the button block

Para cambiar la anchura, arrastre el carrusel / control deslizante “Relleno horizontal” de la columna izquierda.

Cuando hayas terminado, no olvides hacer clic en el botón “Guardar”.

Change width of the button block

Esperamos que este artículo te haya ayudado a aprender cómo cambiar el ancho y alto de los bloques en WordPress. También puedes consultar nuestro artículo sobre cómo añadir y alinear imágenes en el editor de bloques de WordPress y nuestra selección de los mejores temas de WordPress compatibles con Gutenberg.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

Comentarios

  1. Felicidades, tienes la oportunidad de ser el primer comentarista de este artículo.
    ¿Tiene alguna pregunta o sugerencia? Por favor, deje un comentario para iniciar la discusión.

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.