Una descripción general de la configuración de la pestaña Avanzada

A diferencia de la Configuración Estas configuraciones se mantienen constantes en todos los elementos. Al explorar estas configuraciones, puede personalizar de manera eficaz las funciones más avanzadas de cada elemento y maximizar su potencial.

Mostrar en

La función Mostrar en La configuración le permite elegir si un elemento o sección en particular será visible en tipos de pantalla específicos: computadora de escritorio, tableta o vista móvil. 

Ajustar esta configuración le permite ocultar o mostrar contenido según el dispositivo, lo que garantiza que su página esté optimizada para diferentes experiencias de usuario.

Cómo funciona “Mostrar activado”:

• Desktop: Controla si el elemento o la sección es visible cuando la página se ve en pantallas de escritorio (pantallas más grandes, generalmente de más de 1024 píxeles de ancho).
• Tablet: Controla la visibilidad en dispositivos tipo tableta (pantallas de tamaño mediano, normalmente entre 768 píxeles y 1024 píxeles de ancho).
• Teléfono: Controla la visibilidad en dispositivos móviles (pantallas pequeñas, normalmente de menos de 768 píxeles de ancho).

Casos de uso en GemPages

• Diseño móvil primeroSi se utiliza Si tiene una imagen grande o una sección detallada que se ve muy bien en una computadora de escritorio pero no se adapta bien a pantallas más pequeñas, puede Ocultar ese elemento en dispositivos móviles y reemplazarlo con una versión más amigable para dispositivos móviles.
• Diseños personalizados para diferentes dispositivosUna cuadrícula de productos compleja puede funcionar bien en una computadora de escritorio, pero en un dispositivo móvil, puedes simplificar el diseño ocultando la cuadrícula y mostrando en su lugar una lista de una sola columna.
• Mensajes dirigidos: Si desea mostrar diferentes mensajes de marketing a los usuarios en diferentes dispositivos (por ejemplo, ofrecer un descuento exclusivo para dispositivos móviles) de forma selectiva, esta configuración le permite mostrar ciertos elementos según el dispositivo del usuario.

Espaciado

En la pantalla Espaciado sección, puedes ajustar las 4 dimensiones de la Margen y Relleno. 

Margen 

Margen es el espacio fuera del borde de un elemento. Controla el espacio entre el elemento y otros elementos en la página. Los márgenes son transparentes y empujan el elemento lejos del contenido circundante, creando un espacio alrededor del elemento.

En GemPages, puede usar márgenes para controlar la distancia entre diferentes elementos, como entre dos imágenes o entre un botón y un bloque de texto, para crear separación visual o espacio en blanco.

Relleno

El relleno es el espacio dentro del borde de un elemento pero fuera de su contenido. Define la cantidad de espacio entre el contenido del elemento (como texto o una imagen) y el borde del elemento.

En GemPages, Relleno Se utiliza cuando se desea crear espacio dentro de un elemento. Por ejemplo, se puede añadir relleno a un botón para que el texto tenga espacio a su alrededor, haciéndolo más grande o visualmente más equilibrado.

Forma

Borde

El borde es la línea que rodea el contenido y el relleno de un elemento. Define el contorno o borde de un elemento, como un botón, una imagen o un cuadro de texto. Los bordes pueden tener diferentes anchos, estilos (sólidos, discontinuos, punteados, etc.) y colores.

Casos de uso en GemPages

Los bordes se utilizan para enfatizar, definir o separar elementos visualmente. Por ejemplo, agregar un borde alrededor de un botón de llamada a la acción hace que se destaque con más claridad, o aplicar bordes alrededor de las imágenes les da un aspecto enmarcado.

Esquina (radio del borde)

La esquina, a menudo denominada radio del borde, controla la redondez de las esquinas de un elemento. Define cuán pronunciadas o curvadas son las esquinas. Cuando se aplica un radio de borde, las esquinas del elemento se redondean; los valores más altos hacen que las esquinas sean más circulares.

Caso de uso en GemPages

Puedes usar el radio del borde para suavizar el aspecto de los elementos dándoles esquinas redondeadas. Esto es particularmente útil para botones, imágenes y contenedores donde deseas crear una estética moderna, amigable o elegante. Por ejemplo, Una imagen rectangular se puede transformar en un círculo estableciendo el radio del borde al 50%.

Sombra:

Una sombra agrega un efecto de sombra alrededor de un elemento, lo que le otorga profundidad y una sensación de superposición o elevación. Las sombras se pueden ajustar por color, radio de desenfoque, extensión y desplazamiento (la distancia desde el elemento).

