So erstellen Sie mit Divi . feste mobile Fußzeilen

Wir wissen, wie wichtig es ist, sicherzustellen, dass alles an das mobile Erlebnis angepasst ist. Um Ihnen dabei zu helfen, das mobile Erlebnis auf ein neues Niveau zu heben, zeigen wir Ihnen in diesem Schritt-für-Schritt-Beitrag, wie Sie mit Divi feste mobile Fußzeilen erstellen.

Dieses Tutorial ist Teil unserer laufenden Divi-Designinitiative, bei der wir versuchen, jede Woche etwas Besonderes in Ihre Design-Toolbox zu legen. Dieses Mal verwenden wir das Health Clinic Layout Pack und passen die festen mobilen Fußzeilen an den Stil des Layout Packs an. Sie können diesen Ansatz jedoch für jede Art von Design verwenden, an dem Sie arbeiten, und Ihre eigenen festen Alternativen für die mobile Fußzeile erstellen.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf die drei Beispiele, die wir Schritt für Schritt neu erstellen werden. Diese Beispiele werden nur auf Mobilgeräten (und Tablets, wenn Sie dies bevorzugen) angezeigt.

Beispiel 1 neu erstellen

Neuen Abschnitt am Ende der Seite hinzufügen

Beginnen wir damit, die erste feste mobile Fußzeilenleiste neu zu erstellen! Wir empfehlen, eine Seite für drei der Layouts zu erstellen, die im Health Clinic Layout Pack enthalten sind. Eine für jedes Beispiel. Öffnen Sie die Seite, zu der Sie die erste Fußzeilenleiste hinzufügen möchten. Scrollen Sie nach unten zum Ende der Seite und fügen Sie direkt nach dem letzten einen neuen Abschnitt hinzu.

Abstand

Öffnen Sie die Zeileneinstellungen und entfernen Sie alle benutzerdefinierten oberen und unteren Abstände in den Abstandseinstellungen.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Sichtweite

Wir verstecken diesen Abschnitt auch auf dem Desktop. Wenn die mobile Fußzeile nur auf Mobilgeräten angezeigt werden soll, blenden Sie den Abschnitt auch auf dem Tablet aus.

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie dem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und ändern Sie die Größeneinstellungen.

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja

Abstand

Entfernen Sie als nächstes alle standardmäßigen oberen und unteren Auffüllungen der Zeile.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Benutzerdefinierte CSS

Schließlich fügen wir der Zeile einige benutzerdefinierte CSS-Zeilen hinzu. Diese Zeilen helfen dabei, die Zeile in eine feste Fußzeile zu verwandeln.

display: flex;
position:fixed;
bottom: 0px;
z-index: 99;

Textmodul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Zeit, Module hinzuzufügen! Das erste Modul, das wir brauchen, ist ein Textmodul in Spalte 1. Fügen Sie einige Inhalte Ihrer Wahl hinzu.

Hintergrundfarbe

Gehen Sie zu den Hintergrundeinstellungen des Moduls und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: #5e89fb

Texteinstellungen

Ändern Sie auch die Texteinstellungen.

• Textschriftart: Work Sans
• Schriftstärke des Textes: Leicht
• Textfarbe: #ffffff
• Textgröße: 16px
• Text Buchstabenabstand: -1px

Abstand

Fügen Sie als nächstes einige benutzerdefinierte Abstandswerte hinzu.

• Obere Polsterung: 16px
• Untere Polsterung: 16px
• Linke Polsterung: 15px
• Rechte Polsterung: 15px

Grenze

Und auch einige abgerundete Ecken.

• Oben links: 10px
• Oben rechts: 10px

Box Schatten

Vervollständigen Sie die Einstellungen des Moduls, indem Sie einen subtilen Kastenschatten hinzufügen.

• Stärke der Box-Schattenunschärfe: 80px

Blurb-Modul zu Spalte 2 hinzufügen

Inhalt hinzufügen

Fügen Sie der zweiten Spalte ein Blurb-Modul hinzu und fügen Sie einen Titel Ihrer Wahl hinzu.

Symbol auswählen

Fahren Sie fort, indem Sie ein Symbol für das Blurb-Modul auswählen.

Hintergrundfarbe

Fügen Sie dem Modul auch eine Hintergrundfarbe hinzu.

• Hintergrundfarbe: #62de9d

Symboleinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Symboleinstellungen.

• Symbolfarbe: #ffffff
• Symbolplatzierung: Links
• Symbolschriftgröße verwenden: Ja
• Symbolschriftgröße: 19px

Einstellungen für Titeltext

Fahren Sie fort, indem Sie die Einstellungen für den Titeltext ändern.

• Titelschriftart: Work Sans
• Titeltextfarbe: #ffffff
• Titeltextgröße: 16px
• Abstand der Titelbuchstaben: -1px

Abstand

Fügen Sie dem Modul auch benutzerdefinierte Polster hinzu.

• Obere Polsterung: 20px
• Untere Polsterung: 10px
• Linke Polsterung: 30px
• Rechte Polsterung: 30px

Grenze

Und fügen Sie '10px' in die obere linke und obere rechte Ecke ein.

• Oben links: 10px
• Oben rechts: 10px

Box Schatten

Zu guter Letzt fügen Sie dem Modul einen subtilen Kastenschatten hinzu.

• Stärke der Box-Schattenunschärfe: 80px

Beispiel 2 neu erstellen

Neuen Abschnitt am Ende der Seite hinzufügen

Auf zum zweiten Beispiel! Öffnen Sie erneut eine Seite Ihrer Wahl, scrollen Sie bis zum Ende der Seite und fügen Sie einen neuen Abschnitt hinzu.

Abstand

Öffnen Sie die Abschnittseinstellungen und entfernen Sie die standardmäßige obere und untere Auffüllung.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Sichtweite

Blenden Sie den Abschnitt auf dem Desktop aus (und auf dem Tablet, wenn Sie dies bevorzugen).

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie dem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Größe

Öffnen Sie die Zeileneinstellungen und ändern Sie die Größeneinstellungen, ohne Module hinzuzufügen.

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Abstand

Entfernen Sie auch die standardmäßige obere und untere Auffüllung der Zeile.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Benutzerdefinierte CSS

Fügen Sie der nächsten Zeile einige benutzerdefinierte CSS-Zeilen hinzu. Diese CSS-Codezeilen helfen beim Erstellen der festen mobilen Fußzeilenleiste.

display: flex;
position:fixed;
bottom: 0px;
z-index: 99;

Blurb-Modul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Fahren Sie fort, indem Sie der ersten Spalte ein Blurb-Modul hinzufügen. Fügen Sie einen Titel Ihrer Wahl hinzu.

Symbol auswählen

Wählen Sie dann ein Symbol aus.

Hintergrundfarbe

Fügen Sie dem Modul als nächstes eine Hintergrundfarbe hinzu.

• Hintergrundfarbe: #62de9d

Symboleinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Symboleinstellungen des Moduls.

• Symbolfarbe: #ffffff
• Symbolplatzierung: Oben
• Symbolschriftgröße verwenden: Ja
• Symbolschriftgröße: 25px

Einstellungen für Titeltext

Ändern Sie auch die Einstellungen für den Titeltext.

• Titelschriftart: Work Sans
• Ausrichtung des Titeltextes: Mitte
• Titeltextfarbe: #ffffff
• Abstand der Titelbuchstaben: -1px

Abstand

Fügen Sie oben und unten etwas Polsterung hinzu, um dem Modul etwas Platz zum Atmen zu geben.

• Obere Polsterung: 30px
• Untere Polsterung: 30px

Grenze

Außerdem fügen wir '15px' am oberen linken Rand des Moduls hinzu.

• Oben links: 15 Pixel

Box Schatten

Und wir vervollständigen das Modul mit einem subtilen Box-Schatten.

• Stärke der Box-Schattenunschärfe: 80px

Blurb-Modul zweimal klonen und Duplikate in verbleibende Spalten platzieren

Nachdem Sie das erste Blurb-Modul geändert haben, können Sie das Modul zweimal klonen und die Duplikate in die beiden verbleibenden Spalten einfügen.

Hintergrundfarbe von Duplikat Nr. 1 ändern

Ändern Sie die Hintergrundfarbe des ersten Duplikats.

• Hintergrundfarbe: #3d3d3d

Ändern Sie die Abstandseinstellungen von Duplikat Nr. 1

