Direkt zum Hauptinhalt

Who we are (Plugin)

Kurz und knapp

Das Plugin ermöglicht es schnell Vorstellungen für Vorsitz, Stellvertretung, Vorstandsmitglieder usw. anzulegen.

Ersteinrichtung

  1. Aktiviere das Plugin im Pluginverzeichnis von WordPress.
  2. Gehe im Menü auf den Menüpunkt "Wer wir sind". Du siehst nun die Startseite des Plugins.
  3. Lege zuerst Ämter und Fragen an.
  4. Anschließend kannst Du Personenvorstellungen hinzufügen.
  5. Über den Shortcut [who_we_are] kannst Du die Vorstellungen anzeigen lassen.

CSS-Beispiel

Mit Hilfe des Beispiel-Codes kann die Vorstellungsseite individuell angepasst werden. Der Beispielcode funktioniert ab Version 1.2.0.

/* Textfeld auf dem Foto (Name und Amt) */
.who-we-are span {
background-color: #102235!important; /* Hintergrundfarbe des Textfeldes */
opacity: 1!important; /* Deckkraft des Hintergrundfeldes */
height: 5.5em; /* Höhe des Hintergrundfeldes */
top: unset!important; /* Ausrichtung des Hintergrundfeldes */
}

.who-we-are div {
height: 5.5em; /* Höheneinstellung für den Text (sollte etwas größer sein als des Element weiter oben) */
top: unset!important; /* Ausrichtung/Position */
bottom: 0!important; /* Textfeld am unteren Rand des Bildes */
position: absolute; /* Position */
}

/* Name auf dem Textfeld */
.who-we-are p:first-child {
font-size: 1.2em!important; /* Schriftgröße */
padding: 0!important; /* Innenabstand */
margin: .5em 0 .3em 0; /* Außenabstand (hier Abstand oben und unten) */
text-align: center; /* Textausrichtung */
font-weight: bold; /* Fettgedruckter Text */
}

/* Amtsbezeichnung auf dem Textfeld */
.who-we-are p:last-child {
font-size: 0.9em!important; /* Schrifgröße */
line-height: 1.2em!important; /* Zeilenhöhe */
padding: 0!important; /* Innenabstand */
margin: 0; /* Außenabstand */
text-align: center; /* Textausrichtung */
}

/* Vorstellung (Liste je Person) */
.who-we-are-list {
margin-top: -18px; /* Oberer Abstand */
}

/* Desktop */
@media (min-width: 782px) {
  /* Foto links */
    .wwa-row {
        display: flex;
        align-items: stretch;
    }

  /* Foto rechts */
    .wwa-row-reverse {
        flex-flow: row-reverse!important; /* Foto und Text wird getauscht */
    }
}

/* Mobil, Foto kommt immer vor dem Text */
@media (max-width: 782px) {
    .wwa-row {
        display: flex;
        flex-direction: column;
    }

    .wwa-row > .wp-block-column {
        flex-basis: 100% !important;
        width: 100%;
    }
}

nach oben