Komponenten

Seitenelemente

Neue Komponenten anlegen

Um in den Seitenbearbeitungsbereich zu gelangen, wählen Sie im Bereich "Seiten" die gewünschte Seite aus und klicken Sie auf "Seite bearbeiten". Nun erscheint die zu bearbeitende Seite. Sie können die einzelnen Seiten auch per Doppelklick mit der linken Maustaste öffnen.

Sie sehen nun grüne Bearbeitungsbalken. Mit diesen können Sie eine "new content_elements component", also neue Inhaltselemente Ihrer Seite gestalten. Wenn Sie auf das Pluszeichen rechts klicken, haben Sie zunächst die Wahl zwischen "Hauptinhalt und Marginalspalte" und "Hauptinhalt ohne Marginalspalte".

Wenn Sie im rechten Teil Ihrer Seite Zusatzinformationen einfügen wollen (Kontakt-Boxen, Videos, etc.), dann wählen Sie die Marginalspalte mit aus. Wenn Sie eine reine Textseite haben wollen, wie diese hier, dann wählen Sie "ohne Marginalspalte" aus.

Zusätzlich können Sie unten auswählen, ob Ihre neue Komponente vor oder nach dem ersten bzw. letzten Absatz erstellt wird. Sie können sie jedoch später noch verschieben.

In dem folgenden Administrationsbalken "content_elements" können Sie eine Überschrift einfügen und wählen, ob Ihr Hauptinhaltsbereich ein-, zwei- oder dreispaltig sein soll. Diese Einstellungen gelten für alle Komponenten, die Sie in diesem Komponentenelement einfügen wollen. Darunter können Sie in einem neuen Oberelement anders entscheiden.

Sie haben nun die Auswahl aus verschiedenen Inhaltstypen, die Sie in eine Komponente Ihrer Seite einbauen können. Für Texte (mit oder ohne Einbindung von Bildern) wählen Sie Absatz. Sie können auch eine Bildergalerie, eine Kontakt-Box oder eine Tabelle einfügen.

Ihre einzelnen Komponenten können Sie später noch bearbeiten oder verschieben, dazu klicken Sie einfach auf das "Verschieben"- oder "Bearbeiten"-Symbol rechts oben in der Komponentenleiste.

Wenn Sie Ihre Seiten fertig bearbeitet haben, müssen Sie sie nur noch publizieren.

Beachten Sie, dass es einige Komponenten gibt, die Sie nur einfügen können, wenn Sie die gesamte Breite nutzen und keine Marginalspalte erstellt haben.

In der gesamten Breite können Sie die folgenden Komponenten einbinden:

  • Landeskirche Diagramm
  • Türchenkalender
  • Suchfeld
  • Video Collection
  • Kursfilter aus fortbildung-e

Die Komponenten FAQ (Übersicht und Liste) sowie Kategorien werden zwar angezeigt, sind aber für die reguläre max-e Nutzung nicht relevant. 

Komponenten

Sie haben nun die Auswahl aus verschiedenen Inhaltstypen, die Sie in eine Komponente Ihrer Seite einbauen können. Für Texte (mit oder ohne Einbindung von Bildern) wählen Sie Absatz. Sie können auch eine Bildergalerie, eine Kontakt-Box oder eine Tabelle einfügen.

Ihre einzelnen Komponenten können Sie später noch bearbeiten oder verschieben, dazu klicken Sie einfach auf das "Verschieben"- oder "Bearbeiten"-Symbol rechts oben in der Komponentenleiste.

Wenn Sie Ihre Seiten fertig bearbeitet haben, müssen Sie sie nur noch publizieren.

Absatz

Die Komponente "Absatz" besteht aus einer Überschrift, einem Textkörper, einem Bild oder einem Video oder einer Audiodatei und einem Link unter dem Text. Diese Elemente können, müssen aber nicht alle eingegeben werden.

Klicken Sie in einem grünen Balken auf "+" und wählen Sie den Inhaltstyp "Absatz" aus. Jetzt öffnet sich die Absatz-Box.

