Cómo crear y editar páginas del sitio web

Última actualización: August 10, 2018

Requisitos

Sitio web
Sitio web add-on

Usaremos el editor de contenidos de sitios web para crear y editar el contenido de las páginas de tu sitio web.

Realiza los siguientes pasos para crear páginas para el sitio web que alojas en HubSpot.

Seleccionar las páginas del sitio web

En el Panel de HubSpot, dirígete hasta Contenido > Páginas del Sitio Web.

main-nav-content-website-pages-2016.png

Crear una nueva página del sitio web

Haz clic en el botón Crear una Nueva Página del Sitio Web.

create-new-website-page---website-pages.png

Elegir la plantilla para la página

A continuación, selecciona una plantilla para usarla como la estructura para tu página. Puedes seleccionar una plantilla existente en tu cuenta, comprar una prémium en el mercado de HubSpot o crear un nuevo diseño de plantilla a partir de un prototipo. Para descubrir cómo convertir un prototipo en un diseño de plantilla, haz clic aquí.

Cuando hayas decidido qué plantilla quieres usar, haz clic en la plantilla, designa un nombre para tu nueva página del sitio web y después haz clic en Crear.

select-a-website-page-template.png

Añadir contenido a la página del sitio web

Cuando hayas creado la página, verás la ventana de Edición. Ahí podrás empezar a añadir o editar el contenido. 

Para editar el contenido de los módulos de tu página, coloca el cursor sobre el módulo hasta que aparezca una sombra gris traslúcida y el símbolo de un lápiz. Haz clic en el módulo para editarlo.

edit-module.gif

También puedes hacer clic en el símbolo del cuadrado que se encuentra en la parte izquierda de la ventana para editar los módulos en tu página. Cuando haces clic en este símbolo, aparece una lista de todos los módulos que se pueden editar en tu página. Haz clic en el módulo que quieres editar y el panel de la izquierda mostrará las opciones de edición. Realiza los cambios necesarios, haz clic en Guardar e Ir a la Lista de Módulos en la esquina superior izquierda. 

edit-module-left-sidebar.gif

Añadir módulos al diseño (columnas flexibles)

Si tu plantilla usa columnas flexibles, verás un símbolo de suma en la barra lateral izquierda. Haz clic en este símbolo para ver una lista de los tipos de módulos disponibles. Elige el tipo de módulo que quieres añadir a tu columna flexible. Después, arrastra y suelta el módulo para añadirlo al diseño de tu página.

NOTA: NO verás el símbolo de suma en la barra lateral izquierda si tu plantilla NO tiene columnas flexibles.

add-module-flex.gif

Diseñar el estilo de los módulos

Tus módulos tendrán un estilo predeterminado en función de las hojas de estilo de cada página, pero también puedes personalizar algunos estilos inline de las páginas. Para lograrlo, coloca el cursor sobre el módulo que quieres editar y luego haz clic en el símbolo del pincel en la parte superior izquierda del módulo. Aparecerá un panel con las opciones de estilo para ese módulo en particular. 

style-module.gif

Editar la configuración de la página

Para editar la configuración de tu página, haz clic en la pestaña de Configuración en la parte superior del Editor de Páginas del Sitio web.
edit-page-settings.png

En la parte superior de la ventana de Configuración verás la sección Información Básica. Aquí podrás añadir la información básica de la página que verán los motores de búsqueda y navegadores. 

1. Nombre de la página: nombre interno de la página de tu sitio web. Aparecerá el nombre que le asignaste cuando creaste la página, pero aquí lo puedes editar. La denominación interna sirve para mejorar la organización, ya que los visitantes del sitio web no verán este nombre.
2. Título de la página: es la frase que se muestra en la pestaña de la parte superior de tu navegador cuando la página se carga.
3. URL de la página: es la URL de tu página. Aparece en la barra de direcciones web del navegador cuando los visitantes consultan dicha página.
4. Metadescripción: es el contenido que aparecerá en los resultados de búsqueda debajo del título de la página.
5. Campaña: en este menú desplegable, puedes elegir vincular la página de tu sitio web con una campaña de HubSpot. También puedes hacer clic en el botón Añadir Nueva para crear una campaña nueva.
HubSpot Help article screenshot

Debajo de Información Básica está la sección Opciones Avanzadas, que abarca la configuración de la página, del estilo y de la plantilla.

Puedes hacer clic en cualquiera de los siguientes enlaces para Editar el HTML del Título o Editar el HTML del Pie de Página. Así, podrás añadir fragmentos de HTML básicos, códigos de incrustación o javascripts de seguimiento que se agregarán a las etiquetas (título) o (pie de página) de tu página. Introduce tu código en la ventana emergente y haz clic en Guardar.

 

 

