Herramientas de Personalización

Zamdit ofrece múltiples herramientas para personalizar el cuerpo de la página, filas, columnas y contenido. Estas herramientas se muestran en paneles desplegables dentro de la sección Herramienta de Diseño. Las herramientas disponibles varían según el tipo de elemento seleccionado. Las herramientas específicas para Galerías de Imágenes, Promoción de Puestos Vacantes y Configuración Avanzada se detallan en sus páginas correspondientes.

Todos los elementos de contenido, sin importar su tipo, se colocan dentro de un contenedor tipo caja. Siempre puedes personalizar los bordes, los espacios y las sombras del contenedor. Los paneles correspondientes se llaman Borde del Contenedor, Espaciado del Contenedor y Sombra del Contenedor para diferenciarlos de los ajustes del propio contenido (como botones) que también admiten estas personalizaciones.

Configuración de Fuentes

Utiliza esta herramienta para definir la Familia de fuentes, el Peso y el Tamaño (en píxeles) del cuerpo de la página y de los elementos que muestran texto. También puedes ajustar la Alineación del Texto, la Altura de Línea (en porcentaje) y el Color del Texto. Las familias tipográficas disponibles incluyen 9 fuentes web seguras y 50 fuentes comunes de Google.

Los valores especificados para el Cuerpo de la Página actúan como configuración predeterminada para cualquier nuevo elemento de contenido que crees. Además, si seleccionas la Familia de fuentes como Predeterminada o dejas en blanco la Altura de Línea, se utilizarán los valores definidos para el Cuerpo de la Página o, si estos campos no fueron especificados en la configuración del Cuerpo de la Página, los valores predeterminados del navegador.

Para asegurarte de que siempre se apliquen el peso y el tamaño de fuente del cuerpo, incluso si realizas cambios más adelante, marca la casilla Usar estilo de texto del cuerpo.

En el caso de los elementos de Encabezado, puedes marcar la casilla Usar estilo de encabezado por defecto para aplicar el peso y tamaño de fuente predeterminados del navegador según el nivel de encabezado.

Configuración de Fondo

Personaliza el fondo del cuerpo de la página, de las filas y de las columnas. Zamdit admite Colores de Fondo Simples, Degradados Lineales e Imágenes de Fondo, con opciones adicionales como transparencia de imagen y configuración de repetición.

Para degradados lineales, puedes definir hasta 7 puntos, asignando colores y posiciones. Especifica el ángulo del degradado en grados: 0°, 90°, 180° y 270° corresponden a "hacia arriba", "hacia la derecha", "hacia abajo" y "hacia la izquierda", respectivamente.

Las imágenes de fondo pueden agregarse desde tu sistema de archivos o mediante una URL remota. Personaliza la transparencia y configura opciones como:

• Repetir: Controla cómo se repite la imagen de fondo.
• Tamaño del Fondo:
  • Automático: Muestra la imagen en su tamaño original.
  • Cubrir: Redimensiona la imagen para llenar el contenedor, recortándola si es necesario para mantener la proporción.
  • Contener: Ajusta la imagen para que se vea completa dentro del contenedor.
• Posición Horizontal: Ajusta la ubicación en el eje X.
• Posición Vertical: Ajusta la ubicación en el eje Y.

Para los degradados lineales e imágenes de fondo, puedes elegir fijar el fondo en relación con la ventana del navegador, de modo que permanezca estático al hacer scroll en lugar de moverse con la sección. Ten en cuenta que las imágenes pueden verse más anchas de lo esperado en el editor; asegúrate de previsualizar tu diseño para ver cómo se mostrará en el navegador.

Bordes

Define el ancho, color, estilo y radio de los bordes de los elementos. Solo se admiten valores en píxeles para ancho y radio. Puedes aplicar estilos de borde de forma uniforme o personalizada por lado o esquina.

Espaciado

Esta herramienta permite configurar rellenos (padding) y márgenes (margin) en píxeles. Puedes establecer valores iguales para todos los lados o personalizarlos de forma individual. Para mantener un espaciado coherente, define los valores predeterminados en la sección de Preferencias de Edición.

Sombras

Zamdit permite aplicar sombras a cajas (columnas, filas, contenedores, imágenes) y texto. Puedes agregar múltiples sombras con el icono Añadir y eliminarlas con el icono Eliminar. Las sombras se aplican en el orden en que se agregan.

Los ajustes para sombra de texto son similares a los de cajas, pero sin las opciones Expansión ni Interior. Las propiedades incluyen:

• X: Desplazamiento horizontal. Valores negativos colocan la sombra a la izquierda.
• Y: Desplazamiento vertical. Valores negativos colocan la sombra arriba.
• Desenfocar: Suaviza los bordes de la sombra.
• Expansión: Expande o reduce el tamaño de la sombra.
• Color: Define el color, incluyendo transparencia.
• Interior (Inset): Coloca la sombra dentro del borde del elemento.

Espaciado entre Elementos

Permite ajustar la separación entre elementos de texto a nivel de bloque, como párrafos, listas y citas, así como entre ítems de listas ordenadas o no ordenadas. El margen se expresa en em (unidad relativa al tamaño del texto). Se puede definir un valor por defecto en el cuerpo y sobrescribirlo por elemento si es necesario.

Configuración de Imágenes

Agrega imágenes desde tu equipo o mediante URLs. Personalízalas con las siguientes opciones. Ten en cuenta que la configuración de ancho y alto del contenedor en Configuración Avanzada influye en el resultado final.

• Altura: Define la altura en píxeles, porcentaje o usa Automático o Ajustar para diseño responsivo.
• Ajuste (Fit): Mantiene la proporción al ajustar o cubrir el contenedor (cuando la altura no es Automática).
• Posición: Alineación de la imagen dentro del contenedor en ambos ejes.

También puedes aplicar Radio de Borde, Texto Alternativo, Filtros y Enlaces.

Filtros

Aplica efectos visuales como desenfoque o cambio de color mediante 7 tipos de filtros. Agrega filtros con el icono Más, reordénalos con arrastrar y soltar, y observa los cambios en tiempo real.

Enlaces

Vincula imágenes a URLs externas, direcciones de correo o ID internos de contenedores (ver Configuración Avanzada). Para enlaces externos, puedes abrir en una nueva pestaña. Los internos requieren un ID válido.

También puedes personalizar el contorno al pasar el cursor, heredando estilos del cuerpo o definiendo estilos propios.

Configuración de Botones

Los botones enlazan a páginas externas o secciones internas. Se pueden personalizar con colores sólidos o degradados lineales para estados normales y al pasar el cursor. Para más detalles sobre degradados, revisa la sección Configuración de Fondo. Los ajustes de enlace son similares a los descritos en Enlaces.

Configuración de Iconos Sociales

Agrega fácilmente iconos de redes sociales con esta herramienta integrada. Selecciona redes, define URLs y personaliza el tamaño, alineación y estilo. Puedes reordenar o eliminar iconos sociales usando el ícono de "arrastrar y soltar" o el icono Eliminar, respectivamente.

Configuración de Video

Incrusta videos mediante URLs de plataformas compatibles como YouTube y Vimeo. Puedes pegar URLs para incrustar (en etiquetas <iframe>). El sistema garantiza una visualización adaptable a diferentes dispositivos.