Kurzanleitung zur neuen Homepage

1. Kopfzeilenbild
2. Layout-Boxen und Inhalte-Boxen
3. Link-box

4. Bild-Box

5. Galerie-Box
6. Editor-Box
7. Kalender
8. Formulare

 

 

 

 

 

 

Großes Kopfzeilen Bild auswählen

• Das große Bild in der Kopfzeile vererbt sich immer auf die Unterseiten dieser Seite, bis auf einer Unterseite ein anders Bild eingestellt wird, dieses vererbt sich dann wiederum nach unten.
• Alternativ kann auch "kein Bild anzeigen" eingestellt werden, nützlich z.B. bei Verteilerübersichtsseiten oder Impressum etc.
• Das Bild wird in den Grunddaten geändert
• Über Pfeil ganz oben links neben "Inhalt ändern" "Grunddaten" auswählen
• Bei "Community-spezifische Daten für diese Seite" "Bild Kopfzeile" "Bild wählen" klicken
• Im Bildmanager Bild auswählen oder Neues Bild laden (siehe weiter unten " Bilder einfügen")
• Wichtig: Das Bild am besten in original Größe auswählen. Falls es beschnitten werden soll, Bild nicht unnötig verkleinern
• Bild speichern und danach Bild verwenden

 

• Optional kann bei der "Sondervariante Bild Kopfzeile"
  Galeriebilder eingefügt werden, die automatisch durchwechseln.
• Element wählen
• oben: Reiter wechseln auf News-Rubriken
• Die "eigene" News Rubrik auswählen (Slider)
• rechts auf Link (nur News-Rubrik) klicken
• ganz oben auf "neuen Artikel erstellen" klicken
• Interne Überschrift vergeben und Datum bei "Artikel gültig vom ... bis zum ..." setzen. Wird kein Datum gesetzt ist der Artikel nur für 14 Tage gültig (Standardeinstellung)
• Klicken: "Speichern und weiter zum Artikelinhalt"
• Bild, Titel, Text (Untertitel) und Link eingeben (Außer dem Bild ist alles andere optional)
• Auf "Änderungen speichern" klicken und der Slider ist zeitgesteuert eingestellt
• Ggf. weitere Artikel einstellen

 

 

 

 

 

 

 

Layout-Boxen und Inhalte-Boxen

• Oben links "Inhalt ändern"
• auswählen
• Mit Layout-Boxen oben links die Seiteneinteilung wie gewünscht auswählen
• "einfügen klicken (nicht ziehen, klicken ist einfacher!!! Deshalb heißt die Firma die uns die Seite macht auch KLIK und nicht ZIEH)
• Alle Möglichkeiten wo die neue Layout Box platziert werden kann wird optisch gelb dargestellt
• Auf gewünschte Position klicken
• Wichtig: Die Seite ist im responsive Design programmiert, das heißt alle Inhalte passen sich an die Bildschirmbreite an. Deshalb muss zeilenweise gedacht werden. Sobald die Inhalte nicht mehr nebeneinander passen, schieben sie sich untereinander. Einfach mal im Firefox ausprobieren und das Bildschirmfenster im Browser zusammen schieben.
• Bei den Layout Boxen also nicht mehrere Inhalte-Boxen untereinander einfügen, sondern dazwischen immer wieder neue Zeilen einfügen.
• Die Layout Box "Neue Zeile (inkl. 1 Spalte (4))" kann und sollte über den jeweils oben angefügten Reiter "bearbeiten" (Stiftsymbol) bearbeitet werden. Die Hintergrundfarbe kann geändert werden oder ein Bild mit parallax Effekt eingefügt werden. Zusätzlich können Außen- und Innenabstände eingegeben werden.
• Tipp: Layout Boxen können über die systeminterne Zwischenablage auf eine andere Seite kopiert werden. Bei Layout-Box oben links Reiter mit Pfeil-Symbol "Layout-Element verschieben" klicken und oben zwischen den Layout-Boxen und Inhalte-Boxen einfügen wo in gelb steht: "Layout Box mit allen Inhalten in die Zwischenablage kopieren"

 

 

