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í.
CMS-General

Cómo estructurar y personalizar diseños de plantilla

Última actualización: enero 28, 2019

Requisitos

Marketing Hub Professional, Enterprise
Básico
HubSpot CMS

Descubre cómo configurar y personalizar tu actual plantilla para arrastrar y soltar y trabaja con módulos, grupos y columnas como puntos de partida de tu plantilla.

Cómo 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 Ctrl 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 ícono 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.

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.

Ten en cuenta: las columnas flexibles solo se pueden agregar a plantillas de página; no se pueden agregar a plantillas de correo electrónico o blog.


Cómo 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 cómo editar un módulo CSS, contenido predeterminado y configuración.

Editar opciones

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

Puedes convertir un módulo en tu plantilla para un módulo global que se pueda usar en múltiples 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 Eliminar 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.
  • 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.
  • También se puede acceder a estas opciones desde los menús desplegables Archivo y Acciones que se encuentran más arriba.