Tiempo de lectura: 2 minutos

1. El Constructor de Sitios Web (CMS) es la pieza central de Sitejet, donde ocurre la magia. Aquí te mostramos detalles importantes sobre sus características, incluyendo enlaces para obtener más información.

   El Constructor de Sitios Web tiene cuatro áreas importantes:

   1. Barra lateral de contenido y navegación (a la izquierda).
   2. Barra de menú (en la parte superior).
   3. Editor WYSIWYG (en el centro).
   4. Barra inferior (que incluye las migas de pan y acceso al área de código).

Navegación superior

Comenzando por el lado izquierdo de la navegación superior, encontramos el menú de hamburguesa del cual hablaremos en detalle en la siguiente sección. A continuación, está el ícono de flecha izquierda que permite Deshacer (Ctrl + Z) cambios y el ícono de flecha derecha que permite Rehacer (Ctrl + Y) cambios.

Al hacer clic en el ícono de ojo (o usar Ctrl + P) puedes previsualizar tu sitio web dentro del editor; por eso lo llamamos el ícono de vista previa. Esta función te permite verificar y probar cambios que aún no han sido guardados. Si pasas el cursor sobre el ícono de vista previa, verás un menú desplegable con opciones adicionales:

• Vista previa: El modo de vista previa dentro del editor; no es necesario guardar.
• Abrir sitio de vista previa: Esto abrirá tu sitio web en una nueva pestaña. Si deseas verificar y probar cambios, debes guardar (o usar Ctrl + S) antes de abrir el sitio de vista previa, ya que solo muestra la última versión guardada del sitio.
• Modo de presentación: Aquí verás tu sitio web en vistas de escritorio, tableta y móvil al mismo tiempo para obtener una visión rápida de cómo se ve y se comporta en diferentes dispositivos.
• Compartir enlace de presentación: Este es el enlace al modo de presentación.
• Enlace a la herramienta de retroalimentación: Aquí encontrarás el enlace a la herramienta de retroalimentación que tus clientes pueden usar para agregar comentarios directamente a elementos específicos del sitio web. Esto mejora significativamente el proceso de retroalimentación con tus clientes.

A continuación, tenemos la opción de recargar, que volverá a cargar tu sitio web.

Asegúrate de guardar cualquier cambio si deseas conservarlo, ya que la recarga restablecerá tu sitio a la última versión guardada.

Junto a recargar, encontrarás el ícono de guardar (Ctrl + S). Este ícono se vuelve naranja si se han realizado cambios en el sitio web. Si tu sitio ya está publicado, todos los cambios que guardes se enviarán directamente al sitio en vivo.

En el centro de la navegación superior, puedes elegir entre vistas de escritorio, tableta y móvil para verificar tu sitio web en todos los dispositivos y ajustar la configuración responsiva si es necesario.

Si pasas el cursor sobre una vista, encontrarás diferentes dispositivos predefinidos para verificar tu sitio en diferentes resoluciones. Usando el menú desplegable de porcentaje, también puedes determinar qué factor de zoom se debe usar y, si deseas fijar el factor de zoom, puedes hacerlo haciendo clic en el candado; de lo contrario, el zoom se ajustará según el dispositivo elegido.

Bajo Diseño, encontrarás todas las configuraciones globales del sitio web, como el esquema de colores, fuentes y diseño de botones, que afectarán a todo el sitio y garantizarán un estilo y diseño consistentes, incluso si decides cambiarlos más adelante. Puedes sobrescribir estas configuraciones de diseño en los paneles de configuración de los elementos y preajustes individuales.

En Páginas, encontrarás todas las subpáginas de un sitio web. Puedes agregar nuevas subpáginas, editar URL y nombres de páginas, agregar información meta específica del sitio, proteger una subpágina con una contraseña y determinar si una subpágina debe ser indexada por los motores de búsqueda. Cada subpágina se abrirá como una pestaña sobre la navegación superior.

 

En Tareas, puedes agregar tareas globales o recordatorios, o puedes agregar tareas en la página que pueden estar conectadas a elementos específicos del sitio web. Esto facilita la gestión del proceso de retroalimentación con tus clientes, quienes tienen una versión similar de la función de tareas en el portal del cliente llamada herramienta de retroalimentación; pero también simplifica el proceso de auditoría y retroalimentación con tu equipo, por ejemplo, si revisan los sitios web de otros. Cómo usar la función de tareas en el editor de sitios web y en el portal del cliente se explica en detalle aquí.

 

Si tu sitio web aún no está publicado, también verás un botón de Publicar en la navegación superior. Esto te redirigirá al administrador de dominios de un sitio web donde puedes agregar y gestionar los dominios de tu sitio para publicarlo.

Menú de hamburguesa

En el menú de hamburguesa encontrarás las siguientes funciones importantes:

Redirecciones: Aquí puedes agregar tres tipos diferentes de redirecciones: 301, 302 y 410.

Copias de seguridad: Aquí encontrarás todas las copias de seguridad que el sistema guarda automáticamente cada 5-10 minutos durante una sesión activa en el editor de sitios web. También puedes crear tus propias copias de seguridad manuales.

Exportación del sitio web: Aquí puedes exportar tu sitio web como un archivo ZIP.

Preferencias: Aquí puedes configurar tus preferencias al usar el editor de sitios web. Por ejemplo, puedes cambiar el idioma del editor, decidir si los paneles deben cerrarse al guardar el sitio web o si solo la página de inicio o todas las subpáginas deben crearse al agregar un nuevo idioma.

Ayuda: Aquí tienes acceso directo a todos nuestros recursos de ayuda.