Hier können Sie eine Überschrift eingeben, einen Fließtext und eine Verlinkung. Interne Verlinkungen leiten zu anderen Seiten Ihrer Website weiter. Externe Links verweisen auf Links außerhalb Ihrer Website.

Darüber hinaus können Sie Bilder und Videos einbinden.

Überschrift und Text eingeben

Geben Sie in die Zeile "Überschrift" die Überschrift des Absatzes ein. Sie soll möglichst kurz und treffend sein (Tipp: nicht mehr als sieben Wörter).

Unmittelbar unter der Zeile mit der Überschrift können Sie ein Kontrollkästchen aktivieren, das definiert, ob die Überschrift oben angezeigt werden soll. Dies ist für den Fall, dass Sie ein Bild oder Video in dieser Komponente einbinden wollen, bei der der Text entweder neben oder unter dem Medium angezeigt wird. So können Sie die Überschrift unabhängig von dem Fließtext ansteuern.

Schreiben Sie dann den Text in das Feld "Text". Wenn Sie Text aus einem Textverarbeitungsprogramm in das Feld einfügen möchten, klicken Sie in der Menüleiste auf die Schaltfläche "Einfügen" (Klemmbrett-Symbol in der zweiten Zeile) und fügen Ihren Text mit "Strg+V" in das Eingabefeld ein. Auf diesem Weg werden alle Formatierungen des Textverarbeitungsprogramms entfernt.

Vorherige Formatierungen von Text, den Sie in das Feld kopiert haben, können Sie auch mit dem "T"-Symbol in der ersten Leiste entfernen. 

Mit den Symbolen über der Textbox können Sie Ihren Text formatieren. Sie entsprechen den Symbolen in Textverarbeitungsprogrammen.

Bild auswählen und Bildgröße bestimmen

Sie können jedem Absatz ein Bild hinzufügen, das Sie vorher in den Bereich "Dokumente" hochgeladen haben. Dazu müssen Sie im Absatz-Fenster "Bild" bzw. "Video anzeigen" auswählen und im Reiter (Tab) oben im Fenster ein Bild oder ein Video einbinden. Klicken Sie auf "Neues auswählen", werden die Ordner aus dem Bereich Dokumente angezeigt und Sie können Ihr Bild auswählen. Sollen Ihre Nutzer das Bild vergrößert ansehen können, wählen Sie "Das Bild in einer Lightbox anzeigen". Jetzt müssen Sie noch entscheiden, ob das Bild heruntergeladen werden darf oder nicht. Wir empfehlen die Einstellung "Download nicht erlauben".

Im Reiter (Tab) Absatz können Sie dann die Größe und die Platzierung des Mediums relativ zum Textfeld eingeben.

Anker setzen

  1. Öffnen Sie die Seite, auf der ein Anker gesetzt werden soll.
  2. Wählen Sie die Artikel‑Komponente aus.
  3. Legen Sie eine Auflistung an.
  4. Markieren Sie den Text, der auf einen Anker verweisen soll (z. B. „Mehr erfahren“).
  5. Klicken Sie auf das Link‑Symbol ganz links (Verknüpfung).
  6. Geben Sie die Anker‑URL ein.
  7. Geben Sie im Link‑Dialog die URL in dieser Form ein: #ankername
  8. Speichern Sie und testen Sie den Link in der Seitenvorschau.

Beispiel: Wenn Sie später im gleichen Artikel einen Abschnitt mit dem Namen kontakt haben, schreiben Sie #kontakt.

Hinweis

Die Anker funktionieren nur in Kombination mit den Überschriften anderer Absatzkomponenten.

Akkordeon

Die Komponente Akkordeon ermöglicht es Ihnen, größere Textmengen übersichtlicher und strukturierter auf Ihrer Website unterzubringen. Unter verschiedenen Überschriften können Sie Text einfügen, der bei Bedarf aus- oder eingeklappt wird.

