Cómo crear y editar páginas web

Última actualización: December 29, 2016

Vamos a usar el editor de contenido de sitios web para crear y editar el contenido de tus páginas web reales.

Sigue los pasos a continuación a fin de crear páginas web para tu sitio web alojado en HubSpot.

Ve a tus páginas web

Desde tu Dashboard de HubSpot, ve hasta Contenido > Sitio web.

Captura de pantalla del artículo Ayuda de HubSpot

Haz clic en crear una nueva página web

Haz clic en el botón Crear una nueva página web.

Captura de pantalla del artículo Ayuda de HubSpot

Elige la plantilla para la página

A continuación, tendrás que seleccionar una plantilla para utilizarla como la estructura de tu página. Puedes buscar entre las plantillas existentes en tu cuenta, comprar una plantilla de alta calidad en el mercado HubSpot o crear una nueva plantilla de diseño convirtiendo una maqueta en un diseño de plantilla. Para aprender a convertir una maqueta en una plantilla de diseño, haz clic aquí .

Cuando hayas decidido cuál plantilla deseas utilizar, haz clic en ella , ponle un nombre a tu nueva página web y luego haz clic en Crear .

Captura de pantalla del artículo Ayuda de HubSpot

Agrega tu contenido a la página web

Cuando hayas creado tu página, te llevará a la pantalla Edición. Ahí puedes comenzar a agregar o editar tu contenido.

Para editar el contenido en los módulos de tu página, coloca el cursor sobre el módulo hasta que aparezca un icono de sombra y lápiz transparente gris sobre este; luego haz clic en el módulo para editarlo. En el siguiente ejemplo, pueden verse los movimientos realizados para editar el logotipo del módulo, el módulo del encabezado y un módulo de texto enriquecido en esta página web.

Captura de pantalla del artículo Ayuda de HubSpot

También puedes hacer clic en el icono del lápiz en el lado izquierdo de la página para editar los módulos en tu página. Al hacer clic en este icono, te mostrará todos los módulos que pueden editarse en tu página. Haz clic en el módulo individual y una ventana emergente para editar ese módulo aparecerá en el editor.

Captura de pantalla del artículo Ayuda de HubSpot

Agregar módulos al diseño (Columnas flexibles)

Si tu plantilla usa columnas flexibles, verás un icono con el signo más en el lado izquierdo. Desde aquí, te llevarán a una sección que te permitirá elegir un tipo de módulo para arrastrar y soltar en tu diseño de página.

NOTA: NO verás el icono de signo más a la izquierda si tu plantilla NO tiene columnas flexibles.

Captura de pantalla del artículo Ayuda de HubSpot

Edita tu configuración de página

Para editar la configuración de página, haz clic en la ficha Configuración en la parte superior del editor de la página web.
Captura de pantalla del artículo Ayuda de HubSpot

En la parte superior de esta sección, hay un gráfico con las vistas a tu página web. Este es el lugar donde querrás agregar la información básica de la página para buscadores y navegadores. En esta sección, puedes agregar lo siguiente:

3. Nombre: Mostrará el nombre interno que le has dado a tu página de destino. Ya le pusiste este nombre cuando creaste la página, pero todavía puedes editarlo aquí. Esta página puede serte útil para organizar y puedes ponerle el nombre que te guste, porque el visitante del sitio web nunca lo verá.
2. Título de la página : esta es la frase que aparece en la barra en la parte superior de tu navegador web cuando se carga la página.
3. URL de la página : esta es la dirección URL de tu sitio web. Puedes cambiar el dominio en el menú desplegable si es necesario.
4. Metadescripción : este es el contenido que aparecerá en los resultados de búsqueda por debajo del título de la página.
5. Campaña : desde este menú desplegable, puedes elegir asociar tu página web a una campaña de HubSpot. También puedes hacer clic en el botón Agregar nueva para crear una nueva campaña.
Captura de pantalla del artículo Ayuda de HubSpot

Debajo de Información básica está la sección Opciones avanzadas, la cual abarca configuración de la página, del estilo y de la plantilla.

Puedes hacer clic en cualquiera de los siguientes enlaces: Editar HTML del encabezado o Editar HTML del pie de página, lo cual te permitirá agregar fragmentos HTML sin procesar, códigos incrustados o javascripts de rastreo que se agregarán en las etiquetas <encabezado> o <pie de página> de tu página. Inserta tu código en la ventana emergente, luego haz clic en Guardar .

 

Captura de pantalla del artículo Ayuda de HubSpot

