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 tu sitio. Los márgenes crean espacio entre los elementos, haciendo que tu contenido sea más legible y visualmente atractivo.

Como una buena práctica general, siempre usamos márgenes y espaciado al diseñar nuestros sitios de WordPress. Hemos notado que tiene un impacto positivo en cómo los usuarios interactúan con nuestras páginas web y contenido.

En esta guía para principiantes, te mostraremos cómo agregar y ajustar márgenes en WordPress. Te enseñaremos diferentes métodos para cambiar los márgenes en varias áreas de tu sitio web de 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 u otros elementos dentro de una página web.

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

El propósito de usar márgenes es asegurar que los elementos dentro de una página web no se vean apretados juntos.

De manera similar, los márgenes se pueden usar alrededor de diferentes elementos dentro del diseño de la página.

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

En este artículo, cubriremos mucha información. Haz clic en los enlaces a continuación para saltar a cualquier sección que desees.

• ¿Cuál es la diferencia entre margen y relleno?
• ¿Por qué podrías necesitar agregar o cambiar márgenes en WordPress?
• ¿Cómo agregar márgenes en WordPress?
• Agregar márgenes en WordPress usando el editor de sitio completo
• Agregar márgenes en el editor de bloques
• Agregar márgenes en WordPress usando SeedProd
• Cambiar márgenes usando Thrive Architect
• Cambiar márgenes en WordPress usando código CSS
• Agregar y cambiar márgenes usando CSS personalizado en temas de WordPress
• Usar CSS personalizado para cambiar márgenes en el Editor del sitio
• Agregar márgenes con CSS en el Personalizador de temas
• Cambiar márgenes con código CSS personalizado usando WPCode
• Preguntas frecuentes sobre márgenes en WordPress

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

Margen y relleno se usan para agregar espacio en blanco en el diseño web. Sin embargo, se usan de manera muy diferente.

Los márgenes agregan espacio vacío fuera de un elemento, y el relleno agrega espacio vacío dentro de él.

Los márgenes se usan para agregar espacio fuera de un elemento. Permiten asegurar que haya suficiente espacio entre los elementos en una página web.

Ahora, veamos algunos ejemplos de cuándo usar márgenes.

1. Agregar márgenes para aumentar el espacio entre una imagen y el texto en un artículo.

2. Ajustar márgenes para agregar espacio entre secciones, como el encabezado y el área de contenido.

El relleno (padding), sin embargo, se usa para agregar espacio de amortiguación entre el contenido y los bordes de una caja o elemento.

Aquí hay algunos ejemplos de cuándo podrías querer usar relleno adicional.

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

2. Aumentar el relleno en una columna de texto

Tanto el relleno como los márgenes se usan ampliamente en el diseño web.

Usar espacios vacíos agrega espacio para respirar a cualquier diseño, lo que lo hace más elegante y fácil de usar.

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

¿Por qué podrías necesitar agregar o cambiar márgenes en WordPress?

Los márgenes son un aspecto crucial del diseño web. Hacen que tu sitio web se vea agradable y sea fácil de usar.

En nuestra experiencia ejecutando pruebas A/B, hemos descubierto que el uso estratégico del espacio en blanco a menudo tiene un impacto positivo en las conversiones.

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

Los temas de WordPress se encargan del aspecto de diseño de tu sitio web de WordPress. La mayoría de ellos ya hacen un excelente trabajo al establecer reglas CSS para asegurar mucho espacio en blanco utilizando márgenes en todo el diseño de tu tema.

Dicho esto, es posible que ocasionalmente necesites agregar márgenes para ajustar cosas.

Por ejemplo, es posible que no te guste el margen alrededor de tus menús de navegación o que quieras agregar más margen alrededor de tus botones de llamada a la acción.

De manera similar, a veces puedes sentir que los elementos están demasiado cerca unos de otros o demasiado lejos.

En ese caso, necesitarás cambiar los márgenes en WordPress por tu cuenta.

¿Cómo agregar márgenes en WordPress?

Hay muchas maneras de agregar márgenes en WordPress.

Dependiendo de dónde quieras agregar el margen y las opciones disponibles en tu tema de WordPress, deberás elegir un método que funcione para ti.

