Cómo cambiar el tamaño de los bloques en WordPress

El editor de bloques Gutenberg, introducido oficialmente en WordPress 5.0, brinda a los usuarios la oportunidad de personalizar completamente su contenido y sitios de WordPress. Ya no está limitado por la necesidad de crear en una herramienta WYSIWYG como el TinyMCE Classic Editor, Gutenberg proporciona bloques individuales para cada elemento del contenido de la publicación o la página. Con control sobre la configuración de cada bloque específico, los usuarios pueden diseñar contenido de WordPress más fácilmente que nunca. Y una de las formas más sencillas de hacer que los diseños se destaquen es llevarlos más allá de su configuración predeterminada. Entonces, veremos cómo cambiar el tamaño de los bloques en WordPress para que pueda comenzar a pensar (y diseñar) fuera de la caja.

La mayoría de los cambios de tamaño en el editor de bloques aún están restringidos al área de contenido del sitio debido a la naturaleza receptiva de los bloques. Si ha configurado el área de contenido de su página en ancho completo, estará trabajando dentro de ese espacio. Si tiene un área de contenido de publicación configurada en 580px o 1200px, por ejemplo, trabajará allí. Los métodos que estamos usando para enseñarle cómo cambiar el tamaño de los bloques en WordPress se basan en la idea de que permanecerá dentro de los límites del contenedor de cualquier bloque en particular.

Cómo cambiar el tamaño de los bloques en el editor

Algunos bloques, pero no todos, tienen opciones de cambio de tamaño integradas. Estos son los más fáciles de cambiar de tamaño por razones obvias. Sin embargo, dependiendo del bloque, las opciones de cambio de tamaño estarán en diferentes lugares.

Ejemplo n. ° 1: el bloque de imágenes

Al hacer clic en el bloque, aparecerá el menú contextual, y las opciones de cambio de tamaño aquí son en realidad opciones de espaciado. Sin embargo, las alineaciones de ancho ancho y ancho completo cambiarán el tamaño del bloque de imagen al ancho del contenedor (ancho) o al ancho de toda la página (completa).

También puede cambiar el tamaño del bloque de imagen usando la configuración del bloque en la barra lateral derecha. La sección Tamaño de imagen, con el nombre adecuado, tiene una serie de opciones con las que puede cambiar el tamaño del bloque.

WordPress tiene un menú desplegable para cambiar el tamaño rápidamente, y puede elegir ajustes preestablecidos entre miniatura , mediano , grande y tamaño completo. La selección de tamaño completo variará según el tema, ya sea que se muestre completamente o se ajuste al área de contenido.

También puede ajustar específicamente el ancho y el alto por píxeles. Debajo de eso, puede ajustar por porcentaje. El porcentaje se basa en el valor numérico de los campos de ancho y alto . No es el tamaño de imagen predeterminado que seleccionó en el menú desplegable.

Y finalmente, puede hacer clic en la imagen para que aparezca un borde azul con anclas circulares blancas . Puede arrastrarlos para cambiar el tamaño del bloque.

Simplemente haga clic y arrastre en cualquiera de los anclajes para escalar la imagen. Al hacerlo, se ajustará el tamaño en los campos de altura y ancho en el menú de configuración del bloque.

Ejemplo n. ° 2: el bloque de eventos

Para el Bloque de eventos, la configuración de cambio de tamaño se encuentra únicamente en el menú contextual del propio editor. (Event Block es un complemento independiente de Automattic que instalará y no forma parte del editor principal de Gutenberg).

Al igual que algunas de las opciones de bloque de imágenes, las opciones de cambio de tamaño aquí son opciones de espaciado técnico. Pero las dos opciones son Alinear al centro y Amplio ancho. Puede elegir que se centre en el contenedor o que tenga el ancho completo en la pantalla.

Ajustar la altura del bloque en el propio editor es una especie de truco, pero funciona. Si simplemente presiona enter / return en el campo de bloque vacío, puede expandir la altura insertando bloques de párrafos vacíos adicionales.

Es una solución menos que ideal. Pero es rápido y funciona en caso de apuro, especialmente dada la ausencia de una opción de ajuste de altura real para el Bloque de eventos.

Ejemplo 3 #: Uso de columnas para cambiar el tamaño de los bloques en WordPress

Si el bloque que necesita cambiar de tamaño no viene con opciones de cambio de tamaño en su panel de configuración o menú contextual, usar las columnas del editor de bloques es otra forma de cambiar el tamaño de cualquier bloque. Simplemente busque el bloque Columnas presionando cualquiera de los botones + para agregar un nuevo bloque.

Dentro del bloque Columna, puede agregar cualquier otro bloque que desee. En las opciones de búsqueda también aparecen los Patrones del editor de bloques. Estas son plantillas que puede insertar en su publicación o página con contenido ya dimensionado y colocado, esperando que su contenido reemplace el marcador de posición.

