AIDE pour la gestion du site

• Fonctionnement Général

Chaque bloc du site est représenté par un Widget HTML permettant l'affichage d'un élement du site.

Dans l'éditeur de IONOS, ils sont marqués comme suit: "Le Widget est affiché uniquement en mode page, pas en mode d'édition."

Ces élements peuvent être modifiés en modifiant le code HTML les contenants.

• Les textes sont reconnaissables par la présence de balises <p> autour de celui-ci. Ils peuvent être modifiés directement. Certains mots sont aussi entourés par des

balises <span> permettant de changer la couleur du texte.

• les balises <br> permettent d'effectuer un retour à la ligne (un simple retour à la ligne ne suffit pas)
• Les images ont des noms particuliers qu'il faut respecter lorsque vous les changez afin qu'elles s'affichent par exemple "img-accueil-carousel-1.jpg" correspond à la

1ère image du carousel de l'accueil.

Un dossier contenant une copie des images du site se trouve sur le NAS.

Malgré tout, la gestion avec l'éditeur de IONOS est toujours possible, vous pouvez ajouter du texte sur les pages existantes, de nouvelles pages ect...

L'intégration ne sera sans doute pas la meilleur mais c'est possible.

• Comment changer les images ?​

Les images sont stockées sur IONOS, elles peuvent être trouvées à droite en allant dans Thème > Mise en page Personnelle > Fichiers.

Vous retrouverez ici l'ensemble des fichiers utilisés sur le site.

On retrouve différents nom de fichier très précis et caractéristiques de l'endroit où est situé l'image. Lors du remplacement d'image veillez à garder le bon nom afin que l'image puisse s'afficher sans problème. L'extension de fichier pour les images est et doit rester .jpg. Si votre image n'est pas au bon format, il est possible de la convertir.

Concernant les images de carousel, elles doivent avoir des dimensions particulière afin de rendre correctement sur le site. Elles doivent impérativement faire 900 pixels par 500 pixels.

Il existe une limite de taille de fichiers pour les images qui est de 512Ko, si votre image est trop grande, je vous conseille de la compresser avec un site tel que https://compressor.io/.

Lors de l'affichage de la liste des fichiers, il est possible que le bouton "Parcourir" permettant d'ajouter un fichier ne soit pas visible... Pour le rendre visible vous devez faire clic droit sur un des noms de fichiers puis faire inspecter puis aller dans Console et copier document.getElementById("view-files-list").style.height = '100px'; dedans et faire entrer, vous pouvez ensuite fermer la console. Le bouton devrait apparaitre en haut de la fenêtre.

Veillez bien à supprimer l'image de la liste avant de rajouter la nouvelle portant le même nom.

• Comment ajouter des images aux carousels ?​

Les carousels sont les images défilantes, il y en a 2 types sur le site, celui de la page d'accueil et ceux dans les pages de chaque pôle.

L'ajout d'image est similaire mais n'est pas exactement pareil pour les 2:

• Carousel de chaque pôle:

Pour ajouter une image dans ce carousel il faut:

1. Se rendre sur la page gestion du pôle et modifier le widget du carousel (3ème Widget)
2. Repérer et dupliquer juste au dessus les lignes contenues entre <!-- A COPIER COLLER jusqu'à --> (exemple plus bas)
3. Ajuster les informations tel que 3 / 3, img-industrielle-carousel-3.jpg ou Description brève ou currentSlide(3) afin que les chiffres et la description correspondent au numéro de l'image 1,2,3,4... ect
4. Il faut également ajuster les informations des autres images du carousel ayant le même format de code, notamment il est important de modifier les informations tels que 3 / 3 en 3 / 4 par exemple.

Exemple:

On remarque dans le pôle industrielle ces lignes: 

<!--à COPIER COLLER
<div style="opacity:1;" class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="/s/img/img-industrielle-carousel-3.jpg" style="width:100%" alt="" />
<div class="text">Description brève</div>
</div>
-->

et

<!--à COPIER COLLER
<span class="dot" onclick="currentSlide(3)">.</span>
-->

On ne duplique que les lignes en vertes que l'on place juste au dessus de <!--à COPIER COLLER pour chacun et on ne change QUE les chiffres et le texte mis en gras ici.

• Carousel d'accueil:

Pour ajouter une image dans ce carousel il faut:

1. Se rendre sur la page gestion de l'accueil et modifier le widget du carousel (3ème Widget)
2. Repérer et dupliquer juste au dessus les lignes contenues entre <!-- A COPIER COLLER jusqu'à --> (exemple plus bas)
3. Ajuster les informations tel que 3 / 3, img-accueil-carousel-3.jpg ou Description brève ou currentSlideAccueil(3) afin que les chiffres et la description correspondent au numéro de l'image 1,2,3,4... ect
4. Il faut également ajuster les informations des autres images du carousel ayant le même format, notamment il est important de modifier les informations tels que 3 / 3 en 3 / 4 par exemple

Exemple:

On remarque dans le pôle industrielle ces lignes: 

<!--à COPIER COLLER
<div class="mySlides">
<div class="numbertext">6 / 6</div>
<img src="/s/img/img-accueil-carousel-6.jpg" style="width:100%" alt="" /></div>
-->

et

<!--à COPIER COLLER
<div class="column"><img class="demo cursor" src="/s/img/img-accueil-carousel-6.jpg" style="width:100%" onclick="currentSlideAccueil(6)" alt="Description Brève" /></div>
-->

On ne duplique que les lignes en vertes que l'on place juste au dessus de <!--à COPIER COLLER pour chacun et on ne change QUE les chiffres et le texte mis en gras ici.

• Comment changer la couleur du fond des blocs et des Titres

Vous avez la possibilité de changer la couleur du fond des blocs et de certains texte qui sont actuellement marron.

Pour cela vous devez aller dans Thème > Mise en page personnelle > CSS et changer le code de chiffres correspondant au marron juste après le # (par exemple #5C5656 pour marron) dans BackgroundColor et TitleColor. Le code correspond au code hexadécimal de la couleur, il est possible de l'obtenir sur le site https://htmlcolorcodes.com/fr/ par exemple.