• Passende Inhalte-Box auswahlen
• "einfügen klicken (nicht ziehen, klicken ist einfacher!!!)
• Alle Möglichkeiten wo die neue Inhalte Box platziert werden kann wird optisch gelb dargestellt
• Auf gewünschte Position klicken
• Reiter "bearbeiten" überhalb der Box anklicken und Box befüllen
• Inhalte Box verschieben durch klicken des Reiters mit dem Pfeil-Symbol
• Alle Möglichkeiten wo die Inhalte Box verschoben werden kann wird optisch dargestellt
• Tipp: Bei "Platzhalter für Ablageflächen immer einblenden" haken setzen (befindet sich oben unterhalb der Brotkrümelnavigation), dann springt nichts mehr herum und man kann die Boxen viel besser verschieben.
• Auf gewünschte Position klicken

 

 

 

 

 

 

 

Linkboxen benutzen

• Inhalte-Box "Link-Box" auswählen und wie ganz oben beschrieben platzieren
• Nützlich um auf Unterseiten verlinken zu können (Navigation)
• Feld Seite freilassen
• Felder Titel, Link, Bild auswählen und ggf. eine Beschreibung einfügen fertig
• Tipp: Formatvorlagen für Linkboxen beim Bildschnittprogramm benutzen (beim Schnittprogramm unter "Vorlagen" oben rechts eine auswählen)

 

 

 

 

Bilder einfügen:

• Inhalte-Box "Bild-Box" auswählen und wie ganz oben beschrieben platzieren
• Durch Bild: "ändern" vorhandenes Bild auswählen oder "Neues Bild laden"
• Wichtig: Bilder müssen nicht mehr über das Bildschnittprogramm kleiner gerechnet werden, passiert automatisch!!!
• Bild ggf. über das integrierte Schnittprogramm verändern
• Tipp: Formatvorlagen beim Bildschnittprogramm benutzen (beim Schnittprogramm unter "Vorlagen" oben rechts eine auswählen)
• Bildtitel: eingeben, ggf. Haken setzten, falls keine Bildunterschrift gewünscht ist.
• Ansicht: Breite
• "Standart 100%" --> Layout Box wird mit Bild ganz gefüllt
• "maximale Breite" --> Maximale Breite kann in Pixel oder Prozent eingegeben werden. Wenn haken "umfließen" gesetzt ist läuft das Bild links oder rechts um den Text, falls danach eine Inhalte-Box mit Text (Editor-Feld) kommt.
• Aktion:
• "Nur anzeigen" --> Bild wird kleingerechnet angezeigt
• "große Ansicht anzeigen" --> Durch Klick auf das Bild vergrößert es sich und geht in einem neuen Fenster auf, es kann ein alteratives Bild angegeben werden.
• "verlinken" --> Bild kann intern oder extern verlinkt werden

 

 

 

 

 

Bildergalerie einfügen:

• Inhalte-Box "Diashow" auswählen und wie ganz oben beschrieben platzieren
• Überschrift vergeben
• Bilder übernehmen
• fertig

 

 

 

 

 

 

Inhlate-box "Editor Feld"

