Cómo agregar características de temas a un sitio web existente de HubSpot CMS

Una de las ventajas de HubSpot es que no es necesario actualizarlo constantemente. CMS Hub utiliza siempre la última versión. Las nuevas funciones introducidas con CMS Hub son adicionales. Por lo tanto, las plantillas, módulos, etc., de los sitios web existentes de HubSpot CMS funcionan de la misma manera en que los construiste. Incluso son mejores, ya que entre bastidores, el CMS es cada vez mejor, más rápido y más fácil de editar. 

Hay algunas características específicas de CMS Hub que un desarrollador necesita agregar. Puedes implementar algunas de estas características de forma diferente a como lo harías en un sitio web nuevo. Este tutorial te guiará en la adición de estas características en tus sitios web actuales. 

Antes de continuar:

• Repasa los conceptos clave de CMS Hub aunque lleves mucho tiempo creando en HubSpot. Comprenderás mejor cómo encajan todas las piezas.
• También necesitarás usar la CLI del CMS, así que si no la tienes instalada, configúrala.

Puedes agregar y utilizar estas funciones de forma independiente. Empieza por el encabezado para conocer las características específicas que necesitas. No es necesario seguir este tutorial de forma completamente lineal.

Los temas de CMS Hub son un paquete de plantillas, módulos y archivos CSS, JSON y JS. El hecho de que los temas sean un paquete tiene significado en toda la experiencia del editor de contenido. 

Al crear un nuevo sitio web o una página de destino, al creador de contenido se le presenta una cuadrícula con los temas de su cuenta. Este selecciona el tema que está utilizando y luego se le muestra una cuadrícula con las plantillas de ese tema.

Cuando se edita una página utilizando una plantilla de un tema, los módulos de ese tema reciben un tratamiento especial que los hace destacar en el panel de agregar módulos.

Haces que tus plantillas, módulos, archivos CSS y JS sean un tema si están dentro de la misma carpeta contenedora. No importa si están organizados en subcarpetas; solo importa que esos materiales estén contenidos en una carpeta. Si ya están almacenados de esa manera, genial, si no, crea esta carpeta y mueve tus materiales a ella. Dale a esa carpeta el nombre que quieras darle al tema. El nombre depende totalmente de ti, pero tal vez podrías ponerle el nombre de la marca de la empresa que refleja el sitio, y el año del rediseño o la actualización.

Los temas requieren dos archivos JSON, y solo uno de ellos necesita contenido real al principio.

• Theme.json: contiene la configuración del tema.
• Fields.json: contiene campos que pueden utilizarse para realizar cambios de diseño en todo el sitio.

Los archivos JSON son especiales y actualmente no se pueden crear en el administrador de diseño. Estos archivos PUEDEN cargarse a través de la CLI del CMS. 

1. Recoge en tu equipo la carpeta contenedora que creaste en el paso «Coloca los archivos existentes en una carpeta contenedora». 
2. Dentro de la carpeta, en tu equipo, crea un nuevo archivo con el nombre theme.json.
3. Copia el archivo theme.json de ejemplo en el documento de temas.
4. Pega el código de ejemplo en el archivo theme.json.
5. Cambia el valor de "label" para que sea el nombre del tema, ya que quieres que los creadores de contenido lo vean.
6. Cambia "preview_path" por la ruta de la plantilla de página de inicio o por la de la plantilla que más has utilizado.
7. Haz una captura de pantalla de la página de inicio del sitio web. Dale a la imagen el nombre de thumb.jpg. Coloca la imagen dentro de la misma carpeta que tu archivo theme.json.
8. Cambia "screenshot_path" en theme.json por la ruta de la imagen thumb.png.
9. Guarda el archivo.
10. Dentro de la misma carpeta que theme.json crea un nuevo archivo y llámalo fields.json. Dentro de este archivo introduce solo [] y guarda el archivo.

Para ver los cambios en el administrador de diseño, ejecuta el comando hs upload. Ahora tienes un tema básico. Los módulos y plantillas que hay en ese tema se mostrarán asociados al tema.

Los campos de tema son controles que se pueden proporcionar a un creador de contenido para que pueda realizar cambios de estilo en todo el tema.

Durante la creación inicial de un sitio web, estos controles de tema permiten a los creadores de contenido participar en la definición de la marca del sitio. Los equipos pueden descubrir que esto libera al desarrollador para que se centre en los aspectos más técnicos de desarrollo del sitio.

En los sitios web existentes, los campos de tema pueden ser innecesarios. Después de todo, si el sitio web ya fue construido a la medida, probablemente no tiene sentido agregar controles de color y tipografía en todo el sitio. Si la marca de un sitio web está cambiando significativamente, puede ser más apropiado hacer un rediseño que agregar campos retroactivamente. En última instancia, sin embargo, esta es una decisión que debe tomarse de forma conjunta con las demás partes interesadas en el sitio web.

Para agregar campos al tema, agrega tu JSON al archivo fields.json. Los campos tienen la misma estructura que los campos de módulo.

