Uso del Diseñador del Portal

El Diseñador del Portal de Zamdit es una herramienta que permite a las organizaciones crear y personalizar su Portal de Empleo de forma sencilla, sin requerir conocimientos de programación de páginas Web. Gracias a su interfaz intuitiva de "arrastrar y soltar", puedes diseñar un portal profesional y con identidad de marca que muestre las vacantes disponibles y mejore la experiencia de los candidatos. Desde el diseño de la página y los elementos visuales hasta componentes personalizados en HTML, el Diseñador del Portal ofrece una flexibilidad inigualable, permitiéndote alinear el portal con la identidad única de tu organización, sin necesidad de conocimientos técnicos.

Vista general de la interfaz

El Diseñador del Portal está dividido en tres secciones principales:

1. Barra de acciones – Accede a funciones principales como añadir filas, guardar cambios o previsualizar el diseño.
2. Herramienta de diseño – Personaliza tu portal añadiendo elementos de contenido y ajustando su configuración.
3. Vista de diseño – Arrastra y suelta elementos de contenido para verlos y editarlos tal como se mostrarán en su formato final.

La Vista de diseño es interactiva y responde al pasar el cursor, resaltando los elementos subyacentes. Esto permite reubicar elementos en la página mediante arrastrar y soltar. También aparece una barra de menú flotante para realizar acciones rápidas como editar, clonar o eliminar filas.

4. Barra de menú flotante: Ofrece opciones para editar, duplicar o eliminar la fila resaltada.
5. Control de arrastre de elemento: Se muestra en la parte superior de cada elemento para reubicarlo.
6. Control de arrastre de fila: Ubicado a la derecha de cada fila, permite reordenarlas.

Al hacer clic en cualquier contenido [1], este se resalta con un borde oscuro, se indican la columna y fila a las que pertenece, y se muestra su configuración en la Herramienta de diseño. La barra superior [2] de la herramienta muestra:

• Una ruta de navegación para acceder a la configuración de la fila.
• El tipo de contenido seleccionado.
• Iconos para realizar acciones, incluyendo uno especial para deseleccionar el elemento y cerrar el panel de configuración.

Utiliza esta interfaz para personalizar el contenido [3], ajustar la configuración de la fila o acceder a la lista de elementos disponibles.

Para editar y personalizar filas o columnas, puedes:

• Usar la ruta de navegación en la Herramienta de diseño [2].
• Hacer clic en el icono de edición de la barra de menú flotante.
• Seleccionar espacios en blanco dentro de una fila.

El Panel de contenido muestra herramientas específicas para la fila, incluyendo la configuración de columnas. Para más detalles, consulta Diseño de Página.

Guardar vs Publicar

El Diseñador del Portal ofrece dos opciones para guardar tu trabajo:

• Guardar: Guarda los cambios en una versión borrador visible solo para ti. La acción Previsualizar guarda automáticamente antes de mostrar la vista previa.
• Publicar: Guarda los cambios y los hace públicos, permitiendo que los candidatos vean la versión más reciente.

Puedes activar el guardado automático y revertir los cambios a la última versión publicada. Para más información, consulta Preferencias de edición.

Barra de acciones

La Barra de acciones, en la parte superior de la interfaz, permite acceder rápidamente a funciones esenciales:

Deshacer la última acción, permitiendo deshacer hasta los 50 últimos cambios.

Rehacer una acción deshecha.

Añadir una nueva fila con diseños de columnas personalizables.

Ocultar la Herramienta de diseño para ampliar el área de Vista de diseño.

Mostrar la Herramienta de diseño si está oculta.

Resaltar todos los elementos en la página para facilitar la navegación.

Quitar los resaltados cuando ya no se necesiten.

Ajustar el ancho de la Vista de diseño para probar la adaptabilidad.

Deseleccionar todos los elementos seleccionados actualmente.

Explora las plantillas disponibles y aplica una a tu diseño.

Consulta todos los colores y familias tipográficas en uso, y reemplázalos de forma masiva.

Guardar los cambios en la versión borrador.

Previsualizar el diseño, guardando primero en el borrador.

Publicar los cambios para hacerlos visibles en línea.

Herramienta de diseño

La Herramienta de diseño está dividida en cuatro secciones, accesibles mediante los botones en la parte superior:

Configuración del portal y preferencias

Esta sección incluye:

• La URL del portal y opciones de dominio personalizado.
• Ajustes de SEO y metadatos para optimizar la visibilidad del portal.
• Preferencias de edición para personalizar tu flujo de trabajo de diseño.

Cuerpo de la página y estilos

Esta sección te permite definir configuraciones globales del portal, incluyendo:

• Estilos del cuerpo de la página, como tipografía y fondo.
• Puntos de corte responsivos y anchos del contenedor para una mejor adaptabilidad.

Contenido

El comportamiento de esta sección varía según el elemento seleccionado:

• No hay elementos seleccionados: Muestra todos los elementos de contenido disponibles.
• Contenido seleccionado: Muestra herramientas de personalización para ese elemento específico.
• Fila seleccionada: Muestra herramientas para gestionar la fila y sus columnas.

Haz clic en el icono Cerrar para volver a la vista predeterminada de la lista de contenido.

JavaScript y CSS personalizados

Agrega código personalizado para mejorar la funcionalidad del portal o integrar servicios de terceros. Para más detalles, consulta CSS personalizado y JavaScript personalizado.

Preferencias de edición

Antes de comenzar a diseñar tu portal, ajusta las preferencias de edición en el panel de "Configuración del portal y preferencias" para una experiencia más fluida. Estas configuraciones, almacenadas en tu dispositivo, incluyen:

• Guardar cambios automáticamente: Activa el guardado automático cada 10 segundos.
• Revertir a la configuración publicada: Revierte los cambios a la última versión publicada.
• Espaciado y márgenes predeterminados: Establece valores por defecto para filas, columnas y contenido.
• Expandir múltiples paneles: Permite mantener abiertos varios paneles de configuración al mismo tiempo.
• Paneles expandidos al iniciar: Elige cómo se comportan los paneles al abrir una sección.
• Empleos en la Vista de diseño: Define cuántos empleos se muestran al probar el diseño y la paginación.

Plantillas

Si no quieres crear tu diseño desde cero, utiliza el Explorador de plantillas para aplicar rápidamente un nuevo diseño a tu página. Abre el desplegable para ver la lista de plantillas disponibles. Al seleccionar una plantilla, aparecerá una imagen de vista previa para ayudarte a decidir. Para aplicar la plantilla, haz clic en Aplicar. Antes de realizar el cambio, verás un cuadro de confirmación que explicará que tu diseño y contenido actuales se reemplazarán, mientras que tu configuración SEO, metadatos, CSS personalizado y JavaScript permanecerán sin cambios. Si tienes activada la opción Guardar cambios automáticamente, la actualización se guardará de inmediato.

Luego de aplicar una plantilla, puedes cambiar los colores y familias tipográficas de forma rápida utilizando la herramienta a continuación.

Paleta de colores y tipografías

Para gestionar todos los colores y familias tipográficas que has usado en tu diseño, abre Paleta de colores y tipografías. Esta vista se divide en dos paneles:

Colores

Sustituye o elimina colores usados en una categoría específica o en todas las categorías.

Tipografías

Sustituye familias tipográficas usadas en una categoría específica o en todas las categorías.

---

Esta herramienta te ayuda a mantener un diseño coherente y facilita la realización de cambios masivos. Ten en cuenta que los cambios se aplican de inmediato y se guardarán automáticamente si la opción Guardar cambios automáticamente está activada.