← Zurück zur Startseite

Kartenvorlagen

Kopierfertige Vorlagen für Event-Karten, Spendenaktionen und Übergaben — einfach in die Homepage einfügen.

Ladies Circle 15 Kitzbühel

Vorlagen für
Aktuelles

Diese Seite enthält alle Vorlagen für den Bereich „Aktuelles“ auf der Startseite.
Kopiere den gewünschten HTML-Code, füge ihn in die Homepage ein und passe die Inhalte an.
Mit data-aktiv="true" wird die Karte angezeigt, mit data-aktiv="false" ausgeblendet.

So verwendest du diese Vorlagen

  1. Klicke auf „Code anzeigen“ unter der gewünschten Vorlage
  2. Kopiere den gesamten Code (Strg+A → Strg+C im Code-Fenster)
  3. Öffne in WordPress die Startseite im Code-Editor
  4. Suche nach <div id="events-container"> (für Events) oder <div id="spenden-aktionen-container"> (für Spenden)
  5. Füge den kopierten Code vor dem schließenden </div> des Containers ein
  6. Passe Titel, Datum, Bild-URL und alle anderen Felder an
  7. Setze data-aktiv="true" damit die Karte sichtbar wird

Vorlage 1 — Event-Karte

Für Charity-Events, Meetings, Workshops und alle anderen Veranstaltungen.
Enthält: Bild, Datumsblock, Titel, Beschreibung, Meta-Details und Countdown. 


<!-- ─── EVENT-KARTE ───────────────────────────────────────────
     data-aktiv="true"  → Karte wird auf der Website angezeigt
     data-aktiv="false" → Karte ist ausgeblendet (Vorlage/Archiv)
     ──────────────────────────────────────────────────────────── -->
<div class="aktuell-card" data-aktiv="false" data-typ="event">
  <div class="aktuell-inner" style="background:var(--teal-pale); border:1px solid rgba(90,171,160,0.25); border-top:4px solid var(--teal);">

    <!-- BILD: src durch URL aus WordPress Mediathek ersetzen -->
    <div class="aktuell-img-wrap">
      <img
        src="BILD-URL-AUS-WORDPRESS-MEDIATHEK"
        alt="Bildbeschreibung"
        class="aktuell-img"
        onerror="this.parentElement.style.display='none'">
    </div>

    <div class="aktuell-body">
      <div class="event-grid">

        <!-- Datumsblock links -->
        <div style="text-align:center; padding:1.5rem 0;">
          <p class="event-month">Monat JJJJ</p>
          <p class="event-day">TT</p>
          <p class="event-year">JJJJ</p>
          <div class="event-divider"></div>
          <p class="event-time">HH:MM – HH:MM Uhr</p>
          <p class="event-location">Ort, Tirol</p>
        </div>

        <!-- Inhalt rechts -->
        <div>
          <!-- KATEGORIE: z.B. Charity-Event / Meeting / Workshop -->
          <span class="event-type-badge">Charity-Event</span>

          <!-- TITEL -->
          <h3 class="event-title">Event-Titel hier</h3>

          <!-- BESCHREIBUNG -->
          <p class="event-desc">Kurze Beschreibung...</p>

          <!-- META-DETAILS -->
          <div class="event-meta-row">
            <div class="event-meta-item">
              <span class="event-meta-label">Datum</span>
              <span class="event-meta-value">Wochentag, TT. Monat JJJJ</span>
            </div>
            <div class="event-meta-item">
              <span class="event-meta-label">Uhrzeit</span>
              <span class="event-meta-value">HH:MM – HH:MM Uhr</span>
            </div>
            <div class="event-meta-item">
              <span class="event-meta-label">Veranstaltungsort</span>
              <span class="event-meta-value">Location, Ort</span>
            </div>
            <div class="event-meta-item">
              <span class="event-meta-label">Eintritt</span>
              <span class="event-meta-value">€ XX</span>
            </div>
          </div>

          <!-- BUTTON: href auf mailto: oder Anmeldelink -->
          <a href="mailto:lc15@ladiescircle.at?subject=Anmeldung" class="btn-gold">
            Jetzt anmelden →
          </a>

          <!-- COUNTDOWN: Datum im Format 'YYYY-MM-DDTHH:MM' -->
          <div class="countdown-strip" data-countdown="YYYY-MM-DDTHH:MM" style="margin-top:1.5rem;">
            <div class="countdown-unit"><span class="countdown-num">–</span><span class="countdown-lbl">Tage</span></div>
            <span class="countdown-sep">:</span>
            <div class="countdown-unit"><span class="countdown-num">–</span><span class="countdown-lbl">Stunden</span></div>
            <span class="countdown-sep">:</span>
            <div class="countdown-unit"><span class="countdown-num">–</span><span class="countdown-lbl">Minuten</span></div>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>
