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 espacios entre elementos para que el contenido sea legible y todo sea fácilmente identificable.

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

Agregar o cambiar márgenes en WordPress

¿Qué son los márgenes en WordPress y Diseño Web?

Los márgenes son el espacio agregado alrededor de una página web u otros elementos dentro de una página web.

Piense 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.

[enlazatom_show_links]

Márgenes alrededor de una páginaMárgenes alrededor de una página

El propósito de utilizar márgenes es garantizar que los elementos dentro de una página web no aparezcan aplastados.

Asimismo, se pueden utilizar márgenes 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 el área de contenido y la barra lateral.

En este artículo cubriremos muchos temas. Haga clic en los enlaces a continuación para ir a la sección que desee.

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

Tanto el margen como el relleno se utilizan para agregar espacios en blanco en el diseño web. Sin embargo, se utilizan de manera muy diferente.

Los márgenes agregan espacio vacío al exterior de un elemento y el relleno agrega espacio vacío al interior del mismo.

Diagrama de margen vs rellenoDiagrama de margen vs relleno

Los márgenes se utilizan para agregar espacio fuera de un elemento. Le ayudan a garantizar que haya suficiente espacio entre los elementos de una página web.

Ejemplos:

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

Agregar un margen entre una imagen y el texto circundante.Agregar un margen entre una imagen y el texto circundante.

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

Aumento de los márgenes en torno a los artículos contenedoresAumento de los márgenes en torno a los artículos contenedores

El relleno, sin embargo, se utiliza para agregar espacio entre el contenido y los bordes de un cuadro o elemento.

Ejemplos:

1. Ajustar el acolchado para aumentar el espacio del cojín en los botones de llamada a la acción.

Relleno para aumentar el espacio en blanco dentro de un botón de llamada a la acciónRelleno para aumentar el espacio en blanco dentro de un botón de llamada a la acción

2. Aumentar el relleno en una columna de texto

Llenar dentro de una columna de textoLlenar dentro de una columna de texto

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

El uso de espacios en blanco añade aliento a cualquier diseño, haciéndolo más fácil de usar y elegante.

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

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

Los temas de WordPress gestionan el aspecto de diseño de su sitio web de WordPress. La mayoría de ellos ya hacen un gran trabajo al establecer reglas CSS para garantizar mucho espacio en blanco utilizando márgenes en el diseño del tema.

Márgenes utilizados en un diseño de sitio web típicoMárgenes utilizados en un diseño de sitio web típico

Sin embargo, en ocasiones, es posible que necesites agregar márgenes para cambiar cosas.

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

Del mismo modo, a veces puedes sentir que los elementos están demasiado juntos o demasiado separados.

En ese caso, tendrás que cambiar los márgenes tú mismo en WordPress.

¿Cómo agregar márgenes en WordPress?

Hay muchas formas de agregar márgenes en WordPress.

Dependiendo de dónde desee agregar margen y las opciones disponibles en su tema de WordPress, deberá elegir el método adecuado para usted.

Comencemos con las opciones predeterminadas integradas en WordPress, ya que son las más fáciles para los principiantes.

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

Si está utilizando un tema basado en bloques con soporte completo para el editor de sitios, puede usar el editor de sitios integrado para cambiar los márgenes en cualquier lugar de su sitio web de WordPress.

Primero debes visitar el Apariencia » Editor para iniciar el editor del sitio.

Inicie el editor del sitioInicie 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 donde desea cambiar los márgenes. En la columna de la derecha verá la opción para ajustar los márgenes en la pestaña Estilo.

Márgenes en el editor del sitio.Márgenes en el editor del sitio.

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

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

Nota: Es posible que la opción de margen no esté disponible para todos los bloques en el editor del sitio. Si no puede ver la opción de margen para un artículo, pruebe con el método alternativo a continuación.

Agregar márgenes en el editor de bloques

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

El editor de bloques de WordPress le permite agregar y editar márgenes para varios bloques.

Simplemente haga clic en el bloque donde desea agregar/ajustar márgenes. En la configuración del bloque, cambie a la pestaña Estilo y desplácese hacia abajo hasta la opción Tamaño o Márgenes.

Agregar márgenes en el editor de bloquesAgregar márgenes en el editor de bloques

Nota: Es posible que la opción de margen no esté disponible para todos los bloques en el editor de contenido. Si no puede ver la opción de margen para un artículo, pruebe con el método alternativo a continuación.

Agregar márgenes en WordPress usando SeedProd

SemillaProd es el mejor plugin de creación de páginas de WordPress del mercado. Le permite crear fácilmente páginas personalizadas para su sitio web. Incluso puedes usarlo para crear un tema personalizado de WordPress desde cero.

SemillaProdSemillaProd

El intuitivo creador 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 archivo. SemillaProd conectar. Para obtener más detalles, consulte nuestro tutorial sobre cómo instalar un plugin de WordPress.

A continuación es necesario visitar el SeedProd » Páginas de destino y luego haga clic en el botón Agregar nueva página de destino.