También puedes proteger la página con una contraseña. Esta opción es útil para:

  • Crear una página en tu sitio web solo para el personal interno. Mantener los materiales de ventas y marketing en un solo lugar donde tu equipo pueda tener acceso.
  • Crear una página “exclusiva para clientes” en tu sitio web, plantillas de publicación y materiales específicos para los clientes.
  • Tener una página dedicada a los resellers y partners para obtener materiales avanzados antes del lanzamiento de un producto.

Si quieres activar la protección con contraseña para esta página, marca la casilla que se encuentra al lado de Proteger esta Página con una Contraseña e introduce tu contraseña en el campo de texto que aparezca.

HubSpot Help article screenshot

También puedes elegir si quieres que tu página tenga una fecha y un horario de expiración específicos. Esto puede ser útil si necesitas crear una página web que tenga una oferta de tiempo limitado o un producto que quieras mostrar. Para activar esta característica, marca la casilla al lado de Establecer Fecha de Expiración de la Página. Después, selecciona una fecha de expiración, un horario de expiración y a dónde te gustaría redireccionar a las visitas de esta página cuando haya expirado.

HubSpot Help article screenshot

Gracias a la sección Configuración de Estilo podrás editar los siguientes aspectos:

  • Archivo principal de CSS: muestra el archivo principal de CSS de la página y te permite activarlo, desactivarlo o usarlo de manera predeterminada en el menú desplegable.
  • Hojas de estilo del dominio: muestran el archivo CSS que tiene el dominio y te permiten activarlo, desactivarlo o usarlo de manera predeterminada en el menú desplegable.
  • Hoja de estilo de la plantilla: muestran el archivo CSS que adjuntaste en la plantilla que usa esta página y permiten activarlo, desactivarlo o usarlo de manera predeterminada en el menú desplegable.
  • Hojas de estilo específicas para cada página: muestran cualquier archivo CSS que solo se emplea en esta página. Puedes hacer clic en + Añadir Hoja de Estilo si quieres usar un archivo de CSS en esta página específica.

Para obtener más información sobre cómo adjuntar estas hojas de estilo, haz clic aquí.

HubSpot Help article screenshot

En la sección Configuración de Plantillas, puedes seleccionar Cambiar Plantilla si quieres usar un diseño distinto para tu página o Editar Plantilla para ver el diseño actual y realizar las modificaciones necesarias. En esta sección también podrás ver el nombre y la vista previa de la plantilla actual que usa tu página.

template-settings.png

Optimizar el SEO

Haz clic el símbolo del gráfico de barras en la parte izquierda para visitar la sección Optimización de SEO. Aquí, podrás escribir palabras clave en el campo de texto de esta página en particular. A continuación, verás todos los elementos pendientes. Para optimizar tu página, debes realizar estas actividades. En la siguiente captura de pantalla podrás ver algunos ejemplos de elementos pendientes.

seo-optimize-icon.png

Obtener la vista previa de la página

En el menú lateral izquierdo también puedes seleccionar el símbolo del ojo para abrir la sección de Vista Previa. Desde aquí puedes hacer lo siguiente:

  • Vista previa por dispositivos: haz clic en uno de estos símbolos para visualizar tu página como si estuvieras en una tableta, un teléfono móvil, etc.
  • Vista previa inteligente: marca la casilla al lado de Ver Vista Previa como un Contacto Específico y selecciona un contacto en el menú desplegable. Así, podrás ver la página como si ese visitante específico la estuviera viendo. Esto puede ser útil si usas contenido inteligente en tu página.
  • Vista previa compartible: haz clic en este botón y obtendrás un enlace para visualizar una vista previa en directo que puedes compartir con tus compañeros (aunque la página todavía no se haya publicado). 
HubSpot Help article screenshot

Publicar o programar la publicación de la página

Ya terminaste de editar el contenido, lo optimizaste para los motores de búsqueda y estás satisfecho con la presentación de la vista previa, así que ahora debes dirigirte a la pestaña Publicación o Programación.

Ahí, puedes elegir entre Publicar Ahora o Programar para Después. Haz clic en el botón de radio debajo de la opción que prefieres; si seleccionas Programar para Después, asegúrate de elegir una fecha y hora, y haz clic en el botón azul en la parte superior derecha para Programar o Publicar el contenido. 

HubSpot Help article screenshot

Índice

    Artículo anterior:

    Certificación Inbound Marketing

    Artículo siguiente: