Ventanas emergentes

Elementos de las ventanas emergentes

Accede al código fuente desde el botón y copia TODO el contenido al final para cada uno de los casos:

4 tipos de contenido

Título

Icono + texto

Icono + texto + botón de más info

Texto normal

Título

<p style="font-family:FSEmeric-Book;font-size: 18px;color:#696B74;text-align: center;font-size: 24px;"><strong>Título</strong></p><p><br></p>

Texto normal

<div style="font-family:FSEmeric-Book;font-size: 18px;color:#696B74;"><p>Párrafo de texto normal</p></div>

Icono + texto

<div style="font-family:FSEmeric-Book;font-size: 18px;color:#696B74;display: inline-flex;align-items: center;margin-bottom: 15px;"><img style="height: 45px;" src="https://img.genial.ly/63e35e59fdbbac00193d8e75/1679056514030-servicio_generico.png" class="fr-fil fr-dib"><p style="margin-left: 15px;">Icono + texto normal</p></div>

Icono + texto + botón de más info

<style> details summary .mas_info { display: inline-block; padding: 3px; font-weight: bold; color: #e5b001; border: 2px solid #e5b001; border-radius: 6px; } details summary .mas_info:before { content: "+ "; } details[open] summary .mas_info:before { content: "- "; } details summary:hover { cursor: pointer; color: #e5b001; } details summary:hover .mas_info { background-color: #e5b001; color: #ffffff; } hr { border: 1px solid #e5b001; } </style><details style="font-family:FSEmeric-Book;font-size: 18px;color:#696B74;margin-bottom: 15px;"><summary style="display: inline;align-items: center;"><img style="height: 45px;float: left;margin-right: 15px;" src="https://img.genial.ly/63e35e59fdbbac00193d8e75/1678901746548-inspecion_periodica_caldera_gas.png" class="fr-fil fr-dib"> <span style="margin-right: 15px;">Inspección periódica cada 5 años.</span> <span class="mas_info">info</span>&nbsp;</summary><div style="margin-top: 15px;"><p>Cumple con la normativa marcada en el RD 984/2015. El instalador de NATURGY realizará la entrega de la certificación a la propia distribuidora, el cliente no deberá preocuparse de este trámite para su instalación receptora individual.</p><hr></div></details>

Como debes guardar los contenidos con botones

Sino se verá el botón con "- info" y el contenido desplegado al acceder a él:

Recuerda que después de editar un contenido que lleve el botón de "+ info" debes volver a ocultarlo cuando lo guardes para que se vea normal:

Como cambiar los iconos

1. Selecciona la imagen y dale al icono de "Reemplazar":

2. Ahora puedes arrastrar directamente el nuevo icono a la zona de "Soltar imagen" o hacer clic en ese mismo recuadro y seleccionar la imagen desde la carpeta de tu PC en donde la tengas guardada:

Desde donde puedes obtener los iconos

Puedes descargar cualquiera de estas PPT y en tu local cambiarle el color al icono que necesites por el amarillo #FFD833. Luego guárdalo en formato PNG:

https://everisgroup.sharepoint.com/:f:/s/GestindelConocimientoNTG/EoLSd2BBjRpCsqmzER7D_gIBHUkHoGdjCHia37CguZGp6Q?e=xa8bhv

También hay ya algunos iconos creados dentro de esta carpeta que puedes utilizar según la necesidad:

https://everisgroup.sharepoint.com/:f:/s/GestindelConocimientoNTG/EqPU9mHIxqdMn65Dq6By3S0BYOeoEs9AZvR2IAQVkSevag?e=d1p7Ma

Color de los iconos

Ya está añadido como color principal a los "Colores del documento".

También puedes verlo seleccionando un elemento amarillo (como el círculo de al lado) y viendo qué color tiene aplicado:

#FFD833

R: 255 G: 216 B: 51