Empecemos con las opciones integradas predeterminadas en el propio WordPress, ya que son las más fáciles para principiantes.

Agregar márgenes en WordPress usando el editor de sitio completo

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

Una forma fácil de comprobarlo es mirando tu panel de WordPress. Si ves Apariencia » Editor, entonces tienes un tema basado en bloques. Si en su lugar ves Apariencia » Personalizar, entonces puedes saltar a otro método a continuación.

Primero, necesitas ir a Apariencia » Editor para lanzar el editor del sitio.

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

A continuación, haz clic en el área o elemento donde deseas cambiar los márgenes. En la columna derecha, verás la opción para ajustar los márgenes en la pestaña 'Estilo'.

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

También puedes optar por agregar márgenes a la parte superior, inferior, derecha o izquierda.

Agregar márgenes en el editor de bloques

Si estás trabajando en una publicación de blog o una página, usarás el editor de bloques.

El editor de bloques en WordPress te permite agregar y cambiar márgenes para varios bloques.

Simplemente haz clic en el bloque donde deseas agregar/ajustar márgenes. Debajo de la configuración del bloque, cambia a la pestaña ‘Estilo’ y desplázate hacia abajo hasta la opción ‘Dimensiones’ o ‘Márgenes’.

Agregar márgenes en WordPress usando SeedProd

SeedProd es el mejor plugin constructor de páginas de WordPress del mercado. Te permite crear páginas personalizadas para tu sitio web fácilmente.

Incluso puedes usarlo para crear un tema personalizado de WordPress desde cero.

Varias de nuestras marcas asociadas han diseñado sus sitios web completos con SeedProd, y les encanta usarlo. Para obtener más información, consulta nuestra reseña completa de SeedProd.

El intuitivo constructor de páginas de arrastrar y soltar de SeedProd te 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, consulta nuestro tutorial sobre cómo instalar un plugin de WordPress.

A continuación, debes visitar SeedProd » Landing Pages y luego hacer clic en el botón ‘Agregar Nueva Landing Page’.

Después de eso, se te pedirá que elijas una plantilla para tu página.

SeedProd viene con docenas de plantillas listas para usar que puedes emplear como punto de partida, o puedes empezar con una plantilla en blanco.

Haz clic para elegir tu plantilla y luego proporciona un nombre para tu página de destino.

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

Verás una vista previa en vivo de tu página en el lado derecho. Y los elementos que puedes agregar a tu página en la columna izquierda.

Puedes apuntar y hacer clic en cualquier elemento de la página para editarlo.

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

Puedes cambiar los márgenes y el relleno del elemento seleccionado desde aquí.

Una vez que termines de editar tu página, no olvides hacer clic en el botón 'Guardar' y 'Publicar' en la esquina superior derecha.

Después de eso, puedes visitar tu sitio web para ver los cambios en acción.

Cambiar márgenes usando Thrive Architect

Thrive Architect es un constructor de páginas de WordPress fácil de usar que te permite usar una interfaz de arrastrar y soltar para diseñar páginas de WordPress.

Durante las pruebas, descubrimos que tiene más de 300 plantillas que puedes usar como punto de partida. Además, también puedes usarlo para editar tus publicaciones y páginas de WordPress, tomando prestado el diseño y el estilo de tu tema de WordPress existente.

Para obtener más información, consulta nuestra reseña completa de Thrive Architect.

Para instalar Thrive Architect, primero deberás iniciar sesión en tu cuenta en el sitio web de Thrive Themes.

Desde allí, necesitas descargar e instalar el plugin Thrive Product Manager. Para más detalles, consulta nuestro tutorial sobre cómo instalar un plugin de WordPress.

Tras la activación, debes visitar la página de Thrive Product Manager.

Haz clic en el botón ‘Iniciar sesión en mi cuenta’ para conectar WordPress a tu cuenta de Thrive Themes.

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

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 ahora instalará el plugin Thrive Architect por ti.

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

Thrive Architect te pedirá que elijas una plantilla si es una página nueva.

Puedes usar tu plantilla de tema para crear una ‘Página Normal’ o una plantilla de ‘Página de Aterrizaje Predefinida’.

