Cómo agregar o eliminar espacios entre bloques de WordPress

¿Quieres agregar o eliminar espacios entre los bloques de WordPress?

Agregar o eliminar espacios entre sus bloques de WordPress le brinda más control sobre el diseño de su sitio de WordPress.

En este artículo, le mostraremos paso a paso cómo agregar o eliminar espacios entre los bloques de WordPress.

¿Por qué agregar o eliminar espacios entre los bloques de WordPress?

WordPress facilita la creación de páginas y publicaciones personalizadas con el editor de bloques de WordPress integrado.

Sin embargo, puede encontrar que hay demasiado o muy poco espacio al agregar ciertos bloques. Al agregar o eliminar espacios entre sus bloques de WordPress, puede crear diseños de página personalizados exactamente como lo desea.

Con más control sobre el diseño final de su sitio web de WordPress, puede ofrecer a sus visitantes una mejor experiencia de usuario.

Veamos cómo agregar o eliminar espacios entre los bloques de WordPress en su sitio. Simplemente use los enlaces rápidos a continuación para ir directamente al método que desea usar.

Método 1. Agrega espacios entre los bloques de WordPress usando el editor de bloques

La forma más fácil de agregar espacios entre sus bloques es usar el editor de bloques de WordPress. Tiene un bloque remoto incorporado que le permite agregar espacios con unos pocos clics.

Para usar esto, abra la publicación o página que desea editar y haga clic en el botón más "Agregar bloque".

Luego busque "Espaciador" y seleccione el bloque.

Esto inserta automáticamente un separador en la página.

Puedes hacerlo más grande o más pequeño arrastrando el bloque hacia arriba o hacia abajo.

Cuando haya terminado, haga clic en el botón "Actualizar" para guardar los cambios.

Tenga en cuenta que solo puede agregar espacios entre bloques con este método. Para eliminar espacios, debe usar uno de los otros métodos a continuación.

Método 2: agregue o elimine espacios entre los bloques de WordPress agregando CSS personalizado

Otra forma de agregar y eliminar espacios entre sus bloques es agregar un código CSS personalizado a su tema.

Si aún no lo ha hecho, le recomendamos que revise nuestra guía sobre cómo agregar fácilmente CSS personalizado a su sitio de WordPress antes de comenzar.

Luego abra la página o publicación que desea editar, luego haga clic en el bloque donde desea agregar o eliminar el espacio.

Luego haga clic en el elemento de menú "Bloquear" en la barra de opciones derecha.

Luego, desplácese hacia abajo hasta el menú desplegable Avanzado y haga clic en él. Esto conducirá a un montón de opciones adicionales para este bloque.

Luego agregue el siguiente código en el campo Clases CSS adicionales:

Este fragmento crea una nueva clase de CSS específica para este bloque.

Luego haga clic en el botón "Actualizar" para guardar los cambios.

Luego ve a Apariencia »Personalización para mostrar el personalizador de temas de WordPress.

Luego, desplácese hacia abajo y haga clic en la opción de menú "CSS avanzado".

Aparecerá un campo donde puede agregar el código CSS.

Luego coloque el siguiente fragmento de código en el cuadro.

.add-remove-bottom-space {

 margin-bottom: 0;

}

Este fragmento de código establece el campo inferior en cero y elimina el espacio del bloque. Si desea agregar espacio a continuación, simplemente cambie '0' a algo como '20px'.

Después A medida que realiza sus cambios, asegúrese de hacer clic en el botón Publicar para activar sus cambios.

Guarde el código CSS personalizado con el complemento

Agregar CSS personalizado al personalizador de temas de WordPress guarda solo para el tema utilizado actualmente. Si cambia el tema de WordPress, debe copiar el código CSS en su nuevo tema.

Si desea que su CSS personalizado se aplique independientemente del tema que use, debe usarlo CSS personalizado simple enchufar.

Primero debe instalar y activar el complemento. Consulte nuestra guía de instalación del complemento de WordPress para obtener más detalles.

Una vez activado, simplemente vaya a Apariencia »CSS personalizado y agregue su código css personalizado.

