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

El editor de bloques de Gutenberg, introducido oficialmente en WordPress 5.0, ofrece a los usuarios la oportunidad de personalizar completamente el contenido y los sitios de WordPress. Ya no está limitado por la necesidad de crear en un instrumento WYSIWYG como TinyMce Classic Editor, Gutenberg ofrece bloques individuales para cada elemento de publicación o contenido de página. Con el control en la configuración para cada bloque específico, los usuarios pueden diseñar contenido de WordPress más fácil que nunca. Y una de las formas más simples de hacer que los dibujos se destaquen es llevarlos más allá de la configuración predeterminada. Por lo tanto, analizaremos cómo cambiar el tamaño de los bloques de WordPress, para que pueda comenzar a pensar (y diseñar) fuera de la caja.
La mayor parte de la renuncia en el editor de bloques todavía se limita al área de contenido del sitio, debido a la naturaleza receptiva de los bloques. Si ha establecido la zona de contenido de la página en un ancho completo, trabajará en ese espacio. Si tiene una zona de contenido publicada desde 580 PX o 1200 PX, por ejemplo, trabajará allí. Los métodos que utilizamos 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 un bloque en particular. Cómo cambiar el tamaño de los bloques en el editor algunos bloques, pero no todos, han construido opciones de cambio de tamaño. Estos son los más fáciles de cambiar el tamaño por razones obvias. Sin embargo, dependiendo del bloque, las opciones de cambio de tamaño estarán en diferentes lugares.
Ejemplo # 1: El bloque de imágenes Si hace clic en el bloque, aparecerá el menú contextual, y las opciones de cambio de tamaño aquí son en realidad opciones de separación. Sin embargo, el ancho ancho y el ancho completo cambiarán el tamaño del bloque de imágenes en el ancho del contenedor (ancho) o en el ancho de toda la página (completo). También puede cambiar el tamaño del bloque de imágenes utilizando la configuración del barra lateral. La sección de tamaño de la imagen llamada correctamente tiene una serie de opciones con las que puede cambiar el tamaño del bloque.

WordPress tiene una lista vertical para un cambio de tamaño rápido y puede elegir en miniatura, mediano, grande y completo. Seleccionar el tamaño completo variará según el tema, ya sea que se muestre completamente o coincida con el área de contenido.

También puede ajustar específicamente el ancho y la altura con píxeles. Bajo esto puede ajustar en porcentaje. El porcentaje se basa en el valor numérico de los campos de ancho y altura. No es el tamaño preestablecido de la imagen que seleccionó del menú desplegable. Y, finalmente, puede hacer clic en la imagen en sí para mostrar un borde azul con anclajes circulares blancos. Puedes tirar de ellos para cambiar el tamaño del bloque.
Simplemente hará clic y tirará de cualquiera de los anclajes para escalar la imagen. Si hace esto, el tamaño se ajustará en los campos de altura y ancho en el menú Configuración del bloque.

Ejemplo 2: El bloque de eventos para el bloque de eventos, la configuración de cambio de tamaño está exclusivamente en el menú contextual en el propio editor. (El bloque de eventos es un complemento automático separado que instalará y no parte del editor base de Gutenberg). Al igual que algunas de las opciones de bloqueo de imágenes, las opciones de cambio de tamaño aquí son opciones de distancia técnica. Pero las dos opciones son alinearse el centro y el ancho ancho. Puede elegir uno para estar centrado en el contenedor o tener un ancho completo en la pantalla. Ajustar la altura del bloque en el editor en sí es un poco extraño, pero funciona. Si simplemente presiona ENTER / RETURN en el campo de bloqueo vacío, puede extender la altura insertando bloques de párrafo vacíos y vacíos.
Es una solución menos que ideal. Pero es rápido y funciona en apuros, 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 bloqueo que necesita cambiar el tamaño no presenta opciones de cambio de tamaño en su panel de configuración o en el menú contextual, el uso de columnas del editor de bloques es otra forma en que puede cambiar el tamaño de cualquier bloque. Simplemente busque el bloque de columnas presionando cualquiera de los botones + para agregar un nuevo bloque.