Atajos: Utiliza los atajos implementados para ser más eficiente al crear tu sitio web. Puedes usar atajos comunes como Ctrl + C y Ctrl + V para copiar y pegar elementos, pero también tenemos atajos para agregar fácilmente nuevos elementos. Por ejemplo, al usar Ctrl + 2 agregarás un nuevo elemento de texto. Para abrir la vista general de atajos, también puedes usar un atajo: Ctrl + K. Para los usuarios de Mac, estos atajos pueden usarse con las teclas equivalentes.

Barra lateral de contenido

La barra lateral de contenido en el editor de Sitejet está organizada en categorías que facilitan la adición de contenido a tu sitio web. En esta barra lateral, se diferencian dos tipos principales de componentes:

• Elementos: Son componentes individuales como titulares, textos o imágenes. Estos se representan con íconos en la barra lateral.

• Presets: Son secciones preconstruidas del sitio web que combinan múltiples elementos, como acordeones, galerías de imágenes o tablas de precios. Estos se muestran con miniaturas que ofrecen una vista previa de la sección.

Por ejemplo, en la categoría “Formularios”, encontrarás tanto presets como elementos de formulario. Los elementos individuales se indican con íconos, mientras que los presets se presentan con miniaturas. Al trabajar con formularios, es recomendable comenzar con un preset y luego adaptarlo según tus necesidades añadiendo o eliminando elementos.

Para agregar presets y elementos a tu sitio web, simplemente arrástralos y suéltalos en la posición deseada.

El menú Más

El menú Más en el editor de sitios web de Sitejet ofrece funciones adicionales útiles para la gestión y personalización de tu sitio web. A continuación, se detallan estas funciones:

• Configuración del sitio web: Permite cambiar el logotipo global del sitio, así como agregar un favicon y una imagen de vista previa del sitio web.

• Datos: Gestiona la información de contacto y los datos de clientes en un solo lugar. Utiliza enlaces de datos en todo el sitio para que los cambios realizados aquí se reflejen globalmente.

• SEO: Añade metainformación al sitio web o fragmentos de código que deben colocarse en el <head>.

• Idiomas: Activa diferentes idiomas para mostrar un sitio web multilingüe.

• Administrador de colecciones: Crea y gestiona contenido dinámico, como blogs.

• Archivos: Utiliza el administrador de archivos para subir y gestionar imágenes, archivos y otros contenidos necesarios para el sitio web.

• Importación de contenido: Si deseas utilizar archivos, imágenes y contenido de un sitio web antiguo, puedes emplear esta función para importarlos directamente a tu nuevo sitio.

• Fuentes: Administra las fuentes que se cargarán en el sitio web. Puedes seleccionar entre las fuentes disponibles o subir fuentes personalizadas.

• Deseos: Aquí verás toda la información y los requisitos que tus clientes han subido en la sección de Deseos de su portal de clientes.

Pie de página con ruta de navegación, temporizador y editor de código

En el pie de página del editor de Sitejet, encontrarás varias herramientas útiles que facilitan la navegación y edición de tu sitio web:

Ruta de navegación (Breadcrumb): Esta función muestra la jerarquía de contenedores y elementos, brindándote una visión general de cómo están anidados. Cada elemento y sus contenedores principales se enumeran junto con todas las clases CSS utilizadas. Los iconos indican características especiales:

• Icono de paleta de colores: Contenedores preestablecidos.
• Icono de imagen: Contenedores con una imagen de fondo.
• Icono de estrella: Elementos con animaciones.
• Icono de enlace: Elementos vinculados a otra página o recurso.
• Icono de base de datos: Elementos que forman parte de una colección.

Al hacer doble clic en estos símbolos o en el nombre del contenedor, se abrirá la configuración correspondiente. Además, puedes utilizar las teclas de flecha para moverte entre elementos, lo que es especialmente útil si tienes muchos elementos anidados que son difíciles de seleccionar directamente.

Temporizador: Ubicado en el lado derecho del pie de página, este temporizador muestra la duración de tu sesión actual en el CMS. Con la gestión de estado y el seguimiento del tiempo, siempre tendrás una visión general del tiempo invertido en un proyecto.

Editor de código: Junto al temporizador, encontrarás el botón de código (“<> Code”) que te permite acceder al código del sitio web, incluyendo CSS, JavaScript y HTML. Aquí puedes ver o editar el código del proyecto, incluyendo el código de los preajustes, o escribir tu propio código personalizado.

Estas herramientas en el pie de página del editor de Sitejet están diseñadas para mejorar tu flujo de trabajo y facilitar la gestión detallada de tu sitio web.

Editor WYSIWYG

La sección central es el editor WYSIWYG de Sitejet. WYSIWYG significa “lo que ves es lo que obtienes”. Haz doble clic en cualquier elemento dentro del editor y sus configuraciones se mostrarán en un panel en el lado izquierdo de la pantalla.

Las preferencias se pueden acceder a través de un ícono de pieza de rompecabezas que aparece a la izquierda de un elemento al pasar el cursor sobre él. Si haces clic en este ícono, se abrirá la ventana con la configuración predeterminada.

Haz clic derecho en un elemento para abrir el menú contextual. Este menú ofrece opciones para editar el elemento, recortar, copiar, pegar, agregar y eliminar elementos, entre otras funciones.

El menú contextual también proporciona enlaces para editar y la opción de hacer que un elemento sea “Editable para Clientes”. Con esta función, puedes permitir que ciertas partes de la página sean editadas por tus clientes desde su portal. Puedes compartir:

• Solo este elemento
• Todos los elementos de este tipo en la página
• Todos los elementos en la página

Este artículo es una traducción del original en inglés titulado “Overview: Website Builder (CMS)” publicado por Sitejet.