Become a HubSpot power user — join us for HubSpot Training Day 2017.

Cómo utilizar módulos personalizados para agregar funciones de sitio personalizadas

Última actualización: December 29, 2016

El Administrador de diseño te da la posibilidad de codificar módulos personalizados que se pueden usar para agregar funciones avanzadas a una página y al mismo tiempo hacer que sea sencillo que tus profesionales del marketing personalicen el contenido de estos módulos. Los módulos personalizados son compatibles con HTML, CSS, Javascript y HubL. Las siguientes son algunas ideas de módulos personalizados:

  • Galerías de imágenes o controles deslizantes de imágenes personalizados
  • Una lista de eventos
  • Un módulo de lista de empleados con imágenes y biografías
  • Una sección que permite al usuario alternar entre clases de CSS para controlar su presentación

Instrucciones

Sigue estas instrucciones para crear un módulo personalizado.

Navega hasta Administrador de diseño

Navegar hasta Contenido > Administrador de diseño.

Navega hasta Administrador de diseño

Crear un nuevo módulo personalizado

Crear un nuevo módulo personalizado

Nuevo módulo personalizado
Seleccionar módulo personalizado

Nombrar el módulo personalizado

Nombrar y guardar el módulo personalizado. Tener en cuenta que los módulos personalizados harán que se pierdan el contenido ingresado en el editor. Las páginas estén usando este módulo no se actualizarán para hacer referencia al nombre nuevo y el contenido existente se perderá.
Nombrar el módulo personalizado

Escribir marcación

Escribe la marcación para rodear las celdas editables. Como se mencionó anteriormente, los módulos personalizados con compatibles con HTML, CSS y Javascript.

Agregar campos

Hacer clic en Agregar campo nuevo para agregar un campo editable para creadores de contenido.
Agregar campo de módulo personalizado

Puedes agregar campos nuevos con un clic en+Agregar campo nuevoo reordenar/eliminar campos con un clic en  Ordenar campos. En este momento, los módulos personalizados son compatibles con los siguientes tipos de campos:

  • Textoun campo de texto se puede usar para permitir a tus usuarios insertar una cadena de texto en el editor de contenido.
  • Texto enriquecidolas áreas de texto enriquecido les brindan a tus usuarios todos las opciones disponibles en el editor de texto enriquecido de HubSpot.
  • Booleanosun campo booleano crea una casilla de verificación para que los usuarios alternen entre secciones específicas de código en su módulo personalizado.
  • Imagenel campo de imagen agrega una imagen que le permite a los profesionales de marketing elegir imágenes subidas desde el editor de contenido
  • Elecciónel campo de elección crea un menú desplegable de donde los usuarios pueden seleccionar el valor.
Set-up-custom-field.png

Copiar y pegar el fragmento

Una vez que estés listo para incorporar uno de tus campos personalizados a tu código, haz clic en  copiar fragmento y pega ese fragmento en tu código (Ctrl V o Cmd V). En este artículo puedes aprender más acerca de la sintaxis de módulo personalizada.

Publicar módulo personalizado

Presiona Actualizar para publicar tu módulo personalizado.

Captura de pantalla de un artículo de ayuda de HubSpot

Agregar a la plantilla

Finalmente estás listo para agregar tu módulo a cualquiera de tus plantillas. Para agregar un módulo personalizado a una plantilla, simplemente debes hacer clic en configuración en cualquier módulo y elegir Intercambiar módulo.

Módulo de intercambio

Ahora puedes filtrar por Módulos personalizados. Elige el modo personalizado que desees agregar y haz clic en Seleccionar.

Agregar a la plantilla
Por favor tenga en cuenta: en este momento, no se puede agregar módulos personalizados a las plantillas de blog.

Artículo anterior:

Certificación Inbound Marketing

Artículo siguiente: