Cómo crear un diseño de derecha a izquierda para el elemento de lista de elementos.

De forma predeterminada, el Lista de ítem El diseño muestra el icono a la izquierda y el texto a la derecha. Con un simple ajuste de CSS, puedes invertir el diseño para que el icono aparezca a la derecha y el texto se alinee a la derecha.

Esto es especialmente útil para:

• Diseños de lenguaje RTL
• Diseños de lista alternativos
• Estilo de interfaz de usuario moderno
• Creación de listas de características visualmente únicas

Paso 1: Abra la configuración de la lista de elementos.

En el editor de GemPages:

• Coloque el cursor sobre el elemento Lista de ítem que desea personalizar
• Haga clic derecho sobre el elemento
• Seleccione Código Personalizado

Esto te permite aplicar CSS personalizado específicamente a ese elemento de la lista de elementos.

Paso 2: Añadir el código de diseño RTL

Pegue el siguiente código en la sección de código personalizado:

.ElementClass .gp-icon-list-wrapper {

  flex-direction: row-reverse;

}

.ElementClass .gp-icon-list-wrapper [data-gp-text] {

 text-align: right;

}

Paso 3: Reemplazar la clase del elemento

Reemplace .ElementClass con el ID de clase real del elemento de su lista de elementos.

Consejos:

• Utilice este diseño para diseños inspirados en árabe, hebreo o escritura de derecha a izquierda (RTL).
• Combínalo con espaciado personalizado o estilo de iconos para un mejor equilibrio visual.
• Previsualiza el diseño tanto en ordenadores de escritorio como en dispositivos móviles después de aplicar el código.

Paso 4: guardar y publicar

Una vez terminado:

• Guarde sus cambios
• Publique o actualice su página