Crear y editar módulos en el administrador de diseño

Con el administrador de diseño, puedes crear módulos personalizados para agregar funciones avanzadas a tu blog, páginas o correos electrónicos. Los módulos personalizados ofrecen una amplia variedad de funcionalidades para que el contenido se personalice completamente dentro de la página, el correo electrónico o el editor de blog.

Nota: crear módulos requiere conocimientos de HTML, CSS, HubL y el administrador de diseño de HubSpot. HubSpot recomienda trabajar con un desarrollador para crear módulos codificados.

Crear un nuevo módulo

1. En tu cuenta de HubSpot, dirígete a Contenido > Administrador de diseño.
2. En la parte superior del buscador, haz clic en el menú desplegable Archivo y selecciona Nuevo archivo.

3. En el cuadro de diálogo, haz clic en el menú desplegable ¿Qué te gustaría crear hoy? y selecciona Módulo.
4. Haz clic en Siguiente.
5. En el campo Dónde quieres utilizar este módulo, selecciona la casilla de verificación situada junto a cada tipo de contenido en el que se utilizará el módulo (por ejemplo, publicaciones de blog, correos electrónicos o landing pages). 
6. En el campo Alcance del contenido del módulo, selecciona una opción (por ejemplo, Módulo local o Módulo global). Si creas un módulo global, editar el contenido de este módulo actualizará cada ubicación donde se use el módulo. 
7. Introduce un nombre de archivo para el módulo.
8. Para cambiar la ubicación del archivo del módulo, haz clic en Cambiar en la sección Ubicación del archivo. En el cuadro emergente, selecciona una nueva ubicación y haz clic en Seleccionar.
9. Cuando hayas terminado, haz clic en Crear.
10. Continúa editando el módulo.

Nota: los módulos utilizados en los correos solo pueden crearse en cuentas con una suscripción a Marketing Hub Pro o Enterprise. No pueden incluir CSS ni JavaScript. 

Editar un módulo

Después de crear un módulo en el administrador de diseño, puedes personalizar su funcionalidad y apariencia. Etiqueta el módulo para mayor claridad, agrega y configura campos, y ajusta las opciones del editor de campos, como el contenido predeterminado. Establece las condiciones de visualización y las opciones de repetición, y agrupa los campos relacionados para una mejor organización. También puedes copiar y pegar fragmentos de campo, escribir sintaxis de módulo personalizada, agregar texto instructivo útil y editar con qué tipos de plantilla se puede utilizar tu módulo.

Agregar una etiqueta a un módulo

En el administrador de diseño, puedes agregar o actualizar una etiqueta para un módulo para ayudar a los usuarios a identificarlo en el editor de contenidos. Si la etiqueta está en blanco, se mostrará por defecto el nombre del módulo.

1. En tu cuenta de HubSpot, dirígete a Contenido > Administrador de diseño.
2. En el buscador, haz clic para abrir el módulo cuya etiqueta quieras editar.
3. Introduce una etiqueta en el inspector.

Agregar campos al módulo

Agrega campos a un módulo para ajustar su contenido o estilo y hacerlo editable en el editor de contenido. Más información sobre los tipos de campos disponibles. 

1. En tu cuenta de HubSpot, dirígete a Contenido > Administrador de diseño.
2. En el buscador, haz clic para abrir un módulo.
3. En el inspector, en la sección Campos, haz clic en el menú desplegable Agregar campo. Luego, selecciona un campo para agregar al módulo.

4. Para editar el nombre del campo, haz clic en el edit icono de edición e introduce un nuevo nombre. Para editar el nombre de la variable HubL, introduce un nuevo nombre en el campo Nombre de variable HubL. 

Personalizar el contenido predeterminado del campo

En la sección Opciones de contenido, puedes agregar contenido predeterminado que aparece cuando se usa el módulo en plantillas y editores de contenido. Las opciones de contenido predeterminado difieren según el tipo de campo.

1. En tu cuenta de HubSpot, dirígete a Contenido > Administrador de diseño.
2. En el buscador, haz clic para abrir un módulo.
3. En el inspector, en la sección Campos, pasa el cursor por encima de un campo y haz clic en Editar.
4. En la sección Opciones de contenido, agrega o edita las opciones de contenido predeterminado. Las opciones de contenido predeterminado disponibles dependerán del tipo de campo seleccionado.