<!-- ─── ENDE EVENT-KARTE ──────────────────────────────────── -->

💡 Tipp: Klicke in den Code-Block und drücke Strg+A dann Strg+C um alles zu kopieren.

Vorlage 2 — Spenden-Aktionskarte

Für gezielte Spendenaufrufe und Projektfinanzierungen. Enthält: Bild, Titel, Beschreibung,
IBAN-Details und Spendenbutton. 


<!-- ─── SPENDEN-KARTE ──────────────────────────────────────────
     data-aktiv="true"  → Karte wird angezeigt
     data-aktiv="false" → ausgeblendet (Vorlage/Archiv)
     ──────────────────────────────────────────────────────────── -->
<div class="aktuell-card" data-aktiv="false" data-typ="spende">
  <div class="aktuell-inner" style="background:var(--rose-pale); border:1px solid var(--rose-mid); border-top:4px solid var(--rose);">

    <!-- BILD: src durch URL aus WordPress Mediathek ersetzen -->
    <div class="aktuell-img-wrap">
      <img
        src="BILD-URL-AUS-WORDPRESS-MEDIATHEK"
        alt="Bildbeschreibung"
        class="aktuell-img"
        onerror="this.parentElement.style.display='none'">
    </div>

    <div class="aktuell-body">

      <!-- BADGE: z.B. Spendenaufruf / Projektfinanzierung -->
      <span class="event-type-badge" style="background:rgba(193,116,138,0.15); border-color:var(--rose-mid); color:var(--rose-dark);">
        Spendenaufruf
      </span>

      <!-- TITEL -->
      <h3 class="event-title" style="margin-top:0.75rem;">Titel der Spendenaktion</h3>

      <!-- BESCHREIBUNG -->
      <p class="event-desc" style="margin-bottom:1.5rem;">
        Beschreibe das Projekt — wofür wird gespendet?
      </p>

      <!-- META-DETAILS -->
      <div class="event-meta-row" style="border-color:rgba(193,116,138,0.15);">
        <div class="event-meta-item">
          <span class="event-meta-label">Zeitraum</span>
          <span class="event-meta-value">bis TT. Monat JJJJ</span>
        </div>
        <div class="event-meta-item">
          <span class="event-meta-label">IBAN</span>
          <span class="event-meta-value">AT90 5700 0300 5560 6509</span>
        </div>
        <div class="event-meta-item">
          <span class="event-meta-label">Verwendungszweck</span>
          <span class="event-meta-value">Spende LC15 – Projektname</span>
        </div>
      </div>

      <!-- BUTTON -->
      <a href="#spenden" class="btn-primary" style="display:inline-block; margin-top:0.75rem;">
        Jetzt spenden →
      </a>

    </div>
  </div>
</div>
<!-- ─── ENDE SPENDEN-KARTE ──────────────────────────────────── -->

💡 Tipp: Klicke in den Code-Block und drücke Strg+A dann Strg+C um alles zu kopieren.

Vorlage 3 — Spende überreicht ✓

Für bereits abgeschlossene Spenden — als Erfolgsmeldung und Dankeschön an alle, die beigetragen haben.
Kein Fortschrittsbalken, kein Spendenbutton — nur Bild, Betrag, Empfänger und eine herzliche Nachricht. 