Agregar una nueva página de destinoAgregar una 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 listas para usar que puedes usar como punto de partida, o puedes comenzar con una plantilla en blanco.

Elige el modeloElige el modelo

Haga clic para elegir su plantilla y luego proporcione un nombre para su página de destino.

Esto iniciará el creador de páginas SeedProd.

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

Creador de páginas SeedProdCreador de páginas SeedProd

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

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

Agregar márgenes en SeedProdAgregar márgenes en SeedProd

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

Una vez que haya terminado de editar su página, no olvide hacer clic en el botón Guardar y publicar en la esquina superior derecha.

SeedProd guarda y publicaSeedProd guarda y publica

A continuación, puede visitar su sitio web para ver los cambios en acción.

Cambiar márgenes usando Thrive Architect

Arquitecto próspero es una de las mejores herramientas de creación de páginas de WordPress que le permite utilizar una interfaz de arrastrar y soltar para diseñar páginas de WordPress.

Viene con más de 200 plantillas que puedes utilizar 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.

Arquitecto prósperoArquitecto próspero

Para instalar Thrive Architect, primero debe iniciar sesión en su cuenta en el sitio web de Thrive Themes.

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

Descargue e instale Thrive Product ManagerDescargue e instale Thrive Product Manager

Después de la activación, debe visitar la página de Thrive Product Manager.

Haga clic en el botón «Iniciar sesión en mi cuenta» para conectar WordPress a su cuenta de Thrive Themes.

Inicie sesión en su cuenta de Thrive ThemesInicie sesión en su cuenta de Thrive Themes

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

Continúe y haga clic en la casilla de verificación «Instalar producto» en Thrive Architect, luego haga clic en el botón «Instalar productos seleccionados» en la parte inferior.

Instalar Thrive ArchitectInstalar Thrive Architect

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

A continuación, puede editar o crear una nueva publicación o página de WordPress y hacer clic en el botón Editar con Thrive Architect.

Lanzar Thrive ArchitectLanzar Thrive Architect

Thrive Architect le pedirá que elija una plantilla si es una página nueva.

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

Elija la opción de plantillaElija la opción de plantilla

Si elige una opción de página de destino predeterminada, el plugin le mostrará una serie de plantillas para elegir.

Simplemente haga clic para seleccionar el que se parezca a lo que desea crear.

Elección del modelo en Thrive Architect Elección del modelo en Thrive Architect

Ya sea una página normal (que utiliza los estilos de su tema) o una página de destino, el creador de páginas de Thrive Architect tendrá la misma funcionalidad.

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

Interfaz de Thrive ArchitectInterfaz de Thrive Architect

Puede señalar y hacer clic en un elemento para seleccionarlo. O haga clic en agregar [+] en la barra de herramientas para agregar un nuevo elemento.

Después de hacer clic para seleccionar y editar un elemento, su configuración aparecerá en la columna de la izquierda.

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

Ajustar márgenes y rellenoAjustar márgenes y relleno

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

Mueva el mouse a cualquier lado del margen y arrastre el controlador para aumentar o disminuir el margen.

arrastre para aumentar o disminuir los márgenesarrastre para aumentar o disminuir los márgenes

Puedes 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 luego seleccionar la opción Guardar y salir en el editor de publicaciones.

Publicar o actualizar publicaciones o páginas de WordPressPublicar o actualizar publicaciones o páginas de WordPress

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

Cambiar márgenes en WordPress usando código CSS

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

Sin embargo, este método le brinda más flexibilidad ya que puede elegir manualmente el área donde desea agregar o ajustar márgenes.

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

WordPress le permite guardar CSS personalizado en las opciones de su tema de WordPress. Sin embargo, dependiendo de su tema de WordPress, existen diferentes formas de hacerlo.

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

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

La forma más sencilla de encontrar a qué elemento apuntar es utilizar la herramienta Inspeccionar en su navegador.

Abra su sitio web en una nueva pestaña del navegador y mueva el mouse sobre el elemento alrededor del cual desea cambiar los márgenes. A continuación, vaya a la derecha y seleccione Inspeccionar en el menú del navegador.

Usando la herramienta de inspecciónUsando la herramienta de inspección

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

Puede mover el mouse sobre el código y su navegador resaltará el área afectada por él.

Elemento objetivoElemento objetivo

En el código puedes ver el elemento HTML o la clase CSS a la que necesitas apuntar con tu CSS personalizado.

También puedes probar tus márgenes aquí para obtener una vista previa de cómo quedará.

Pruebe los márgenes en la herramienta InspeccionarPruebe los márgenes en la herramienta Inspeccionar

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

Veamos varias formas de guardar este CSS personalizado en WordPress.

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

Si está utilizando un tema de bloque con soporte completo para el editor del sitio. Entonces, así es como puedes agregar CSS personalizado a tu tema.

Primero, ve a Apariencia » Editor para iniciar el editor del sitio y luego ir al panel Estilos.

Opción CSS adicional en el editor del sitioOpción CSS adicional en el editor del sitio

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