Por ejemplo, al agregar un tipo de campo Fecha y hora a un módulo, puedes seleccionar una fecha y hora predeterminadas. También puedes introducir un intervalo de tiempo predeterminado.

Establece opciones de editor de campos

En la sección Opciones del editor, puedes hacer que un campo sea obligatorio e impedir su edición en el editor de contenido. También puedes personalizar el texto de ayuda. 

1. En tu cuenta de HubSpot, dirígete a Contenido > Administrador de diseño.
2. En el buscador, haz clic para abrir un módulo.
3. En el inspector, en la sección Campos, pasa el cursor por encima de un campo y haz clic en Editar.
4. En la sección Opciones del editor, para que el campo sea obligatorio, activa el interruptor Hacer que este campo sea obligatorio. Esto evitará que los usuarios dejen el campo en blanco en el editor de contenidos.
5. Para impedir que se edite el contenido de un campo, activa la casilla Impedir la edición en editores de contenido. El contenido del campo puede seguir personalizándose en el administrador de diseño a nivel de plantilla. Esta opción no está disponible para los módulos globales.
6. Para agregar contexto o instrucciones sobre cómo utilizar el campo, introduce texto en el campo de Texto emergente de ayuda o en el campo de Texto de ayuda incorporado.
   • Texto emergente de ayuda: esto aparecerá en un texto emergente cuando el usuario pase el cursor por encima del infoCircleIcon icono de información en el editor de contenidos en el editor de contenidos.
   • Texto de ayuda incorporado: este texto aparecerá debajo del campo cuando un usuario esté editando el módulo en el editor de contenidos.

Establecer condiciones de presentación de campos

En la sección Condiciones de presentación, puedes usar condiciones de presentación de campos para configurar un campo de módulo para que solo aparezca si otro campo cumple con ciertos criterios.

1. En tu cuenta de HubSpot, dirígete a Contenido > Administrador de diseño.
2. En el buscador, haz clic para abrir un módulo.
3. En el inspector, en la sección Campos, pasa el cursor por encima de un campo y haz clic en Editar.
4. En la sección Condiciones de presentación, haz clic en el menú desplegable Variable HubL y selecciona una variable. 
5. Haz clic en el segundo menú desplegable y selecciona una opción (por ejemplo, Es igual a o No está vacío). Dependiendo de la opción seleccionada, pueden ser necesarios más campos de condición. Por ejemplo, si seleccionas Es igual a, se requiere un campo de valor adicional.
6. De forma predeterminada, las condiciones de visualización se activan automáticamente una vez configurada una condición. Para desactivar las condiciones de presentación, desactiva el interruptor Condiciones de presentación.

Establece opciones de repetidor de campos

En la sección Opciones de repetidor, puedes configurar las opciones de repetidor para campos y grupos. Cuando las opciones de repetidor están activadas, se crearán múltiples objetos y se mostrarán utilizando un for bucle.

1. En tu cuenta de HubSpot, dirígete a Contenido > Administrador de diseño.
2. En el buscador, haz clic para abrir un módulo.
3. En el inspector, en la sección Campos, pasa el cursor por encima de un campo y haz clic en Editar.
4. En la sección Opciones del repetidor, introduce un número en los campos Mínimo y Máximo (opcional). Esto ajustará el número mínimo de veces que el campo aparecerá en el módulo hasta el valor máximo. 
5. Para ajustar el número de veces que un campo debe mostrarse por defecto, introduce un número en el campo Recuento de objetos por defecto.
6. De forma predeterminada, las opciones de repetidor se activan automáticamente una vez configuradas. Para desactivar las opciones de repetidor, desactiva el interruptor Opciones de repetidor.

Por ejemplo, las opciones de repetidor de un campo de imagen se modifican para mostrar al menos tres y hasta cinco campos de imagen. Se configura como predeterminado un valor de cuatro campos de imagen. En el editor de contenidos, el usuario verá cuatro campos de imagen de forma predeterminada y podrá agregar un campo de imagen más o eliminar un campo de imagen existente.

