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

Con el administrador de diseño, puedes crear módulos personalizados para añadir funciones avanzadas a tu blog, páginas o correos electrónicos. Los módulos personalizados ofrecen una amplia gama de funcionalidades para que el contenido pueda personalizarse por completo dentro del editor de páginas, correos electrónicos o blogs.

Nota: la creación de 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, haga clic en el menú desplegable Archivo y seleccione Nuevo archivo.

3. En el cuadro de diálogo, haga clic en el menú desplegable ¿Qué desea construir hoy? y seleccione Módulo.
4. Haz clic en Siguiente.
5. En el campo Dónde desea utilizar este módulo , seleccione la casilla de verificación situada junto a cada tipo de contenido en el que se utilizará el módulo (por ejemplo, entradas de blog, correos electrónicos o landing pages). 
6. En el campo Alcance del contenido del módulo , seleccione una opción (por ejemplo, Módulo local o Módulo global). Si crea un módulo global, la edición del contenido de este módulo actualizará todas las ubicaciones en las que se utilice el módulo. 
7. Introducir un nombre de archivo para el módulo.
8. Para cambiar la ubicación del archivo del módulo, haga clic en Cambiar en la sección Ubicación del archivo . En el cuadro emergente, seleccione una nueva ubicación y, a continuación, haga clic en Seleccionar.
9. Cuando hayas terminado, haz clic en Crear.
10. Continúe editando el módulo.

Nota: los módulos utilizados en los emails sólo 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. Etiquete el módulo para mayor claridad, añada y configure campos y ajuste las opciones del editor de campos, como el contenido predeterminado. Ajuste las condiciones de visualización y las opciones de repetición, y agrupe los campos relacionados para una mejor organización. También puede copiar y pegar fragmentos de campo, escribir sintaxis de módulo personalizada, añadir texto instructivo útil y editar con qué tipos de plantilla se puede utilizar su módulo.

Añadir una etiqueta a un módulo

En el administrador de diseño, puede añadir 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, haga clic para abrir el módulo cuya etiqueta desee editar.
3. Introducir una etiqueta en el inspector.

Añadir campos a un módulo

Añade 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 campo disponibles. 

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

4. Para editar el nombre del campo, haga clic en el icono edit e introduzca un nuevo nombre. Para editar el nombre de la variable HubL, introduzca 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, haga clic para abrir un módulo.
3. En el inspector, en la sección Campos , pase el ratón por encima de un campo y haga clic en Editar.
4. En la sección Opciones de contenido , añada o edite las opciones de contenido predeterminadas. Las opciones de contenido disponibles por defecto dependerán del tipo de campo seleccionado.

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

Establece opciones de editor de campos

En la sección Opciones del editor , puede 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, haga clic para abrir un módulo.
3. En el inspector, en la sección Campos , pase el ratón por encima de un campo y haga clic en Editar.
4. En la sección Opciones del editor , para que el campo sea obligatorio, active 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, active 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 añadir contexto o instrucciones sobre cómo utilizar el campo, introduzca texto en el campo de texto de ayuda Tooltip o en el campo de texto de ayuda Inline .
   • Texto de ayuda: este texto aparecerá en un tooltip cuando el usuario pase el ratón por encima del icono de información en el editor de contenidos infoCircleIcon en el editor de contenidos.
   • Texto de ayuda en línea: 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 visualización , puede utilizar las condiciones de visualización de campos para ajustar un campo de módulo para que sólo aparezca si otro campo cumple determinados criterios.

1. En tu cuenta de HubSpot, dirígete a Contenido > Administrador de diseño.
2. En el buscador, haga clic para abrir un módulo.
3. En el inspector, en la sección Campos , pase el ratón por encima de un campo y haga clic en Editar.
4. En la sección Condiciones de visualización , haga clic en el menú desplegable Variable HubL y seleccione una variable. 
5. Haga clic en el segundo menú desplegable y seleccione 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 selecciona 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 visualización , desactive el interruptor Condiciones de visualización .

Establece opciones de repetidor de campos

En la sección Opciones de repetición , puede configurar las opciones de repetición para campos y grupos. Cuando las opciones de repetición 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, haga clic para abrir un módulo.
3. En el inspector, en la sección Campos , pase el ratón por encima de un campo y haga clic en Editar.
4. En la sección Opciones del repetidor , introduzca 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, introduzca 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 , desactive el interruptor Opciones de repetidor .

Por ejemplo, las opciones de repetición 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á añadir un campo de imagen más o eliminar un campo de imagen existente.

