Diseñando tu Portal

Crear una experiencia fluida y atractiva para los candidatos comienza con tu portal de empleos. El Diseñador de Portales de Zamdit te permite construir fácilmente un portal profesional y con identidad de marca, sin necesidad de escribir código. Ya sea que quieras destacar la cultura de tu empresa, mostrar tus vacantes disponibles o facilitar un proceso de postulación intuitivo, el Diseñador del portal ofrece todas las herramientas que necesitas.

Empieza configurando tu página y los ajustes generales. Luego, crea tu diseño añadiendo filas y columnas, y finalmente arrastra y suelta los elementos de contenido en su posición. Todos los elementos de la página pueden personalizarse mediante herramientas intuitivas y un editor de texto enriquecido para formatear el contenido. Las filas y el contenido pueden reorganizarse fácilmente con solo arrastrar y soltar. Para una visión general de la herramienta, te sugerimos leer primero Uso del diseñador del portal.

Cuerpo y Estilos de la Página

Cuerpo y estilos de la página es la segunda sección de la Herramienta de Diseño. Incluye cinco paneles que recomendamos configurar antes de comenzar a diseñar tu portal:

• Fondo: Define los estilos de fondo del cuerpo de la página.
• Configuración de la fuente: Establece la familia tipográfica predeterminada, grosor y tamaño, junto con otros ajustes relacionados. Estos valores se aplicarán a los nuevo contenidos que agregues al portal.
• Espaciado entre elementos: Configura márgenes predeterminados entre elementos de bloque (por ejemplo, párrafos, listas, citas) y elementos de listas. Estos márgenes pueden personalizarse para contenidos específicos si es necesario.
• Estilos de los enlaces: Personaliza los estilos para los diferentes estados de los enlaces (normal, hover, activo, visitado). También puedes establecer estilos predeterminados para imágenes con enlaces, que pueden ser sobrescritos para imágenes individuales.
• Adaptabilidad: Configura el diseño adaptable para cuatro categorías de vista: Extra pequeño, Pequeño, Mediano y Grande. Ajusta los puntos de corte según tus necesidades y define el ancho del contenedor (en porcentaje), el ancho máximo (en píxeles) y el espaciado horizontal. Estas configuraciones aseguran que tu diseño se adapte perfectamente a cualquier dispositivo. Para más información, consulta Diseño Adaptable.

Diseño de Página

El primer paso para construir tu página es definir su "diseño", que determina cómo se organizan los elementos visuales. El diseño se construye añadiendo filas y columnas. Las filas ocupan el 100% del ancho de la página y contienen un contenedor interno. Dependiendo de la configuración de la fila, el contenedor puede ser fluido (ocupa todo el ancho) o limitado por los contenedores definidos en el cuerpo. Las columnas se colocan dentro del contenedor y pueden organizarse en múltiples líneas si es necesario. El diseño utiliza un sistema de rejilla de 12 columnas adaptables, lo que permite definir el ancho de cada columna según el tipo de dispositivo. Los elementos de contenido se agregan dentro de las columnas; se pueden incluir varios elementos por columna, cada uno en su propio contenedor.

La siguiente imagen ilustra los diferentes componentes del diseño de página. La caja azul representa la fila, la verde el contenedor adaptable, las amarillas son las columnas, las naranjas los contenedores de contenido y las rojas los elementos de contenido. Los elementos dentro de una columna pueden organizarse horizontal o verticalmente.

Cuando la opción Mostrar contorno del diseño está activada, o cuando pasas el cursor o seleccionas un elemento, se muestran contornos solo en filas, columnas y contenedores de contenido. Estos contornos utilizan líneas sólidas, discontinuas y punteadas, respectivamente.

Añadir y Editar Filas

Para agregar una fila, haz clic en el botón Añadir Fila en la Barra de Acciones.

1. Selecciona la posición de la fila en la página (arriba, abajo o en una ubicación específica).
2. Elige una disposición de columnas. Esta se aplicará a pantallas grandes, pero puede ajustarse automáticamente para móviles o tablets. Después de agregar la fila, revisa los anchos de columna en cada dispositivo para asegurar la coherencia del diseño.

Nota: Las nuevas filas no se seleccionan automáticamente. Debes seleccionarlas manualmente para editarlas. Puedes hacerlo de las siguientes formas:

• Usar la ruta de navegación (breadcrumb) cuando tengas seleccionado un elemento interno.
• Hacer clic en el ícono de edición de la barra flotante.
• Hacer clic en los espacios en blanco de la fila.

El Panel de Contenido mostrará herramientas de personalización para la fila, incluyendo ajustes para columnas, fondo, bordes, espaciado y sombras. También encontrarás herramientas específicas como Columnas y Ajustes del Contenedor, detalladas a continuación.

Columnas