También puedes proteger tu página creando una contraseña aquí. Esta opción es útil para lo siguiente:

  • Crear una página en tu sitio solo para tu personal. Mantén aquí la garantía de ventas y los materiales de marketing, donde solo tu equipo pueda acceder a ellos.
  • Crear una página "solo para clientes" en tu sitio web con el fin de publicar ahí plantillas y materiales específicos de cliente.
  • Destinar una página para que revendedores y socios consigan material avanzado antes del lanzamiento de un producto.

Si deseas activar una contraseña para esta página, marca la casilla al lado de Proteger esta página con contraseña e ingresa tu contraseña en el campo de texto que aparece.

Captura de pantalla del artículo Ayuda de HubSpot

También puedes elegir si deseas o no que tu página caduque en una fecha y una hora determinadas. Esto resulta útil si debes crear una página web con una oferta o un producto con tiempo limitado que deseas mostrar. Verifica la casilla junto a Establecer caducidad y fecha de la página para seleccionar una fecha de caducidad , una hora de caducidad y adónde deseas redirigir el tráfico de esta página cuando esta caduque.

Captura de pantalla del artículo Ayuda de HubSpot

Verás una sección Configuración de estilo que te permitirá editar lo siguiente:

  • Archivo CSS principal : te mostrará qué tienes establecido en tu archivo CSS principal y te permitirá activar, desactivar o usar de forma predeterminada desde el menú desplegable.
  • Hojas de estilo de dominio : te mostrará el archivo CSS que estás utilizando en todo tu dominio y te permitirá activar, desactivar o usar de forma predeterminada desde el menú desplegable.
  • Hojas de estilo de plantilla : te mostrará el archivo CSS adjunto a la plantilla de esta página que estás utilizando y te permitirá activar, desactivar o usar de forma predeterminada desde el menú desplegable.
  • Hojas de estilos específicas para la página : te mostrará todos los archivos CSS que se aplican solamente a esta página. Puedes hacer clic en + Agregar hoja de estilo si deseas aplicar un archivo CSS a esta página específica.
Captura de pantalla del artículo Ayuda de HubSpot

Dentro de la sección Configuración de plantilla, puedes optar por Intercambiar plantilla si la plantilla que estás utilizando actualmente no es lo que quieres o Editar plantilla para ir al diseño de tu plantilla y editarlo. En el lado derecho de esta sección, verás el nombre y la vista previa de la plantilla que está utilizando tu página actualmente.

Captura de pantalla del artículo Ayuda de HubSpot

Optimización SEO

Haz clic en el icono del gráfico de barras en el lado izquierdo para ir a Pantalla para optimizar configuración. Desde aquí, podrás escribir palabras clave en el campo de texto para esta página en particular y Seleccionar palabras clave . Debajo verás algunos elementos de tareas pendientes, estos son elementos que permiten tomar decisiones para modificar tu página y mejorarla en general. En la siguiente imagen verás algunos ejemplos de elementos que permiten tomar decisiones.

Captura de pantalla del artículo Ayuda de HubSpot

Vista previa de tu página

También en el menú de la izquierda, puedes elegir el icono del ojo para ver la sección Vista previa. Desde aquí puedes hacer lo siguiente:

  • Vista previa según dispositivos : haz clic en uno de los iconos aquí para ver cómo luciría tu página en una tableta, teléfono móvil, etc.
  • Vista previa inteligente : marca la casilla junto a Ver vista previa de la página para un contacto específico y selecciona un contacto desde el menú desplegable. Esto te mostrará la página como si la estuviera viendo ese visitante específico; lo cual puede servirte si estás utilizando contenido inteligente en tu página y deseas probarlo.
  • Vista previa para compatir - haz clic en este botón y se te proporcionará un enlace de vista previa en vivo que puedes compartir con tus colegas (incluso si tu página todavía no está en línea).
Captura de pantalla del artículo Ayuda de HubSpot

Publicar o programar tu página

Ahora que terminaste de editar tu contenido y optimizarlo para los motores de búsqueda, y estás satisfecho con el aspecto de la vista previa tendrás que ir a la ficha Publicar o Programar.

Desde aquí, puedes optar por Publicar ahora o Programar para más tarde. Haz clic en el botón de radio bajo la opción que prefieras (si eliges Programar para más tarde, asegúrate de elegir la fecha y la hora); luego haz clic en el botón azul en la parte superior derecha para Programar o Publicar

Captura de pantalla del artículo Ayuda de HubSpot

Artículo anterior:

Certificación Inbound Marketing

Artículo siguiente: