Cómo crear un sitio web

En este artículo, aprenderás a crear un sitio web usando el creador de sitios web.

Tabla de contenido:

La función de Sitios web en systeme.io te permite crear y gestionar sitios web de varias páginas desde una sola interfaz.

Cómo crear un sitio web

Para comenzar, ingresa a la pestaña Sitios (1) en tu menú principal y haz clic en Sitios web (2).

En la página del listado de sitios web, haz clic en Crear (3).

En la ventana emergente, ingresa los siguientes detalles de tu sitio web:

  • Nombre: ingresa el nombre de tu sitio web (4)
  • Nombre de dominio: selecciona el dominio que deseas utilizar (5)
  • Ruta URL de la página de inicio: una vez que selecciones el dominio, este campo aparecerá automáticamente. Úsalo para definir la ruta de URL de tu página de inicio (6)
  • Idioma: elige el idioma principal para tu sitio web (7)

Después de completar todos los campos requeridos, haz clic en Guardar (8) para crear tu sitio web.

Importante:

  • Un dominio solo puede ser asignado a un solo sitio web.
  • Si el dominio que deseas usar ya está vinculado a otro sitio web, primero debes quitarlo de ese sitio web antes de asignarlo aquí.

Después de guardar los detalles de tu sitio web, se abrirá una ventana que te pedirá que elijas una plantilla para tu página de inicio.

Puedes elegir una de las siguientes opciones:

  • Seleccionar una plantilla: elige uno de los diseños pre elaborados y personalízalo.
  • Crear desde cero: comienza con una plantilla en blanco y diseña todo manualmente.

Una vez que selecciones una opción, haz clic en Guardar (9) para continuar.

Después de guardar la plantilla seleccionada para su sitio web, serás redirigido al editor del sitio web.

Descripción general del editor

El editor contiene cuatro pestañas principales que utilizarás para crear y gestionar tu sitio web:

  • Páginas – gestiona la estructura de tu sitio web, cambia entre páginas, crea nuevas páginas y accedes a la configuración de las páginas.
  • Ventanas emergentes – crea y gestiona ventanas emergentes para tu sitio web.
  • Estilo – define la configuración del diseño global como fuentes, colores y botones.
  • Configuración – configura las opciones a nivel del sitio web como idiomas y configuraciones generales.

Cómo gestionar las páginas

En la pestaña de páginas se gestiona la estructura de tu sitio web.

Desde allí, puedes ver todas las páginas (1), alternar entre ellas y crear nuevas haciendo clic en (+) Crear (2).

Al crear una nueva página, encontrarás un interruptor en la ventana emergente de creación para agregar la página al menú de tu sitio web, el cual está habilitado por defecto y añadirá automáticamente un enlace a tu nueva página en el menú de navegación del sitio web.

Nota: si una página está desactivada, seguirá apareciendo en tu menú mientras estés en los modos de editor y vista previa, pero no será visible para los visitantes en tu sitio web público.

Haz clic en cualquier página de la lista para mostrarla en el área del editor a la derecha. Para comenzar a editar esa página, haz clic directamente dentro del área del editor .

Esto abre el panel del editor de página, donde encontrarás todos los elementos disponibles para personalizar tu página:

Puedes regresar a tu lista de páginas en cualquier momento haciendo clic en Páginas en la parte superior izquierda del editor.

Si intentas cambiar de página o salir del editor con cambios no guardados, aparecerá una ventana emergente de confirmación:

Nota: el editor del sitio web utiliza el mismo creador de página disponible en los túneles de ventas, así que todas las herramientas de edición funcionan de la misma manera.

Configuración de la página

Para acceder a la configuración de una página, haz clic en el menú de los tres puntos junto al nombre de la página.

Este menú muestra las siguientes opciones:

  • Configuración
  • Dejar de publicar
  • Eliminar

Nota: la página de inicio no puede ser eliminada. Solo las páginas secundarias incluyen la opción de eliminar.

Al hacer clic en Configuración, se abrirá la ventana emergente de configuración de página con las siguientes secciones:

Ajustes generales

Aquí puedes editar:

  • Nombre de la página
  • Ruta de URL

SEO

