Cómo estructurar y personalizar los diseños de plantillas

Última actualización: December 29, 2016

En el tutorial previo de esta guía, aprendiste cómo crear un diseño de plantilla nuevo. Este artículo explica cómo modificar plantillas una vez que ya han sido creadas.

Estructurar tu plantilla

Mediante el uso de la interfaz de Creador de plantillas del Administrador de diseño, puedes crear rápidamente los diseños de tu contenido, sin tener que escribir ningún HTML. Antes de empezar a editar la estructura de tu plantilla, tendrás que seleccionar la plantilla que quieres editar.
Elegir una plantilla

Agregar y arrastrar módulos

Si bien hay múltiples maneras de agregar un módulo a un diseño, el método más rápido es hacer clic en el botón de Agregar fila. Una vez que lo agregues, arrastra el módulo hasta donde quieras que ese módulo quede en el diseño. Arrastrar módulos encima de otros módulos creara columnas o agrupará los módulos.
Arrastrar y soltar

Cambiar el ancho de las columnas

Para cambiar el ancho de una columna, desplaza el ratón entre los módulos y arrastra horizontalmente (como se ilustra a continuación). 

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

Agrupar módulos

b

Información avanzada

El Generador de plantillas utiliza una rejilla sensible de 12 columnas la cual utiliza un archivo CSS para calcular automáticamente la anchura de cada módulo a través de los diferentes tamaños de los dispositivos. Arrastrando el ancho de una columna ajusta el atributo de clase HTML para ese módulo y HubSpot estiliza la anchura como corresponde. Esta función ahorra diseñadores un montón de tiempo, ya que no tienen que meterse con estilizar las anchuras de los módulos con la excepción de fijar un ancho máximo en el contenedor. Las columnas se acumularán automáticamente en los dispositivos móviles, sin que su diseñador tenga que escribir una sola línea de código. Usted aprenderá más acerca de dónde añadir CSS, en una sección posterior de esta guía.

Desde un punto de vista técnico, agrupaciones agregan marcado de envoltura adicional a conjuntos de módulos. Se puede dar identificadores o clases utilizadas a estas envolturas para atacar y estilizar el área y su contenido.

Lee más

Los grupos de módulos son unidades de módulos que conforman las diferentes secciones de una página. Para agrupar módulos, seleccionar el Grupo... 

Ahora haz clic en los módulos que quisieras agrupar. Una que hayas elegido una selección válida para agrupar, haz clic en Crear grupo.

En el siguiente ejemplo, varios módulos se agrupan en una "cabecera" para la página. En una sección posterior en esta guía, verás cómo los grupos se pueden hacer globales y usarse a lo largo de plantillas.  

 

Módulos de grupo

Dividir horizontalmente

El módulo Dividir horizontalmente divide el módulo en dos y crea dos módulos.

Dividir horizontalmente

Además de dividir el módulo a través de la opción del menú configuración, puedes dividir cualquier módulo al pasar el mouse sobre el mismo y presionar Dividir (se muestra a continuación).

Dividir

Agregar módulo a continuación

Agregar un módulo a continuación inserta un módulo adicional debajo del módulo seleccionado y los agrupa. Los grupos son unidades de módulos que se envuelven en un diseño adicional y se pueden modificar en base al estilo.

Agregar módulo a continuación

Personalizar tu plantilla

Una vez que hayas estructurado el diseño general de tu plantilla, querrás intercambiar módulos y hacer otras personalizaciones para que sea más fácil cambiar su estilo.

Opciones de edición

La función opciones de edición te permite cambiar las configuraciones básicas de un módulo. Estas configuraciones por lo general incluyen el contenido predeterminado, su etiqueta en la pantalla de edición de contenido y otras preferencias de módulos. Según el tipo de módulo, esta característica te ofrecerá diferentes opciones de configuración. Aprenderás más sobre el contenido y configuraciones predeterminados en una sección posterior en esta guía.

Opciones de edición

Editar CSS

Editar CSS hace que sea fácil personalizar las especificaciones de tu plantilla. Aprenderás más sobre agregar clases, identificaciones, estilo en línea y envoltura de especificaciones en una sección posterior de esta guía..

Editar CSS

Intercambiar módulo

El Módulo de intercambio te permite elegir qué tipo de módulo deseas en esa sección de la plantilla. Obtendrás un desglose detallado de los varios tipos de módulos más adelante en esta guía.

Intercambiar módulo

Hacer módulo global

 Hacer un módulo global te permite convertir un módulo en uno global que puede usarse a lo largo de otras plantillas. Aprenderás cómo usar el contenido global en una sección posterior de esta guía.

Hacer módulo global

Eliminar módulo

Eliminar el módulo elimina el módulo. Cuando eliminas un módulo, aparece un aviso para que sepas cuántas páginas o correos electrónicos usan esa plantilla. El contenido en ese módulo se descartará. Presiona Descartar todo para eliminar el módulo y descartar cualquier contenido que esté en uso en ese módulo. Puedes hacer clic en Ver lo que estás descartando para ver el contenido de esa página.  

Si descartaste accidentalmente contenido que deseas recuperar, puedes recuperarlo al volver la revisión de la plantilla a la versión previa del módulo (Acciones > Historial de revisión).

Eliminar módulo

Acciones adicionales de plantillas

Además de tus opciones de módulo, hay varias acciones importantes que quizá tengas que realizar en algún momento mientras trabajas en tus plantillas.  Debajo del menú de  Acciones , tienes las siguientes opciones:

  • Guardar : la opción de guardar guarda el borrador de la plantilla en la que estés trabajando, pero no realiza ningún cambio en vivo para el contenido publicado con esa plantilla.
  • Mover o renombrar plantilla :  esta opción te permite renombrar tu plantilla o moverla a otra carpeta.
  • Clonar : crea un duplicado de tu plantilla. Esta es una gran opción para ahorrarte tiempo cuando deseas crear una variación de una plantilla existente.
  • Clonar para archivar : Clonar para archivar crea una versión de HTML adicional de tu plantilla. Esto es útil si necesitas tener más control sobre tu marcado del que hay disponible por medio del Creador de plantillas, o si deseas aprender más sobre cómo se codifican las plantillas. Aunque recuerda, las plantillas de HTML serán menos flexibles para usuarios internos.
  • Crear una página de una plantilla : esta opción te permite crear una página Página de destino directamente desde el Administrador de diseño.
  • Ver revisionesesta opción te proporciona un historial de revisión para que tu plantilla vuelva a una versión publicada previamente. Las revisiones de plantillas son independientes de las revisiones de páginas y se elaboran cada vez que publicas una plantilla. Autoguardar no crea revisiones.
  • Páginas que usan plantillas : ver una lista de páginas que usan plantillas.
  • Borrar : elimina la plantilla. Por el momento, no hay manera de recuperar plantillas eliminadas.
  • Básico / Con capacidad de respuesta (correo electrónico únicamente) : esta opción alterna plantillas de correo electrónico para que sean básicas (ancho fijo determinado por tu Configuración de contenido > Correo electrónico) o con capacidad de respuesta (flexible a distintos tamaños de pantalla de los dispositivos). Esta opción solo está disponible para plantillas de correo electrónico.
Acciones

Artículo anterior:

Certificación Inbound Marketing

Artículo siguiente: