Eine Zeile ist das grundlegende Element, um Inhalte auf Ihrer Website horizontal zu strukturieren. Sie dient als Container für Spalten und Module. Mit dem ChurchDesk Editor können Sie Zeilen flexibel gestalten, Hintergründe hinzufügen und das Layout anpassen, um Ihre Inhalte optimal zu präsentieren. Dieser Artikel zeigt Ihnen, wie Sie eine Zeile bearbeiten und welche Design- und Einstellungsoptionen Ihnen zur Verfügung stehen.

Was ist eine Zeile? Eine Zeile ist ein horizontaler Abschnitt auf Ihrer Seite. Innerhalb einer Zeile können Sie bis zu 12 Spalten haben, um Ihren Inhalt zu organisieren. Sie können der Zeile jederzeit weitere Inhalte hinzufügen oder bestehende Inhalte neu anordnen oder löschen. Lesen Sie mehr über Zeilen, Spalten und Module in diesem Artikel.

Auf dieser Seite:

• Wie kann ich eine Zeile bearbeiten?
• Lokales Design
• Einstellungen

Wie kann ich eine Zeile bearbeiten?

Wenn Sie im Editor arbeiten, klicken Sie auf die Zeile, die Sie ändern möchten. Es erscheint ein Schnellmenü mit den am häufigsten verwendeten Werkzeugen: Bearbeiten, Duplizieren, Mehr und Löschen:

1. Klicken Sie auf Mehr, um weitere Optionen aufzurufen.
2. Klicken Sie auf den Stift, um das Menü für die nachfolgenden Zeileneinstellungen aufzurufen

Lokales Design

1. Hintergrund

Ein Zeilenhintergrund kann einfarbig, ein Bild oder sogar ein Video sein:

• Hintergrundfarbe: Fügen Sie eine einzelne Farbe als Zeilenhintergrund hinzu. Sie können den Grad der Transparenz einstellen, wenn Sie möchten.
• Hintergrundbild: Fügen Sie ein Bild als Zeilenhintergrund hinzu. Sie können wählen, ob Sie Ihr Titelbild aus Global Data verwenden oder ein neues Bild direkt in die Zeile hochladen möchten. Sie können einstellen, wie das Bild innerhalb der Zeile wiederholt werden soll, seine Größe und Positionierung, um sicherzustellen, dass Sie das Bild für Ihre Besucher optimal darstellen können.

Neben den Standardeinstellungen für das Bild können Sie auch festlegen, wie sich das Hintergrundbild innerhalb der Zeile verhalten soll, wenn ein Besucher auf der Seite nach unten scrollt:

• Feste Position: Das Bild bleibt beim Scrollen an seiner Position, während der Inhalt darüber hinweggleitet.
• Parallaxes Scrollen: Das Bild bewegt sich beim Scrollen langsamer als der Vordergrund, was einen Tiefen-Effekt erzeugt.

2. Video-Hintergrund

Aktivieren Sie den Videohintergrund und fügen Sie Ihre Video-URL in das Feld ein. Das Video wird automatisch abgespielt, wenn ein Besucher die Seite öffnet, auf der sich die Zeile befindet.

3. Hintergrundfilter

Fügen Sie einen Hintergrundfilter über die Hintergrundfarbe, das Bild oder das Video Ihrer Zeile hinzu, um sehr bunte Bilder oder Bilder mit starken Kontrasten abzuschwächen. Dies ist auch eine gute Möglichkeit, um sicherzustellen, dass der Text in der Zeile für die Besucher leicht zu lesen ist. Denken Sie daran, dass Sie auch den Grad der Transparenz Ihres Hintergrundfilters einstellen können.

Beispiel für einen Hintergrundfilter, der über einem Bild verwendet wird:

4. Rahmen und Abstände

• Schatten: Fügen Sie einen Schatten für mehr Tiefe hinzu.
• Rahmen: Fügen Sie der Zeile einen Rahmen hinzu und passen Sie den Stil, die Farbe, die Dicke und den Radius des Rahmens an. Passen Sie den Rand (Platz außerhalb der Zeile) und die Auffüllung (Platz zwischen dem Zeileninhalt und dem Rahmen der Zeile) an.
• Abstand: Mit den Optionen Außenabstand und Innenabstand schaffen Sie Platz um und in Ihren Elementen. Eine gezielte Abstandsgestaltung sorgt für eine klare, aufgeräumte Struktur und eine bessere Lesbarkeit.
• Container: Ein Container ist ein Bereich innerhalb der Zeile, der an allen Seiten aufgefüllt ist. Der gesamte Zeileninhalt wird innerhalb dieses "Rahmens" gebunden. Mit einem Container können Sie sicher sein, dass Ihr Inhalt nicht die gesamte Breite des Ansichtsfensters überspannt, was sonst das Lesen oder die Übersicht für Besucher erschweren könnte. Zeilen im Editor sind standardmäßig mit einem Container versehen. Sie können ihn auf die gesamte Breite der Zeile ausdehnen, indem Sie die Einstellung Container über die gesamte Breite aktivieren. Außerdem können Sie den Radius des Rahmens und die Auffüllung des Containers festlegen.
• Animation: Aktivieren Sie Animationen, die ausgelöst werden, sobald der Besucher die Zeile oder das Element in seinem Browser sieht. Animationen machen Ihre Website dynamischer und helfen, die Aufmerksamkeit auf wichtige Inhalte zu lenken.

Einstellungen

1. Stapeln von Spalten

Die Aktivierung von Stapeln von Spalten ermöglicht es, Spalten in einer einzigen Zeile so zu stapeln, dass sie übereinander liegen. Standardmäßig ist diese Einstellung automatisch in den Ansichtsfenstern für Tablets und Mobilgeräte aktiviert, da dies deren normales Zeilenverhalten ist.

Die Desktop-Spaltenstapelung ist nützlich, wenn Sie z. B. möchten, dass mehrere Module übereinander statt nebeneinander angezeigt werden, was das Standardverhalten im Rastersystem des Editors ist. Mit Stapeln von Spalten können Sie dies erreichen, ohne mehrere neue Zeilen nacheinander hinzufügen zu müssen. Diese Funktion können Sie außerdem auch direkt über die drei Punkte aktivieren.

2. Zeile hinter Kopfzeile platzieren

Mit dieser Funktion können Sie die oberste Zeile auf jeder Seite hinter Ihre Kopfzeile schieben und so einen Transparenzeffekt erzeugen, durch den sich Ihre Kopfzeile nahtlos in den Gesamtstil Ihrer Website einfügt.

Wenn Sie diese Funktion aktivieren, wird Ihr Hintergrundbild oder Ihre Farbe in der obersten Zeile einer Seite hinter der Kopfzeile sichtbar, wenn Sie Ihre Kopfzeile transparent gemacht haben. Wenn Ihre Kopfzeile eine einfarbige (nicht-transparente) Farbe hat, ist die Einstellung Platzieren hinter der Kopfzeile auf Ihrer Website nicht sichtbar. Sie können die Funktion nur für die oberste Zeile oder den Zeilenschieber einer Seite aktivieren.

3. Vollbildzeile

Die Zeilenhöhe wird an die Höhe des Browser-Fensters angepasst. Dies gilt nur für das Desktop-Ansichtsfenster. Diese Funktion können Sie außerdem auch direkt über die drei Punkte aktivieren.

4. Zeilenanker

Durch das Hinzufügen von Ankern können Besucher von der Hauptnavigation oder einer Schaltfläche zu einer bestimmten Zeile auf der gleichen Seite "springen". Mehr zum Thema finden Sie hier.

So richten Sie einen Anker ein:

1. Fahren Sie mit der Maus über die Zeile -> klicken Sie auf den Stift -> Einstellungen -> Zeilenanker
2. Aktivieren Sie den Anker -> Fügen Sie ein Anker-Label ein z.B. kontakt (Achtung: Bitte alles in Kleinbuchstaben und ohne Leerzeichen!)
3. Option 1 - Anker von der Navigation ausblenden: Der Anker nicht in der Hauptnavigation angezeigt.
4. Option 2 -  Anker auf derselben Ebene wie die Seite in der Navigation: Lasse den Anker in der Hauptnavigation separat erscheinen und nicht als Unterseite.
5. Speichern über den grünen Haken
6. Fügen Sie einen Button ein oder ein Textfeld
7. Öffnen Sie den Bearbeitungsmodus des jeweiligen Moduls
8. Fügen Sie eine Verlinkung ein -> wählen Sie "Externe URL" -> tragen Sie die gesamte Seiten-URL mit /#kontakt

