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

Cambiar los márgenes en WordPress es una forma sencilla de mejorar el diseño de su sitio y la experiencia del usuario. Los márgenes crean espacio entre los elementos, haciendo que tu contenido sea más legible y visualmente atractivo.

Como buena práctica general, siempre utilizamos muchos márgenes y espacios en los diseños de nuestros sitios web. Hemos observado que influye positivamente en la participación de los usuarios en nuestras páginas y contenidos.

En esta guía para principiantes, le mostraremos cómo añadir y ajustar márgenes en WordPress. Aprenderás diferentes métodos para cambiar los márgenes en varias áreas de tu 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 mucha información. 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.

Veamos ahora algunos ejemplos de cuándo utilizar márgenes.

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.

Estos son algunos ejemplos de casos en los que puede ser conveniente utilizar más relleno.

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.

Para más detalles, consulte nuestro tutorial sobre la diferencia entre relleno y márgenes en WordPress.

¿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 parezca agradable y fácil de usar.

Realizamos pruebas A/B exhaustivas en todos nuestros sitios web para entender cómo interactúan los usuarios con un diseño. Una y otra vez, los resultados demuestran que añadir márgenes tiene un gran efecto en las conversiones.

Cuando se crea un diseño más limpio y organizado, es más probable que los usuarios permanezcan más tiempo en el sitio y completen las acciones deseadas.

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.

Dicho esto, puede que de vez en cuando tenga que 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 sitio 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 ir a 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 permite añadir y cambiar los márgenes de varios bloques.

Basta con hacer clic en el bloque en el que desee 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 los botones “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.

Incluye más de 300 plantillas que puedes utilizar como punto de partida. Además, también puede utilizarlo 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’ o ‘Lanzar 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 eliges la opción ‘Página de destino prefabricada’, el plugin te mostrará un montón de plantillas entre las que 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 sitúe el ratón sobre el elemento cuyos márgenes desea modificar. A continuación, haz clic con el botón derecho y selecciona “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és satisfecho con los cambios, haz 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.

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 aprender cómo poner imágenes una al lado de la otra en WordPress o cómo añadir subrayado y justificar botones de texto en WordPresss.

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.