Campos del módulo de grupo

Después de crear los campos, puede agruparlos para mantenerlos organizados por relevancia. Los grupos de campos se pueden usar para crear lógica de campo personalizado. Puede agrupar hasta cuatro campos. Más información sobre los grupos de campos de módulos.

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

Agrega texto de ayuda a tu módulo

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

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

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

Añade o elimina los tipos de contenido para los que los usuarios pueden utilizar un módulo, como Blog posts o Landing pages. También puede 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, haga clic para abrir un módulo.
3. Para editar los tipos de contenido de un módulo, haga 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, seleccione o desactive la casilla de verificación situada junto a cada tipo de contenido en el que se utilizará o no el módulo (por ejemplo, entradas 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, active 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, desactive 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, puede 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, haga clic para abrir un módulo.
3. En el inspector, pase el ratón por encima de un campo del módulo y haga clic en el menú desplegable Acciones de la sección Campos . A continuación, seleccione Copiar fragmento. 
4. En el editor de módulos, pegue 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. 

Sintaxis del módulo de escritura

A medida que editas tu módulo, puedes escribir la sintaxis del módulo en las secciones module.html (HTML + HubL), module.css y module.js editor de módulos. 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 haya terminado de editar un módulo, incluyendo la adición de campos y escribir la sintaxis del módulo, puede 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, haga clic para abrir un módulo.
3. Para obtener una vista previa de un módulo, haga clic en Vista previa en la parte superior derecha. Se le 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, haga clic en Publicar cambios. 

Añadir un módulo a una plantilla

Después de publicar un módulo, puede utilizarlo en varias plantillas añadiéndolo a una plantilla de arrastrar y soltar o a una plantilla codificada personalizada en el administrador de diseño. Para añadir módulos en el editor de contenido, obtenga más información sobre cómo añadir 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 añadir un módulo a una plantilla de arrastrar y soltar en el editor de diseño, haz clic en la pestaña + Añadir en la parte superior del inspector.
   • En el campo Buscar, introduzca el nombre del módulo. Para limitar su búsqueda a los módulos personalizados, haga clic en el menú desplegable Filtrar por categoría o etiquetas y seleccione Módulos personalizados.
   • Haga clic en el icono dragHandleIcon arrastrar y soltar y mueva el módulo a su posición en el editor de diseño.
4. Para añadir un módulo a una plantilla codificada personalizada:
   •  Haga clic con el botón derecho o Ctrl+clic en el módulo en el buscador y seleccione Copiar fragmento. Como alternativa, haga clic para abrir el módulo y, a continuación, en la sección Uso de plantillas del inspector, haga clic en Copiar fragmento.
   • En la plantilla codificada personalizada, pegue el fragmento de módulo en el editor de código.
5. Cuando haya terminado, haga 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 , haga clic en el menú desplegable Añadir campo.

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

• • Seleccione el campo Color . Introducir el nombre 'Timer Font Color'. 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 a continuación.

3. En el editor de módulos, copie y pegue el siguiente código 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>Días
</div>
<div class="time_container">
<span id="hours"></span><br>
Horas
</div>
<div class="time_container">
<span id="minutes"></span><br>
Minutos
</div>
<div class="time_container">
<span id="seconds"></span><br>
Segundos
</div>
</div>

4. Copia y pega el siguiente código 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 siguiente código en la sección module.js :

// Función para calcular y mostrar la cuenta atrás
function updateCountdown() {
// Obtener la fecha objetivo del span oculto
const targetDate = new Date(document.getElementById('target-date').textContent);
// Obtener la fecha actual
const currentDate = new Date();
// Calcular el tiempo restante (en milisegundos)
const timeRemaining = targetDate - currentDate;
// Comprobar si ha pasado la fecha objetivo
if (timeRemaining <= 0) { document.getElementById('countdown').innerText = 'Cuenta atrás expirada';
return;
}
// Calcular los días, horas, minutos y segundos restantes
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);
// Mostrar la cuenta atrás
document.getElementById('days').innerText = `${days}`;
document.getElementById('hours').innerText = `${horas}`;
document.getElementById('minutos').innerText = `${minutos}`;
document.getElementById('segundos').innerText = `${segundos}`;
}
// Actualizar la cuenta atrás cada segundo
setInterval(updateCountdown, 1000);
// Llamada inicial para actualizar la cuenta atrás inmediatamente
updateCountdown();

6. Vista previa y publicación del módulo.
7. Continúe añadiendo el módulo a una plantilla.