Aparecerá un editor de texto donde podrá agregar su código CSS personalizado. Su código CSS se aplicará inmediatamente y podrá ver los cambios aparecer en la pantalla.

Vista previa del margen CSSVista previa del margen CSS

Una vez que esté satisfecho con los cambios, no olvide hacer clic en el botón Guardar para almacenarlos.

Agregar márgenes con CSS en el personalizador de temas

Si está utilizando un tema clásico (sin compatibilidad con el editor de sitios), puede guardar su CSS personalizado en el personalizador de temas.

Ir a Apariencia »Personalizar página para comenzar a personalizar el tema.

Inicie el personalizador de temas de WordPressInicie el personalizador de temas de WordPress

El personalizador mostrará diferentes opciones según su tema de WordPress.

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

CSS adicional en el personalizador de temasCSS adicional en el personalizador de temas

La pestaña se desplazará para mostrarle un cuadro simple donde puede agregar su CSS personalizado.

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

Agregar CSS personalizado en el personalizador de temasAgregar CSS personalizado en el personalizador de temas

Una vez que esté satisfecho con sus cambios, haga clic en el botón Publicar para almacenar sus cambios.

Cambie los márgenes con código CSS personalizado usando WPCode

La forma más sencilla de agregar código CSS personalizado en WordPress es utilizar el Código WP conectar.

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

WPCode: el mejor plugin de fragmentos de código de WordPressWPCode: el mejor plugin de fragmentos de código de WordPress

La ventaja de usar WPCode es que no perderá los cambios de CSS cuando cambie su tema de WordPress.

Nota: También hay una versión gratuita de WPCode que puedes usar.

Lo primero que debes hacer es instalar y activar el archivo. Código WP conectar. Para obtener más detalles, consulte nuestro tutorial sobre cómo instalar un plugin de WordPress.

Después de la activación, vaya a Fragmentos de código » + Agregar nuevo página.

Mueva el mouse sobre la opción «Agregar su propio código personalizado (nuevo fragmento)» en la biblioteca de fragmentos de código y haga clic en el botón «Usar fragmento».

Usa el fragmentoUsa el fragmento

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

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

Agregar CSS personalizado en WPCodeAgregar CSS personalizado en WPCode

Por ejemplo, si desea agregar o cambiar márgenes alrededor de todo el cuerpo de su página web, puede usar el siguiente código CSS:

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

Si desea ejecutar el código solo en determinadas páginas o publicaciones, puede elegir el método «Código corto».

Escoge un método de entradaEscoge un método de entrada

Ahora debe volver a la parte superior de la página y configurar el interruptor en «Activado».

Finalmente, haga clic en el botón «Guardar fragmento» para almacenar sus cambios.

Guardar y activar CSSGuardar y activar CSS

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 agregar o cambiar márgenes en WordPress. Es posible que también desee ver nuestra hoja de referencia completa sobre el desarrollo de temas de WordPress o consultar nuestra guía sobre cómo personalizar temas de WordPress.

Preguntas Frecuentes

¿Cómo cambiar los margenes en WordPress?

Para cambiar los márgenes en WordPress, simplemente debes seguir estos pasos: 1. Accede al editor de entradas o páginas de WordPress. 2. Haz clic en el icono … o + que aparece a la derecha de ‘Dimensiones’ en la barra de herramientas. 3. Se desplegará un menú donde podrás elegir la opción ‘Relleno’ o ‘Margen’. 4. Una vez seleccionada la opción deseada, podrás ajustar los márgenes de tu contenido según tus preferencias. Recuerda que esta función puede variar dependiendo del tema y los plugins que estés utilizando en tu sitio web de WordPress.

¿Cómo editar el diseño de una página en WordPress?

Para editar el diseño de una página en WordPress, inicia sesión en tu perfil de WordPress. Luego, haz clic en ‘Mi sitio web’ para abrir la vista de tu página con un menú en la parte superior. Desde ese menú, selecciona la página que deseas editar y haz clic en ‘Editar página’. Desde allí podrás realizar cambios en el diseño de la página.

¿Cómo editar apariencia en WordPress?

Para editar la apariencia en WordPress, puedes acceder a la opción de personalizar desde el menú de Apariencia o desde el botón de Apariencia en la sección de Temas. Al hacerlo, podrás cargar la página de personalizar desde donde podrás realizar cambios en tu tema de WordPress y ver los resultados de manera inmediata.

¿Cómo cambiar el estilo de menú en WordPress?

Para cambiar el estilo de menú en WordPress, sigue estos pasos: 1. Inicia sesión en WordPress. 2. Ve a la pestaña ‘Apariencia’ y selecciona ‘Personalizar’. 3. En el menú de la izquierda, busca y selecciona la opción ‘CSS adicional’. 4. En el campo proporcionado, ingresa el código CSS que desees utilizar para cambiar el estilo del menú. 5. Haz clic en ‘Publicar’ para guardar los cambios y ver el nuevo estilo aplicado al menú. Recuerda que modificar el CSS puede requerir conocimientos básicos de programación y diseño web.

¿Te ha resultado útil??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicado. Required fields are marked *