Un resumen de los módulos personalizados de los temas

Última actualización: March 30, 2016

Los módulos personalizados son características especiales que el desarrollador puede crear con HTML, CSS, JavaScript y HubL. La ventaja de usar módulos personalizados es que los creadores del contenido pueden editar estos componentes del sitio fácilmente y sin tocar ningún código. HubTheme tiene varios módulos personalizados reutilizables que se incluyen en las plantillas de la página de inicio y la sección Comunícate con nosotros y que pueden agregarse a cualquiera de las plantillas básicas del tema.

HubTheme incluye los siguientes módulos personalizados:

  • Módulo de preguntas más frecuentes
  • Miembro del equipo
  • Módulo de well
  • Testimonio
  • Pestañas
  • Tabla de precios
  • Módulo de iconos
Los temas predeterminados de HubSpot sólo están disponibles en nuevas cuentas de HubSpot. Si desea tener un tema estándar instalado en su cuenta existente, siga estas instrucciones para asegurarse de que su cuenta es compatible con estos temas.

Módulo de preguntas más frecuentes

El módulode preguntasmás frecuenteses un excelente recurso para responder las preguntas que los visitantes tienen sobre tu empresa. Este módulo está compuesto por el campo de texto Preguntas, el editor de texto enriquecido Respuestas y la opción de expandir o contraerel módulo.

Módulo de preguntas más frecuentes

Si agregas un módulo de preguntas más frecuentes a la plantilla (como la plantilla de página de inicio ), puedes editar la pregunta y la respuesta desde el editor de la página.

  1. Pregunta más frecuente: escribe la pregunta en el campo de entrada Preguntas más frecuentes.
  2. Respuesta de la pregunta más frecuente: escribe la respuesta en el editor de texto enriquecido Respuestas de las preguntas más frecuentes.
  3. ¿Expandido?: usa la casilla de verificación para elegir si deseas que el módulo aparezca expandido o contraído.
Módulo de preguntas más frecuentes

Usa el módulo de miembro del equipo para personalizar tu empresa y que los demás sepan que están trabajando con personas de carne y hueso. El módulo de miembro del equipo está compuesto por siete campos: Foto en primer plano, Nombre, Puesto, Biografía, Enlace de Facebook, Enlace de LinkedIn y enlace de Twitter.

  1. Foto en primer plano : este campo es un módulo de imagen. Te recomendamos usar la foto de perfil de LinkedIn.
  2. Nombre : es un campo de entrada de una sola línea donde se escriben el nombre y el apellido.
  3. Puesto : es un campo de entrada de una sola línea donde se escribe el puesto de los miembros del equipo.
  4. Biografía : es un campo de editor de texto enriquecido donde se escriben los datos biográficos de los miembros del equipo.
  5. Enlaces de redes sociales : son campos de entrada de una sola línea donde se colocan los enlaces de las redes sociales de los miembros del equipo. Usa el siguiente formato: https://www.facebook.com/hubspot.
Módulo de miembro del equipo

Módulo de well

El módulo de well es un excelente recurso para destacar el contenido.  Tiene estilos de conjuntos que se basan en el tipo de información que contiene. Está compuesto por los siguientes campos: Tipo de well, Tamaño de well, Función de cierre y Editor de texto del well.

Módulo de well
  1. Tipo de well : es un menú desplegable opcional que te permite aplicar un estilo diferente al well. El estilo abarca la temática de color del well, incluidos el fondo, el color del texto y el color de los bordes. Los estilos disponibles son los siguientes:
    • Predeterminado: el color predeterminado del tema
    • Peligro: rojo
    • Primario: azul
    • Éxito: verde
    • Información: celeste
    • Sencillo: gris
  2. Tamaño de well : es un menú desplegable opcional que te permite aplicar rellenos diferentes al módulo de well. Estas son las opciones de tamaños disponibles:
    • Pequeño: 20 px
    • Mediano: 24 px
    • Grande: 28 px
  3. Función de cierre: la casilla de verificación de la función de cierre te permitirá agregar un icono “X”” sobre la esquina superior derecha del well. Esta función permite que el visitante cierre el well. Es útil si quieres usar el well para un mensaje de alerta.
  4. Editor de texto del well: es el campo en el que se escribe el contenido del well.
Editor del módulo de well
El módulo personalizado Tabber se construye utilizando 3 pestañas y 3 paneles de contenido pestaña. Con el fin de sumar o restar el número de pestañas y paneles de contenido pestaña debes editar el módulo personalizado de HTML Tabber.

Testimonio

