Cómo cambiar los márgenes en WordPress (Guía para principiantes)

¿Quieres cambiar los márgenes en WordPress?

Los márgenes son uno de los elementos de diseño más importantes que pueden mejorar significativamente la experiencia del usuario y el atractivo estético de cualquier diseño. Añaden espacio entre los elementos para que tu contenido sea legible y todo sea fácilmente identificable.

En esta guía para principiantes, le mostraremos cómo añadir y cambiar márgenes en WordPress. Le mostraremos varios métodos para cambiar los márgenes en diferentes áreas de su sitio web WordPress.

¿Qué son los márgenes en WordPress y el diseño web?

Los márgenes son el espacio que se añade alrededor de una página web o de otros elementos dentro de una página web.

Piense en una página web típica como un trozo de papel vacío. Los márgenes son el espacio en blanco alrededor de los bordes del papel.

El objetivo de utilizar márgenes es garantizar que los elementos de una página web no se vean aplastados unos contra otros.

Del mismo modo, se pueden utilizar márgenes alrededor de distintos elementos dentro de la estructura / disposición / diseño / plantilla de la página.

Por ejemplo, puede cambiar los márgenes alrededor de las imágenes para que no estén demasiado cerca del texto o añadir un margen para dejar espacio entre su área de contenido y la barra lateral.

En este artículo vamos a tratar muchos temas. Enlaza los siguientes enlaces para saltar a la sección que desees.

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

Tanto el margen como el relleno se utilizan para añadir espacio en blanco en el diseño web. Sin embargo, se utilizan de forma muy diferente.

Los márgenes añaden espacio vacío fuera de un elemento, y el relleno añade espacio vacío dentro de él.

Los márgenes se utilizan para añadir espacio fuera de un elemento. Permiten dejar espacio suficiente entre los elementos de una página web.

Ejemplos:

1. Añadir márgenes para aumentar el espacio entre una imagen y el texto de un artículo.

2. Ajustar los márgenes para añadir espacio entre las secciones, como la cabecera y el área de contenido.

El relleno, sin embargo, se utiliza para añadir espacio de amortiguación entre el contenido y los bordes de una caja o elemento.

Ejemplos:

1. Ajustar el relleno para aumentar el espacio de amortiguación en los botones de llamada a la acción.

2. Aumentar el relleno en una columna de texto

Tanto el relleno como los márgenes se utilizan mucho en el diseño web.

Utilizar espacios vacíos añade respiro a cualquier diseño, lo que lo hace más fácil de usar y elegante.

¿Por qué puede ser necesario añadir o cambiar los márgenes en WordPress?

Los márgenes son un aspecto crucial del diseño web. Hacen que su sitio web resulte agradable y fácil de usar para los usuarios.

Los temas de WordPress se encargan del diseño de tu sitio web. La mayoría de ellos ya hacen un excelente trabajo de establecer reglas CSS para asegurar un montón de espacio en blanco utilizando márgenes en toda la estructura / disposición / diseño / plantilla de su tema.

Sin embargo, de vez en cuando, puede que necesite añadir márgenes para ajustar las cosas.

Por ejemplo, puede que no le guste el margen alrededor de sus menús de navegación o que quiera añadir más margen alrededor de sus botones de llamada a la acción.

Del mismo modo, a veces puede tener la sensación de que los elementos están demasiado cerca unos de otros o demasiado separados.

En ese caso, tendrá que cambiar los márgenes en WordPress usted mismo.

¿Cómo añadir márgenes en WordPress?

Hay muchas formas de añadir márgenes en WordPress.

Dependiendo de dónde quieras añadir el margen y de las opciones disponibles en tu tema de WordPress, tendrás que elegir el método que más te convenga.

Empecemos con las opciones incorporadas por defecto en el propio WordPress, ya que son las más sencillas para los principiantes.

Cómo añadir márgenes en WordPress con el editor de sitios completo

Si usas un tema basado en bloques con soporte completo para el editor de sitios, puedes usar el editor de sitios integrado para cambiar los márgenes en cualquier parte de tu sitio web WordPress.

En primer lugar, debe visitar Apariencia ” Editor para iniciar el editor del sitio.

Una vez dentro del editor del sitio, haga clic para elegir una plantilla de la columna de la izquierda o haga clic en cualquier lugar de la ventana de vista previa.

A continuación, haga clic en el área o elemento en el que desee modificar los márgenes. En la columna de la derecha, verá la opción de ajustar los márgenes en la pestaña Estilo.

A medida que ajuste los márgenes, el editor resaltará el área del margen.

También puede añadir márgenes en la parte superior, inferior, derecha o izquierda.

Añadir márgenes en el editor de bloques

Si está trabajando en una entrada de blog o en una página, utilizará el editor de bloques.

El editor de bloques de WordPress le permite añadir y cambiar los márgenes de varios bloques.

Basta con hacer clic en el bloque en el que desea añadir/ajustar los márgenes. En los ajustes del bloque, cambie a la pestaña Estilo y desplácese hasta la opción Dimensiones o Márgenes.