<!-- ─── SPENDE ÜBERREICHT ──────────────────────────────────────
     Für abgeschlossene Spenden — Erfolgsmeldung / Danksagung
     data-aktiv="true"  → wird angezeigt
     data-aktiv="false" → ausgeblendet
     ──────────────────────────────────────────────────────────── -->
<div class="aktuell-card" data-aktiv="false" data-typ="spende-uebergabe">
  <div class="aktuell-inner" style="background:var(--white); border:1px solid #C0DD97; border-top:4px solid #639922;">

    <!-- BILD: Foto der Übergabe aus WordPress Mediathek -->
    <div class="aktuell-img-wrap">
      <img
        src="BILD-URL-AUS-WORDPRESS-MEDIATHEK"
        alt="Spendenübergabe"
        class="aktuell-img"
        onerror="this.parentElement.style.display='none'">
    </div>

    <div class="aktuell-body">

      <!-- STATUS-BADGE + DATUM -->
      <div style="display:flex; align-items:center; gap:0.75rem; margin-bottom:1.25rem; flex-wrap:wrap;">
        <span style="display:inline-flex; align-items:center; gap:0.4rem; background:#EAF3DE; border:1px solid #C0DD97; color:#3B6D11; font-size:0.72rem; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; padding:0.3rem 0.9rem; border-radius:2px;">
          ✓ Spende überreicht
        </span>
        <!-- DATUM DER ÜBERGABE anpassen -->
        <span style="font-size:0.78rem; color:var(--ink-light);">Monat JJJJ</span>
      </div>

      <!-- TITEL -->
      <h3 class="event-title">Spende für [Empfänger]</h3>

      <!-- BESCHREIBUNG / DANKNACHRICHT -->
      <p class="event-desc">
        Wir freuen uns, bekannt zu geben, dass wir im [Monat JJJJ] eine Spende
        in Höhe von <strong>€ XX</strong> an [Empfänger] überreichen durften.
        Herzlichen Dank an alle, die durch ihre Unterstützung diesen Moment möglich gemacht haben!
      </p>

      <!-- DETAILS-ZEILE -->
      <div class="event-meta-row" style="border-color:#C0DD97;">
        <div class="event-meta-item">
          <span class="event-meta-label">Betrag</span>
          <!-- BETRAG anpassen -->
          <span class="event-meta-value" style="font-family:'Cormorant Garamond',serif; font-size:1.4rem; color:#3B6D11;">€ XX</span>
        </div>
        <div class="event-meta-item">
          <span class="event-meta-label">Empfänger</span>
          <!-- EMPFÄNGER anpassen -->
          <span class="event-meta-value">Organisation / Person</span>
        </div>
        <div class="event-meta-item">
          <span class="event-meta-label">Übergabe</span>
          <!-- DATUM DER ÜBERGABE anpassen -->
          <span class="event-meta-value">Monat JJJJ</span>
        </div>
        <div class="event-meta-item">
          <span class="event-meta-label">Projekt</span>
          <!-- PROJEKTNAME anpassen -->
          <span class="event-meta-value">Projektname</span>
        </div>
      </div>

      <!-- DANKESZITAT (optional — komplett entfernen wenn nicht gewünscht)
           Zitat und Absender anpassen                                  -->
      <blockquote style="margin-top:1.25rem; padding:1rem 1.25rem; background:#EAF3DE; border-left:3px solid #639922; border-radius:0 4px 4px 0; font-style:italic; font-size:0.9rem; color:var(--ink-mid); line-height:1.7;">
        „Zitat des Empfängers hier eintragen."
        <span style="display:block; margin-top:0.5rem; font-style:normal; font-size:0.78rem; color:var(--ink-light);">
          — Name, Organisation
        </span>
      </blockquote>

    </div>
  </div>
</div>
<!-- ─── ENDE SPENDE ÜBERREICHT ──────────────────────────────── -->

💡 Tipp: Klicke in den Code-Block und drücke Strg+A dann Strg+C um alles zu kopieren.