Wenn Sie ein Akkordeon als Komponente anlegen, haben Sie in dem ersten Fenster die Möglichkeit, eine Überschrift und einen erläuternden Text für die gesamte Komponente einzugeben. Beachten Sie, dass dieser Fließtext selbst nicht Teil des einklappbaren Akkordeon-Textes ist.

Unter dem Textkasten sehen Sie ein Kontrollkästchen, welches die Hintergrundfarbe der Überschriften definiert. Sie können wählen, ob die Überschriften in Ihrer Hintergrundfarbe oder in grau erscheinen sollen.

Wenn Sie die Eingaben in diesem Fenster gespeichert haben, erscheint eine neue Administrationsleiste auf Ihrer Seite mit der Bezeichnung "Accordion_Inner".
Wenn Sie auf diese Leiste klicken, erscheint darunter eine weitere Leiste "Accordion_Item" mit einem Bearbeitungsstift auf der rechten Seite. Wenn Sie diesen anwählen, können Sie wählen, ob Ihr Akkordeon aus einem Absatz (im Programm "Akkordeon Element" genannt), einer Kontaktliste oder einer Linkliste bestehen soll.

Nachdem Sie die Angaben hier gespeichert haben, erscheint darunter eine weitere Leiste, in der Sie ein zweites Akkordeon einfügen können (genauso wie bei der Administrationsleiste "Linklist_Inner" bei der Komponente Linkliste).

Unmittelbar unter diesem Absatz sehen Sie ein Akkordeon mit drei Überschriften, die grau hinterlegt sind. Klicken Sie auf die einzelnen Überschriften, klappen die Textfelder auf. Diese werden wieder eingeklappt, wenn Sie erneut auf die Überschrift klicken. In diesem Beispiel besteht das Akkordeon aus drei Absätzen.

Bildergalerie

Mit der Inhaltskomponente "Bildergalerie" können Sie eine Bildergalerie anlegen.

Klicken Sie dazu in der Bearbeitungsleiste auf "+" und wählen Sie die Komponente "Bildergalerie". Jetzt öffnet sich die Eingabebox. Füllen Sie die Eingabebox aus. Sie können der Galerie eine Überschrift geben und im Textfeld einen Untertitel hinzufügen. Zusätzlich können Sie hier entscheiden, ob die Bildergalerie im Hauptbereich der Seite oder in der Marginalspalte rechts angezeigt werden soll.

Zum Anlegen einer Bildergalerie wählen Sie immer einen hochgeladenen Bilderordner im Ganzen aus.

Formular aus formulare-e

Mit dieser Komponente können Sie Formulare einbinden, die Sie über das systeme-e-Produkt "formulare-e" erstellt haben. 

Karte

Auf einer Inhaltsseite können Sie eine Karte einbinden. Diese Funktion eignet sich, um beispielsweise auf einer Seite zum Kontakt die Anfahrt zum Gemeindehaus zu beschreiben. 

Hier werden Sie zunächst aufgefordert, eine "Hauptadresse" anzugeben, auf die die Karte zeigen soll. Wenn Sie weitere Marker auf der Karte einsetzen möchten, können Sie ebenfalls den Kartenausschnitt anpassen. 

Ähnlich wie bei der Akkordeon-Komponente können Sie unterhalb der "Hauptkarte" dann weitere Marker auf der Karte als Komponenten anlegen. Diese können dann als kleine Markierung (Tool-Tip) oder als kleines Fenster (Pop-Up) in der Karte angezeigt werden. Außerdem können die Marker jeweils farblich gekennzeichnet und mit Beschreibungstext versehen werden.

Türchenkalender

Mit der Komponente Türchenkalender kann eine beliebige Anzahl von Kalendertürchen dargestellt werden, um beispielsweise einen Adventskalender oder einen Countdown-Kalender aufzubauen.

Neues Kalendertürchen hinzufügen

Klicken Sie in einem grünen Balken auf "+" und wählen Sie den Inhaltstyp Türchenkalender aus. Jetzt öffnet sich der Türchenkalender-Dialog.

