Mercado de plantillas | Requisitos de los módulos

​

Restricciones de los módulos

• HTML
• Módulos de ancho completo
• Formularios y formularios de varios pasos
• Módulos espaciadores o módulos que crean una estructura de página que no es de la interfaz de usuario
• Módulos que duplican la funcionalidad del módulo predeterminado
• Módulos específicos de comercio
• Módulos específicos de correo electrónico

​

Contenido de los módulos

​

Etiquetas de los módulos y texto de ayuda

• Los módulos deben tener etiquetas descriptivas que transmitan el propósito del módulo. La etiqueta Banner Hero con desplazamiento Parallax es descriptiva, mientras que las etiquetas Banner Hero y Galería no lo son.
• Las etiquetas del módulo no deben contener números, como Banner Hero 01.
• Las etiquetas de los módulos no deben contener guiones bajos.
• Las etiquetas de los módulos no deben contener abreviaturas, como Col en lugar de Columna.
• Los módulos deben contener texto de ayuda incorporado cuando corresponda para transmitir cómo usar el módulo.
• Los módulos no deben tener el mismo nombre que un módulo predeterminado.
• En el caso de los módulos independientes, la etiqueta del módulo debe coincidir con el nombre que aparece en el índice de plantillas. Por ejemplo, si tu anuncio de plantilla es SuperAwesome Banner con desplazamiento, la etiqueta de tu módulo debe ser la misma.

​

Contenido predeterminado

• El campo predeterminado no puede incluir texto de Lorem ipsum.
• El contenido predeterminado de los campos debe representar el propósito del campo:
  • Al incluir campos de menú, los módulos deben usar la opción de Seleccionar un menú como la opción de contenido predeterminada.
  • Al incluir campos de formulario, los módulos deben usar Seleccionar un formulario como la opción de contenido predeterminada.
  • Al incluir campos de selección de blog, los módulos deben usar Seleccionar un blog como la opción de contenido predeterminada.
• Si agregar contenido predeterminado a un módulo no tiene sentido, puedes usar un marcador de posición de módulo para ayudar al creador de contenido a visualizar el espacio que llenará con contenido.

​

Íconos de módulo

​

Módulos que requieren cuentas de terceros

​

Campos de módulo

• Para módulos en un tema:
  • Por ejemplo, los módulos deben contener texto de ayuda incorporado y contenido predeterminado específico para ciertos campos.
  • Al menos un campo de logotipo debe heredar de la configuración de marca. Si se utiliza un campo de imagen para representar un logotipo, el campo de imagen no tiene que heredar de la configuración de la marca.
• Tanto para los módulos en un tema como para los módulos independientes:
  • Los nombres de los campos de módulo deben describir el propósito del campo. Por ejemplo, si un campo de texto está destinado a incluir el cargo laboral de una persona, Cargo sería una descripción adecuada, mientras que Título no lo sería.
  • Todos los módulos predeterminados de HubSpot deben tener un diseño y mostrarse correctamente en todas las plantillas enviadas.

​

Configuración de fields.json y module.html

​

Calidad del código del módulo

​

Los módulos deben ser independientes

​

Módulos de tema

​

Módulos independientes

document.addEventListener('DOMContentLoaded', function () {
  // Put Javascript here
});

​

Restricciones de código para módulos independientes

• Se recomienda usar JS vanilla siempre que sea posible. Agregar una biblioteca de jQuery a un sitio que no está utilizando jQuery puede causar conflictos y ralentizar la página del sitio web.
• Si usas una biblioteca jQuery, usa la función require_js() para incluir la biblioteca en caso de que jQuery esté desactivado con la casilla de verificación (Booleano) en la configuración de la cuenta para evitar conflictos de múltiples bibliotecas jQuery.

{% if not site_settings.include_jquery %}
{{ require_js("https://code.jquery.com/jquery-3.7.0.min.js", "footer") }}
{% endif %}

​

Categorías