Asegúrate de que los usuarios que deben tener acceso para cambiar los valores de los campos de tema, tienen el permiso «Editar contenido global y temas». Debes asegurarte de que los usuarios que no quieras que puedan editar estos valores de configuración NO los tengan activados.

Las áreas de arrastrar y soltar y los parciales globales requieren el uso de archivos HTML + HubL codificados. Si es posible que tu sitio web actual esté construido con el antiguo sistema de arrastrar y soltar del administrador de diseño y quieres utilizar esas nuevas características, quizá tengas que clonar esas plantillas como HTML.

Para clonar estas plantillas como plantillas HTML + HubL:

1. Abre el administrador de diseño y busca la plantilla en el buscador.
2. Haz clic con el botón derecho del ratón en la plantilla.
3. En el menú contextual que aparece, elige «Clonar como HTML»

Ahora tienes lo que necesitas para trabajar en la adición de áreas de arrastrar y soltar y los parciales globales.

Las áreas de arrastrar y soltar pueden agregarse a las plantillas para proporcionar a los creadores de contenido una forma de colocar los módulos tanto horizontal como verticalmente en una página. Las áreas de arrastrar y soltar también proporcionan un control adicional del estilo en el creador de contenido. Puesto que una plantilla con un área de arrastrar y soltar puede utilizarse para crear muchos diseños diferentes, esto libera al desarrollador para que se centre en los aspectos técnicos de la creación y actualización del sitio.

Eso depende completamente de si la página cumple con los objetivos de tu empresa. En otras palabras, se aplica el viejo adagio de «Si no está descompuesto, no lo arregles».  Si es necesario cambiar el diseño de la página, entonces probablemente sí conviene convertir la página para usar áreas de arrastrar y soltar. Si la página cumple su función y no necesita cambios de diseño, probablemente esté bien como está.

Es relativamente fácil crear un clon de una plantilla antigua y cambiar la columna flexible por un área de arrastrar y soltar. Es una buena idea, ya que abre muchas posibilidades para los creadores de contenido. Eso les da a los creadores de contenido un gran control creativo en las nuevas páginas. Si la plantilla es una plantilla de arrastrar y soltar del administrador de diseño, consulta Clonar arrastrar y soltar del administrador de diseño como HTML.

1. La solución más fácil es encontrar las instancias de columnas flexibles que utilizan la etiqueta de HubL {% widget_container "my_unique_column_name" %}.
2. Reemplaza cada instancia según sea necesario con{% dnd_area "my_unique_area_name" %}.
3. Si no te interesa establecer los módulos predeterminados, deja dnd_area vacío. Si quieres llevar los módulos predeterminados para la región o establecer nuevos valores predeterminados útiles, dentro de dnd_area agrega dnd_section, y dentro de este, agrega dnd_column.
4. Para cada etiqueta de módulo dentro del antiguo widget_container, es conveniente que crees un fila dnd_row que contenga un dnd_module con una ruta coincidente con los módulos que quieras mostrar de forma predeterminada. Esto creará la misma disposición vertical que tenía la columna flexible.

Si deseas convertir una página para que use áreas de arrastrar y soltar, la forma más segura de hacerlo es utilizar la preparación de contenido.

1. Abre la herramienta de preparación de contenido, busca la página actual y prepárala. Elige «Preparar página en blanco»
2. Selecciona la nueva plantilla que utiliza el área de arrastrar y soltar.
3. Copia y pega la información de la versión original de la página y crea el diseño que desees.
4. Cuando hayas terminado, publica para preparar.
5. En la herramienta de preparación de contenido, ve a la pestaña «Publicar». Selecciona la página y publícala desde la preparación.

Los parciales globales son contenido HTML & HubL que pueden reutilizarse en todo el sitio web. Los tipos de parciales globales más comunes son los encabezados, las barras laterales y los pies de página del sitio web. Para los creadores de contenido, los parciales globales se manifiestan en el editor de contenido como regiones que estos pueden seleccionar para editarlas en el editor de contenido global. El editor de contenido global tiene el mismo aspecto que el editor de la página, pero se utiliza para editar el contenido global. 

Para ilustrarlo, podrías implementar el encabezado como un parcial global con módulos para la navegación y otro contenido. Para el creador de contenido, si este necesita agregar un enlace a la navegación, podría hacer clic en el encabezado en el editor de la página y luego hacer clic en el módulo de menú y actualizar el menú.

Asegúrate de que los usuarios que deben tener acceso a la edición de contenido global tengan el permiso «Editar contenido global y temas».

En las cuentas de CMS Hub Enterprise, las alertas de código proporcionan una ubicación centralizada para que los desarrolladores y los administradores de TI tengan una visión general de los problemas que afectan el rendimiento y la representación de las páginas y los materiales en la cuenta.

Ya que estás optimizando activamente el sitio para aprovechar las nuevas características. Es una buena idea revisar las alertas de código de tu cuenta y resolver las que existan.