El módulo de testimonio es un excelente recurso para mostrarles a los visitantes lo que tus clientes dicen sobre tu empresa. Este módulo está compuesto por los siguientes elementos: Nombre, Empresa, Foto en primer plano y Cita textual.

Módulo de testimonio
  1. Nombre : es un campo de entrada de una sola línea donde se escriben el nombre y el apellido.
  2. Empresa : es un campo de una sola línea donde se escribe el nombre de la empresa.
  3. Foto en primer plano : este campo es un módulo de imagen. Te recomendamos usar la foto de perfil de LinkedIn.
  4. Cita textual : una cita que aparece en una burbuja de comentario.
Captura de pantalla del artículo de ayuda de HubSpot

Pestañas

Los módulos de pestañas (también denominados "contenido en varios paneles") son recursos útiles que te permiten mostrar los datos y las especificaciones de los productos. Generalmente, se encuentran en las páginas de productos que tienen un contenido repetitivo y predecible.

Módulo de pestañas
  1. Encabezado de la pestaña : es el texto que aparece en la pestaña.
  2. Panel de contenido de la pestaña : es el contenido que aparece una vez que se selecciona la pestaña.
Editor del módulo de pestañas

Tabla de precios

Las tablas de precios son ideales para las empresas que dependen de las suscripciones. El módulo de tabla de precios está compuesto por los siguientes elementos: Encabezado, Precio, Frecuencia (diaria, mensual, anual), Contenido y Texto del botón Suscríbete.  

Tabla de precios
  1. Encabezado de la tabla de precios : es el encabezado principal de la tabla de precios. Aquí, puedes escribir el nombre de un plan, como Inicial, Básico o Profesional.
  2. Precio : es el campo donde se escribe el precio.
  3. Fecha : es el campo donde se escribe la frecuencia de pago (diaria, mensual, anual).
  4. Editor de texto enriquecido de la tabla de precios : es el campo donde se coloca el contenido principal del plan de precios. Te recomendamos usar viñetas para resaltar los valores clave.
  5. Texto del botón de la tabla de precios : es el campo donde se escribe el texto del botón. Generalmente, se usan “Suscríbete” u “Obtener más información”.
  6. Etiqueta de opción popular de la tabla de precios : es una casilla de verificación que te permite destacar el precio más popular.
Editor de la tabla de precios

Módulo de iconos

Los iconos son un excelente recurso para destacar el contenido y mejorar la facilidad de lectura. Con el módulo personalizado de iconos, se pueden mostrar iconos de la biblioteca de Font Awesome a través de códigos breves.  Estos códigos breves pueden usarse en varios módulos de texto.

Módulo de iconos
  1. Módulo de iconos: es el campo de entrada donde se coloca el icono deseado. Inserta el icono deseado dentro de las comillas, como se muestra a continuación: [fa icon="home"].
  2. Tamaño del icono : edita el tamaño del icono en píxeles. 
Editor del módulo de iconos

Lista completa de iconos disponibles

  adjust
  anchor
  archive
  arrows
  arrows-h
  arrows-v
  asterisk
  ban
  bar-chart-o
  barcode
  bars
  beer
  bell
  bell-o
  bolt
  book
  bookmark
  bookmark-o
  briefcase
  bug
  building-o
  bullhorn
  bullseye
  calendar
  calendar-o
  camera
  camera-retro
  caret-square-o-down
  caret-square-o-left
  caret-square-o-right
  caret-square-o-up
  certificate
  check
  check-circle
  check-circle-o
  check-square
  check-square-o
  circle
  circle-o
  clock-o
  cloud
  cloud-download
  cloud-upload
  code
  code-fork
  coffee
  cog
  cogs
  comment
  comment-o
  comments
  comments-o
  compass
  credit-card
  crop
  crosshairs
  cutlery
  dashboard (alias)
  desktop
  dot-circle-o
  download
  edit (alias)
  ellipsis-h
  ellipsis-v
  envelope
  envelope-o
  eraser
  exchange
  exclamation
  exclamation-circle
  exclamation-triangle
  external-link
  external-link-square
  eye
  eye-slash
  female
  fighter-jet
  film
  filter
  fire
  fire-extinguisher
  flag
  flag-checkered
  flag-o
  flash (alias)
  flask
  folder
  folder-o
  folder-open
  folder-open-o
  frown-o
  gamepad
  gavel
  gear (alias)
  gears (alias)
  gift
  glass
  globe
  group (alias)
  hdd-o
  headphones
  heart
  heart-o
  home
  inbox
  info
  info-circle
  key
  keyboard-o
  laptop
  leaf
  legal (alias)
  lemon-o
  level-down
  level-up
  lightbulb-o
  location-arrow
  lock
  magic
  magnet
  mail-forward (alias)
  mail-reply (alias)
  mail-reply-all
  male
  map-marker
  meh-o
  microphone
  microphone-slash
  minus
  minus-circle
  minus-square
  minus-square-o
  mobile
  mobile-phone (alias)
  money
  moon-o
  music
  pencil
  pencil-square
  pencil-square-o
  phone
  phone-square
  picture-o
  plane
  plus
  plus-circle
  plus-square
  plus-square-o
  power-off
  print
  puzzle-piece
  qrcode
  question
  question-circle
  quote-left
  quote-right
  random
  refresh
  reply
  reply-all
  retweet
  road
  rocket
  rss
  rss-square
  search
  search-minus
  search-plus
  share
  share-square
  share-square-o
  shield
  shopping-cart