Si eliges la opción de ‘Página de Aterrizaje Predefinida’, el plugin te mostrará un montón de plantillas para elegir.

Simplemente haz clic para seleccionar la que se parezca a lo que quieres crear.

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

Verás una vista previa en vivo de tu página con una barra de herramientas a la derecha y un panel de configuración a la izquierda.

Puedes apuntar y hacer clic en un elemento para seleccionarlo. O haz clic en el botón de agregar [+] en la barra de herramientas para añadir un nuevo elemento.

Una vez que hagas clic para seleccionar y editar un elemento, su configuración aparecerá en la columna de la izquierda.

Desde aquí, haz clic en la pestaña ‘Layout & Position’ para cambiar los márgenes y el relleno.

Verás una representación visual de los márgenes y el relleno.

Pasa el ratón sobre cualquier lado del margen y arrastra el control para aumentar o disminuir el margen.

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

Una vez que hayas terminado, no olvides hacer clic en el botón Guardar Trabajo y luego seleccionar la opción Guardar y Salir al Editor de Publicaciones.

Ahora puedes hacer clic en el botón ‘Publicar’ o ‘Guardar’ para guardar tu publicación o página de WordPress.

Cambiar márgenes en WordPress usando código CSS

Este método requiere que agregues código CSS a tu tema de WordPress. También necesitarás una comprensión muy básica de HTML y CSS.

Sin embargo, este método te da más flexibilidad ya que puedes elegir manualmente el área donde quieres agregar o ajustar los márgenes.

Agregar y cambiar márgenes usando CSS personalizado en temas de WordPress

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

Antes de agregar o cambiar márgenes usando CSS, es posible que necesites averiguar qué elemento necesitas apuntar con tu código CSS.

Por ejemplo, si quieres cambiar los márgenes alrededor del cuerpo de la página, puedes usar el siguiente código:

body { 
margin:50px; 
}

En este código, ‘px’ significa píxeles, una unidad de medida común para las pantallas. Usar la propiedad margin con un solo valor como este establece el margen para los cuatro lados (superior, derecho, inferior e izquierdo) al mismo tiempo.

La forma más fácil de encontrar qué elemento apuntar es usando la herramienta Inspeccionar en tu navegador.

Abre tu sitio web en una nueva pestaña del navegador y lleva el cursor sobre el elemento alrededor del cual quieres cambiar los márgenes. Después de eso, haz clic derecho y selecciona ‘Inspeccionar’ en el menú del navegador.

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

Puedes mover el cursor sobre el código y tu navegador resaltará el área afectada por él.

En el código, puedes ver el elemento HTML o la clase CSS a la que necesitas apuntar con tu CSS personalizado. Piensa en esto como la ‘dirección’ de la parte específica de la página que quieres estilizar.

Incluso puedes probar tus márgenes aquí para previsualizar cómo se verá.

Sin embargo, estos cambios no se guardan en tu tema y desaparecerán cuando recargues o cierres la pestaña del navegador.

Veamos diferentes maneras en que puedes guardar este CSS personalizado en WordPress.

Usar CSS personalizado para cambiar márgenes en el Editor del sitio

Si estás usando un tema de bloques con soporte para el editor de sitio completo. Entonces, aquí te mostramos cómo puedes agregar CSS personalizado a tu tema.

Primero, ve a la página Apariencia » Editor para lanzar el editor del sitio y luego cambia al panel ‘Estilos’.

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

Esto abrirá un editor de texto donde podrás agregar tu código CSS personalizado. Tu código CSS se aplicará de inmediato y podrás ver los cambios aparecer en pantalla.

Una vez que estés satisfecho con los cambios, no olvides hacer clic en el botón ‘Guardar’ para almacenar tus modificaciones.

Agregar márgenes con CSS en el Personalizador de temas

Si estás utilizando un tema clásico (sin soporte para editor de sitio), entonces puedes guardar tu CSS personalizado en el personalizador del tema.

Ve a la página Apariencia » Personalizar para iniciar el personalizador del tema.

El personalizador mostrará diferentes opciones dependiendo de tu tema de WordPress.