Gestiona las columnas dentro de una fila agregando, eliminando o reordenándolas. Cada columna puede personalizarse con estilos de fondo, bordes, espaciado y sombras. Desde el panel Diseño Adaptable, puedes:

• Definir el ancho de columnas por cada tipo de dispositivo, permitiendo cambiar el orden de las columnas según el tipo de dispositivo. (La categoría destacada corresponde al dispositivo actual en la Vista de Diseño).
• Establecer la visibilidad de columnas para ciertos dispositivos.
• Asignar clases CSS personalizadas para estilos avanzados (ver CSS personalizado).

⚠️ Advertencia

Al añadir nuevas columnas a una fila existente, tenga en cuenta que el ancho de las columnas actuales puede ajustarse automáticamente, según el dispositivo, para acomodar la nueva columna. Después de añadir columnas, revise el panel Diseño adaptable de todas las columnas de la fila para asegurarse de que los valores asignados sean los esperados. En algunos casos, puede resultar mejor duplicar una columna existente, ya que esto no modificará el ancho de las demás columnas y creará una copia exacta de la columna seleccionada.

Existe un panel que permite configurar la organización del contenido dentro de una columna usando Flexbox, una técnica de diseño unidimensional. Soporta disposición horizontal o vertical, justificación, alineación, separación entre elementos (en píxeles) y opción de salto de línea para disposiciones horizontales.

Ajustes del Contenedor

Por defecto, el contenedor interno de una fila se alinea con el Contenedor Adaptable, pero puedes crear contenedores fluidos que ocupen todo el ancho de la página. Compara los siguientes ejemplos:

• Contenedor Adaptable del Cuerpo: Los elementos se ajustan al ancho del contenedor del cuerpo.
• Contenedor Fluido: La Galería de Imágenes se extiende a todo lo ancho.

Puedes ajustar los estilos del contenedor de forma independiente y asignar clases CSS personalizadas si es necesario. Si los estilos de enlaces dentro de una fila difieren de los predeterminados, puedes definir estilos nuevos en la sección Estilos de los enlaces del cuerpo, asignarles un nombre de clase CSS y aplicarlos seleccionando la clase en el campo Nombre del estilo para enlaces.

Acciones Adicionales de Fila

Cuando una fila está seleccionada, puedes usar la barra superior de la herramienta para:

• Duplicar: Crear una copia exacta de la fila con sus columnas y contenido.
• Eliminar: Borrar la fila. Si lo haces por error, puedes deshacer la acción.

Estas acciones también están disponibles desde la barra flotante al pasar el cursor sobre la fila. Además, puedes usar el Control de arrastre para arrastrar la fila a otra posición en la página.

Para eliminar o mover columnas individuales, primero selecciona la fila y luego accede al panel Columnas.

Contenido de la Página

Tras configurar el diseño, arrastra los elementos de contenido dentro de las columnas. Pueden colocarse varios elementos en una misma columna, y su disposición será horizontal o vertical según la configuración de esa columna (por defecto es vertical).

Para acceder a la lista de contenido, haz clic en Arrastre desde la lista de contenido. Esto también anulará la selección actual de filas o elementos.

Elementos de Contenido Disponibles

Zamdit admite los siguientes elementos de contenido:

• Encabezado: Encabezados H1 a H5.
• Texto: Bloques de texto enriquecido con formato y enlaces.
• Imagen: Imágenes desde URLs o desde tu sistema de archivos.
• Video: Videos incrustados mediante URL.
• Social: Íconos de redes sociales comunes.
• Botón: Botones personalizables para navegación.
• Separador: Líneas horizontales para separar contenido.
• Galería: Galerías de imágenes con diseños Carrusel, Lado a Lado y Columnas (diseño Masonry).
• HTML: Contenido HTML personalizado.
• Puestos: Muestra las vacantes públicas.

Añadir y Editar Contenido

Arrastra elementos desde la lista hasta la columna deseada. Selecciona un elemento para acceder a sus opciones de personalización en la Herramienta de Diseño. Las herramientas varían según el tipo de elemento, pero normalmente incluyen estilos comunes y atributos específicos.

Para más detalles, consulta Herramientas de Personalización.

Acciones Adicionales de Contenido

Para elementos seleccionados, utiliza la barra superior para:

• Duplicar: Crear una copia idéntica del elemento justo debajo del original.
• Eliminar: Quitar el elemento. Como con las filas, puedes deshacer la acción si es necesario.

Para mover un elemento, pasa el cursor sobre él hasta que aparezca el Control de arrastre en la parte superior. Luego arrástralo a otra ubicación dentro de la misma columna o a otra distinta. Su ubicación final dependerá de dónde lo sueltes:

• Si se suelta dentro de la misma columna, se colocará justo a la izquierda o encima del elemento objetivo.
• Si se mueve a otra columna, se colocará debajo o a la derecha del elemento objetivo.