Usa esta sección para establecer cómo aparecerá tu página en los motores de búsqueda.

Puedes definir el título, la descripción, las palabras clave, el autor, la imagen y la vista previa de cómo se verá en los resultados de las búsquedas.

También es posible ocultar esta página de los motores de búsqueda, evitando que aparezca en los resultados de las búsquedas.

Idiomas

Esta pestaña permite crear versiones de idiomas específicos de la página.

Al hacer clic en Duplicar versiones de idioma específicas de esta página, se creará una copia de la página para el idioma seleccionado, permitiéndote traducir manualmente su contenido.

Importante: primero debes agregar los idiomas que deseas implementar en Configuración → Idiomas para que aparezcan aquí.

Opciones avanzada

En esta pestaña puedes agregar códigos de seguimiento personalizados a cada página.

Usa solo scripts validados ya que códigos no compatibles pueden afectar el desempeño o el comportamiento de la página.

Cómo publicar las páginas

Las páginas recién creadas por defecto se agregan en modo borrador

Para publicar una página, haz clic en los tres puntos y selecciona Publicar.

Nota: puedes desactivar una página de la misma manera.

Cómo usar las ventanas emergentes

Haz clic en el botón + Crear en la pestaña Ventanas emergentes para crear una nueva ventana emergente.

Una vez que la ventana emergente aparezca en el área del editor, haz clic en ella para comenzar a personalizar.

El panel de edición se abrirá en el lado izquierdo de la pantalla, desplegando todas las configuraciones disponibles.

Ventana emergente de la página vs. Ventana emergente del sitio web

Cada ventana emergente puede ser:

  • Ventana emergente de la página: visible solo en la página que estás editando.
  • Ventana emergente del sitio web: visible en todas las páginas del sitio web.

Para alternar entre estos modos, haz clic en el ícono del globo.

  • Si el ícono de globo es azul, la ventana emergente es para el sitio web.
  • Si el ícono de globo es gris, la ventana emergente es para la página.

La etiqueta del estado arriba de la lista de ventas emergentes se actualiza automáticamente para reflejar tu elección:

  • Ventana emergente de una página
  • Ventana emergente de un sitio web

Cómo agregar un elemento de formulario a tu sitio web

Para capturar fácilmente leads en su sitio web, puedes utilizar el elemento unificado de formulario. En lugar de agregar campos de formulario y botones por separado, el  elemento de Formulario actúa como un solo contenedor que agrupa tus campos, casillas de verificación y el botón de envío. Esto te permite crear de manera confiable múltiples formularios independientes en la misma página.

Cuando haces clic en el elemento del Formulario, puedes configurarlo completamente utilizando el panel de menú a la izquierda del editor:

a. Bajo la pestaña Elementos:

  • Administrar campos estándar: Elimina fácilmente los campos de entrada estándar (como nombre, teléfono) al pasar el cursor sobre el campo que deseas eliminar, y aparecerá el ícono de papelera (1).

También puedes editar los campos estándar simplemente haciendo clic sobre ellos; puedes editar el texto de marcador, hacerlo opcional marcando la casilla Opcional, agregar un ícono y editar el diseño.

  • Agregar un campo nuevo: desplázate hacia abajo y haz clic en el botón (+) (2) para agregar nuevos campos de inmediato.

Puedes elegir entre los que existen por defecto, como código postal, nombre de la empresa, etc. También puedes añadir una casilla de verificación (3).

O añade un campo personalizado (4).

Nota: los campos personalizados se crean desde la página de contacto de tu panel. Una vez creados, aparecen automáticamente en la configuración del formulario bajo "Campos personalizados".

Consulta la siguiente página para aprender más: Cómo añadir un campo de formulario personalizado

Después de añadir tus campos, puedes organizarlos arrastrándolos y soltándolos en el orden que desee.

b. En la pestaña de Diseño:

  • Personalizar apariencia: Por defecto, el elemento del formulario hereda automáticamente la configuración de estilo global de tu sitio web. Sin embargo, puedes utilizar la pestaña de diseño para anular estas configuraciones y personalizar completamente los bordes, el espaciado, la posición y los colores para adaptarlos a la disposición específica de tu página.