Caso de uso en GemPages

Las sombras suelen crear un efecto tridimensional en elementos planos, lo que hace que destaquen en la página. Por ejemplo, puedes añadir una sombra sutil a una tarjeta o a un bloque de texto para crear una sensación de profundidad o aplicar una sombra más dramática para resaltar un elemento importante, como la imagen de un producto.

Posición

El CSS position La propiedad es esencial para controlar la ubicación de los elementos en una página web. Define cómo se posiciona un elemento dentro del diseño mediante diferentes valores.

• Estática: El método de posicionamiento predeterminado. El elemento aparece en el flujo normal del documento, apilándose de forma natural con otros elementos según su orden en el HTML.
• Relativa: El elemento permanece en su flujo normal, pero puede desplazarse de su posición original mediante las propiedades de desplazamiento (arriba, derecha, abajo, izquierda). El espacio que ocupaba originalmente se conserva.
• Absoluto: El elemento se posiciona en relación con el ancestro más cercano que tiene un relative, absolute o fixed posición. Se elimina del flujo normal del documento, por lo que no afectará el posicionamiento de otros elementos.
• Pegajosa: El elemento se comporta como relative hasta que la página se desplaza hasta cierto punto, entonces se "queda" en su lugar como fixedEsto se usa comúnmente para encabezados fijos o barras flotantes.
• Fija: El elemento se posiciona con respecto a la ventana del navegador y permanece visible en el mismo lugar incluso al desplazarse. Resulta útil para elementos persistentes de la interfaz de usuario, como botones flotantes o navegación fija.

Casos de uso en GemPages

• Elementos superpuestos: Usando el posicionamiento absoluto, puedes crear elementos superpuestos, como colocar texto sobre una imagen. Ajusta el índice z para controlar qué elemento aparece en la parte superior.
• Ajustes de compensación: Puede utilizar desplazamientos superiores, izquierdos, inferiores o derechos para ajustar la ubicación de una imagen o texto que necesita desplazarse ligeramente de su posición habitual sin afectar otros elementos.

Opacidad

La opacidad es el grado de transparencia de un elemento, que determina qué parte del fondo o de los elementos subyacentes es visible a través de él. El valor de opacidad oscila entre el 0 % y el 1 %, donde:

• 0%:El elemento es totalmente transparente (completamente invisible).
• 100%:El elemento es totalmente opaco (completamente visible).
• Cualquier valor entre los elementos Es parcialmente transparente, lo que permite una visibilidad variable.

Animación

Las animaciones se clasifican en efectos de aparición y de desplazamiento. Activar/desactivar Animación en ON para expandir su configuración, elija la que prefiera y configúrela para alinear la animación con sus expectativas.

Cuando aparecen

• Seleccione Desvanecer, Deslizar, Zoom o Agitar como el efecto que aparece. Presione Ninguno Si no desea agregar un efecto cuando aparece el elemento.
• Ajuste la velocidad, el retraso y la suavización para que aparezca el efecto.

Cuando se pasa el cursor

Seleccione Ninguno para no agregar ningún efecto, o elija entre los efectos Zoom y Agitar.

Caso de uso en GemPages

• Botón de llamada a la acción Shake:Puedes hacer que un botón rebote o se mueva para captar la atención del usuario y animarlo a hacer clic. Por ejemplo, un botón "Comprar ahora" puede usar el efecto de vibración al pasar el mouse sobre él o después de un tiempo específico para que se destaque.
• Sección que aparece gradualmente al desplazarse: Se pueden mostrar secciones específicas de forma difusa o deslizable cuando los usuarios se desplazan hacia abajo en una página. Este efecto crea una experiencia más atractiva y guía a los usuarios a través del contenido de una manera visualmente atractiva.
• Ampliar la imagen al pasar el mouse:Para agregar interactividad, puede configurar las imágenes para que se acerquen cuando el usuario pase el cursor sobre ellas, lo que funciona bien para imágenes de productos o elementos visuales en galerías.
• Animación de texto:Puede animar elementos de texto para que se deslicen o se desvanezcan al cargar o desplazarse, enfatizando mensajes o encabezados importantes.

Interacción

Crea una interacción de activación para el elemento.

Una vez que hagas clic CrearSerás redirigido a la Configuración de interacción.

Clase CSS

Una clase CSS es un estilo reutilizable para elementos HTML. Ayuda a mantener una apariencia consistente de esos elementos en todo el sitio web.