Da es sich bei der Komponente Türchenkalender um eine übergeordnete Komponente handelt, wird hier lediglich das Layout des Kalenders bestimmt. Dabei kann festgelegt werden, wie viele Kalendertürchen sich in einer Zeile befinden sollen.

Einen neuen Türchenkalender anlegen

Innerhalb der Türchenkalender-Komponente existiert nun eine neue Inhaltsfläche (Area). Hier können die einzelnen Kalendertürchen-Komponenten hinzugefügt werden. Klicken Sie dort in einem grünen Balken auf "+" und wählen Sie den Inhaltstyp "Kalendertürchen" aus. Nun öffnet sich der Kalendertürchen-Dialog.

Geschlossenes Kalendertürchen gestalten

In der ersten Registerkarte mit dem Titel "Geschlossen" können Sie das Aussehen des geschlossenen Kalendertürchens bestimmen. Dafür existieren folgende Felder:

Geöffnet ab

Hier setzen Sie das Aktivierungsdatum der Tür. Sobald das Datum überschritten wurde, ist die Tür geöffnet.

Text (optional)
Hier können Sie einen kurzen Text, ein kurzes oder langes Datum oder eine Zahl eingeben. Der Text wird innerhalb der geschlossenen Tür angezeigt.

FontAwesome 4 Icon (optional)
Diese Funktion ermöglicht das Einfügen eines Icons über einen entsprechenden FontAwesome 4 HTML Code. Hier erhalten Sie einen Überblick über alle verfügbaren Icons.

Textgröße (optional)
Es existieren drei Textgrößen:

  • Groß für eine einzelne Zahl, z. B. die Zahlen von 1-24 für einen Adventskalender.
  • Mittel für einen kurzen einzeiligen Text, z. B. "1. Dezember".
  • Klein für einen kurzen zweizeiligen Text.

Bild/Hintergrundbild (optional)
Hier können Sie ein Bild für die geschlossene Tür hinterlegen. Wenn Sie beispielsweise die ganze Tür als Grafik hinterlegt haben, brauchen Sie diese nur hier einzufügen. Alternativ kann dieses Bild als Hintergrundbild für eine geschlossene Tür verwendet werden. Text und weitere Gestaltungselemente werden dann darüber angezeigt.

Kreisfläche (optional)
Hier können Sie festlegen, ob Ihr Text in einer Kreisfläche auf dem Hintergrundbild angezeigt werden soll.

Hintergrundfarbe (optional)
Die Hintergrundfarbe legt die Farbe der Kalendertür fest, wenn kein Hintergrundbild ausgewählt wurde. Alternativ kann sie zum Einfärben des Hintergrundbildes verwendet werden. Es muss ein sog. HEX-Wert verwendet werden. Standardmäßig wird die Primärfarbe Ihrer Seite eingesetzt.

Transparenz (optional)
Mit dieser Option können Sie bestimmen, ob Ihr Bild mit der gesetzten Hintergrundfarbe eingefärbt werden soll.

Kreisfarbe (optional)
Hier können Sie die Farbe der Kreisfläche festlegen. Es muss ein sog. HEX-Wert verwendet werden. Standardmäßig wird die Primärfarbe Ihrer Seite eingesetzt.

Textfarbe (optional)
Hier können Sie die Farbe des Textes in Ihrem Kalendertürchen festlegen. Es muss ein sog. HEX-Wert verwendet werden. Standardmäßig ist der Text weiß.

Geöffnetes Kalendertürchen gestalten

In der Registerkarte "Geöffnet" finden Sie bis auf das Startdatum die gleichen Felder wie bei "Geschlossen" vor. Sobald das Türchen aktiv ist, werden die Einstellungen aus dieser Registerkarte verwendet. Auch bei nahezu identischer Gestaltung der geöffneten und geschlossenen Tür ist es zwingend erforderlich, hier ebenfalls alle Einstellungen vorzunehmen. Nur so können wir ein Höchstmaß an Flexibilität für die Gestaltung der Kalendertürchen garantieren.

Inhalt des Kalendertürchens

