Cómo agregar o eliminar espacio en blanco entre bloques de WordPress (4 formas)

Un buen espaciado puede marcar una gran diferencia en cómo se ve y se siente tu contenido. Cuando los espacios entre los bloques de WordPress son demasiado ajustados o demasiado amplios, puede afectar la legibilidad y hacer que tu diseño se sienta incompleto.

Hemos visto que muchos usuarios de WordPress se encuentran con los mismos problemas de espaciado una y otra vez, lo cual tiene sentido porque las opciones de espaciado de bloques no siempre son obvias a primera vista.

La buena noticia es que WordPress ofrece varias formas de ajustar el espaciado de bloques sin necesidad de tocar ningún código.

En esta guía, te mostraremos cuatro métodos sencillos para solucionar problemas de espaciado entre bloques de WordPress. Estos consejos te ayudarán a crear contenido que se vea más profesional y mantenga a los lectores interesados.

¿Por qué agregar o quitar espacio en blanco entre bloques de WordPress?

Si bien el editor de bloques de WordPress facilita la creación de contenido, es posible que descubras que el espaciado predeterminado no siempre es perfecto.

Ajustar el espacio en blanco entre tus bloques es una forma sencilla de mejorar el diseño y la experiencia de usuario de tu sitio.

El control adecuado del espaciado de bloques te ayuda a:

• Crea un diseño profesional: Tener control total sobre tu diseño te permite crear un aspecto más pulido y personalizado para tu sitio web.
• Guía la atención del visitante: Usa el espacio para agrupar visualmente el contenido relacionado o para separar diferentes secciones, haciendo tu diseño más intuitivo.
• Mejora la legibilidad: Dividir grandes bloques de texto con espacio en blanco hace que tu contenido sea menos intimidante y más fácil de leer para los visitantes.

Ahora, veamos cómo agregar o eliminar espacio en blanco entre bloques de WordPress en tu sitio web.

Simplemente usa los enlaces rápidos a continuación para ir directamente al método que deseas usar:

• Método 1: Agregar espacio en blanco entre bloques de WordPress con el editor de bloques
• Method 2: Adding or Removing Blank Space Between WordPress Blocks by Adding Custom CSS
• Método 3: Agregar o eliminar espacio en blanco entre bloques de WordPress con CSS Hero
• Método 4: Agregar o eliminar espacio en blanco entre bloques de WordPress con SeedProd
• Preguntas frecuentes sobre el espaciado de bloques

Método 1: Agregar espacio en blanco entre bloques de WordPress con el editor de bloques

La forma más fácil de agregar espacio en blanco entre tus bloques es usando el editor de bloques de Gutenberg. Hay un bloque de espaciador incorporado que te permite agregar espacio en blanco con un par de clics.

Para usar esto, abre la publicación o página que deseas editar y haz clic en el botón 'Más' para agregar un bloque.

Luego, busca 'Espaciador' y selecciona 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 hayas terminado, simplemente haz clic en el botón 'Actualizar' para guardar tus cambios.

Si estás utilizando un tema de bloques, también puedes usar el Editor de Sitio Completo para ajustar el espaciado de los bloques en las plantillas de tu tema.

Consulta nuestra guía para principiantes sobre la edición completa del sitio de WordPress para obtener más información.

Además de insertar bloques Separador, también puedes aumentar el margen de tus bloques para poner más espacio entre ellos y otros bloques. Puedes explorar estas opciones en la barra lateral de configuración del bloque.

También puedes ajustar el relleno del bloque. El relleno es el espacio dentro del borde del bloque, entre el borde y el contenido en sí.

Reducir esto disminuirá el espacio vacío dentro del bloque, lo cual es diferente de ajustar el margen entre bloques.

Ten en cuenta que estos controles de margen y relleno están disponibles con mayor frecuencia en temas de bloque que utilizan el Editor de Sitio Completo y pueden no ser visibles para todos los bloques cuando se utilizan temas clásicos.

Para más detalles, puedes ver nuestra guía sobre relleno vs. margen en WordPress.

También te puede interesar consultar estas guías para obtener más formas de aprovechar al máximo el editor de bloques:

• Cómo usar correctamente el bloque Más en WordPress
• Cómo agregar un salto de línea en WordPress (espaciado de nueva línea)
• Cómo Seleccionar y Usar Bloques Anidados en WordPress
• Cómo agregar contenido de varias columnas en publicaciones de WordPress (no se requiere HTML)

Método 2: Agregar o eliminar espacio en blanco entre bloques de WordPress agregando CSS personalizado

Otra forma de añadir y eliminar espacio en blanco entre tus bloques es añadiendo código CSS personalizado a tu tema.

