Si alguna vez has intentado mover cosas en WordPress pero no has podido averiguar cómo añadir más espacio, no estás solo. Una de las preguntas más comunes sobre el diseño que recibo es cómo cambiar los márgenes de una página.
Los márgenes ayudan a crear espacio entre bloques, imágenes y secciones. Hacen que tu contenido sea más fácil de leer y que tus páginas se vean más pulidas.
En este tutorial, te guiaré sobre cómo cambiar los márgenes en WordPress, paso a paso y de forma amigable para principiantes.
En esta guía:
¿Qué es un margen en WordPress?
En WordPress, un margen es el espacio alrededor de los bordes de los elementos de la página, separándolo de otros. Estos elementos pueden incluir imágenes, encabezados, widgets y botones, entre otros.
Del mismo modo, los márgenes también se aplican al espacio alrededor de la disposición de una página, como la cabecera, el pie de página y el área de contenido.
Cambiar los márgenes de una página o elemento es una parte crucial del diseño de sitios web y puede afectar drásticamente la funcionalidad y apariencia de tu sitio.
La diferencia entre márgenes y relleno
Los márgenes y el relleno están relacionados con el espaciado en tu diseño, pero cada uno cumple un propósito único.
Los márgenes son los espacios que se encuentran en el exterior de un elemento.
Crean un búfer alrededor de tu contenido, separándolo de otros elementos en la página. Esto puede ayudar a aumentar la legibilidad y organizar tu diseño de manera efectiva.
Por otro lado, el relleno se refiere al espacio que se encuentra en el interior de un elemento.
El relleno se puede pensar como el 'acolchado' entre el contenido (como texto o una imagen) y el borde de su elemento contenedor. Esto a menudo hace que tu contenido sea más agradable a la vista.
En esencia, si deseas una zona de amortiguación alrededor del borde exterior de tu elemento, deberías ajustar el margen. Pero, si es el espaciado dentro de un elemento lo que necesita ajuste, deberás mirar el relleno.
Dicho esto, veamos cómo cambiar los márgenes en WordPress.
Cómo cambiar los márgenes en WordPress con SeedProd
Primero, veamos cómo usar SeedProd para cambiar tus márgenes de WordPress.
SeedProd es uno de los mejores constructores de sitios web de arrastrar y soltar. Con su editor visual, puedes crear páginas personalizadas para tu sitio e incluso crear un tema de WordPress personalizado sin necesidad de codificación.
La configuración de apuntar y hacer clic del constructor de páginas de SeedProd te permite cambiar la configuración de márgenes de cualquier elemento con unos pocos clics.
Para empezar, necesitarás instalar y activar el plugin SeedProd.
Si necesitas ayuda con esto, puedes consultar nuestra guía sobre cómo instalar SeedProd Pro. Te guiará a través del proceso de instalación y cómo activar tu clave de licencia.
Tras la instalación, navega a SeedProd » Landing Pages desde tu panel de WordPress y haz clic en el botón Añadir nueva página de destino.
Ahora verá una biblioteca de plantillas de páginas de destino prediseñadas para usar como punto de partida para su página. Si prefiere empezar desde cero, también hay una plantilla de página en blanco.
Después de elegir una plantilla, póngale un nombre a su página y haga clic en el botón Guardar y empezar a editar la página. Esto iniciará la plantilla dentro del creador de páginas de arrastrar y soltar de SeedProd.
Al abrir la página, verá una vista previa del diseño en el lado derecho y los elementos de la página en el lado izquierdo. Puede agregar cualquier elemento a su página haciendo clic en uno y arrastrándolo a la vista previa.
Además, al hacer clic en un elemento de la vista previa, se abren sus ajustes en la barra lateral izquierda.
En la pestaña 'Avanzado' de cualquier elemento, puede ver más opciones de personalización. Esto incluye opciones para ajustar el espaciado, el relleno, la visibilidad del dispositivo y más del elemento.
En este panel, haga clic para expandir la pestaña Espaciado. Aquí, escriba sus valores personalizados en los campos de margen para cambiar los márgenes de ese elemento.
Haga esto para cada elemento para el que desee cambiar los márgenes. También puede consultar nuestra guía paso a paso para obtener más detalles sobre cómo crear una página de destino en WordPress.
Cuando esté satisfecho con los cambios, guarde y publique su página.
Ahora, puede visitar la página para ver cómo se ven sus nuevos márgenes.
Métodos alternativos para cambiar los márgenes en WordPress
La belleza de WordPress reside en su versatilidad. Si, por alguna razón, no desea o no puede usar SeedProd, no se preocupe.
A continuación, veremos algunos métodos alternativos para cambiar los márgenes en su sitio de WordPress.
Edición de márgenes con el editor de bloques de WordPress
Desde la introducción de Gutenberg, editar los márgenes del sitio se ha vuelto mucho más fácil. No necesita experiencia en codificación ni descargar plugins de WordPress adicionales.
Primero, vaya a Páginas » Todas las páginas desde su panel de WordPress y edite la página con los márgenes que desea cambiar.
A continuación, haga clic en el bloque deseado para abrir el panel de configuración del bloque en la barra lateral derecha. En este ejemplo, queremos cambiar los márgenes del bloque del botón.
En la barra lateral de Configuración, cambie a la pestaña de estilos haciendo clic en su icono. Luego, en la sección de dimensiones, haga clic en la opción de margen para cambiar los márgenes del botón.
Después de realizar sus ajustes, no olvide hacer clic en el botón Actualizar para guardar sus cambios.
Cambiar márgenes en WordPress con código CSS
Para este método, necesitará una comprensión general de HTML y CSS. También requiere que agregue código a su tema de WordPress. Para un repaso, puede consultar esta guía sobre: cómo agregar CSS personalizado en WordPress.
Sin embargo, si se siente cómodo con un poco de codificación, CSS puede brindarle un control sin precedentes sobre el diseño de su sitio.
Identificación de la clase CSS de un elemento
Antes de cambiar los márgenes con CSS, deberás decidir a qué elemento dirigir tu código. La forma más sencilla de hacerlo es utilizando la herramienta de inspección de tu navegador.
Empieza haciendo clic derecho en el elemento de la página para el que deseas personalizar los márgenes. En el menú que aparece, selecciona 'Inspeccionar'. Esto abrirá el panel de herramientas de desarrollo en tu navegador.
Aquí verás el código HTML de tu página web y el CSS de la página. Puedes resaltar el elemento en el que hiciste clic moviendo el cursor del ratón sobre el código.
En la sección 'Estilos' del panel, verás el elemento HTML o la clase CSS a la que dirigir tu CSS personalizado.
En este ejemplo, simplemente necesitamos copiar el siguiente código y cambiar el valor del margen en píxeles:
.wp-block-buttons>.wp-block-button {
display: inline-block;
margin: 0;
}
Para esta guía, cambiaremos el valor a 100px.
Ahora guarda este código en un documento en blanco o en el bloc de notas, y luego pasa al siguiente paso: añadir el código CSS personalizado a tu sitio web.
Añadir y cambiar márgenes con CSS en el Editor del Sitio
Si utilizas un tema de WordPress basado en bloques que admita el editor del sitio de WordPress, puedes añadir tu código CSS al panel CSS adicional.
Para encontrarlo, ve a Apariencia » Editor y cambia a la pestaña Estilos del editor del sitio. A continuación, haz clic en los tres puntos de la barra lateral derecha para ver más ajustes y haz clic en la opción 'CSS adicional'.
En el cuadro que aparece, pega tu CSS personalizado y haz clic en Guardar para guardar tus cambios.
Cuando veas tu sitio web, notarás los cambios de margen inmediatamente.
Cambiar márgenes con CSS usando el Personalizador de Temas
Si estás utilizando un tema clásico de WordPress que no incluye soporte para el Editor del Sitio, puedes añadir tu CSS personalizado utilizando el personalizador de temas de WordPress.
Para ello, navega a Apariencia » Temas y haz clic en Personalizar.
Verás varias opciones aquí, dependiendo del tema que utilices. La opción que necesitas es la etiquetada como CSS adicional.
Pega tu CSS personalizado en el cuadro y verás cómo cambia los márgenes en WordPress en la vista previa en vivo.
Ahora, haz clic en el botón Publicar para guardar tus cambios.
A continuación, más consejos de diseño para WordPress
Cambiar los márgenes en WordPress puede llevar el diseño de tu sitio al siguiente nivel. Ya sea que uses SeedProd o uno de estos métodos alternativos, ahora tienes los conocimientos para hacerlo.
Recuerda, todo buen diseño comienza con una buena maquetación. Por eso, controlar los márgenes de tu sitio web siempre será crucial para lograr un diseño de sitio web receptivo y agradable a la vista.
Para más consejos de diseño para WordPress, consulta nuestras otras guías:
- ¿Cómo hacer que una página ocupe todo el ancho en WordPress?
- Cómo cambiar las fuentes en los temas de WordPress
- Cómo crear fondos animados de Particle.js en WordPress
- Cómo Crear una Barra de Navegación Vertical en WordPress
- Cómo añadir una barra de búsqueda personalizada a WordPress
¡Gracias por leer! Nos encantaría conocer tu opinión, así que únete a la conversación en YouTube, X y Facebook para obtener más consejos y contenido útil para hacer crecer tu negocio.