Sobald ein Kalendertürchen aktiviert ist, existieren zwei Möglichkeiten, den Inhalt bereitzustellen.

Variante 1: Verlinkung auf eine andere Seite
Wählen Sie hierfür im Reiter "Inhalt" bei Art des Inhalts "Inhalt auf verlinkter Seite" aus. Sie können nun eine Inhaltsseite mit dem Inhalt des Kalendertürchens in Magnolia aufbauen und publizieren diese ebenfalls zum entsprechenden Aktivierungsdatum des Türchens. Sobald das Türchen geöffnet ist, verlinkt dieses dann auf die gewählte Seite.

Variante 2: Darstellung des Inhalts in einem Pop-Up
Wählen Sie hierfür im Reiter "Inhalt" bei Art des Inhalts "Inhalt in Pop-Up" aus. Sie können nur die Felder Überschrift und Text verwenden, um den Inhalt des Pop-Ups zu befüllen. In der Registerkarte "Inhalt Medien" können Sie darüber hinaus ein Bild, ein Video oder eine Audio-Aufnahme auswählen, die ebenfalls im Layer angezeigt werden. Sobald das Türchen geöffnet ist, öffnet ein Klick auf das Türchen das zugehörige Pop-Up.

Linkliste

Mit einer Linkliste können Sie auf interne und externe Seiten oder auf Dateien verlinken. Bei der Erstellung einer Linkliste erscheint eine neue Bearbeitungsleiste, mithilfe derer Sie die einzelnen Links einfügen können.

Wenn Sie auf Dateien verlinken wollen, öffnet sich ein Fenster, in dem Sie den Dateityp, auf den Sie verlinken möchten, auswählen und angeben, ob dieser Link intern (also in den Dokumenten Ihrer Seite) oder extern ist.

Sie können auch für jeden einzelnen Link in dem entsprechenden Textfenster eine Beschreibung oder einen Text eingeben.

Beachten Sie, dass Sie für jeden Link eine eigene, neue Link-Komponente unter der Oberkomponente "Linkliste" anlegen müssen.

Landeskirche Diagramm

Sie können die Organisation der landeskirchlichen Strukturen in einem übersichtlichen Diagramm als dynamische Komponente in Ihre Website einbinden. Dazu müssen Sie auf einer Inhaltsseite in der ersten Inhaltsebene (content_element) "Hauptinhalt ohne Marginalspalte" auswählen.

Nun haben Sie bei der Auswahl der Komponenten auch das "Landeskirche Diagramm". Dieses besteht aus einem Kreisdiagramm mit verschiedenen konzentrischen Kreisen und der darunter stehenden Beschreibung der Struktur. Besucherinnen und Besucher Ihrer Seite können nun durch die einzelnen Ebenen durchklicken, indem Sie auf die unten stehenden Kategorien klicken. Dann werden jeweils mehr Informationen und Rechtsgrundlagen dazu angezeigt.

Wie bei dem Seitentyp Kalenderblatt müssen Sie hierzu nichts weiter einpflegen, da diese Komponente in der Struktur vorgegeben ist.

Newsletter Modul

Über den Einbau eines Newsletter-Moduls kann sich ein Nutzer der Seite für einen Newsletter registrieren oder diesen abbestellen. Diese Komponente ist ausschließlich für das Einbinden von Newslettern, die mit unserem Tool newsletter-e erstellt wurden, geeignet.

Die Komponente fragt nach einer ID. Diese erhalten Sie vom Supportteam. Jede Empfängerliste hat eine ID, die dann in der Komponente in max-e eingetragen werden kann. So wird die Liste mit der Komponente verknüpft. 

iFrame

Ein iFrame ist ein kleines „Fenster“ in einer Website, das eine andere Website (oder einen anderen Inhalt) anzeigt. 