Si no has hecho esto antes, te recomendamos que eches un vistazo a nuestra guía sobre cómo agregar fácilmente CSS personalizado a tu sitio de WordPress antes de empezar.

A continuación, abre la página o publicación que deseas editar y haz clic en el bloque donde quieres agregar o quitar el espacio en blanco.

Luego, haz clic en el elemento del menú 'Bloque' en el panel de opciones de la derecha.

Después de eso, desplázate hacia abajo hasta el menú desplegable 'Avanzado' y haz clic en él. Esto mostrará un conjunto de opciones adicionales para ese bloque.

En el cuadro 'Clase(s) CSS adicional(es)', escribe el siguiente nombre de clase:

.add-remove-bottom-space

Esta acción le da al bloque un nombre único, lo que te permite apuntarlo con CSS personalizado.

Después de eso, haz clic en el botón 'Actualizar' para guardar tus cambios.

A continuación, navega a Apariencia » Personalizar para abrir el personalizador de temas de WordPress.

Luego, desplázate hacia abajo y haz clic en la opción de menú 'CSS adicional'.

Esto mostrará un campo donde puedes agregar código CSS.

A continuación, pega 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 a cero y eliminará el espacio en blanco del bloque.

Observa el punto (.) antes del nombre. En CSS, el punto se usa para apuntar a cualquier elemento que tenga ese nombre de clase específico.

Si deseas agregar espacio en la parte inferior, simplemente cambia el '0' por algo como '20px'.

Una vez que hayas realizado tus cambios, asegúrate de hacer clic en el botón 'Publicar' para que tus cambios se hagan efectivos. 

Si estás utilizando un tema de bloques, puedes leer nuestra guía sobre cómo solucionar la falta del personalizador de temas en WordPress para saber dónde agregar el código CSS.

Guardar código CSS personalizado usando un plugin

Al agregar CSS personalizado al personalizador de temas de WordPress, solo se guardará para el tema que esté utilizando actualmente. Si cambia el tema de WordPress, entonces necesitará copiar el código CSS a su nuevo tema.

Si desea que su CSS personalizado se aplique sin importar el tema que esté utilizando, necesitará usar un plugin.

WPCode es el mejor plugin de fragmentos de código que le permite agregar PHP, CSS y más a su sitio web de WordPress sin romper nada.

Nosotros mismos usamos WPCode y hemos descubierto que es la forma más fácil y segura de agregar código personalizado. Para obtener más información, consulte nuestra reseña detallada de WPCode.

Lo primero que debe hacer es instalar y activar el plugin gratuito WPCode. Para más detalles, consulte nuestra guía sobre cómo instalar un plugin de WordPress.

Después de la activación, debe ir a Fragmentos de código » + Agregar fragmento desde el panel de administración de WordPress.

Aquí, pase 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 de 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 que su fragmento se ‘Active’ y presione ‘Guardar fragmento’ para ejecutarlo en su sitio web de WordPress.

Para más detalles, puedes ver nuestra guía sobre cómo agregar fácilmente CSS personalizado a tu sitio de WordPress.

Alternativamente, puedes usar el plugin Simple Custom CSS. Al activarlo, simplemente ve a Apariencia » CSS Personalizado y agrega tu código CSS personalizado.

Cuando hayas terminado, solo haz clic en el botón ‘Actualizar CSS Personalizado’ para guardar tus cambios.

Método 3: Agregar o eliminar espacio en blanco entre bloques de WordPress con CSS Hero

Otra forma fácil para principiantes de agregar o eliminar espacio en blanco entre bloques de WordPress es usando un plugin de CSS personalizado para WordPress. Esto te permite hacer cambios visuales en tu blog de WordPress sin editar ningún código CSS.

Recomendamos usar el plugin CSS Hero. Te permite editar casi todos los estilos CSS de tu sitio de WordPress sin escribir una sola línea de código. 

Lo primero que necesitas hacer es instalar y activar el plugin. Para más detalles, consulta nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.

Al activarlo, necesitas hacer clic en el botón ‘Proceder a la activación del producto’ para activar el plugin. Encontrarás el botón directamente encima de tu lista de plugins instalados.

Esto te llevará a una pantalla donde necesitas ingresar tu nombre de usuario y contraseña. Luego, sigue las instrucciones en pantalla y serás redirigido de vuelta a tu panel una vez que tu cuenta sea verificada.

A continuación, debes abrir la página o publicación que deseas editar, luego haz clic en el botón ‘CSS Hero’ en la parte superior de la barra de herramientas de administración de tu barra de herramientas de administración de WordPress.

