¿Está buscando una manera de agregar o eliminar espacios en blanco entre bloques de WordPress?
Agregar o eliminar espacios en blanco 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 cómo agregar o eliminar espacios en blanco entre bloques de WordPress, paso a paso.
¿Por qué agregar o eliminar espacios en blanco entre bloques de WordPress?
WordPress facilita la creación de páginas y publicaciones personalizadas con el editor de bloques integrado de WordPress.
Sin embargo, puede notar que cuando agrega ciertos bloques, hay demasiado o muy poco espacio. Al agregar o eliminar espacios en blanco entre sus bloques de WordPress, puede crear diseños de página personalizados exactamente como desee.
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.
Dicho esto, veamos cómo agregar o eliminar espacios en blanco entre los bloques de WordPress en su sitio web. Simplemente use los enlaces rápidos a continuación para ir directamente al método que desea usar:
Vídeotutorial
Suscríbete a WPBeginner
Si prefiere instrucciones escritas, siga leyendo.
Método 1: agregar espacio en blanco entre bloques de WordPress con el editor de bloques
La forma más sencilla de agregar espacios en blanco entre sus bloques es utilizar el editor de bloques de WordPress. Hay un bloque de espaciado incorporado que le permite agregar espacios en blanco con un par de clics.
Para usar esto, abra la publicación o página que desea editar y haga clic en el botón Agregar bloque ‘Más’.
Luego, busque ‘Espaciador’ y seleccione el bloque.
Esto insertará automáticamente un espaciador en la página.
Puedes hacerlo más grande o más pequeño arrastrando el bloque hacia arriba o hacia abajo.
Una vez que haya terminado, simplemente haga clic en el botón ‘Actualizar’ para guardar los cambios.
Si está utilizando un tema de bloques, también puede utilizar el editor de sitio completo para agregar espacio entre bloques en sus plantillas de temas.
Además de insertar bloques espaciadores, también puedes aumentar el margen de tus bloques para dejar más espacio entre ellos y otros bloques.
Para obtener más detalles, puede consultar nuestra guía sobre relleno versus margen en WordPress.
Ten en cuenta que este método sólo te permite agregar espacio entre bloques. Para eliminar espacio, deberá utilizar uno de los otros métodos siguientes.
Método 2: agregar o eliminar espacios en blanco entre bloques de WordPress agregando CSS personalizado
Otra forma de agregar y eliminar espacios en blanco entre tus bloques es agregando código CSS personalizado a tu tema.
Si no ha hecho esto antes, le recomendamos que consulte nuestra guía sobre cómo agregar fácilmente CSS personalizado a su sitio de WordPress antes de comenzar.
A continuación, abra la página o publicación que desea editar y luego haga clic en el bloque donde desea agregar o eliminar el espacio en blanco.
Luego, haga clic en el elemento del menú “Bloquear” en el panel de opciones de la derecha.
Después de eso, desplácese hacia abajo hasta el menú desplegable “Avanzado” y haga clic en él. Esto muestra un conjunto de opciones adicionales para ese bloque.
Luego, en el cuadro ‘Clases CSS adicionales’, simplemente agregue el siguiente código:
Este fragmento crea una nueva clase CSS específicamente para ese bloque.
Después de eso, haga clic en el botón ‘Actualizar’ para guardar los cambios.
A continuación, navegue hasta Apariencia » Personalizar para abrir el personalizador de temas de WordPress.
Luego, desplácese hacia abajo y haga clic en la opción de menú “CSS adicional”.
Esto abre un campo donde puede agregar código CSS.
A continuación, pegue el siguiente fragmento de código en el cuadro:
.add-remove-bottom-space {
margin-bottom: 0;
}
Este fragmento de código establece el margen inferior en cero y eliminará el espacio en blanco del bloque.
Si desea agregar espacio en la parte inferior, simplemente cambie el ‘0’ a algo como ’20px’.
Una vez que haya realizado los cambios, asegúrese de hacer clic en el botón “Publicar” para publicar los cambios.
Guardar código CSS personalizado usando un complemento
Al agregar CSS personalizado al personalizador de temas de WordPress, solo se guardará el tema que estás usando actualmente. Si cambia el tema de WordPress, deberá copiar el código CSS a su nuevo tema.
Si desea que se aplique su CSS personalizado sin importar el tema que esté usando, necesitará usar un complemento.
Código WPC es el mejor complemento de fragmentos de código que le permite agregar PHP, CSS y más a su sitio web de WordPress sin romper nada.
Lo primero que debes hacer es instalar y activar el complemento gratuito de WPCode. Para obtener más detalles, consulte nuestra guía sobre cómo instalar un complemento de WordPress.
Tras la activación, debe ir a Fragmentos de código » + Agregar fragmento desde el panel de administración de WordPress.
Aquí, coloque el cursor sobre la opción “Agregar su código personalizado (nuevo fragmento)” en la biblioteca de fragmentos de código y haga clic en el botón “Usar fragmento”.
Debe ingresar un nombre para su fragmento de código y luego pegar su CSS personalizado en el cuadro “Vista previa del código”.
Asegúrese de seleccionar “Fragmento CSS” en el menú desplegable “Tipo de código”.
Luego, solo asegúrese de hacer clic en el control deslizante en la parte superior para “Activar” su fragmento y presione “Guardar fragmento” para ejecutarlo en su sitio web de WordPress.
Para obtener más detalles, puede consultar nuestra guía sobre cómo agregar fácilmente CSS personalizado a su sitio de WordPress.
Alternativamente, puede utilizar el CSS personalizado simple enchufar. Tras la activación, simplemente vaya a Apariencia » CSS personalizado y agregue su código CSS personalizado.
Cuando haya terminado, simplemente haga clic en el botón ‘Actualizar CSS personalizado’ para guardar los cambios.
Método 3: agregar o eliminar espacios en blanco entre bloques de WordPress con CSS Hero
Otra forma fácil para principiantes de agregar o eliminar espacios en blanco entre bloques de WordPress es mediante el uso de un complemento CSS personalizado de WordPress. Esto le permite realizar cambios visuales en su blog de WordPress sin editar ningún código CSS.
Recomendamos utilizar el complemento CSS Hero. Le permite editar casi todos los estilos CSS de su sitio de WordPress sin escribir una sola línea de código.
Trato: Los lectores de WPBeginner pueden obtener un 34% de descuento utilizando nuestro código de cupón CSS Hero.
Lo primero que debes hacer es instalar y activar el complemento. Para obtener más detalles, consulte nuestra guía para principiantes sobre cómo instalar un complemento de WordPress.
Tras la activación, debe hacer clic en el botón “Continuar con la activación del producto” para activar el complemento. Encontrarás el botón directamente encima de tu lista de complementos instalados.
Esto lo llevará a una pantalla donde deberá ingresar su nombre de usuario y contraseña. Luego, siga las instrucciones que aparecen en pantalla y será redirigido nuevamente a su panel de control una vez que se verifique su cuenta.
A continuación, 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 ejecutándose encima. El complemento utiliza un editor visual, por lo que podrá realizar cambios en tiempo real.
Cuando haces clic en cualquier elemento de tu página, aparecerá una barra de herramientas en el lado izquierdo de la página para que puedas realizar personalizaciones.
Para eliminar o agregar espacio en blanco entre sus bloques, simplemente haga clic en la opción “Espaciamientos” 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 en blanco.
Cualquier cambio que realice se mostrará automáticamente en su página.
Una vez que haya terminado de realizar cambios, debe hacer clic en el botón “Guardar” para implementar los cambios.
Método 4: agregar o eliminar espacios en blanco entre bloques de WordPress con SeedProd
SemillaProd es el mejor creador de páginas de arrastrar y soltar, utilizado por más de 1 millón de sitios web.
Puede utilizar la biblioteca de más de 150 plantillas para crear páginas 404 personalizadas, páginas de ventas, páginas de destino y mucho más. SeedProd incluso se puede utilizar para crear un tema personalizado de WordPress sin escribir ningún código.
Con el generador de arrastrar y soltar, usted tiene control total sobre el diseño de su sitio y puede eliminar o agregar espacio fácilmente a cualquier elemento del sitio web.
Para obtener más información, consulte nuestra guía sobre cómo crear una página personalizada en WordPress.
Mientras personalizas tu página, puedes agregar espacio en cualquier lugar usando el bloque espaciador.
Simplemente arrástrelo y suéltelo en cualquier lugar de la página donde desee agregar más espacio entre bloques.
Luego, puede utilizar el control deslizante para ajustar su altura.
También puedes controlar el espacio entre cualquier bloque. Para hacer eso, simplemente haga clic en cualquier bloque al que desee agregar o eliminar espacio.
Esto abre el panel de opciones a la izquierda. Luego, haga clic en la pestaña ‘Avanzado’.
A continuación, desplácese hacia abajo hasta el menú desplegable “Espaciado” y haga clic en él.
Esto abre un menú donde puede controlar el ‘Margen’. Simplemente ingrese un número en el cuadro del margen inferior para agregar espacio o elimine el número para eliminar cualquier espacio en blanco existente.
Una vez que haya terminado de realizar cambios, haga clic en el botón “Guardar”.
Luego, seleccione el menú desplegable ‘Publicar’ para publicar los cambios.
Esperamos que este artículo te haya ayudado a aprender cómo agregar o eliminar espacios en blanco entre bloques de WordPress. Es posible que también desee ver nuestra guía sobre cómo iniciar su propio podcast y nuestras selecciones de expertos sobre el mejor alojamiento de sitios web gratuito.