Dentro del bloque de columna, puede agregar cualquier otro bloque deseado. En las opciones de búsqueda, también aparecen los modelos del editor de bloques. Estas son plantillas que puede insertar en su publicación o página ya dimensionadas y colocadas, esperando que su contenido reemplace el sustituto. Desde el principio, el bloque de columnas le permite elegir el tamaño de la columna en sí. 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 usar. 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 el ancho solo con porcentajes.

Es posible que se necesiten algunos experimentos para obtener el tamaño correcto para su diseño. Tenga en cuenta que todas las columnas vacías que tiene en el editor de bloques también se mostrarán vacías en el frente.

Al ajustar el ancho, la ubicación y el número de columnas, sus bloques se pueden cambiar el tamaño y colocarse de cualquier manera. ¿Necesita más opciones de tamaño? Considere un generador de página más avanzado, nos damos cuenta de que algunos de estos métodos de cambio de tamaño pueden parecer limitantes. Si descubre que son demasiado limitantes para usted, puede ser el momento de ver las páginas más avanzadas.


Nuestro propio DIV, por ejemplo, tiene opciones de dimensionamiento y transformación para cada módulo (bloque) que le brinda mucho mayor control sobre la forma, el tamaño y el espacio que posible en Gutenberg. Y la mayoría de los constructores de páginas avanzados lo hacen, por lo que si encuentra que las opciones de Gutenberg son demasiado limitantes, verificar algo como Divi puede ser el mejor paso del próximo. 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 avanzada. Junto con cualquier otro bloques avanzados específicos de bloques, cada uno tiene un campo CSS CSS adicional. Puede asignar cualquier selector deseado a este bloque individual, ya sea que ya exista en su sitio o si lo crea especialmente para este bloque. Normalmente le sugerimos que use códigos CSS en lugar de bloques individuales, pero esto no lo acepta por el editor de bloques ( al menos predeterminado). Por lo tanto, querrá usar solo más clases para mantenerse al día con los bloques individuales, en lugar de con las ID. Las clases están destinadas a cubrir grandes categorías de tipos de elementos, mientras que las ID están destinadas a elementos individuales. En este caso, le sugerimos que use una convención de nombre clara para mantener las cosas directamente en su código, simplemente ingresará la clase en el campo de texto. No incluya el punto / punto frente al nombre de la clase en este campo.

Ahora, debe navegar por el aspecto: personalizar y encontrar la sección CSS adicional en la parte inferior. Escriba o pegue el código CSS para cambiar el tamaño del bloque como desee.

Le sugerimos que evite usar mediciones de píxeles (PX) porque son absolutas. Preferiblemente, usará VW (ancho de la ventana), VH (altura de la ventana) o % (porcentaje) para ajustar el bloque. Se escalarán de acuerdo con el dispositivo y / u otro contenido a su alrededor. .Block-1 {altura: 35vh;

Max-Alta: 50VH;

}

.Block-2 {

Ancho: 100VW;
}
.Block-3 {
Max-Width: 80VW;
}
Tenga en cuenta que % y VW / VH son diferentes, aunque funciona de manera similar. Todos trabajan en porcentajes, pero están relacionados con diferentes anclajes. La medición porcentual está en relación con el contenedor en el que se mantiene el artículo. Entonces, si la sección o fila en la que se encuentra el elemento no va a los bordes de la pantalla, incluso la configuración de ancho: el 100% no alcanzará los límites. Sin embargo, el uso de VH / VW será relativo a la ventana del dispositivo en sí, no con los elementos del sitio. Usando la altura: 80 VH, siempre puede asegurarse de que este bloque ocupe el 80% de la altura de la pantalla, ya sea que se muestre en un dispositivo móvil, escritorio o tableta. Conclusión El editor de bloques de WordPress ofrece a los usuarios una gran cantidad de opciones de personalización que no estaban disponibles (dentro del editor en sí, es decir). Saber cómo cambiar el tamaño de los bloques en WordPress es esencial para usar el editor de bloques al máximo. Y con la edición completa del sitio ahora en su repertorio, esta es una habilidad que será más útil a medida que pase el tiempo. ¿Cuáles son algunos consejos y trucos que puede compartir sobre el cambio de tamaño de los bloques en WordPress? Imagen presentada por el elemento de 3rieart / shutterstock.com