Bevor Sie Inhalte über einen iFrame einbinden, beachten Sie folgende Punkte:

  • Auf der Live-Website taucht zunächst ein Hinweisfeld auf, das die Besucher*innen Ihrer Website darüber informiert, dass hier Inhalte von Drittanbietern eingebunden werden. Das ist aus Datenschutzgründen notwendig.
  • Screenreader zeigen iFrames oft als „einen Block“ an und geben den Inhalt nicht im richtigen Ablauf wieder. Nutzer*innen können den Inhalt dann nicht linear lesen.
  • iFrames passen sich nicht immer gut an unterschiedliche Bildschirmgrößen oder Zoom‑Levels an. Auf mobilen Geräten können Inhalte abgeschnitten oder unlesbar sein.

Wenn Sie einen externen Inhalt einbinden möchten, müssen Sie den kompletten Link aus der Adresszeile Ihres Browsers kopieren und in das Feld "externer Link" in der Komponente iFrame einfügen.

Am Ende des Links fügen Sie noch "?embed" an (siehe Bild). Dann müssen Sie eine Pixelzahl für die Höhe des iFrames definieren.

Code

Auch mit der Komponente "Code" können Sie externe Inhalte einbinden, indem Sie direkt einen HTML-Code eingeben. Dies ist, wenn Sie sich damit auskennen, praktisch, um z. B. OpenStreetMap-Karten o.Ä. einzubinden. Allerdings ist dies in der Regel eine selten gewählte Komponente.

Box mit Terminen aus der Termindatenbank

Auf Seiten mit dem Typ (Template) Inhaltsseite und auf der Startseite (Homepage) können Sie Termine anzeigen lassen, die Sie über die Termindatenbank termine-e pflegen können.

Zitat

Mit der Komponente "Zitat" können Sie prägnante Aussagen gut sichtbar hervorheben.

Video Collection

Über die Komponente "Video Collection" können Sie - ähnlich wie in der Linkliste (s. o.) - verschiedene Videos auf Ihrer Seite anzeigen lassen. Sie können hier bei jedem Video einzeln wählen, ob Sie auf die Mediendatenbank Ihrer Seite oder auf Videos von Plattformen wie YouTube zurückgreifen möchten. Für jedes Video können Sie dazu noch ein Vorschaubild auswählen.

Online Kollekte

1. Gemeinde-/Einrichtungsbezug

Die Kollekte wird über eine spezielle technische ID („ELKH-ID“) einer Gemeinde zugeordnet. Diese ID können Sie über die Seite https://spende.elkh.de/kollekte/nutzung erhalten. Ohne diese Gemeindezuordnung wird eine Kollektenspende global der Landeskirche zugeordnet.

Sie können nun einen Kollektenzweck auswählen oder die Standard-Einstellung übernehmen. So wird immer die jeweils aktuellste Kollekte verwendet, ohne dass Sie hier noch einmal etwas ändern müssen.

Im ersten Schritt besuchen Sie bitte die oben genannte Seite und notieren sich Ihre ELKH-ID und ggf. die Kollekten-ID.

2. Einbindung der ELKH-ID

Nun rufen Sie bitte Ihre Homepage auf und klicken oben rechts auf Seiteneigenschaften.

Dort haben Sie die Möglichkeit, die ELKH-ID einzutragen. Klicken Sie auf "Speichern", und der schwierigste Teil ist schon erledigt.

3. Einbindung der Komponente

Auf Ihrer Seite können Sie jetzt die Komponente "Online-Kollekte" einbinden. Dies ist auf den Seitentypen "Homepage" und "Inhaltsseite" möglich.

Sie haben die Möglichkeit, sich die Erläuterungen, die Fürbitten und einen Impuls zu jeder Online-Kollekte anzeigen zu lassen. Dazu setzen Sie einfach die entsprechenden Haken in der Komponente.

Außerdem können Sie nun die Kollekten-ID eintragen, die Sie auf https://spende.elkh.de/kollekte/nutzung erhalten haben. Wenn Sie das Feld leer lassen, wird hier die aktuellste Kollekte verwendet.

Nach dem Klick auf "Speichern" sind Sie fertig. Die Online-Kollekte wird eingebunden und kann benutzt werden.