Ir a contenido principal
Nota: Este contenido se tradujo a través de un software y es posible que no haya sido revisado. La versión en inglés se considera, por tanto, la versión oficial y es posible que haya sido actualizada. Para acceder a la versión en inglés, haz clic aquí.
Landing Pages

Crear una página con una plantilla de inicio

Última actualización: agosto 2, 2022

Requisitos

Todos los productos y planes

Puedes usar una plantilla de inicio para crear un sitio web o una página de destino sencilla. Este artículo cubre cómo crear una nueva página, personalizar el diseño de la página y publicar la usando una plantilla de inicio. 

Nota: las plantillas de inicio no admiten contenido inteligente, módulos personalizados, personalización, acceso al código fuente en módulos de texto enriquecido, páginas protegidas por contraseña u opciones avanzadas como intercambio de plantillas y acceso al HTML de encabezado.


Crear una página con una plantilla de inicio

Para crear una nueva página de destino con una plantilla de inicio:

  • Navega a tu contenido:

    • Páginas del sitio web: En tu cuenta de HubSpot, dirígete a Marketing > Sitio web > Páginas web.
    • Páginas de destino: En tu cuenta de HubSpot, ve a Marketing > Páginas de destino.
  • En la parte superior derecha, haz clic en el menú desplegable Crear y selecciona Página de sitio web Página de destino
  • En la pantalla de selección de plantillas,  las plantillas de tu tema activo aparecerán en la parte superior de la página, mientras que todas las demás plantillas estarán en la sección Otras plantillas en la parte inferior. Haz clic en una plantillaSi no has seleccionado un tema activo, se te solicitará que selecciones uno o haz clic en Saltar a plantillas para elegir una plantilla existente.
  • Para crear la página con la plantilla seleccionada, haz clic en Seleccionar esta plantilla en la parte superior derecha. Para obtener una vista preliminar de la página en dispositivos móviles o de escritorio, haz clic en Vista preliminar

select-a-template-to-create-page

Editar el contenido de tu página

Las plantillas de inicio contienen bloques de contenido del sitio web llamados módulos. Puedes organizar estos módulos en filas horizontales o columnas verticales.

Puedes agrupar filas y columnas en secciones de elementos. Al agrupar elementos juntos, puedes aplicar estilos de fondo a un área completa de tu página. También puedes arrastrar y soltar estos elementos para reorganizar el diseño de tu página. Más información sobre cómo editar el contenido de la página en un área de arrastrar y soltar.

Para personalizar la apariencia de tu página en dispositivos móviles, haz clic en el mobile editícono de editar para dispositivos móviles en el editor de la barra lateral.

editar-versión-móvil-de-una-página

Personalizar fuentes, colores y botones

Para personalizar los estilos predeterminados para tu plantilla de inicio, haz clic en la pestaña Tema en el editor de la barra lateral. También puedes personalizar el color o la imagen de fondo para una fila específica, columna o sección de la página.

Editar-tema-opciones-in-starter-template

 

Tipografía

En la sección Tipografía, edita la fuente y estilo de fuentes que se aplican al cuerpo y encabezados de tu página. Se admiten todas las fuentes Google.
  • Texto del cuerpo: personaliza la fuentes, el tamaño de la fuente y los colores de la fuente del cuerpo de tu página.
    • Haz clic en el menú desplegable Texto del cuerpo y selecciona una fuente.
    • Haz clic en las teclas de flechas para ajustar un tamaño de fuente.
    • Haz clic en el selector de colores y selecciona un color para tu fuente. Para establecer un color personalizado, haz clic en la pestaña Avanzado para introducir un valor hexadecimal
  • Encabezado: personaliza la fuente y el color para el texto en módulos con una etiqueta de encabezado.
    • Haz clic en el menú desplegable Encabezados para seleccionar una fuente.
    • Haz clic en el selector de colores y selecciona un color de fuente.  Para establecer un color personalizado, haz clic en la pestaña Avanzado para introducir un valor hexadecimal
  • Texto del enlace: personaliza las fuentes y los colores que se aplican a los enlaces de tu página
    • Haz clic en el menú desplegable Texto del enlace y selecciona una fuente.
    • Haz clic en el selector de colores y selecciona un color de enlace.  Para establecer un color personalizado, haz clic en la pestaña Avanzado para introducir un valor hexadecimal
    • Haz clic en el menú desplegable y selecciona un estilo para aplicar el texto de tu enlace.
    • Personaliza el color y la transparencia de los enlaces cuando se les coloca el cursor encima, se hace clic en ellos y cuando ya han sido visitados: 
      • Color del enlace cuando se coloca el cursor: haz clic en el selector de colores y selecciona un color de enlace para cuando un visitante pase el cursor sobre este. Para cambiar la transparencia del color, ingresa un valor de porcentaje en el campo de texto. 
      • Color de enlace activo: haz clic en el selector de colores y selecciona un color de enlace para cuando se haga clic en el enlace. Para cambiar la transparencia del color, ingresa un valor de porcentaje en el campo de texto. 
      • Color de enlace visitado: haz clic en el selector de colores y selecciona un color de enlace para cuando el visitante ya haya hecho clic en el enlace. Para cambiar la transparencia del color, ingresa un valor de porcentaje en el campo de texto. 

edit-link-text

Formularios y botones

En la sección Formularios y botones, personaliza el estilo de los botones simples y los botones de envío de formularios de la página.
  • Color de fondo del botón: personaliza el color que se aplica al fondo de tus botones.
    • Introduce un valor hexadecimal o haz clic en el selector de colores y selecciona un color
    • Para establecer la transparencia del color de fondo del botón, ingresa un valor de porcentaje en el campo. 
  • Color del texto de botones: personaliza el color que se aplica al texto de los botones de tu página.
    • Introduce un valor hexadecimal o haz clic en el selector de colores para seleccionar el color del texto.
    • Para establecer la transparencia del color de fondo del botón, ingresa un valor de porcentaje en el campo. 
  • Radio de esquina de los botones: personaliza qué tan circulares o cuadrados aparecen los botones en la página. 
    • Introduce un valor en el campo o haz clic y arrastra el control deslizante a una nueva posición. 
    • Un valor más alto significa que los botones de tu página tendrán bordes redondos, mientras que un valor de cero significa que los botones serán rectangulares.

Nota: HubSpot recomienda mantener colores, fuentes y estilos coherentes según la configuración en la pestaña Diseño. Puedes anular los estilos predeterminados para un módulo individual en la pestaña Opciones en el panel izquierdo.


Vista preliminar y publicar tu plantilla

Antes de que tu página aparezca en vivo, haz clic en Vista preliminar en la parte superior derecha para probar cómo aparecerá tu página en un dispositivo móvilCuando estés satisfecho con la vista preliminar de tu página, haz clic en Publicar en la parte superior derecha. 

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.