Añadir márgenes en WordPress usando SeedProd

SeedProd es el mejor plugin maquetador de páginas para WordPress del mercado. Te permite crear páginas personalizadas para tu sitio web fácilmente. Incluso puedes usarlo para crear un tema de WordPress personalizado desde cero.

El intuitivo maquetador de páginas de arrastrar y soltar de SeedProd le permite ajustar fácilmente los márgenes de cualquier elemento dentro del editor.

Primero, necesitas instalar y activar el plugin SeedProd. Para más detalles, consulte nuestro tutorial sobre cómo instalar un plugin de WordPress.

A continuación, debe visitar SeedProd ” Páginas de destino y hacer clic en el botón Añadir nueva página de destino.

A continuación, se le pedirá que elija una plantilla para su página.

SeedProd viene con docenas de plantillas ya preparadas que puede utilizar como punto de partida, o puede empezar con una plantilla en blanco.

Haga clic para elegir su plantilla y, a continuación, proporcione un nombre para su página de destino.

Esto iniciará el maquetador de páginas de SeedProd.

Verás una vista previa de tu página a la derecha. Y los elementos que puedes añadir a tu página en la columna de la izquierda.

Puede señalar y hacer clic en cualquier elemento de la página para editarlo.

Al hacer clic en un elemento, lo seleccionarás y verás sus opciones en la columna de la izquierda. Desde aquí, cambia a la pestaña Avanzado y haz clic en la opción Espaciado.

Desde aquí puede modificar los márgenes y el relleno del elemento seleccionado.

Cuando termine de editar su página, no olvide hacer clic en el botón Guardar y publicar de la esquina superior derecha.

Después, puede visitar su sitio web para ver los cambios en acción.

Cambiar los márgenes con Thrive Architect

Thrive Architect es una de las mejores herramientas de maquetador de páginas de WordPress que te permite utilizar una interfaz de arrastrar y soltar para diseñar páginas de WordPress.

Viene con más de 300 plantillas que puedes utilizar como punto de partida. Además, también se puede utilizar para editar sus entradas y páginas de WordPress, tomando prestado la estructura / disposición / diseño / plantilla de su tema de WordPress existente.

Para instalar Thrive Architect, primero tendrás que acceder a tu cuenta en el sitio web de Thrive Themes.

A partir de ahí, tienes que descargar e instalar el plugin Thrive Product Manager. Para más detalles, consulta nuestro tutorial sobre cómo instalar un plugin de WordPress.

Una vez activado, deberá visitar la página Thrive Product Manager.

Haz clic en el botón “Acceder a mi cuenta” para conectar WordPress a tu cuenta de Thrive Themes.

Una vez conectado, verás la lista de productos Thrive Themes disponibles en tu cuenta.

Sigue adelante y haz clic en la casilla de verificación “Instalar producto” debajo de Thrive Architect, y luego haz clic en el botón “Instalar productos seleccionados” en la parte inferior.

Thrive Product Manager instalará ahora el plugin Thrive Architect por ti.

Después de eso, puedes editar o crear una nueva entrada o página de WordPress y hacer clic en el botón Editar con Thrive Architect.

Thrive Architect le pedirá que elija una plantilla si se trata de una página nueva.

Puede utilizar la plantilla de su tema para crear una página normal o una plantilla de página de destino preconstruida.

Si elige la opción de página de destino preconstruida, el plugin le mostrará un montón de plantillas para elegir.

Sólo tienes que hacer clic para seleccionar el que más se parezca a lo que quieres crear.

Ya sea una página normal (usando los estilos de tu tema) o una página de destino, el maquetador de páginas de Thrive Architect tendría las mismas características.

Verás una vista previa de tu página con una barra de herramientas a la derecha y un panel de ajustes a la izquierda.

Puede señalar un elemento haciendo clic en él para seleccionarlo. O hacer clic en el botón [+] de la barra de herramientas para añadir un nuevo elemento.

Al hacer clic para seleccionar y editar un elemento, sus ajustes aparecerán en la columna de la izquierda.

Desde aquí, haga clic en la pestaña Disposición y posición para cambiar los márgenes y el relleno.

Verás una representación visual del margen y el relleno.

Pase el ratón por cualquier lado del margen y arrastre el tirador para aumentar o reducir el margen.

Puede repetir el proceso para cambiar los márgenes en cualquiera de los cuatro lados.

Una vez que haya terminado, no olvide hacer clic en el botón Guardar trabajo y, a continuación, seleccione la opción Guardar y salir del editor de entradas.

Ahora puede hacer clic en el botón Publicar o Guardar para guardar su entrada o página de WordPress.

Cómo cambiar los márgenes en WordPress con código CSS

Este método requiere que añadas código CSS a tu tema de WordPress. También necesitarás conocimientos básicos de HTML y CSS.

Sin embargo, este método le ofrece más flexibilidad, ya que puede elegir manualmente la zona en la que desea añadir o ajustar los márgenes.

Añadir y cambiar los márgenes utilizando CSS personalizado en el tema de WordPress

