Ir a contenido principal
Nota: Este contenido se tradujo a través de un software y es posible que no haya sido revisado. La versión en inglés se considera, por tanto, la versión oficial y es posible que haya sido actualizada. Para acceder a la versión en inglés, haz clic aquí.

Estructurar y personalizar diseños de plantilla

Última actualización: junio 28, 2023

Disponible con cualquiera de las siguientes suscripciones, a no ser que se indique de otro modo:

Marketing Hub Pro, Enterprise
CMS Hub Pro, Enterprise
Marketing Hub Básico (versión anterior)

Aprenda a configurar y personalizar su plantilla existente de arrastrar y soltar, y a trabajar con módulos, grupos y columnas como los bloques de construcción de su plantilla.

Estructurar tu plantilla

Mediante el editor de diseño del Administrador de diseño, puedes crear rápidamente tu diseño de contenido sin tener que escribir ningún código HTML.

  • En tu cuenta de HubSpot, dirígete a Marketing > Archivos y plantillas > Herramientas de diseño.
  • En el buscador, haz clic en una plantilla para editarla.

Agregar y arrastrar módulos

Para agregar un módulo a un diseño, haz clic en + Agregar en la parte superior del inspector de diseño. Busca o selecciona un módulo, luego arrástralo a la ubicación del diseño donde deseas que aparezca. Arrastrar módulos encima de otros módulos creará columnas o agrupará los módulos.

Cambiar ancho de columna

Para cambiar el ancho de una columna, coloca el cursor entre los módulos, haz clic y arrastra horizontalmente.

Agrupar módulos

Los grupos de módulos son unidades de módulos que conforman diferentes secciones de una página.

Para agrupar dos módulos, haz clic en el primer módulo y luego mantén presionada la tecla Control/Comando y selecciona el segundo módulo. Repite este paso si estás agrupando más de dos módulos. A continuación, haz clic en el icono del grupo groupModule en el inspector del módulo.

Ten en cuenta: los grupos de módulos no pueden cruzarse con un separador de secciones o contener un grupo de módulos seleccionados parcialmente.

Dividir módulos horizontalmente

Dividir un módulo lo separa por la mitad, lo que crea dos módulos. Para dividir un módulo, haz clic en el módulo y luego, en el ícono para dividir módulos splitModule del inspector del módulo. También puedes hacer clic con el botón derecho sobre el módulo en el diseño y seleccionar el módulo Dividir módulo.

Módulos centrales

Con separadores horizontales, puedes centrar módulos y grupos en la página o agregar espacio en blanco a cualquiera de ellos. Para agregar una separador horizontal, haz clic en + Agregar en la parte superior del inspector de diseño. Busca Separador horizontal y luego arrástralo y suéltalo en la plantilla.

Para cambiar el tamaño de un separador horizontal, cambie la anchura de la columna que lo separa de otros módulos. Para centrar un módulo o grupo, agrega separadores horizontales en cada lado. 

add-horizontal-spacer

Agregar una columna flexible

Las columnas flexibles están diseñadas para facilitar la administración de contenidos a nivel de página para los creadores de contenido. Cuando se agrega una columna flexible a una plantilla de página de HubSpot, los usuarios tendrán la opción de agregar, eliminar y volver a ordenar módulos dentro del editor de páginas individuales. Esta característica permite a los diseñadores crear menos plantillas, pero al mismo tiempo, sigue ofreciendo a los profesionales del marketing la flexibilidad necesaria para personalizar cada página para que se adapte a sus necesidades.

Para agregar una columna flexible, haz clic en + Agregar en la parte superior del inspector del diseño. Busca Columna flexible y luego arrástrala y suéltala en la plantilla.

Nota:
  • Las columnas flexibles sólo pueden añadirse a las plantillas de página y no a las plantillas de correo electrónico o blog.
  • Los módulos añadidos a las columnas flexibles no pueden tener asociadas clases CSS, estilos en línea ni HTML de envoltorio. Es necesario añadir opciones de estilo a la propia columna flexible.

 


Personalizar una plantilla

Una vez que hayas estructurado el diseño general de tu plantilla, puedes intercambiar módulos y personalizar plantillas.

Editar opciones de módulo

Puedes editar las opciones de un módulo haciendo clic en módulo en el editor de diseño. En el inspector del módulo de la derecha, verás las opciones editables del módulo. Estas opciones por lo general incluyen estilo, contenido predeterminado y opciones de editor, y pueden variar según el tipo de módulo. Más información sobre la edición del CSS del módulo y el contenido y la configuración por defecto.

Opciones de edición

Intercambiar módulo

Después de agregar un módulo a tu plantilla, puedes intercambiarlo para otro módulo. Haz clic en el botón derecho del módulo en el editor de diseño y haz clic en Intercambiar módulo. En el menú desplegable que aparecerá, selecciona el módulo para reemplazar el módulo original.

Convertir en módulo global

Puede convertir un módulo de su plantilla en un módulo global, que puede utilizarse en varias plantillas. Esta opción es útil cuando has aplicado un estilo determinado al módulo y tiene contenido predeterminado que te gustaría reutilizar en otras plantillas.

  • Haz clic en el módulo en el editor de diseño.
  • En el inspector del módulo, haz clic en Más en el menú desplegable y selecciona Convertir en módulo global.
  • En el cuadro de diálogo, escribe el nombre del módulo global y luego haz clic en Crear.

Eliminar módulo

Para eliminar un módulo, haz clic en el módulo en el editor de diseño y luego haz clic en el ícono de la papelera delete en el inspector de módulo. También puedes hacer clic con el botón derecho sobre el módulo en el diseño y seleccionar Eliminar módulo.

Administrar tu plantilla en el buscador

Además de las opciones de módulo, hay varias acciones específicas que puedes realizar para tu plantilla.

  • En la parte superior derecha de la plantilla, haz clic en el ícono de carpeta folder.
  • Haz clic derecho en el nombre de la plantilla. En el menú desplegable, puedes personalizar las siguientes opciones:
    • Copiar a portales: copia la plantilla a otro portal donde también eres usuario. Las plantillas adquiridas en Mercado no se podrán copiar a otros portales.
    • Clonar plantilla: esto crea un duplicado exacto de tu plantilla y es útil cuando quieres crear una variación de una plantilla existente.
    • Clonar a HTML: crea una versión HTML independiente de tu plantilla. Esto es útil si necesitas más control sobre tus marcadores o si quieres obtener más información sobre cómo están codificadas las plantillas.
    • Ver fuente de plantilla: ve el código HTML fuente de la plantilla. A diferencia de la opción Clonar a HTML , esto no crea una versión HTML independiente de tu plantilla.
    • Cambiar nombre de plantilla: edita el nombre interno de tu plantilla.
    • Mostrar dependientes: ve todas las páginas, correos electrónicos o blogs que actualmente usan la plantilla.
    • Mostrar historial de revisiones: ve el historial de revisiones de tu plantilla y revierte tu plantilla a una versión publicada previamente.
    • Crear correo electrónico/página: crea un correo electrónico, una página de destino/página de sitio web directamente desde la plantilla.
    • Eliminar plantilla: esta opción elimina la plantilla. Una vez eliminada, la plantilla estará disponible durante 30 días después de los cuales será eliminada definitivamente. Para restaurar la plantilla, debes contactar a asistencia técnica al cliente
  • También se puede acceder a estas opciones desde los menús desplegables Archivo y Acciones que se encuentran más arriba.

¿Te resultó útil este artículo?
Este formulario se utiliza solo para recibir comentarios a la documentación. Cómo recibir ayuda con HubSpot.