Zusammen mit den Abstandseinstellungen.

• Oberer Rand: -20px
• Obere Polsterung: 50px
• Untere Polsterung: 30px

Rahmen von Duplikat Nr. 1 ändern

Und auch die abgerundeten Ecken.

Ändern Sie die Hintergrundfarbe von Duplikat #2

Ändern Sie auch die Hintergrundfarbe des zweiten Duplikats in der dritten Spalte.

• Hintergrundfarbe: #000000

Ändern Sie die Grenze des Duplikats #2

Zusammen mit den abgerundeten Ecken.

• Oben rechts: 15px

Beispiel 3 neu erstellen

Neuen Abschnitt am Ende der Seite hinzufügen

Auf zum nächsten und letzten Beispiel! Öffnen Sie eine der Seiten, scrollen Sie die Seite nach unten und fügen Sie einen neuen Abschnitt hinzu.

Oberteiler

Öffnen Sie die Abschnittseinstellungen und fügen Sie eine obere Trennlinie hinzu.

• Teilerfarbe: #62de9d
• Teilerhöhe: 110px

Abstand

Entfernen Sie auch alle standardmäßigen oberen und unteren Polster des Abschnitts.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Box Schatten

Fügen Sie dem nächsten Abschnitt einen subtilen Kastenschatten hinzu.

• Stärke der Box-Schattenunschärfe: 80px

Benutzerdefinierte CSS

Und fügen Sie einige benutzerdefinierte CSS-Zeilen in die Registerkarte "Erweitert" ein. Dies wird dazu beitragen, den Abschnitt in eine feste mobile Fußzeilenleiste zu verwandeln.

position:fixed;
bottom:0px;
width: 100%;
z-index: 99;

Sichtweite

Deaktivieren Sie schließlich den Abschnitt auf dem Desktop (und dem Tablet, wenn Sie dies bevorzugen).

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie dem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und ändern Sie die Größeneinstellungen.

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Abstand

Fügen Sie als nächstes eine benutzerdefinierte obere und untere Polsterung hinzu.

• Obere Polsterung: 30px
• Untere Polsterung: 20px

Benutzerdefinierte CSS

Um sicherzustellen, dass alle drei Spalten auf der gleichen Höhe bleiben, fügen wir dem erweiterten Tab der Zeile ebenfalls eine Zeile CSS-Code hinzu.

display: flex;

Blurb-Modul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Jetzt können wir mit dem Hinzufügen von Modulen beginnen! Fügen Sie der ersten Spalte ein Blurb-Modul hinzu und geben Sie ihm einen Titel.

Symbol auswählen

Wählen Sie als nächstes ein Symbol aus.

Symboleinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Symboleinstellungen.

• Symbolfarbe: #ffffff
• Symbolplatzierung: Oben
• Symbolschriftgröße verwenden: Ja
• Symbolschriftgröße: 25px

Einstellungen für Titeltext

Ändern Sie auch die Einstellungen für den Titeltext.

• Titelschriftart: Work Sans
• Ausrichtung des Titeltexts: Mitte
• Abstand der Titelbuchstaben: -1px

Blurb-Modul zweimal klonen und platzieren

Sobald Sie das Blurb-Modul in Spalte 1 geändert haben, können Sie das Modul zweimal klonen. Platzieren Sie die Duplikate in den beiden verbleibenden Spalten.

Symbolfarbe von Duplikat Nr. 1 ändern

Vergessen Sie nicht, die Symbolfarbe des Duplikats in der zweiten Spalte zu ändern.

• Symbolfarbe: #000000

Vorschau

Nachdem wir nun all die verschiedenen Schritte durchlaufen haben, werfen wir einen letzten Blick auf das Ergebnis aller drei oben behandelten Beispiele.

Abschließende Gedanken

In diesem Beitrag haben wir drei verschiedene feste mobile Fußzeilen-Designs behandelt, die Sie Schritt für Schritt neu erstellen können, indem Sie dem Tutorial folgen. Die mobilen Fußzeilen folgen den Besuchern während ihres gesamten Scroll-Erlebnisses auf der Seite. Dieses Tutorial ist Teil der laufenden Divi-Designinitiative, bei der wir versuchen, jede Woche etwas mehr in Ihre Design-Toolbox zu bringen. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!