Logos einbinden (Logo Element)
Das Inhaltselement "Logo" dient dazu, eine beliebige Anzahl von Logos übersichtlich auf Ihrer Webseite darzustellen. Dies eignet sich hervorragend, um Sponsoren, Partner, den Förderverein oder Ihre Social-Media-Kanäle zu präsentieren. Der große Vorteil: Jedem Logo kann ganz einfach ein eigener Link zugewiesen werden.
Logo Element als Inhaltselement anlegen
Fügen Sie ein neues Inhaltselement in Ihre Seite ein, indem Sie auf das "+ Inhalt" Symbol an der gewünschten Stelle klicken. Wählen Sie dann das Inhaltselement Logo [logo_element] aus.
Logos hinzufügen und anpassen
Nachdem Sie das Element angelegt haben, können Sie es im Backend mit Ihren Bildern füllen. Gehen Sie dabei wie folgt vor:
| 1. | Bilder auswählen: Klicken Sie im Bereich Logo auf den Button Add image (Bild hinzufügen) oder Select & upload files (Dateien auswählen & hochladen), um Ihre Logos von der Festplatte oder aus der Dateiliste hochzuladen. Wichtig: Das System akzeptiert für Logos die gängigen Formate jpg, png und svg. |
| 2. | Logos verwalten: Sobald Sie Bilder hinzugefügt haben, erscheinen diese in einer übersichtlichen Liste. Über die kleinen Buttons rechts neben jedem Logo können Sie dieses verbergen (Auge-Symbol), löschen (Mülleimer-Symbol) oder die Reihenfolge verschieben (Menü-Symbol ganz rechts). |
| 3. | Links hinterlegen: Um einem Logo einen Link zu geben, klicken Sie beim jeweiligen Bild in der Liste auf das Stift-Symbol (Bearbeiten). In den Bildeinstellungen können Sie dann den Link zur gewünschten externen Webseite eintragen. |
| 4. | Einheitliche Größe festlegen: Ganz unten in der Maske finden Sie das Feld Bildhöhe (px). Tragen Sie hier einen Pixel-Wert ein (z. B. 70). Das System skaliert die Logos auf der Webseite dann automatisch auf diese einheitliche Höhe, sodass Ihre Logoleiste ordentlich und auf einer Linie ausgerichtet aussieht – selbst wenn die hochgeladenen Originalbilder unterschiedlich groß waren. |
Speichern Sie jetzt das Inhaltselement und Sie können Ihre verlinkten Logos auf der Webseite ansehen.
Beispiel aus dem Backend