• Todos los módulos independientes deben tener al menos una categoría. Los módulos enviados como parte de un tema no están obligados a tener categorías, pero es una práctica recomendada incluir al menos una. Más información sobre cómo agregar categorías a los módulos.

​

Selectores de nombre de clase

• Cualquier selector de nombre de clase debe ir precedido del nombre del módulo, reemplazando los espacios con guiones. Por ejemplo, a continuación se muestra el archivo module.html para un botón llamado example-button, con cada nombre de clase y selector CSS reflejando su nombre.

<style>
{% scope_css %}
{# Button wrapper #}
 {% if module.styles.group_alignment.alignment %}
  .example-button-wrapper {
   text-align: {{ module.styles.group_alignment.alignment.horizontal_align }};
   }
 {% endif %}

{# Button #}

.example-button {
 {% if module.styles.group_background.color.color %}
  background-color: rgba({{ module.styles.group_background.color.color|convert_rgb }}, {{ module.styles.group_background.color.opacity / 100 }});
 {% endif %}
 }
 {% end_scope_css %}
</style>
{% end_require_css %}

{##### Module HTML #####}

<div class="example-button-wrapper">
 <a href="{{ href }}" class="example-button"
 {% if module.button_link.open_in_new_tab %}target="_blank"{% endif %}
 {% if rel %}rel="{{ rel|join(" ") }}"{% endif %}
 >
  {{ module.button_text }}
 </a>
</div>

​

Estilos y JavaScript

• Estilos:
  • Los módulos deben tener un grupo de estilo que no esté vacío.
  • No se recomienda la codificación de estilos inline dentro de los módulos. Por el contrario, usa estilos inline dinámicos al habilitar campos para controlar el estilo.
• JavaScript
  • JavaScript debe poder representar múltiples instancias de un módulo. Javascript en el panel de JS solo se cargará una vez por página, independientemente del número de eventos del módulo.
  • Javascript debe hacer referencia a los elementos DOM según los nombres de clase específicos del módulo para garantizar que los elementos que están fuera del módulo no sean afectados de manera accidental.

​

Organización de campos

​

Pestaña de contenido

• Cuando hay al menos un control dentro de un grupo de campos, todos los controles deben agruparse en categorías etiquetadas según su función.
• Los campos de módulo agregados a la pestaña Contenido deben proporcionar formas de personalizar el contenido de un módulo. Por ejemplo, controles de imagen, ícono, texto alternativo y controles de enlaces.

​

Pestaña de estilos

• Ajustes preestablecidos
• Texto
• Fondo
• Borde
• Hover
• Esquina
• Espaciado
• Alineación
• Grupos de estilos personalizados que no se ajustan a lo anterior
• Avanzado

• Alineación
• Imagen de fondo
• Borde
• Color
• Fuente
• Degradado
• Espaciado
• Alineación del texto

• Las opciones de animación siempre deben colocarse cerca de la parte inferior de la lista de grupos de campos.
• Las opciones que permiten a los creadores de contenido agregar fragmentos de código o CSS deben agruparse al final de la lista de grupos de campos bajo un campo con la etiqueta Avanzado.
• Los controles deben estar estandarizados en todos los módulos. Por ejemplo, todos los elementos que pueden tener un control de radio de borde deben ofrecer ese control. Evita ofrecer controles en algunos módulos que estén ausentes en otros.
• Los campos de módulo agregados a la pestaña Estilo deben proporcionar formas de diseñar el módulo. Por ejemplo:
  • Las opciones de estilo, como color, estilo de texto, alineación, espaciado, borde y radio de esquina.
  • Animaciones, como efectos de colocar el cursor y elementos deslizantes.
  • Ajustes preestablecidos, como temas oscuros y claros que están destinados a cambiar muchos estilos al mismo tiempo.

​

Ejemplos de organización de campo

​

Ajustes preestablecidos

​

Agrupación multinivel

​

Agrupar campos individuales