Desde el principio, el bloque Columnas te permite elegir el tamaño de la propia columna. Se divide en 6 orientaciones diferentes, cada una con un porcentaje diferente de la página utilizada para columnas individuales.

Estas no son las únicas configuraciones que puede utilizar. Puede usar el botón azul + dentro del bloque para agregar una nueva columna en cualquier momento. Cada columna individual tiene su propio panel de configuración en el que puede ajustar su ancho solo por porcentajes.

Puede que sea necesario experimentar un poco para conseguir el tamaño correcto para su diseño. Sin embargo, cuando esté terminado, puede tener contenido bien diseñado y bien espaciado en su página principal. Tenga en cuenta que las columnas vacías que tenga en el editor de bloques también se mostrarán vacías en la interfaz.

Al ajustar el ancho, la ubicación y el número de columnas diferentes, sus bloques se pueden cambiar de tamaño y colocar de casi cualquier manera.

¿Necesita más opciones de tamaño? Considere un generador de páginas más avanzado

Somos conscientes de que algunos de estos métodos para cambiar el tamaño de los bloques pueden resultar limitativos. Si encuentra que son demasiado limitantes para usted, podría ser el momento de buscar un creador de páginas más avanzado.

Nuestro propio Divi, por ejemplo, tiene opciones de Tamaño y Transformación para cada módulo (bloque) que le brindan un control mucho mayor sobre la forma, el tamaño y el espaciado de lo que es posible en Gutenberg. La mayoría de los creadores de páginas avanzados también lo hacen, por lo que si encuentra que las opciones de Gutenberg son demasiado limitantes, verificar algo como Divi puede ser el mejor paso siguiente.

Cómo cambiar el tamaño de los bloques en WordPress usando CSS

Cada bloque tiene una sección CSS en el panel de configuración en Configuración avanzada . Junto con cualquier otra configuración avanzada específica de bloque, cada una tiene un campo para Clases CSS adicionales . Puede asignar los selectores que desee a este bloque individual, ya sea que ya existan en su sitio o si lo crea específicamente para este bloque.

Normalmente, sugeriríamos usar ID de CSS en lugar de Clases para bloques individuales, pero eso no es compatible con el editor de bloques (por defecto, al menos). Por lo tanto, solo querrá usar varias clases para mantenerse al día con bloques individuales en lugar de ID. Las clases están destinadas a cubrir grandes categorías de tipos de elementos, mientras que los ID están destinados a elementos individuales. En este caso, sugerimos usar una convención de nomenclatura clara para mantener las cosas claras en su código.

Independientemente, simplemente ingresará la clase en el campo de texto. No incluya el punto / punto delante del nombre de la clase en este campo .

Ahora, debe navegar a Apariencia - Personalizar y encontrar la sección CSS adicional en la parte inferior. Escribe o pega el código CSS para cambiar el tamaño del bloque a tu gusto.

Sugerimos evitar el uso de medidas en píxeles (px) porque son absolutas. Preferiblemente, utilizará vw (ancho de la ventana gráfica) , vh (altura de la ventana gráfica) o % (porcentaje) para ajustar el bloque. Cada uno de estos se escalará en referencia al dispositivo y / u otro contenido a su alrededor.

.block-1 {
	height:35vh;
	max-height:50vh;
}

.block-2 {
	width: 100vw;
}

.block-3 {
	max-width:80vw;
}

Tenga en cuenta que % y vw / vh también son diferentes, aunque funcionan de manera similar. Todos funcionan en porcentajes, pero son relativos a diferentes anclajes.

La medida porcentual está en relación con el contenedor en el que se encuentra el elemento. Entonces, si la sección o fila en la que se encuentra el elemento no llega a los bordes de la pantalla, incluso la configuración del ancho: 100% no alcanzará los límites.

Sin embargo, el uso de vh / vw , ya que son relativos a la ventana gráfica del dispositivo en sí, no a los elementos del sitio. Usando height: 80vh , siempre puede asegurarse de que este bloque ocupe el 80% de la altura de la pantalla, independientemente de si se muestra en un dispositivo móvil, computadora de escritorio o tableta.

Conclusión

El editor de bloques en WordPress ofrece a los usuarios una gran cantidad de opciones de personalización que antes no estaban disponibles (es decir, dentro del propio editor). Saber cómo cambiar el tamaño de los bloques en WordPress es esencial para poder utilizar el editor de bloques al máximo. Y con la edición de sitio completo ahora en su repertorio, esta es una habilidad que solo será más útil a medida que pase el tiempo.

¿Cuáles son algunos consejos y trucos que puede compartir sobre cómo cambiar el tamaño de los bloques en WordPress?

Imagen destacada del artículo por 3rieart / shutterstock.com