Anleitung Aufdatierung Kacheln

Hier gilt es explizit zu nennen, dass für die Smartphone-Ansicht und die Web-Ansicht zwei verschiedene Codes für jede Gruppe (Präsidium, Kommission, Geschäftsstelle, Revision) generiert wurden. Für die Web-Ansicht gilt eine Kachel-Ansicht und für die Smartphone-Ansicht eine Karussell-Ansicht.

Beide Codes wurden mit HTML erstellt. Deshalb ist es hier wichtig, die Code-Struktur nicht zu durchbrechen.

Je nach Ansicht (siehe oben Web -> Smartphone) ist einer der beiden hmtl-Codes nicht visualisiert. Generell gilt, der erste Code pro Einheit (bspw Präsidium) ist für Web, der zweite für das Smartphone.

Wenn nun eine Person mutiert werden muss (für Präsidium bspw).

Struktur:

• Alles was im Syntax (erster Teil des Codes) <style> ist, ist nur darstellerischer Natur und sollte nicht verändert werden.

• <div id=“svial-dt“>
  <div class=“sv-track“> </div> </div> –> alles in diesem Syntax kann mutiert werden -> Hier bitte bei Ergänzung nur in diesem Bereich verändern.

• Hier kann der folgende Abschnitt beim Hinzufügen einer neuen Person dupliziert werden. Am Besten an Vorlage orientieren. Bspw., wenn eine Person ohne LI kopiert werden soll, dann Article von Achim kopieren, wenn ein Article mit gekoppeltem LI-Post (siehe unten) kopiert werden soll, dann bspw Anik kopieren.

• Die fett markierten Inhalte (am Bsp einer normalen Kachel) können mutiert werden:

A. Bild über Medien hinzufügen (auf Main Page) und URL kopieren

B. Alt-Text für Bild jeweils anpassen

C. LinkedIn URL Person kopieren

D. Alt-Text anpassen

E. Name anpassen

F. -H. Job Details anpassen 

<!– CARD 1 –>
<article class=“sv-card“>
<div class=“image-wrap“>
<img class=“sv-img“ src=„https://www.svial.ch/wp-content/uploads/2022/12/v-braun.jpg (A)“ alt=“Dr. Peter Braun (B)„> 
<div class=“icon-top-left“>
<a class=“badge“ href=“https://www.linkedin.com/in/peter-braun-82b17b10/ (C)“ target=“_blank“ aria-label=“LinkedIn Dr. Peter Braun (D)„>
<img src=“https://img.icons8.com/ios-filled/50/000000/linkedin.png“ alt=““>
</a>

</div>
</div>
<h3>Dr. Peter Braun (E)</h3>
<p><strong>Co-Präsident SVIAL (F)</strong></p>
<p><strong>Aktueller Job: </strong> Gründer und Inhaber, (G) <em>BIC (H)</em></p>
</article>

• Sobald dies angepasst wurde und richtig formatiert wurde, kann dieser Code für den Smartphone Code kopiert werden (gleicher Syntax).

Ausnahme: Für gewisse Personen wurde noch ein Link zum LI-Post hinzugefügt: Hierzu ist der Syntax der folgende: Explizit gilt der folgende Code zu kopieren, und die fett markierten römischen Ziffern zu mutieren.

I) Auf Canva Bild uploaden

II) Alt-Text

III) LI-Post hinzufügen

IV) Text mutieren

V) Alt-Text

<!– CARD 11 –>
<article class=“sv-card“>
<div class=“image-wrap“>
<!– default image –>
<img class=“sv-img base“
src=“https://www.svial.ch/wp-content/uploads/2024/01/k-anik.jpg“
alt=“Anik Thaler“>

<!– hover image (fades in on hover) –>
<img class=“sv-img swap-img“
src=“https://www.svial.ch/wp-content/uploads/2025/08/Anik-Linkedin.png (I)„
alt=“Anik Thaler – SVIAL Faces (II)„>

<!– LinkedIn badge (stays visible on hover) –>
<div class=“icon-top-left“>
<a class=“badge“ href=“https://www.linkedin.com/in/anik-thaler/“ target=“_blank“ aria-label=“LinkedIn Anik Thaler“ rel=“noopener“>
<img src=“https://img.icons8.com/ios-filled/50/000000/linkedin.png“ alt=““>
</a>
</div>

<!– CTA overlay that appears on hover, links to your post –>
<a class=“hover-cta“
href=“https://www.linkedin.com/feed/update/urn:li:activity:7362183084487675905/ (III)„
target=“_blank“ rel=“noopener“
aria-label=“Mehr über Anik & den SVIAL (LinkedIn-Beitrag öffnen) (IV)„>
Mehr über Anik &amp; den SVIAL (V)
</a>
</div>

<h3>Anik Thaler</h3>
<p><strong>Mitglied Kommission</strong></p>
<p><strong>Aktueller Job: </strong>Co-Founder und CEO, <em>fabas</em></p>
</article>