c. En la pestaña de Acciones:

  • Puedes establecer reglas de redirección (después del envío): elige qué sucede después de que se envíe el formulario.
    • Sin redirección (5)Puedes elegir mantener a los visitantes en la misma página y mostrar un mensaje de envío exitoso.

    • URL personalizada (6): puedes elegir redirigir a los visitantes a otra página.

  • Doble opt-in (7): Simplemente marca la casilla para habilitar el doble opt-in para tus nuevos suscriptores.

  • Automatizaciones en el editor (8): agrega reglas de automatización directamente dentro del editor de páginas. Puedes activar fácilmente acciones específicas (como agregar una etiqueta, suscribir a una campaña o enviar un correo) en el momento en que alguien envía el formulario.

Fuera del editor de páginas, también puedes seleccionar tu elemento de formulario específico al configurar un generador "Suscrito de formulario de un sitio web" en tu cuenta dentro de:

Reglas de automatización:

Y flujos de trabajo:

Cómo configurar el estilo global

La pestaña Estilo controla la configuración de la apariencia global que es aplicada a todas las páginas del sitio web.

Puedes configurar:

  • Tipografía (encabezados y párrafos)
  • Colores (De fondo, botones y enlaces)
  • Botones
  • Campos de formulario (padding, radio, bordes, colores)

Los cambios generados aquí se aplican globalmente a todo el sitio web.

Después de agregar elementos como texto, imágenes u otros bloques a la página de su sitio web, puede deshacer rápidamente los cambios de estilo haciendo clic en el ícono de Restablecer junto a configuraciones como tipografía, colores, tamaño o posición.

Configuración general

La pestaña Configuración controla las opciones generales del sitio web, que incluye:

  • Nombre del sitio web
  • Dominio
  • Página de inicio
  • Idioma
  • Logo

Cómo cambiar el idioma del sitio web

En la parte superior de la pestaña Páginas, puedes cambiar el idioma del sitio web usando el menú desplegable.

Al seleccionar un idioma diferente, la lista de páginas se actualiza desplegando las páginas disponibles para la versión de ese idioma.

Importante:

Al cambiar el menú desplegable, no se traduce el contenido automáticamente. La versión de cada página debe ser editada manualmente.

Cómo crear un sitio web multilingüe

La función sitios web es compatible con estructuras multilingües

Para crear sitios web multilingües:

  1. Crea tu sitio web principal en un idioma.
  2. Para cada página, abre el menú de los tres puntos y dirígete a Idiomas.
  3. Duplica la página para el lenguaje que deseas agregar.
  4. Cambia el idioma del sitio web en el menú desplegable de Páginas.
  5. Edita manualmente la versión traducida de cada página.

Esto garantiza control completo del contenido desplegado en cada idioma.

Cómo conocer la vista previa en diferentes dispositivos

Al editar cualquier página, puede conocer su vista previa en diferentes dispositivos,

Usa la barra de la vista previa en la parte superior derecha para cambiar entre:

  • Vista de ordenador
  • Vista móvil vertical
  • Vista móvil horizontal

Esto te permite revisar si el diseño funciona en todos los tamaños de pantallas.

Reglas para el uso del dominio

Si necesitas cambiar el dominio de tu sitio web, luego de que el sitio web ya haya sido creado o publicado, puedes actualizar esta información desde la lista del sitio web.

Para acceder a la configuración del sitio web:

  1. Abandona el editor del sitio web
  2. Ingresa a Sitios > Sitios web
  3. Encuentra tu sitio web en la lista
  4. Haz clic en el menú de los tres puntos al lado del sitio web
  5. Selecciona Configuración

Esto abre la ventana emergente de Editar sitio web en donde puedes modificar:

  • Nombre del sitio web
  • Nombre de dominio
  • Ruta URL de la página de inicio

Al hacer clic en el ícono de la X para eliminar el dominio asignado, el sistema desplegará una advertencia informándote que el sitio web será desactivado hasta que un nuevo dominio sea seleccionado.

Importante:

Al eliminar el dominio, se desactivará el sitio web. Tu sitio permanecerá inaccesible hasta que asignes otro dominio.