Campos del módulo de grupo

Después de crear campos, puedes agruparlos para mantener los campos organizados por relevancia. Los grupos de campos se pueden usar para crear lógica de campo personalizado. Puedes agrupar hasta cuatro campos. Más información sobre los grupos de campos del módulo. 

1. En tu cuenta de HubSpot, dirígete a Contenido > Administrador de diseño.
2. En el buscador, haz clic para abrir un módulo.
3. En el inspector, en la sección Campos, haz clic en el menú desplegable Acciones y selecciona Agrupar.
4. Selecciona uno o más campos para agruparlos y haz clic en Crear grupo.

Agrega texto de ayuda a tu módulo

En la sección Opciones del editor, puedes agregar texto de ayuda para dar contexto a los usuarios al editar el módulo. Este texto se mostrará encima de los campos del módulo. 

1. En tu cuenta de HubSpot, dirígete a Contenido > Administrador de diseño.
2. En el buscador, haz clic para abrir un módulo.
3. En el inspector, en la sección Opciones del editor, introduce texto en el campo Texto de ayuda incorporado.

Gestionar los tipos de contenido y la disponibilidad de un módulo

Agrega o elimina los tipos de contenido para los que los usuarios pueden utilizar un módulo, como Publicaciones de blog o Landing pages. También puedes activar o desactivar la disponibilidad de un módulo en plantillas y páginas.

1. En tu cuenta de HubSpot, dirígete a Contenido > Administrador de diseño.
2. En el buscador, haz clic para abrir un módulo.
3. Para editar los tipos de contenido de un módulo, haz clic en Tipos de contenido debajo del nombre del módulo en el inspector de la parte superior derecha.

1. • En el cuadro de diálogo, selecciona o desactiva la casilla de verificación situada junto a cada tipo de contenido en el que se utilizará o no el módulo (por ejemplo, Publicaciones de blog, Correos electrónicos o Landing pages). 
   • Cuando hayas terminado, haz clic en Actualizar.

4. Para gestionar la disponibilidad de un módulo en plantillas o páginas, activa el interruptor Hacer disponible para plantillas y páginas en la parte superior derecha. Para probar la funcionalidad del módulo o desactivar la disponibilidad en plantillas y páginas, desactiva el interruptor Hacer disponible para plantillas y páginas. 

Nota: desactivar la opción Hacer disponible para plantillas o páginas no eliminará el módulo de las plantillas o páginas existentes.

Copiar y pegar fragmentos de campo

Al incorporar un campo a un módulo, puedes copiar y pegar el fragmento de campo en la sección module.html (HTML + HubL) dentro del editor de módulos.

1. En tu cuenta de HubSpot, dirígete a Contenido > Administrador de diseño.
2. En el buscador, haz clic para abrir un módulo.
3. En el inspector, pasa el cursor por encima de un campo del módulo y haz clic en el menú desplegable Acciones de la sección Campos. Luego, selecciona Copiar fragmento. 
4. En el editor de módulos, pega el fragmento de campo en la ubicación deseada dentro de la sección module.html (HTML. + HubL). Puedes utilizar el atajo de teclado Cmd+V o Ctrl+V. 

Escribir la sintaxis del módulo

A medida que editas tu módulo, puedes escribir la sintaxis del módulo en las secciones del editor de módulos module.html (HTML + HubL), module.css y module.js. Más información sobre el editor de módulos y el resumen de módulos.

Vista previa y publicación de un módulo

Una vez que hayas terminado de editar un módulo, incluyendo la adición de campos y escribir la sintaxis del módulo, puedes obtener una vista previa y publicar el módulo. 

1. En tu cuenta de HubSpot, dirígete a Contenido > Administrador de diseño.
2. En el buscador, haz clic para abrir un módulo.
3. Para obtener una vista previa de un módulo, haz clic en Vista previa en la parte superior derecha. Se te dirigirá a una nueva pestaña del navegador para obtener una vista previa del módulo. Esta vista previa se sincroniza con el editor de módulos y se actualiza automáticamente a medida que se realizan modificaciones.
4. Para publicar un módulo, haz clic en Publicar cambios. 