Mehr Optionen

1. Auf dem Gerät anzeigen

Wählen Sie aus, in welchem der drei Ansichtsfenster die Zeile sichtbar sein soll, wenn Besucher Ihre Website besuchen. Mehr dazu finden Sie hier.

2. Flexible Zeile

Eine Zeile kann entweder fließend oder fest eingestellt werden. Wenn Sie im Dropdown-Menü der Zeile auf Fließende Zeile klicken, erscheint ein Häkchen vor der Zeile. Wenn Sie erneut darauf klicken, verschwindet das Häkchen, was bedeutet, dass die Zeile fest eingestellt ist. Es ist möglich, auf derselben Seite Zeilen mit unterschiedlichen Einstellungen zu haben.

Feste Zeile: Eine feste Zeile sorgt dafür, dass der Inhalt immer zentriert ist und eine feste Breite hat, auch wenn der Bildschirm breiter ist als der Inhalt.

Flexible Zeile: Eine fließende Zeile ermöglicht es dem Inhalt, sich über die gesamte Breite des Browsers zu erstrecken, unabhängig von der Größe des Bildschirms.

Beispiel für eine feste Zeile:

Beispiel für eine fließende Zeile:

3. Spalten ausgleichen

Mit dieser Option ist es möglich, die Breite der Spalten in einer Reihe anzugleichen. Um diese Option auszuwählen, gehen Sie im Schnellmenü auf Mehr und wählen Sie Spalten ausgleichen. Beachten Sie, dass der Editor ein 12-Spalten-Rastersystem verwendet. Damit die Spalten exakt die gleiche Größe haben, muss die Anzahl der Spalten gleichmäßig in 12 aufgeteilt werden - z. B. werden 2 Spalten zu je 6 Einheiten, 3 Spalten zu je 4 Einheiten usw. Beachten Sie, dass die Option equalize die Spaltengrößen für alle Ansichtsfenster zurücksetzt.

Für Zahlen, die nicht in 12 übergehen, siehe die Beispiele zur Spaltenaufteilung unten:

4. Animation hinzufügen

Fügen Sie eine Animation hinzu, die ausgelöst wird, sobald der Besucher die Zeile in seinem Browser sieht.

5. Slider hinzufügen (nur mit Studio AddOn)

Erzeugen Sie einen "Karussell"-Effekt, indem Sie mehrere Dias (Reihen) hinzufügen und es den Besuchern ermöglichen, zwischen ihnen auf der Website zu wechseln. Lesen Sie den entsprechenden Artikel über Row Sliders hier.

6. Kopieren/Einfügen

Wenn Sie eine Zeile an anderer Stelle auf Ihrer Website wiederverwenden möchten, können Sie sie entweder duplizieren oder kopieren.

Beim Duplizieren einer Zeile nehmen Sie eine Kopie der Zeile und fügen sie direkt unter der ursprünglichen Zeile ein. Klicken Sie dazu im Schnellmenü auf das Symbol Duplizieren.

Wenn Sie die Kopierfunktion verwenden, können Sie die Zeile überall auf unserer Website einfügen (auch auf anderen Seiten als der, an der Sie gerade arbeiten). Um eine Zeile zu kopieren und an einer anderen Stelle einzufügen, klicken Sie im Menü auf Mehr und wählen dann Kopieren.

Gehen Sie zu der Seite, auf der Sie die Zeile einfügen möchten, bewegen Sie den Mauszeiger auf die Zeile, unter der die neue Zeile erscheinen soll, und wählen Sie im Menü Mehr > Einfügen.

7. Löschen

Sie können eine Zeile löschen, indem Sie aus dem Schnell-Menü "Löschen" wählen. Denken Sie daran, dass Sie den Vorgang mit der Rollback-Funktion des Editors rückgängig machen können.

Schlagworte: Zeilen bearbeiten, Zeilen-Design, Webdesign, Website-Layout, Zeilen-Hintergrund, Video-Hintergrund, Parallax-Effekt, Zeilen-Einstellungen, Spalten stapeln, Zeilenanker, Vollbildzeile, Flexible Zeile, Feste Zeile, Spalten ausgleichen, Kopieren/Einfügen, ChurchDesk.

Aktualisiert am: 08/08/2025