Gutenberg Block Editor, presentado oficialmente en WordPress 5.0, brinda a los usuarios la capacidad de personalizar completamente su contenido y sitios de WordPress. Ya no está limitado por tener que crear en una herramienta WYSIWYG como TinyMCE Editor clásico, Gutenberg proporciona bloques separados para cada publicación o elemento de contenido de la página. Al tener 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 fáciles de hacer que sus diseños se destaquen es sacarlos de la 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 se limitan al área de contenido del sitio web debido a la naturaleza receptiva de los bloques. Si ha configurado el área de contenido de una página a ancho completo, trabajará en ese espacio. Si tiene el área de contenido de su publicación establecida en 580 o 1200 píxeles, por ejemplo, funcionará allí. Todos los métodos que usamos para enseñarle cómo cambiar el tamaño de los bloques en WordPress se basan en la suposición 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, pero no todos, los bloques tienen opciones de cambio de tamaño integradas. Son los más fáciles de cambiar de tamaño por razones obvias. Sin embargo, dependiendo del bloque, las opciones de tamaño estarán en diferentes lugares.
Ejemplo # 1: bloque de imagen
Al hacer clic en un bloque, aparecerá un menú contextual y las opciones de cambio de tamaño son en realidad opciones de espaciado. Sin embargo anchura amplia y ancho completo las alineaciones cambiarán el tamaño del bloque de imagen al ancho del contenedor (ancho) o al ancho completo de la página (completo).
También puede cambiar el tamaño del bloque de imagen usando la configuración de bloque en la barra lateral derecha. Bien llamado Tamaño de la imagen La sección tiene varias opciones con las que puedes cambiar el tamaño del bloque.
WordPress tiene un menú desplegable para cambiar el tamaño rápidamente y puede seleccionar ajustes preestablecidos de Miniatura, mediocre, largoy tamaño completo. Selección tamaño completo variará según el tema, ya sea que se muestre en su totalidad o se ajuste al área de contenido.
También puede ajustar el ancho y la altura con píxeles. Puede ajustar el porcentaje a continuación. los el porcentaje se basa en el valor numérico en los campos de ancho y alto. Este no es el tamaño de imagen predeterminado seleccionado en el menú desplegable.
Y finalmente, puede hacer clic en la imagen para mostrar el marco azul en z anclas redondas blancas. Puede arrastrarlos para cambiar el tamaño del bloque.
Simplemente haga clic y arrastre cualquier ancla para escalar la imagen. Esto ajustará el tamaño en los campos de alto y ancho en el menú de configuración del bloque.
Ejemplo #2: Bloque de eventos
Para el bloque de eventos, la configuración de cambio de tamaño solo se encuentra en el menú contextual del propio editor. (El bloque de eventos es un complemento independiente de Automattic que instalará y no forma parte del editor básico de Gutenberg).
Al igual que algunas opciones de bloques de imágenes, las opciones de cambio de tamaño aquí son técnicamente opciones de espaciado. pero hay dos opciones Alinear al centro y Anchura amplia. Puede elegir tenerlo centrado en el contenedor o a lo ancho de la pantalla.
Ajustar la altura del bloque en el propio editor es un poco extraño, pero funciona. si solo golpeas entrar / volver en el cuadro de bloque vacío, puede aumentar la altura insertando bloques de párrafo vacíos adicionales.
Esto es menos que una solución perfecta. Pero es rápido y funciona en poco tiempo, especialmente si se tiene en cuenta que no existe una opción de ajuste de altura real para el bloque de eventos.
Ejemplo 3 #: Uso de columnas para cambiar el tamaño de bloques en WordPress
Si el bloque que desea cambiar el tamaño no tiene una opción de cambio de tamaño en el panel de configuración o el menú contextual, usar las columnas del editor de bloques es otra forma de cambiar el tamaño de cualquier bloque. solo busca columnas bloquear pulsando cualquiera de los + botones para agregar un nuevo bloque.
Puede agregar cualquier otro bloque al bloque Columna. En el editor de bloques de opciones de búsqueda Patrones también aparecen. Estas son plantillas que puede insertar en su publicación o página con contenido ya dimensionado y colocado mientras espera que el contenido reemplace el marcador de posición.
Desde el principio, el bloque Columnas le permite elegir el tamaño de la columna. Se divide en 6 orientaciones diferentes, cada una con un porcentaje diferente de página utilizada en cada columna.
Estas no son las únicas configuraciones que puede usar. Puedes usar azul + botón dentro de un bloque para agregar una nueva columna en cualquier momento. Cada columna individual tiene su propio panel de configuración donde puede ajustar su ancho como un porcentaje.
Obtener el tamaño correcto para su proyecto puede requerir un poco de experimentación. Sin embargo, una vez hecho esto, puede tener contenido bien diseñado y bien ubicado en su página de inicio. Tenga en cuenta que cualquier columna en blanco que tenga en el editor de bloques también se mostrará en blanco en la interfaz de usuario.
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 que desee.
¿Necesita más opciones de tamaño? Considere un creador de páginas más avanzado
Entendemos que algunos de estos métodos de cambio de tamaño de bloque pueden parecer limitantes. Si los encuentra demasiado restrictivos para usted, podría ser el momento de echar un vistazo a un creador de páginas más avanzado.
Nuestra propia dividepor ejemplo, tiene Tallas y Transformar opciones para cada módulo (bloque) que le brindan mucho más control 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 hacen esto, por lo que si encuentra que las opciones de Gutenberg son demasiado limitadas, consulte algo como esto divide puede ser el mejor próximo paso.
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 debajo Ajustes avanzados. Además de otras configuraciones avanzadas específicas del bloque, cada una tiene un campo para Clases adicionales de CSS. Puede asignar cualquier selector a este bloque único, ya existan en su sitio o si los crea específicamente para ese bloque.
Por lo general, sugerimos usar ID de CSS en lugar de clases para bloques individuales, pero el editor de bloques no lo admite (al menos de forma predeterminada). Entonces, solo querrá usar varias clases para mantenerse al día con bloques individuales, no con identificadores. Las clases realmente están destinadas a cubrir grandes categorías de tipos de elementos, mientras que los identificadores están destinados a elementos individuales. En ese caso, sugerimos usar una convención de nomenclatura clara para mantener su código organizado.
Independientemente, simplemente ingrese la clase en el cuadro de texto. No ponga un punto/punto delante del nombre de la clase en este campo.
Ahora debes pasar a Apariencia – Personalizar y encontrar CSS adicional sección en la parte inferior. Escriba o pegue el código CSS para cambiar el tamaño del bloque a su gusto.
Le sugerimos que evite tomar medidas en píxeles (pix.) porque son absolutos. Será mejor que uses cualquiera volvo (ancho de ventana)vh (altura de la ventana gráfica) o % (porcentaje) para ajustar el bloque. Cada uno de ellos escalará con respecto al dispositivo y/u otros contenidos a su alrededor.
.block-1 {
height:35vh;
max-height:50vh;
}
.block-2 {
width: 100vw;
}
.block-3 {
max-width:80vw;
}
Toma en cuenta que % y vw / vh también difieren, aunque funcionan de manera similar. Todos funcionan sobre una base porcentual, pero estos se refieren a anclas diferentes.
La medida del porcentaje se refiere al contenedor en el que se guarda el artículo. Entonces, si la sección o línea en la que se encuentra el elemento no llega al borde de la pantalla, ni siquiera la configuración ancho: 100% no llegará a los límites.
Por vh / vw sin embargo, ya que se relacionan con el área visible del dispositivo en sí y no con los elementos del sitio. Por altura: 80vhsiempre puede estar seguro de que este bloque ocupa el 80% de la altura de la pantalla, ya sea que se muestre en un dispositivo móvil, computadora o tableta.
Solicitud
El editor de bloques en WordPress brinda a los usuarios una gran cantidad de opciones de personalización que antes no estaban disponibles (en el propio editor). La capacidad de cambiar el tamaño de los bloques en WordPress es esencial para poder aprovechar al máximo el editor de bloques. Y al editar todo el sitio en su repertorio, esta es una de las habilidades que se volverá más útil con el tiempo.
¿Cuáles son los consejos y trucos para cambiar el tamaño de los bloques en WordPress que puedes compartir?
El artículo presentaba una imagen de 3rieart / shutterstock.com