Necesitas hacer clic en la pestaña CSS Adicional para expandirla.

La pestaña se deslizará para mostrarte un cuadro simple donde puedes agregar tu CSS personalizado.

Tan pronto como agregues una regla CSS válida, podrás verla aplicada en el panel de vista previa en vivo de tu sitio web.

Una vez que estés satisfecho con los cambios, haz clic en el botón ‘Publicar’ para almacenar tus modificaciones.

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

La forma más fácil de agregar código CSS personalizado en WordPress es usando el plugin WPCode.

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

Durante nuestra evaluación, lo encontramos muy fácil de usar. Para saber más sobre nuestra experiencia, consulta nuestra reseña detallada de WPCode.

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

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

Tras la activación, ve a la página Fragmentos de código » + Añadir nuevo.

Pasa el cursor del ratón sobre la opción ‘Añadir tu código personalizado (Nuevo fragmento)’ en la biblioteca de fragmentos de código y haz clic en el botón ‘Usar fragmento’.

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

Después de eso, escribe o pega tu CSS personalizado en el cuadro ‘Vista previa del código’ y establece el ‘Tipo de código’ eligiendo la opción ‘Fragmento CSS’ del menú desplegable.

Por ejemplo, si deseas añadir o cambiar los márgenes alrededor del cuerpo de toda la página web, puedes usar el siguiente código CSS:

body { 
margin:50px;
}

A continuación, desplázate hacia abajo hasta la sección ‘Inserción’ y selecciona el método ‘Auto-insertar’ para ejecutar el código en todo tu sitio de WordPress.

Si solo deseas ejecutar el código en páginas o publicaciones específicas, puedes elegir el método ‘Código corto’.

Ahora, necesitas volver a la parte superior de la página y activar el interruptor a ‘Activo’.

Finalmente, haz clic en el botón ‘Guardar fragmento’ para almacenar tus cambios.

Ahora puedes visitar tu sitio web para ver tu CSS personalizado en acción.

Preguntas frecuentes sobre márgenes en WordPress

Aquí tienes algunas preguntas que nuestros lectores hacen frecuentemente sobre cómo añadir márgenes en WordPress:

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

El margen es el espacio fuera del borde de un elemento, lo que crea distancia entre él y otros elementos. El relleno es el espacio dentro del borde de un elemento, creando un cojín entre el contenido y el borde mismo.

Piensa en el margen como el espacio entre los marcos de cuadros en una pared, y el relleno como el passe-partout dentro de un solo marco de cuadro.

Para más información, también puedes consultar nuestra guía sobre relleno vs margen en WordPress.

¿Cómo puedo cambiar los márgenes específicamente para dispositivos móviles?

Para ajustar los márgenes para móviles, puedes usar consultas de medios CSS. Esto te permite aplicar estilos específicos para diferentes tamaños de pantalla.

Plugins de creación de páginas como SeedProd también ofrecen controles específicos para dispositivos, lo que te permite cambiar fácilmente los márgenes para vistas de escritorio, tableta y móvil.

¿Por qué no se muestra la opción de margen para un bloque específico en el editor de WordPress?

No todos los bloques de WordPress tienen controles de margen integrados, ya que esto puede depender de tu tema.

Si la opción falta, puedes envolver el bloque en un bloque de Grupo, que sí tiene configuraciones de margen y relleno. También puedes usar uno de los métodos de CSS personalizado para apuntar directamente al bloque.

¿Es mejor usar un plugin o CSS personalizado para cambiar los márgenes?

Para los principiantes, un plugin de creación de páginas como SeedProd suele ser más fácil porque proporciona una interfaz visual.

Para usuarios más avanzados o para realizar ajustes en todo el sitio, el CSS personalizado te da un control más preciso.

Usar un plugin como WPCode para agregar tu CSS es una excelente opción porque protege tu código cuando actualizas o cambias tu tema.

Esperamos que este artículo te haya ayudado a aprender cómo agregar o cambiar márgenes en WordPress. También es posible que desees aprender cómo poner imágenes una al lado de la otra en WordPress o cómo agregar botones de subrayado y justificación de texto en WordPress.

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.