Gutenberg Block Editor, presentado 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 TinyMCE Classic Editor , Gutenberg proporciona bloques individuales para cada elemento del contenido de la publicación o 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 todavía 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 establecida en 580px o 1200px, por ejemplo, trabajará allí. Los métodos que estamos usando para enseñarte cómo cambiar el tamaño de los bloques en WordPress se basan en la idea de que permanecerás dentro de los límites del contenedor de cualquier bloque en particular.
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 #1: El bloque de imagen
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 (lleno).
También puede cambiar el tamaño del bloque de imagen utilizando la configuración de bloque en la barra lateral derecha. La sección Tamaño de imagen, acertadamente nombrada , 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 de miniatura , mediano , grande y tamaño completo. La selección de tamaño completo variará según su tema, ya sea que se muestre completamente o se ajuste al área de contenido.
También puede ajustar específicamente el ancho y la altura por píxeles. Debajo de eso puedes ajustar por porcentaje. El porcentaje se basa en el valor numérico en 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 cualquiera de los anclajes para escalar la imagen. Al hacerlo, se ajustará el tamaño en los campos de alto y ancho en el menú de configuración del bloque.
Ejemplo #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. (El bloque de eventos es un complemento separado de Automattic que instalará y no forma parte del editor central de Gutenberg).
Al igual que algunas de las opciones de bloque de imagen, las opciones de cambio de tamaño aquí son técnicamente opciones de espaciado. Pero las dos opciones son Alinear al centro y Ancho ancho. Puede elegir uno para que esté centrado en el contenedor o para que tenga el ancho completo de la pantalla.
Ajustar la altura del bloque en el propio editor es un poco complicado, pero funciona. Si simplemente pulsa Intro/Retorno en el campo de bloque vacío, puede expandir la altura insertando bloques de párrafo 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 real de ajuste de altura 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 Patterns 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 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 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 el ancho solo por porcentajes.
Es posible que se necesite algo de experimentación para obtener el tamaño correcto para su diseño. Sin embargo, cuando esté terminado, puede tener un contenido bien diseñado y bien espaciado en su página principal. Tenga en cuenta que cualquier columna vacía que tenga en el editor de bloques también se mostrará vacía en la parte frontal.
Al ajustar el ancho, la ubicación y la cantidad de columnas diferentes, sus bloques se pueden cambiar de tamaño y colocar en casi cualquier forma.
¿Necesita más opciones de tamaño? Considere un creador de páginas más avanzado
Nos damos cuenta de que algunos de estos métodos para cambiar el tamaño de los bloques pueden parecer limitantes. 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 del 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 limitadas, revisar algo como Divi puede ser el mejor paso a seguir.
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 del bloque, cada una tiene un campo para Clases CSS adicionales . Puede asignar los selectores que desee a este bloque individual, tanto si ya existen en su sitio como si lo crea específicamente para este bloque.
Normalmente, sugeriríamos usar ID de CSS en lugar de Clases para bloques individuales, pero el editor de bloques no lo admite (al menos de forma predeterminada). Por lo tanto, querrá usar varias clases para mantenerse al día con bloques individuales en lugar de ID. Las clases realmente 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, 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 escalará en referencia al dispositivo y/u otro contenido a su alrededor.
|
01
02
03
04
05
06
07
08
09
10
11
12
|
.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 esos son relativos a diferentes anclas.
La medida del porcentaje está en relación con el recipiente en el que se encuentra el elemento. Por lo tanto, 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 de ancho: 100% no alcanzará los límites.
Sin embargo, el uso de vh/vw lo hará, ya que son relativos a la ventana gráfica del dispositivo en sí, no a los elementos del sitio. Con 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 brinda 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 el cambio de tamaño de los bloques en WordPress?
Imagen destacada del artículo por 3rieart / shutterstock.com