Esto abrirá la misma página con CSS Hero ejecutándose sobre ella. El plugin utiliza un editor visual, por lo que podrás realizar tus cambios en tiempo real.

Cuando hagas clic en cualquier elemento de tu página, aparecerá una barra de herramientas en el lado izquierdo de la página para que realices personalizaciones.

Para eliminar o agregar espacio en blanco entre tus bloques, simplemente haz clic en la opción ‘Espaciado’ y luego desplázate hacia abajo hasta la sección ‘Margen inferior’.

Aquí puedes mover el control deslizante hacia arriba o hacia abajo para agregar o quitar espacio en blanco.

Cualquier cambio que realices se mostrará automáticamente en tu página.

Una vez que hayas terminado de hacer cambios, deberás hacer clic en el botón ‘Guardar’ para que tus cambios se publiquen. 

Método 4: Agregar o eliminar espacio en blanco entre bloques de WordPress con SeedProd

SeedProd es el mejor constructor de páginas con arrastrar y soltar, utilizado por más de 1 millón de sitios web.

De hecho, hemos utilizado SeedProd en muchos proyectos nosotros mismos, y algunas de nuestras marcas asociadas crearon sus sitios web completos utilizando la herramienta. Para más detalles, consulta nuestra reseña completa de SeedProd.

El plugin tiene una biblioteca de más de 300 plantillas para crear páginas 404 personalizadas, páginas de ventas, páginas de destino y mucho más.

Incluso puedes usarlo para crear un tema personalizado de WordPress sin escribir ningún código.

Con el constructor de arrastrar y soltar, tienes control total sobre el diseño de tu sitio, y puedes eliminar o agregar fácilmente espaciado a cualquier elemento del sitio web.

Para obtener más información, consulta nuestra guía sobre cómo crear una página personalizada en WordPress.

Mientras personalizas tu página, puedes agregar espacio en cualquier lugar utilizando el bloque Espaciador.

Simplemente arrastra y suelta donde quieras agregar más espacio entre bloques.

Luego, puedes usar el control deslizante para ajustar su altura.

También puedes controlar el espaciado entre cualquier bloque. Para hacerlo, simplemente haz clic en cualquier bloque al que quieras agregar o quitar espacio.

Esto abrirá el panel de opciones a la izquierda. Luego, haz clic en la pestaña ‘Avanzado’.

A continuación, desplázate hacia abajo hasta el menú desplegable ‘Espaciado’ y haz clic en él.

Esto abre un menú donde puedes controlar el ‘Margen’. Simplemente ingresa un número en el cuadro de margen inferior para agregar espacio o elimina el número para quitar cualquier espacio en blanco existente.

Una vez que hayas terminado de hacer cambios, haz clic en el botón ‘Guardar’.

Luego, selecciona el menú desplegable ‘Publicar’ para que tus cambios se hagan efectivos.

Tutorial en video

Si no prefieres instrucciones escritas, simplemente mira nuestro video tutorial.

Preguntas frecuentes sobre el espaciado de bloques

Aquí hay algunas preguntas que nuestros lectores hacen con frecuencia sobre cómo agregar o eliminar espacio en blanco entre bloques en WordPress:

¿Cuál es la diferencia entre margen y relleno en WordPress?

Piensa en un bloque como un marco de fotos. El relleno (padding) es el espacio entre la foto y el marco en sí (dentro del borde). El margen es el espacio en la pared entre ese marco de fotos y cualquier otro marco colgado junto a él (fuera del borde).

¿Cómo agrego espacio horizontalmente entre columnas en WordPress?

Los métodos anteriores son principalmente para espaciado vertical. Para ajustar el espacio horizontal, deberías usar el bloque de Columnas de WordPress incorporado.

Después de agregar tus columnas, puedes seleccionar el bloque principal de Columnas y, en la configuración del bloque a la derecha, encontrarás una opción de “Espaciado de bloque” que te permite controlar la separación entre las columnas.

¿Perderé mis cambios de CSS si cambio mi tema de WordPress?

Sí, si agregas el código CSS directamente en el personalizador de tu tema (en Apariencia » Personalizar » CSS adicional), ese código está vinculado al tema. Si cambias de tema, deberás copiar ese código.

Para que tu CSS sea independiente del tema, te recomendamos usar WPCode para agregar tus fragmentos.

Esperamos que este artículo te haya ayudado a aprender cómo agregar o eliminar espacio en blanco entre bloques de WordPress. También puedes consultar nuestra guía sobre revisiones de publicaciones de WordPress y nuestras selecciones expertas de los mejores plugins de bloques de Gutenberg.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.