Estructurar y personalizar plantillas mediante el editor de diseño

Utiliza el editor de diseño del administrador de diseño para estructurar y personalizar plantillas de arrastrar y soltar. Mediante la organización de módulos, grupos y columnas, puede controlar cómo se estructura el contenido en las páginas. Esto también da a los creadores de contenidos más control en el editor de páginas.

Antes de empezar

Antes de estructurar y personalizar páginas utilizando el editor de diseño en el administrador de diseño, revise los requisitos y consideraciones. 

Comprender las limitaciones y consideraciones

• Los cambios en una plantilla se aplican a todos los contenidos que utilicen esa plantilla. 
• Algunas funciones, como las columnas flexibles, sólo están disponibles para las plantillas de página.

Estructurar una plantilla

Utilice el editor de diseño para estructurar cómo se organiza el contenido dentro de una plantilla.

1. En tu cuenta de HubSpot, dirígete a Contenido > Administrador de diseño.
2. En el buscador, haga clic en una plantilla para abrirla en el editor de diseño. 

Añadir y organizar módulos

Los módulos son los componentes básicos del diseño de una plantilla. Al arrastrar un módulo junto a otro se crean columnas. Arrastrando un módulo sobre otro se agrupan los módulos.

1. En el inspector, haga clic en + Añadir.
2. Introduzca texto para buscar un módulo y, a continuación, haga clic en el módulo. 
3. Arrastre el módulo al editor de diseño.

Cambiar ancho de columna

Para cambiar la anchura de una columna:

1. En el editor de diseño, sitúe el cursor entre dos módulos.
2. Haga clic y arrastre horizontalmente para ajustar la anchura de la columna. 

Agrupar módulos

Agrupa módulos para organizar secciones de una plantilla.

Para agrupar módulos:

1. En el editor de diseño, seleccione un módulo.
2. Mantenga pulsada la tecla Control (Windows) o Comando (Mac) y seleccione módulos adicionales. 
3. En el inspector, haga clic en el icono groupModule Agrupar módulos .

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:

1. En el editor de diseño, haga clic en un módulo

2. En el inspector, haga clic en el icono splitModule Dividir módulo . 

Módulos centrales

Utilice separadores horizontales para centrar los módulos y grupos en la página, o añada espacio en blanco a ambos lados de los mismos. 

Para añadir un separador horizontal:

1. En el inspector, haga clic en + Añadir.

2. Introduzca espaciador horizontal en el campo Buscar . A continuación, arrastre el módulo Espaciador horizontal hasta su posición en la plantilla del editor de diseño.

3. Para cambiar el tamaño de un separador horizontal, cambie la anchura de la columna que lo separa de otros módulos.

4. Para centrar un módulo o grupo, añada módulosseparadores horizontales a cada lado.

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 añade una columna flexible a una plantilla de página de HubSpot, los usuarios tendrán la opción de añadir, eliminar y reordenar 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.

1. En el inspector, haga clic en + Añadir.

2. Introduzca la columna flexible en el campo Buscar . A continuación, arrastre el módulo Columna flexible hasta su posición en la plantilla del editor de diseño.

Personaliza tu plantilla

Una vez que hayas estructurado el diseño de tu plantilla, puedes intercambiar módulos y realizar otras personalizaciones de la plantilla.

Editar opciones de módulo

Las opciones de edición de un módulo incluyen el estilo y el contenido predeterminado, y pueden variar en función del tipo específico 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.

1. En el editor de diseño, haga clic en un módulo. 
2. En el inspector, personalice las opciones del módulo. 

Intercambiar módulo

Después de agregar un módulo a tu plantilla, puedes intercambiarlo para otro módulo.

1. En el editor de diseño, haga clic con el botón derecho en el módulo y seleccione Intercambiar módulo.

2. En la ventana emergente, seleccione el módulo por el que desea sustituir el módulo original.

Convertir en módulo global

Convierte un módulo de tu plantilla en un módulo global, que puede utilizarse en varias plantillas. Utilícelo cuando haya diseñado el módulo de una forma determinada o tenga contenido predeterminado en el módulo que desee reutilizar en otras plantillas.

1. En el editor de diseño, haga clic en un módulo.
2. En el inspector, haga clic en el menú desplegable Más y seleccione Convertir en módulo global.
3. En el cuadro de diálogo, introduzca el nombre del módulo global y haga clic en Crear.

Eliminar módulo

1. En el editor de diseño, haga clic en un módulo.

2. En el inspector, haga clic en el icono delete icono de la papelera. 

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.

1. En el buscador, haga clic en el nombre de una plantilla.
2. Haga clic en el menú desplegable Acciones y seleccione una opción: 
   • Copiar en otra cuenta: copia la plantilla en otra cuenta en la que también seas usuario. Las plantillas compradas en el Mercado no podrán copiarse en 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 en HTML: crea una versión HTML independiente de la plantilla de arrastrar y soltar. 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 separada de su plantilla.
   • Renombrar 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 o una página directamente desde la plantilla.
   • Borrar plantilla: borra la plantilla. Una vez eliminada la plantilla, permanecerá disponible durante 30 días, tras los cuales se eliminará definitivamente. Para restaurar la plantilla, tendrás que ponerte en contacto con asistencia al cliente.