Links intern oder extern einfügen - E-Mail Adressen verlinken - Dateien hochladen (PDF, MP3 etc.:

• In einer Inhalte Box "Editor Feld" Text eingeben
• Wort das verlinkt werden soll markieren
• Linkbutton klicken (untere Reihe 2 Button von rechts)
• externer Link: Adresse im Format: "http://www.beispiel.de" eingeben
• Wichtig: Im Feld unter "Ziel" "Neues Fenster" auswählen, damit bei Klick auf den Link ein neues Fenster aufgeht und nicht von unserer Seite weggelinkt wird.
• E-Mail Adresse: Adresse im Format: "mailto:beispiel@cvjmbaden.de" eingeben
• interne links: auf Button "durchsuchen" rechts neben URL-Adresse klicken
• oberer Reiter auswählen: Bildmanager, Dateimanager, Sitemap (voreingestellt), News-Rubriken, News-Artikel
• Bei Sitemap Unterseite auswählen --> ok klicken

Sprungmarken:

• Mauszeiger an die gewünschte Position bringen
• Unter „Einfügen – Textmarke“ an der Stelle ein Sprungziel angeben.
• Das Sprungziel muss auf dieser Seite dann eindeutig sein, darf also nicht zweimal vorkommen
• Es muss mit Buchstaben beginnen ohne Umlaute, Sonder-, oder Leerzeichen, z.B. "test123“
• Eine Sprungmarke kann auch in der Layoutbox "Neue Zeile" unter "ID" angegeben werden

• Die Sprungziel ID wird mit dem Symbol Hashtag # angesteuert.
• Innerhalb der Seite in einem Editor oder in einer Linkbox wird auf das Sprungziel mit dem Hashtag und der ID verlinkt, also: #test123
• Von einer anderen Seite wird mit dem internen Link auf das Sprungziel verlinkt: /website/de/interner_bereich#test123; Also einfach den Hashtag mit der ID an den internen Link anhängen: #test123

 

 

 

Kalender

Kalender einrichten

• Der Kalender kann unter der Adresse www.cvjm-beispielverein.de/eventcalendar (Beispielverein = Euer CVJM Name) aufgerufen werden.
• Über die Inhaltsbox "Terminkalender-Box" kann der Kalender auf der Startseite oder jeder Unterseite eingebunden werden. Beim Feld Kalender Euer CVJM auswählen. Ggf. kann man noch Rubriken ausgewählen, ansonsten erscheinen alle Termine.
• Rubriken erstellen, löschen oder Reihenfolge ändern: Oben links bei "neuer Termin erstellen" auf den Pfeil daneben gehen und "Kalender bearbeiten" auswählen. Rubriken können hier erstellt werden, das Feld ID wird in der URL im Browser dann angezeigt. Die ID muss eindeutig sein. Empfehlung: keine Leerzeichen, keine Sonderzeichen, nur Kleinschreibung.
• Kalenderrechte ändern: Oben links bei "neuer Termin erstellen" auf den Pfeil daneben gehen und "Kalenderrechte" auswählen. Hier können ggf. die Rechte angepasst werden.

Termine erstellen und verwalten

• Über den unteren Link in der Terminbox "Zur Terminansicht" oder über den Link www.cvjm-beispielverein.de/eventcalendar können im eingeloggten Zustand Termine verwaltet werden
• Oben links kann ein neuer Termin unter "neuer Termin erstellen" eingerichtet werden.
• Die zwei Felder mit rotem Stern sind Pflichtfelder
• Das Feld "Bild" hat keine Funktion
• Alternativ können zu einem Haupttermin Untertermine erstellt werden. Beim Termin neben "Termin bearbeiten" auf den Pfeil gehen und "Untertermine erstellen" auswählen. Die gelben Felder können ggf. Überschrieben werden, ansonsten werden die Werte vom Haupttermin übernommen. Vorteil: Bei Änderungen im Haupttermin werden alle Untertermine mit geändert und bei weiteren Terminen muss nur das Datum angepasst werden.
• Alternativ kann ein bestehender Termin kopiert werden. Beim Termin neben "Termin bearbeiten" auf den Pfeil gehen und "Termin kopieren" auswählen
• Die Funktion der Serientermine gibt es nicht, mit den Unterterminen können solche Termine aber auch recht fix angelegt werden.

Kalender abonnieren

• Der Link dafür heißt: https://www.cvjm-beispielverein.de/eventcalendar?type=ics
• Es können auch nur einzelne Rubriken abonniert werden am Beispiel vom Marienhof z.B.: https://www.cvjmbaden.de/eventcalendar?calendar=1&cat=marienhof&type=ics
• Am besten im Kalender die Rubrik auswählen, die URL im Browser kopieren und dahinter den Code &type=ics setzen.
• In Outlook abonnieren: Unter Kalender – Start – Kalender öffnen – Aus dem Internet… die URL https://www.cvjmbaden.de/eventcalendar?type=ics eintragen und der Kalender ist abonniert.
• In Apple abonnieren: Einstellungen – Passwörter & Accounts – Account hinzufügen – Andere – Kalenderabo hinzufügen die URL https://www.cvjmbaden.de/eventcalendar?type=ics eintragen und auf „Weiter“ klicken. Eventuell „Beschreibung“ anpassen und auf „Sichern“ klicken. In der Kalender APP unter den Einstellungen dann den abonnierten Kalender sichtbar machen.
• Bei Android ...

 

 

 

 

 

 

Formulare

Formular erstellen

• Um ein Formular anzulegen, muss erst eine neue Seite erstellt werden.
• Im Menü "neue Seite erstellen" bei "Typ" die Auswahl "Formular- oder Umfrageseite" auswählen und die Seite speichern.
• Tipp: Die Seite am besten als Unterseite der Seite erstellen, auf welcher das Formular angezeigt werden soll.
• Hinweis: Nach Erstellung der Seite oben auf "Änderungen übernehmen" und "Seite freigeben", drücken, so dass die Seite online (grün) geschaltet ist.
• Auf der Formularseite dem Weiterleitungslink zum bearbeiten folgen und das Formular wie unten beschrieben anlegen
• Danach auf der gewünschten Seite die Inhalte-Box "Formular anzeigen" einfügen. Beim Öffnen kann dann die Seite mit dem Formular ausgewählt werden.
• Alternativ kann auch ein bestehendes Formular mit der Erstellung einer "neuen Seite" über "Neue Seite als Kopie erstellen" kopiert werden. Dazu muss aber zwingend über "Quelle wählen" die zu kopierende Formularseite direkt ausgewählt werden. Das hat den Vorteil, dass man sich z.B. auch Formular Vorlagen erstellen kann und diese dann nur noch kopiert.

 

Formular / Umfrage ändern

In diesem Menü werden alle Einstellungen zum Formular vorgenommen.

• Element erstellen (1): Hier werden die einzelnen Felder des Formulars angelegt.
• Grunddaten ändern (2): Hier werden die Grunddaten des Formulars angelegt.
• Antworten (3): Hier können die Antworten bzw. Rückmeldungen, die über das Formular auf der Website verschickt wurden eingesehen werden. (Hier gibt es Möglichkeit, Rückmeldungen einzeln oder gesamt zu löschen und die Daten weiter zu verarbeiten)
• Auswertung (4): Hier wird eine Auswertung aller Rückmeldungen mit der Auflistung aller Felder und der dazugehörigen Einträge  angezeigt
• Excel-Export (5): Alle Rückmeldungen können als Excel-Datei herunter geladen werden.

 

1. Element erstellen

Es können verschiedene Formularfelder in Form von Elementen angelegt werden.

Die Begriffe in der Auswahl sind weitestgehend selbsterklärend.

Bei der Auswahl eines Feldes öffnen sich im unteren Menüteil weitere Felder zur Eingabe (siehe nächste Beschreibung).

Tipp: Mit "einfügen" kann man das Feld gleich am richtigen Platz einfügen.

 

In den unten eingeblendeten Feldern werden die Grunddaten für das jeweilige Formularfeld eingetragen. (Entsprechende Erklärungen dazu werden jeweils angezeigt.)

• Frage/Text: hier die Beschreibung der Felder eingeben (z.B. Name, Vorname, etc.)
• Antwortvorgaben: bei Auswahlfeldern werden hier die möglichen Antworten zur Auswahl eingetragen (bei mehreren Begriffen jeweils durch ein Semikolom (;) getrennt. (Das Feld muss nicht bei jedem Typ gefüllt werden.)
• Pflichtfeld: soll für ein Feld ein Eintrag erzwungen werden, dann hier ein Häkchen setzen
• Fehlermeldung: beim Absenden des Formulars wird bei einer fehlenden Eingabe zu dem Pflichtfeld dieser frei wählbare Text angezeigt
• Frage soll ausgewertet werden (für die Online Auswertung): sollen die Eingaben des Formulars in die Online-Auswertung mit einfließen, dann hier ein Häkchen setzen
• Frage soll exportiert werden (Export in einer Excel-Datei): Bei Freizeitanmeldungen, Umfragen, etc. ist es sinnvoll, die Daten anschließend gesammelt in einer Excel-Datei weiterverarbeiten zu können, sollen die Eingaben des Formulars in diese Excel-Datei mit einfließen, dann hier ein Häkchen setzen

Wenn ein Feld angelegt und abgespeichert wurde, ist es in der Übersicht aufgelistet. Hier können Felder nachträglich bearbeitet (Stift), gelöscht (Mülleimer) oder umsortiert (Pfeile) werden.

 

 

2. Grunddaten ändern

"Ersteller" ist, der das Formular angelegt hat. "Benutzer" ist, der das Formular später auf der Website ausfüllt.

• Interne Beschreibung: über diesen Eintrag wird das Formular später in der Auswahl ausgewählt.
• Text des Absende-Buttons: hier kann der Text für den Absende-Button frei gewählt werden.
• Erfolgsmeldung: nach dem Absenden eines Formulars kann an der Stelle eine Erfolgsmeldung angezeigt werden. Der Text kann wie im Editor-Feld formatiert werden.
• Absende-E-Mail-Adresse: hier eine E-Mail Adresse eintragen. Die versandten E-Mails (an Ersteller und Benutzer) haben diese Adresse als Absender.
• E-Mail an Ersteller der Umfrage senden: soll beim Absenden eines Formulars jemand informiert werden (sollte eigentlich immer so sein), dann hier ein Häkchen setzen (weitere Felder werden dann angezeigt).
• E-Mail-Adresse des Erstellers: hier die E-Mail Adresse von der Person eintragen, die über das Absenden eines Formulars informiert werden soll.
• Betreff der E-Mail: um die Mail besser aufzufinden, sollte hier ein Betreff für die E-Mail formuliert werden.
• Text für E-Mail: hier wird der Textteil der Mail an den Ersteller generiert. Es können über die "Platzhalter" die Daten aus dem Formular eingefügt werden.
• E-Mail-Antwort an den Benutzer senden: soll beim Absenden eines Formulars der Benutzer informiert werden (sollte eigentlich immer so sein), dann hier ein Häkchen setzen (weitere Felder werden dann angezeigt).
• Element mit der E-Mail-Adresse: hier normalerweise nichts einstellen (das Feld der E-Mailadresse wählt das Programm selbstständig, sofern eines angelegt wurde).
• Blindkopie an: hier kann noch eine weitere E-Mail adresse eingetragen werden. Sie bekommt dann als Blindkopie auch die Daten.
• Betreff der E-Mail: hier sollte ein ansprechender Betreff für die Mail an den Benutzer eingetragen werden.
• Text für E-Mail: hier wird der Textteil der Mail an den Benutzer generiert. Es können über die "Platzhalter" die Daten aus dem Formular eingefügt werden.
• Dateien an Mail anhängen: hier kann zu der Mail an den Benutzer eine Datei angehängt werden (dies kann z.B. eine Datenschutzerklärung sein)

Nach Eingabe der Daten mit "Grunddaten ändern" die Eingaben sichern und ins Hauptmenü zurückkehren.

 

 

3. Antworten

• Hier sind die Antworten aufgelistet, die von abgesendeten Formularen gesammelt wurden.
• Es können die Antworten einzeln eingesehen werden (Details anzeigen). Die Antworten können einzeln oder als Summe gelöscht werden.
• Über "Alle Antwort-Dateien Anzeigen" werden die Anworten in einer Liste dargestellt
  • Mit dem grünen Plus zeichen werden alle Daten einer Antwort angezeigt
  • Über "Spalten" können Spalten für den Excel-Export ein- oder ausgeblendet werden
  • Über "Excel-Export" können die Daten in Excel exportiert werden

 

4. Auswertung

Hier wird die Auswertung für das Formular angezeigt. Es kann z.B. ausgewertet werden, wie viele männliche oder weibliche Absender es gibt. Ob Daten aus dem Formular in die Auswertung fließen, wird für jedes Feld einzeln beim Anlegen mit angekreuzt.

 

 

5. Excel-Export

Mit dem Excel-Export können alle abgesendeten Formulardaten in einer Excel-Datei heruntergeladen und anschließend weiterverarbeiet werden.

Siehe auch die zweite Möglichkeit eines Excel-Exports mit einer Auswahlmöglichkeit der einzelnen Spalten beim dritten Menüpunkt "Antworten" dann auf "Alle Antwort-Dateien Anzeigen" klicken.