M谩s

    C贸mo cambiar la altura y el ancho del bloque en WordPress

    - Advertisement -

    驴Quieres cambiar la altura y el ancho del bloque en WordPress?

    De forma predeterminada, WordPress facilita la creaci贸n de hermosos dise帽os de contenido para sus publicaciones y p谩ginas utilizando bloques. Sin embargo, a veces es posible que desee cambiar el tama帽o de los bloques para que se vean mejor.

    En este art铆culo, le mostraremos c贸mo cambiar f谩cilmente la altura y el ancho del bloque en WordPress.

    驴Por qu茅 cambiar la altura y el ancho del bloque en WordPress?

    El editor de bloques le permite agregar contenido a su sitio web de WordPress usando diferentes bloques, incluidos encabezados, p谩rrafos, im谩genes, videos, audio y m谩s.

    Sin embargo, a veces es posible que desee cambiar el ancho o el alto de un bloque espec铆fico para mejorar su apariencia o el dise帽o del contenido general.

    Ajustar los tama帽os de bloque tambi茅n puede garantizar que su contenido responda y se muestre correctamente en todos los dispositivos, incluidos tel茅fonos, tabletas y computadoras port谩tiles.

    Por ejemplo, es posible que haya subido una imagen en el editor de contenido, pero es demasiado grande y hace que la p谩gina se vea poco atractiva.

    Vista previa de una imagen

    O bien, es posible que desee cambiar el tama帽o del bloque de encabezado para alinearlo mejor con el contenido.

    Al ajustar el ancho y la altura de los bloques, puede hacer que sus publicaciones y p谩ginas se vean m谩s agradables est茅ticamente.

    Dicho esto, veamos c贸mo puedes cambiar f谩cilmente la altura y el ancho del bloque en WordPress.

    M茅todo 1: cambiar la altura y el ancho del bloque mediante la configuraci贸n del bloque

    Para este m茅todo, le mostraremos c贸mo cambiar la altura y el ancho de un bloque utilizando la configuraci贸n predeterminada que ofrece WordPress.

    Actualmente, WordPress no ofrece las mismas opciones de cambio de tama帽o para todos los bloques. Sin embargo, el editor de bloques ofrece muchas formas de cambiar el tama帽o de la altura y el ancho de diferentes bloques.

    Comencemos con el bloque Imagen en WordPress.

    Primero, puede cambiar la alineaci贸n del bloque Imagen haciendo clic en el bot贸n ‘Alinear’ en la barra de herramientas sobre el bloque.

    Aqu铆, elegir la opci贸n ‘Ancho ancho’ har谩 que el bloque tenga el mismo ancho 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.

    Usar la configuraci贸n de alineaci贸n para cambiar el tama帽o de una imagen

    Tambi茅n puede cambiar el tama帽o de un bloque yendo al panel ‘Configuraci贸n de bloque’ a la derecha y desplaz谩ndose hacia abajo hasta la secci贸n ‘Configuraci贸n’. Desde aqu铆, puede cambiar el tama帽o de un bloque desde el men煤 desplegable ‘Tama帽o de imagen’.

    Tambi茅n puede ajustar el ancho y la altura del bloque escribiendo el tama帽o de p铆xel preferido en los cuadros ‘Ancho’ y ‘Alto’ en la secci贸n ‘Dimensiones de la imagen’.

    Debajo de eso, tambi茅n puede ajustar el tama帽o del bloque por porcentaje.

    Cambiar el tama帽o de una imagen usando la configuraci贸n del panel de bloques

    Otra forma de cambiar el tama帽o de un bloque de imagen es hacer clic en la imagen para que aparezca un borde azul con anclas circulares.

    Luego, simplemente arrastre estos anclajes para cambiar la altura y el ancho del bloque de imagen.

    Cambiar el tama帽o del bloque de imagen usando anclas

    Una vez que haya terminado, haga clic en el bot贸n ‘Actualizar’ o ‘Publicar’ para almacenar su configuraci贸n.

    M茅todo 2: cambie la altura y el ancho del bloque usando el bloque de columnas

    Si el bloque que desea cambiar de tama帽o no viene con botones de alineaci贸n o configuraciones de cambio de tama帽o, entonces este m茅todo es para usted.

    Para este m茅todo, colocaremos nuestro bloque dentro del bloque Columnas. Act煤a como un contenedor donde puede agregar bloques en cada columna. Luego, puede cambiar el tama帽o de esos bloques ajustando la altura y el ancho de las columnas.

    Primero, deber谩 hacer clic en el bot贸n ‘Agregar bloque’ (+) en la esquina superior izquierda de la pantalla.

    Desde aqu铆, simplemente ubique y agregue el bloque Columnas al editor de contenido. Luego, se le pedir谩 que elija una variaci贸n.

    Elija el bloque de columnas

    Despu茅s de eso, el dise帽o de la columna se mostrar谩 en la pantalla y ahora puede agregar el bloque que desee haciendo clic en el bot贸n ‘Agregar bloque (+)’ dentro de una columna.

    Una vez que se ha agregado el bloque, puede cambiar su tama帽o utilizando la ‘Configuraci贸n de columna’ ubicada en el panel derecho.

    Agregar bloque usando columna

    Una vez que haya terminado, simplemente haga clic en el bot贸n ‘Publicar’ para almacenar sus cambios.

    As铆 es como se ve铆a el contenido en nuestro sitio web de demostraci贸n despu茅s de cambiar el tama帽o y alinear dos bloques de p谩rrafos dentro de un bloque de dos columnas.

    Vista previa del bloque de columnasM茅todo 3: cambie la altura y el ancho del bloque usando el bloque de grupo

    Tambi茅n puede ajustar el ancho y la altura de los bloques usando el bloque de grupo. Le permite agrupar diferentes bloques y dise帽arlos juntos.

    Primero, deber谩 hacer clic en el bot贸n ‘Agregar bloque’ (+) en la parte superior. A continuaci贸n, debe ubicar y agregar el bloque de grupo al editor de contenido.

    Una vez que lo haga, el bloque de grupo mostrar谩 tres opciones de dise帽o diferentes entre las que puede elegir. Para este tutorial, utilizaremos el dise帽o ‘Grupo’.

    Elija el bloque de grupo y seleccione un dise帽o

    Despu茅s de eso, el bot贸n ‘Agregar bloque’ se mostrar谩 en la pantalla. Ahora puede agregar cualquier bloque que desee.

    En este tutorial, agregaremos y cambiaremos el tama帽o de un bloque de t铆tulo, un bloque de p谩rrafo y un bloque de imagen.

    Agregar un bloque de encabezado al bloque de grupo

    Para agregar varios bloques al grupo, debe hacer clic en el bot贸n ‘Seleccionar grupo’ de la barra de herramientas del bloque.

    Una vez seleccionado el grupo, simplemente haga clic en el bot贸n ‘Agregar bloque’ (+) en la parte inferior.

    Agregar m煤ltiples bloques en Grupo

    Al hacer clic en el bot贸n ‘Seleccionar grupo’ tambi茅n se abre la configuraci贸n del bloque en la columna de la derecha. Desde aqu铆, puede ajustar f谩cilmente el dise帽o, la justificaci贸n y la orientaci贸n de todos los bloques.

    Cambiar el dise帽o tambi茅n cambiar谩 los diferentes tama帽os de bloque. Puede configurar estos ajustes hasta que est茅 satisfecho con el resultado.

    Configure los ajustes de bloque del bloque de grupo

    Una vez que haya terminado, haga clic en el bot贸n ‘Actualizar’ o ‘Publicar’ para almacenar su configuraci贸n.

    As铆 es como se ve铆a el bloque de grupo en nuestro sitio web de demostraci贸n.

    Vista previa del bloque de grupoM茅todo 4: cambiar la altura del bloque usando el bloque de cobertura

    Este m茅todo de cambio de tama帽o es para usted si desea utilizar el bloque de portada. Le permite mostrar texto y otro contenido encima de una imagen o video.

    Primero, deber谩 hacer clic en el bot贸n ‘Agregar bloque’ (+) en la parte superior y encontrar el bloque Portada.

    Una vez que haya hecho eso, se le pedir谩 que elija un color o cargue una imagen de la biblioteca de medios de WordPress. Esta imagen o color se usar谩 como fondo para el bloque Portada.

    Agregar el bloque de portada

    A continuaci贸n, simplemente arrastre y suelte cualquier bloque que desee en el bloque Portada.

    Despu茅s de eso, debe hacer clic en el bloque Cubrir para abrir su configuraci贸n de bloque en la columna de la derecha.

    Desde aqu铆, despl谩cese hacia abajo hasta el panel ‘Dimensiones’, donde puede ajustar la altura del bloque de portada usando p铆xeles.

    Cambiar la altura del bloque de la cubierta

    Finalmente, no olvide hacer clic en el bot贸n ‘Guardar cambios’ para almacenar su configuraci贸n.

    Para obtener instrucciones m谩s detalladas sobre c贸mo usar el bloque de portada, puede consultar nuestra gu铆a para principiantes sobre Imagen de portada frente a imagen destacada en el editor de bloques de WordPress.

    Bonificaci贸n: cree hermosas p谩ginas usando bloques avanzados en SeedProd

    Puede crear f谩cilmente p谩ginas bonitas y est茅ticamente agradables con el Producto de semilla enchufar.

    Es el mejor creador de p谩ginas de WordPress del mercado que le permite crear p谩ginas de destino utilizando bloques. Estos bloques tambi茅n son muy f谩ciles de personalizar y cambiar de tama帽o seg煤n sus necesidades.

    En primer lugar, deber谩 instalar y activar el Producto de semilla enchufar. Para obtener m谩s detalles, puede leer nuestra gu铆a sobre c贸mo instalar un complemento de WordPress.

    Nota: SeedProd tambi茅n ofrece una versi贸n gratuitapero usaremos la versi贸n premium para este tutorial.

    Tras la activaci贸n, debe ir a la SeedProd 禄 Ajustes p谩gina desde su panel de control de WordPress e ingrese la clave de licencia en el cuadro ‘Clave de licencia’.

    Puede encontrar la clave de licencia en la p谩gina de su cuenta en el sitio web de SeedProd.

    Pegue la clave de licencia en el campo

    A continuaci贸n, debe visitar el SeedProd 禄 P谩ginas de destino pantalla desde la barra lateral de administraci贸n para comenzar a crear una p谩gina de destino.

    Desde aqu铆, simplemente haga clic en el bot贸n ‘Agregar nueva p谩gina de destino’.

    Haga clic en el bot贸n Agregar nueva p谩gina de destino

    Ahora acceder谩 a la p谩gina ‘Elegir una nueva plantilla de p谩gina’. SeedProd ofrece muchas plantillas prefabricadas entre las que puede elegir.

    Una vez que haya seleccionado una plantilla, se le pedir谩 que proporcione un nombre y una URL para su p谩gina de destino.

    Al agregar estos detalles, simplemente haga clic en el bot贸n ‘Guardar y comenzar a editar la p谩gina’ para continuar.

    Ingrese los detalles de su p谩gina

    Esto iniciar谩 el generador de p谩ginas de arrastrar y soltar de SeedProd, donde ahora puede comenzar a editar su p谩gina.

    Para obtener instrucciones m谩s detalladas, consulte nuestra gu铆a sobre c贸mo crear una p谩gina de destino con WordPress.

    Para este tutorial, agregaremos y cambiaremos el tama帽o de un bloque de imagen y un bloque de bot贸n.

    Primero, deber谩 arrastrar el bloque Imagen desde el panel de bloques a la izquierda y soltarlo en cualquier lugar que desee en la p谩gina.

    Elija el bloque de imagen en el SeedProd

    A continuaci贸n, simplemente haga clic en el bloque Imagen para abrir su configuraci贸n de bloque en la columna de la izquierda. Desde aqu铆, puede cargar una imagen de su biblioteca de medios.

    A continuaci贸n, puede cambiar la altura y el ancho del bloque usando p铆xeles o porcentajes.

    Cambiar el tama帽o del bloque en SeedProd

    Tambi茅n puede ajustar el tama帽o y la posici贸n de la imagen cambiando a la pesta帽a 芦Avanzado禄 en la parte superior del panel de configuraci贸n.

    Luego, simplemente haga clic en el panel Espaciado para expandir su configuraci贸n.

    Visite el panel Espaciado cambiando a la pesta帽a Avanzado

    Aqu铆, simplemente agregue valores para ajustar el margen del bloque y el relleno seg煤n sus necesidades.

    Puede ajustar el margen y el relleno para las 谩reas superior, inferior, izquierda y derecha del bloque.

    Ajustar el margen y el relleno del bloque.

    Con Seedprod, tambi茅n puede agregar un bloque espaciador entre dos bloques diferentes para dejar algo de espacio entre ellos.

    Primero, deber谩 ubicar y agregar el bloque ‘Espaciador’ de la columna izquierda. Luego, haga clic en 茅l para abrir su configuraci贸n.

    Agregar el bloque espaciador

    Ahora, puede controlar la altura del espaciador usando el control deslizante ‘Altura’.

    El bloque espaciador puede ayudarlo a crear un sitio web ordenado.

    Use el control deslizante de altura para ajustar el bloque espaciador

    Tambi茅n puede cambiar el ancho y el alto de otros bloques de la misma manera, incluidos los bloques de video, encabezado y bot贸n.

    Simplemente busque el bloque Bot贸n en la columna de la izquierda y arr谩strelo a su p谩gina.

    Agregar el bloque de botones al sitio web

    A continuaci贸n, deber谩 hacer clic en el Bot贸n para abrir su configuraci贸n de bloqueo.

    Desde aqu铆, cambie a la pesta帽a ‘Avanzado’ desde la parte superior. Puede cambiar la altura del bloque arrastrando el control deslizante ‘Relleno vertical’.

    Cambiar la altura del bloque de botones

    Para cambiar el ancho, arrastre el control deslizante ‘Relleno horizontal’ en la columna de la izquierda.

    Una vez que haya terminado, no olvide hacer clic en el bot贸n ‘Guardar’.

    Cambiar el ancho del bloque de botones

    Esperamos que este art铆culo te haya ayudado a aprender c贸mo cambiar el ancho y la altura del bloque en WordPress. Es posible que tambi茅n desee ver nuestro art铆culo sobre c贸mo agregar y alinear im谩genes en el editor de bloques de WordPress y nuestras mejores opciones para los complementos de WordPress imprescindibles para hacer crecer su sitio.

    Si te ha gustado este art铆culo, suscr铆bete a nuestro Canal de Youtube para tutoriales en v铆deo de WordPress. Tambi茅n puedes encontrarnos en Gorjeo y Facebook.


    Fuente: C贸mo cambiar la altura y el ancho del bloque en WordPress

    Populares

    M谩s de esta categor铆a

    DEJA UNA RESPUESTA

    Por favor ingrese su comentario!
    Por favor ingrese su nombre aqu铆

    Este sitio usa Akismet para reducir el spam. Aprende c贸mo se procesan los datos de tus comentarios.