Cuando haya terminado, haga clic en el botón Actualizar CSS personalizado para guardar los cambios.

Método 3. Agrega o elimina espacios entre bloques de WordPress usando CSS Hero

Otra forma conveniente para que los principiantes agreguen o eliminen espacios entre los bloques de WordPress es usar un complemento CSS de WordPress personalizado. Esto le permite realizar cambios visuales en su blog de WordPress sin editar ningún código CSS.

Recomendamos usar el complemento CSS Hero. Con él, puede editar casi cualquier estilo CSS en su sitio de WordPress sin tener que escribir una sola línea de código.

acción: Los lectores de WPBeginner pueden recibir un 34% de descuento usando nuestro código promocional CSS Hero.

Primero debe instalar y activar el complemento. Consulte nuestra guía para principiantes sobre cómo instalar el complemento de WordPress para obtener más detalles.

Después de la activación, debe hacer clic en el botón "Continuar con la activación del producto" para activar el complemento. Puede encontrar el botón justo encima de la lista de complementos instalados.

Esto lo llevará a una pantalla donde debe ingresar su nombre de usuario y contraseña. Luego, siga las instrucciones en pantalla y será redirigido a su panel de control una vez que se haya verificado su cuenta.

Luego, debe abrir la página o publicación que desea editar y luego hacer clic en el botón "CSS Hero" en la parte superior de la barra de herramientas de administración de WordPress.

Esto abrirá la misma página con CSS Hero. El complemento utiliza un editor visual para que pueda realizar sus cambios en tiempo real.

Al hacer clic en cualquier elemento de su página, aparecerá una barra de herramientas en el lado izquierdo de la página donde puede realizar ajustes.

Para eliminar o agregar espacios entre sus bloques, simplemente haga clic en la opción Distancia y luego desplácese hacia abajo hasta la sección Margen inferior.

Aquí puede mover el control deslizante hacia arriba o hacia abajo para agregar o eliminar espacios.

Cualquier cambio que realice se refleja automáticamente en su página.

Cuando haya terminado con los cambios, deberá hacer clic en el botón "Guardar" para activar sus cambios.

Método 4. Agrega o elimina espacios entre bloques de WordPress con SeedProd

Producto de semilla es el mejor diseñador de páginas de arrastrar y soltar utilizado por más de 1 millón de sitios web.

Puede usar la biblioteca de más de 150 plantillas para crear páginas 404 personalizadas, páginas de ventas, páginas de destino y más. SeedProd incluso se puede usar para crear un tema de WordPress personalizado sin escribir código.

El creador de arrastrar y soltar le brinda control total sobre el diseño de su sitio web, y puede eliminar o agregar espacios fácilmente a cualquier elemento de su sitio web.

Consulte nuestra guía para crear una página de WordPress personalizada para obtener más información.

A medida que personalizas tu página, puedes agregar espacio donde quieras usando el divisor.

Simplemente arrástrelo y suéltelo en cualquier lugar de la página donde desee agregar más espacio entre bloques.

A continuación, puede utilizar el control deslizante para ajustar la altura.

También puedes controlar la distancia entre cada bloque. Para hacer esto, simplemente haga clic en cada bloque que desee agregar o eliminar espacios.

Esto abrirá el panel de opciones a la izquierda. Luego haga clic en la pestaña "Avanzado".

Luego, desplácese hacia abajo hasta el menú desplegable Distancia y haga clic en él.

Esto abrirá un menú donde puede controlar el Margen. Simplemente ingrese un número en el límite inferior para agregar espacios, o elimine el número para eliminar los espacios existentes.

Cuando haya terminado con los cambios, haga clic en el botón "Guardar" y seleccione el menú desplegable "Publicar" para publicar sus cambios.

Esperamos que este artículo te haya ayudado a aprender cómo agregar o eliminar espacios entre los bloques de WordPress. También puede consultar nuestra guía para lanzar su propio podcast y nuestras opciones de expertos para el mejor alojamiento web gratuito en comparación.