WordPress te permite guardar CSS personalizado en las opciones de tu tema de WordPress. Sin embargo, dependiendo de su tema de WordPress, hay varias maneras de hacerlo.

Antes de añadir o modificar márgenes mediante CSS, es posible que deba averiguar a qué elemento debe dirigirse su código CSS.

Por ejemplo, si desea cambiar los márgenes alrededor del cuerpo de la página, puede utilizar el siguiente código:

body { 
margin:50px; 
}

La forma más sencilla de saber a qué elemento debe dirigirse es utilizar la herramienta Inspeccionar del navegador / explorador.

Abra su sitio web en una nueva pestaña del navegador y pase el ratón por encima del elemento cuyos márgenes desea modificar. A continuación, seleccione Inspeccionar en el menú del navegador.

Esto dividirá la pantalla de su navegador, y verá el código HTML y CSS detrás de la página.

Puede pasar el ratón por encima del código y su navegador resaltará la zona afectada por él.

En el código, puede ver el elemento HTML o la clase CSS a la que debe dirigirse con su CSS personalizado.

Incluso puedes probar tus márgenes aquí para ver una vista previa de cómo quedarán.

Sin embargo, estos cambios no se guardan en su tema y desaparecerán cuando recargue o cierre la pestaña del navegador.

Vamos a repasar las diferentes formas en las que puedes guardar este CSS personalizado en WordPress.

Uso de CSS personalizado para cambiar los márgenes en el editor del sitio

Si está utilizando un tema de bloques con soporte completo para el editor de sitios. A continuación te explicamos cómo añadir CSS personalizado a tu tema.

En primer lugar, vaya a la página Apariencia ” Editor para iniciar el editor del sitio y, a continuación, cambie al panel Estilos.

En la parte inferior del panel Estilos, haga clic en la pestaña CSS adicional.

Aparecerá un editor de texto en el que podrá añadir su código CSS personalizado. Su código CSS se aplicará inmediatamente y podrá ver los cambios en pantalla.

Cuando estés satisfecho con los cambios, no olvides hacer clic en el botón Guardar para guardar los cambios.

Añadir márgenes con CSS en el Personalizador de temas

Si utiliza un tema clásico (sin soporte para el editor de sitios), puede guardar su CSS personalizado en el personalizador de temas.

Vaya a la página Apariencia ” Personalizar para iniciar el personalizador de temas.

El Personalizador mostrará diferentes opciones dependiendo de su tema de WordPress.

Debe hacer clic en la pestaña CSS adicional para ampliarla.

La pestaña se deslizará para mostrarle un sencillo cuadro donde podrá añadir su CSS personalizado.

En cuanto añada una regla CSS válida, podrá verla aplicada en el panel de vista previa en directo de su sitio web.

Cuando esté satisfecho con los cambios, haga clic en el botón Publicar para guardarlos.

Cambiar márgenes con código CSS personalizado usando WPCode

La forma más fácil de añadir código CSS personalizado en WordPress es utilizando el plugin WPCode.

Es el mejor plugin de fragmentos de código para WordPress que te permite añadir cualquier código CSS/HTML/PHP/JavaScript a tu sitio web WordPress sin romperlo.

La ventaja de usar WPCode es que no perderás tus cambios CSS al cambiar de tema en WordPress.

Nota: También existe una versión gratuita de WPCode que puedes utilizar.

Lo primero que tienes que hacer es instalar y activar el plugin WPCode. Para más detalles, consulta nuestro tutorial sobre cómo instalar un plugin de WordPress.

Una vez activado, vaya a la página Fragmentos de código ” + Añadir nuevo.

Lleve el ratón a la opción “Añadir su código personalizado (nuevo fragmento)” de la biblioteca de fragmentos de código y haga clic en el botón “Usar fragmento”.

A continuación, en la parte superior de la página, añade un título para tu fragmento de código CSS personalizado. Puede ser cualquier cosa que te ayude a identificar el código.

A continuación, escriba o pegue su CSS personalizado en el cuadro “Vista previa del código” y establezca el “Tipo de código” eligiendo la opción “Fragmento de código CSS” en el menú desplegable.

Por ejemplo, si desea añadir o cambiar los márgenes alrededor de todo el cuerpo de la página web, puede utilizar el siguiente código CSS:

body { 
margin:50px;
}

A continuación, desplácese hacia abajo hasta la sección “Inserción” y seleccione el método “Inserción automática” para ejecutar el código en todo el sitio de WordPress.

Si solo quieres ejecutar el código en determinadas páginas o entradas, puedes elegir el método ‘Shortcode’.

Vuelve a la parte superior de la página y activa el conmutador.

Por último, haga clic en el botón “Guardar fragmento de código” para guardar los cambios.

Ahora puede visitar su sitio web para ver su CSS personalizado en acción.

Esperamos que este artículo te haya ayudado a aprender cómo añadir o cambiar márgenes en WordPress. Puede que también quieras ver nuestra completa hoja de trucos para el desarrollo de temas de WordPress o echar un vistazo a nuestra guía sobre cómo personalizar temas de WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.