sign-in
  sign-out
  signal
  sitemap
  smile-o
  sort
  sort-alpha-asc
  sort-alpha-desc
  sort-amount-asc
  sort-amount-desc
  sort-asc
  sort-desc
  sort-down (alias)
  sort-numeric-asc
  sort-numeric-desc
  sort-up (alias)
  spinner
  square
  square-o
  star
  star-half
  star-half-empty (alias)
  star-half-full (alias)
  star-half-o
  star-o
  subscript
  suitcase
  sun-o
  superscript
  tablet
  tachometer
  tag
  tags
  tasks
  terminal
  thumb-tack
  thumbs-down
  thumbs-o-down
  thumbs-o-up
  thumbs-up
  ticket
  times
  times-circle
  times-circle-o
  tint
  toggle-down (alias)
  toggle-left (alias)
  toggle-right (alias)
  toggle-up (alias)
  trash-o
  trophy
  truck
  umbrella
  unlock
  unlock-alt
  unsorted (alias)
  upload
  user
  users
  video-camera
  volume-down
  volume-off
  volume-up
  warning (alias)
  wheelchair
  wrench
  check-square
  check-square-o
  circle
  circle-o
  dot-circle-o
  minus-square
  minus-square-o
  plus-square
  plus-square-o
  square
  square-o
  bitcoin (alias)
  btc
  cny (alias)
  dollar (alias)
  eur
  euro (alias)
  gbp
  inr
  jpy
  krw
  money
  rmb (alias)
  rouble (alias)
  rub
  ruble (alias)
  rupee (alias)
  try
  turkish-lira (alias)
  usd
  won (alias)
  yen (alias)
  angle-double-down
  angle-double-left
  angle-double-right
  angle-double-up
  angle-down
  angle-left
  angle-right
  angle-up
  arrow-circle-down
  arrow-circle-left
  arrow-circle-o-down
  arrow-circle-o-left
  arrow-circle-o-right
  arrow-circle-o-up
  arrow-circle-right
  arrow-circle-up
  arrow-down
  arrow-left
  arrow-right
  arrow-up
  arrows
  arrows-alt
  arrows-h
  arrows-v
  caret-down
  caret-left
  caret-right
  caret-square-o-down
  caret-square-o-left
  caret-square-o-right
  caret-square-o-up
  caret-up
  chevron-circle-down
  chevron-circle-left
  chevron-circle-right
  chevron-circle-up
  chevron-down
  chevron-left
  chevron-right
  chevron-up
  hand-o-down
  hand-o-left
  hand-o-right
  hand-o-up
  long-arrow-down
  long-arrow-left
  long-arrow-right
  long-arrow-up
  toggle-down (alias)
  toggle-left (alias)
  toggle-right (alias)
  toggle-up (alias)
  arrows-alt
  backward
  compress
  eject
  expand
  fast-backward
  fast-forward
  forward
  pause
  play
  play-circle
  play-circle-o
  step-backward
  step-forward
  stop
  youtube-play
 
  adn
  android
  apple
  bitbucket
  bitbucket-square
  bitcoin (alias)
  btc
  css3
  dribbble
  dropbox
  facebook
  facebook-square
  flickr
  foursquare
  github
  github-alt
  github-square
  gittip
  google-plus
  google-plus-square
  html5
  instagram
  linkedin
  linkedin-square
  linux
  maxcdn
  pagelines
  pinterest
  pinterest-square
  renren
  skype
  stack-exchange
  stack-overflow
  trello
  tumblr
  tumblr-square
  twitter
  twitter-square
  vimeo-square
  vk
  weibo
  windows
  xing
  xing-square
  youtube
  youtube-play
  youtube-square

Artículo anterior:

Certificación Inbound Marketing

Artículo siguiente: