Conceptos Avanzados de Diseño

Esta página resume conceptos avanzados para personalizar el diseño de tu portal de empleo, como aplicar estilos específicos a enlaces dentro de una sección o alinear verticalmente contenido en columnas adyacentes. También se explora el diseño adaptable en detalle, ofreciendo herramientas para garantizar un diseño web moderno que se adapta al tamaño y disposición de los dispositivos.

Diseño adaptable

El Diseñador del Portal de Empleo en Zamdit está diseñado para que tu portal luzca profesional y funcione correctamente en distintos dispositivos y tamaños de pantalla. Incluye herramientas para personalizar el diseño en cuatro categorías de vista (Extra pequeño, Pequeño, Mediano y Grande). Estas herramientas te ayudan a crear un portal adaptable que refuerza tu marca empleadora y ofrece una experiencia de usuario fluida.

Puedes ajustar el ancho de la Vista de Diseño para probar la adaptabilidad y usar la función de vista previa para simular cómo se verá tu portal en diferentes dispositivos antes de publicarlo.

Puntos de corte y contenedores adaptables

Comienza accediendo al panel de Adaptabilidad en la sección Cuerpo y estilo de la página para definir los puntos de corte correspondientes a cada categoría de vista (viewport).

Una vez definidos los puntos de corte, ajusta la configuración de los contenedores según la vista. Los contenedores adaptables aseguran que tu página se adapte correctamente a distintos tamaños de pantalla. Puedes definir el ancho máximo del contenedor (en píxeles), el ancho porcentual (lo que permite márgenes horizontales) y el relleno interno horizontal (izquierda y derecha) para optimizar el diseño en cualquier dispositivo.

Configuración adaptable de columnas

El diseño de las páginas se construye con filas y columnas. Las filas pueden contener varias columnas que se pueden distribuir en varias líneas, dependiendo del ancho asignado a cada una. Usando un sistema de cuadrícula de 12 columnas, puedes personalizar el ancho de las columnas para cada vista, cambiar el orden de las columnas, y ocultar columnas específicas en ciertos dispositivos, garantizando un diseño coherente y visualmente atractivo.

Configuración de dimensiones del contenedor

En la sección Configuración avanzada de los elementos de contenido, puedes personalizar las dimensiones del contenedor para todas las vistas en conjunto o para cada una de forma individual. Estas configuraciones se aplican al ancho o alto del contenedor, dependiendo de si los elementos de contenido dentro de la columna están dispuestos en forma horizontal o vertical.

Galerías de imágenes

Zamdit ofrece tres versátiles galerías de imágenes para mejorar el atractivo visual de tu portal: Carrusel, Imágenes lado a lado y Diseño tipo Masonry. Estas galerías se adaptan al ancho del contenedor, con configuraciones para optimizar su visualización en diferentes vistas:

• Leyenda: Actívalos selectivamente según la vista.
• Altura de imagen: Define la altura en las galerías Carrusel y Imágenes lado a lado para mantener la alineación.
• Columnas y disposición: En las galerías tipo Masonry, define el número de columnas y su disposición según la vista.

Contenedores vs elementos

Los elementos de contenido se colocan dentro de cajas contenedoras dentro de las columnas. Una columna puede alojar varios elementos, cada uno dentro de su contenedor. Los contenedores pueden personalizarse de forma independiente en cuanto a bordes, espaciado y sombras.

La Herramienta de Diseño diferencia la personalización de contenedores y elementos, aunque algunas configuraciones (como los estilos de botón) pueden superponerse.

Configuraciones avanzadas

El panel de Configuración avanzada ofrece herramientas para perfeccionar tu diseño:

• Ancho del contenido: Ajusta el ancho (porcentaje) y el ancho máximo (en píxeles).
• Alineación horizontal: Alinea el contenido dentro del contenedor en forma horizontal.
• Alineación vertical: Alinea el contenido verticalmente. Para igualar la altura de contenedores entre columnas cuando los elementos están apilados verticalmente, establece el campo "Factor de expansión" en 1 en las configuraciones de dimensión del contenedor.
• Transparencia: Añade transparencia a contenedores y su contenido.
• Dimensiones del contenedor: Ajusta el tamaño principal del contenedor (según la alineación dentro de la columna) para todas las vistas o individualmente para cada una. Pasa el cursor sobre el ícono de información para más detalles.
• Color de fondo: Define colores de fondo para los contenedores.
• Nombre de clase CSS: Asigna nombres de clase personalizados para aplicar estilos CSS.
• ID del contenedor: Asigna IDs únicos para crear enlaces internos o acceder a elementos mediante código JavaScript personalizado.

Los nombres de clase e IDs deben seguir ciertas reglas: comenzar con una letra (A–Z o a–z), seguidos de letras, números (0–9), guiones (-) o guiones bajos (_). Los IDs deben ser únicos.

CSS personalizado

Aunque el Diseñador del Portal ofrece muchas opciones de diseño, no cubre todas las funciones de CSS3, como animaciones o transformaciones. Puedes añadir código CSS personalizado asignando nombres de clase a filas, columnas o contenedores:

• Filas: Especifica nombres de clase para las filas o sus contenedores internos.
• Columnas: Define nombres de clase desde el panel de Diseño adaptable.
• Elementos de contenido: Aplica estilos personalizados desde el panel de Configuración avanzada.

También puedes incluir hojas de estilo externas proporcionando su URL y, si aplica, un atributo de integridad. Esto es útil, por ejemplo, cuando deseas usar fuentes que no están disponibles en la lista de opciones del sistema.

Nota: El código CSS personalizado y las hojas de estilo externas no se muestran en la Vista de Diseño. Usa la función de vista previa para probar y verificar todos los estilos.

JavaScript personalizado

El JavaScript personalizado permite añadir funcionalidades avanzadas:

• Mayor flexibilidad: Agrega funciones únicas más allá de las opciones predeterminadas.
• Consistencia de marca: Integra herramientas de terceros como análisis o widgets.
• Mejor experiencia: Incluye elementos interactivos para una experiencia dinámica.

Puedes añadir JavaScript personalizado de dos formas:

• Introduce directamente el código JavaScript en el editor. El script siempre se ejecutará después de que se hayan cargado todos los elementos de la página, por lo que debes evitar funciones que dependan del evento onload del elemento <body>.
• Incluye scripts externos especificando la URL de origen, el método de carga y, si aplica, un atributo de integridad.

Asegúrate de que tus scripts estén optimizados y sean seguros para evitar problemas de rendimiento o seguridad.

Nota: Los scripts personalizados o externos no se muestran en la Vista de Diseño. Usa la vista previa para probar su funcionamiento.