Personalizar estilos de módulo en el editor de contenido

En la página del sitio web y el editor de páginas de destino, puedes editar el estilo de módulos individuales. En la mayoría de los casos, puedes ajustar el espaciado y el relleno alrededor de tus módulos en la pestaña Estilo para personalizar la posición del módulo en tu página. Si el desarrollador de sitio web que creó la plantilla de tu página incluye opciones de estilo adicionales, verás opciones de estilo adicionales en la pestaña Opciones.

Si usas una plantilla de starter, una plantilla de tema o una plantilla codificada con un área de arrastrar y soltar, también puedes aplicar estilos de fondo a filas, columnas o secciones de tu página.

Nota: editar el estilo de un módulo desde el editor de páginas agregará reglas CSS con etiquetas !important, que pueden anular las reglas en tu hoja de estilo. Para mejores resultados, se recomienda realizar las ediciones CSS directamente a las hojas de estilo adjuntas a tu sitio.   Para personalizar rápidamente estilos de página sin usar ningún código, usa una plantilla de starter o una plantilla de tema.

Antes de comenzar

Las opciones de estilo disponibles dependen del tipo de módulo que estás editando y la plantilla de página que estás usando. El desarrollador de sitio web que creó las plantillas controla las opciones de estilos que aparecen en el editor de páginas.

• Los módulos más comunes tienen opciones de estilo para el margen y el relleno para que puedas ajustar el espaciado y el posicionamiento de tus módulos. Los módulos de formulario tienen más opciones de estilo, incluidas el color de texto y los estilos de borde.
• Los módulos que se repiten varias veces en tu página, como botones o encabezados, normalmente tienen estilos preestablecidos para colores y fuentes que se basan en la hoja de estilo codificada de tu plantilla o en la configuración de tema de tu plantilla.
• Los módulos personalizados no tienen opciones de estilo disponibles en editores de contenido y, en su lugar, deberían editarse en el Administrador de diseño. Si necesitas ayuda con un módulo personalizado, puedes conectar con un Partner de HubSpot para ayudarte con ediciones de diseño.

Personalizar estilos para un módulo

• En tu cuenta de HubSpot, navega a Marketing > Sitio Web > Páginas de destino o Páginas de sitio web.
• En el panel izquierdo, haz clic en la pestaña Contenido y luego selecciona el módulo que deseas editar.
• Haz clic en la pestaña Estilos.
• Usa las teclas de flecha para hacer ajustes para los márgenes y el relleno de tu módulo. Haz clic en la casilla de comprobación Uniforme para aplicar el mismo espaciado en torno a los cuatro lados de tu módulo.
• Personaliza cualquier otro color, relleno o estilos de fuente disponibles para tu módulo. 
• Para deshacer cambios que hayas realizado en el estilo de tu módulo, haz clic en el ícono refresh revert para restablecer todos los estilos.

Personaliza más opciones de estilo en una plantilla de starter o una plantilla de tema

Si usas una plantilla de starter, algunas opciones de estilo, como fuentes predeterminadas o colores, se repiten en múltiples partes de tu página. Dependiendo de cómo codificó la plantilla el desarrollador de tu sitio web, podrás anular estos estilos predeterminados en la pestaña Opciones en el panel izquierdo.

• En el editor de página, haz clic en el módulo para seleccionarlo.
• En el panel izquierdo, haz clic en la pestaña Opciones.
• Debajo de las opciones de contenido predeterminado del módulo, haz clic para activar el interruptor Anular el estilo predeterminado.
• Aquí puedes seleccionar estilos adicionales, según las opciones que se incluyeron en la plantilla de tu página. La mayoría de las plantillas de starter tienen opciones de anulación disponibles aquí.

• Después de realizar tus cambios, haz clic en Aplicar cambios en la parte inferior izquierda. Para volver a todas las opciones de contenido en el panel izquierdo, haz clic en Volver en la parte superior izquierda.