Agregar un módulo a una plantilla

Después de publicar un módulo, puedes utilizarlo en varias plantillas agregándolo a una plantilla de arrastrar y soltar o a una plantilla codificada personalizada en el administrador de diseño. Para agregar módulos en el editor de contenido, obtén más información sobre cómo agregar y editar módulos en el editor de contenido.

1. En tu cuenta de HubSpot, dirígete a Contenido > Administrador de diseño.
2. En el buscador, haz clic para abrir una plantilla.
3. Para agregar un módulo a una plantilla de arrastrar y soltar en el editor de diseño, haz clic en la pestaña + Agregar en la parte superior del inspector.
   • En el campo Buscar, introduce el nombre del módulo. Para limitar tu búsqueda a los módulos personalizados, haz clic en el menú desplegable Filtrar por categoría o etiquetas y selecciona Módulos personalizados.
   • Haz clic en el icono dragHandleIcon arrastrar y soltar y mueve el módulo a su posición en el editor de diseño.
4. Para agregar un módulo a una plantilla codificada personalizada:
   •  Haz clic con el botón derecho o Ctrl+clic en el módulo en el buscador y selecciona Copiar fragmento. Como alternativa, haz clic para abrir el módulo y, en la sección Uso de plantillas del inspector, haz clic en Copiar fragmento.
   • En la plantilla codificada personalizada, pega el fragmento del módulo en el editor de código.
5. Cuando hayas terminado, haz clic en Publicar cambios en la parte superior derecha.

Ejemplo

Crear un módulo de cuenta atrás

1. Crea un módulo en el administrador de diseño y nómbralo “Temporizador de cuenta atrás“.
2. En el inspector, en la sección Campo, haz clic en el menú desplegable Agregar campo.

• • Selecciona el campo Fecha y hora. Introduce el nombre "Fecha y hora del evento". Esto actualizará el campo de nombre de variable HubL a event_date_and_time.

• • Selecciona el campo Color. Introduce el nombre ”Color de fuente del temporizador”. Esto actualizará el campo de nombre de variable HubL a timer_font_color.

Nota: los nombres de las variables HubL deben coincidir con los nombres de las variables incluidos en la sección de código module.html (HTML + HubL) que aparece abajo.

3. En el editor de módulos, copia y pega el código de abajo en la sección module.html (HTML + HubL):

<!-- Hidden span to store the target date -->
<span id="target-date" style="display: none;"></span>

<!-- Display countdown timer -->
<div style="float: left; width: 100%; color: ;">
 <div class="time_container" style="margin-left: 30%;">
 <span id="days"></span><br>
 Days
 </div>
 <div class="time_container">
 <span id="hours"></span><br>
 Hours
 </div>
 <div class="time_container">
 <span id="minutes"></span><br>
 Minutes
 </div>
 <div class="time_container">
 <span id="seconds"></span><br>
 Seconds
 </div>
</div>

4. Copia y pega el código de abajo en la sección module.css:

.time_container {
float: left;
width: 10%;
text-align: center;
}
.time_container span {
font-weight: bold;
font-size: 200%;
}

5. Copia y pega el código de abajo en la sección module.js:

// Function to calculate and display countdown
function updateCountdown() {
// Get the target date from the hidden span
const targetDate = new Date(document.getElementById('target-date').textContent);
// Get the current date
const currentDate = new Date();
// Calculate the time remaining (in milliseconds)
const timeRemaining = targetDate - currentDate;
// Check if the target date has passed
if (timeRemaining <= 0) { document.getElementById('countdown').innerText = 'Countdown expired';
return;
}
// Calculate remaining days, hours, minutes, and seconds
const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);
// Display the countdown
document.getElementById('days').innerText = `${days}`;
document.getElementById('hours').innerText = `${hours}`;
document.getElementById('minutes').innerText = `${minutes}`;
document.getElementById('seconds').innerText = `${seconds}`;
}
// Update countdown every second
setInterval(updateCountdown, 1000);
// Initial call to update countdown immediately
updateCountdown();

6. Cuando hayas terminado, previsualiza y publica el módulo.
7. Continúa agregando el módulo a una plantilla.