So erstellen Sie ein ansprechendes Popup-Menü

Erstellen Sie ein ansprechendes Popup-Menü, das über eine Menüschaltfläche in Ihrem Site-Header gestartet wird.

Sie erfahren, wie Sie ein Popup-Menü erstellen, das:

• Es ist attraktiv, funktional und schön.
• Antworte auf dem Handy

Entwerfen Sie das Popup-Fenster und seinen Inhalt

1. Gehen Vorlagen> Popups> Neu hinzufügen und geben Sie Ihrem neuen Popup einen Namen. (Eine alternative Methode ist das Drücken CMD + E. oder STRG + E. öffnen Entdecker, nach Popup suchen, wählen Neues Popup hinzufügenund gib ihm einen Namen.)
2. Wählen Sie eine vordefinierte Popup-Vorlage oder schließen Sie die Bibliotheksüberlagerung und gestalten Sie Ihr Popup von Grund auf neu. Für dieses Beispiel werden wir unsere eigenen entwerfen, aber Sie finden diese Vorlage auch in Ihrer Elementor Pro-Popup-Vorlagenbibliothek. Suchen Sie einfach in der Popup-Bibliothek nach "Menü", um es zu finden.

Popup-Fenster> Registerkarte Design

1. Breite: Auf 85vw einstellen
2. Startseite: Ausblenden
3. Eingangsanimation: Zusammenführen
4. Animationsdauer: 2 Sekunden

Popup-Fenster> Registerkarte Stil

Entstehen

Schatten der Kiste: Stellen Sie sie ein, wie Sie möchten.

Schaltfläche Schließen

1. Vertikale Position: 4
2. Farbe: Stellt die Farbe auf # 878787 ein
3. Größe: 35

Popup> Registerkarte Erweitert

Vermeiden Sie überlappende Verschlüsse: Ja

Fügen Sie nun einen Abschnitt mit zwei Spalten hinzu.

Entwerfen Sie die erste Spalte

Abschnitt> Design

1. Ancho del Inhalt: Gesamtbreite
2. Spaltenabstand: Kein Platz

Ziehen Sie ein Widget für den Innenbereich in die erste Spalte.

Unten Abschnitt > Design > Spaltenabstand, installieren Kein Platz.

Unten Abschnitt > Fortgeschrittene, installieren Ausgestopft 70 px herum.

Abschnitt> Erweitert

Ausgestopft: 70 hoch, runter, links und rechts.

Ziehen Sie ein Header-Widget in die erste Spalte.

Unten Stil > TypografieStellen Sie die Größe auf 60 und darunter ein Gewicht auf 100 eingestellt.

Trinkgeld: Jetzt ist ein guter Zeitpunkt, um die Titel anzupassen Mobiles Setup.

Erstellen Sie den Rest der Menüpunkte

1. Klicken Sie mit der rechten Maustaste auf das Titel-Widget-Steuerelement und wählen Sie Duplizieren.
2. Wiederholen Sie die Duplizierung für alle benötigten Menüelemente.
3. Bearbeiten Sie den Titeltext für jedes Header-Widget, um jeden Menüpunkt korrekt zu kennzeichnen

Fügen Sie dem Menü eine Schaltfläche hinzu

Ziehen Sie ein Schaltflächen-Widget unter die Menüelemente und passen Sie es Ihren Wünschen an.

Klicken Sie auf der Registerkarte Erweitert> Rand oben auf 70, und klicken Sie dann auf das Symbol für das reaktionsfähige Ansichtsfenster, klicken Sie auf das Symbol Mobil und setzen Sie den Rand des Mobiltelefons oben auf 40.

Ziehen Sie einen anderen Innenteil Widget zur ersten Spalte unter der Schaltfläche.

1. Unten Abschnitt > Design > Breite, installieren Gesamtbreite.
2. Unten Abschnitt > Layout> Spaltenabstand, einstellen Kein Platz.
3. Stellen Sie unter Abschnitt> Erweitert> Füllen 30 für Oben, 70 für Rechts, 50 für Unten und 70 für Links ein.
4. Klicken Sie nun mit der rechten Maustaste auf ein Spaltenhandle und wählen Sie Beseitigen, abschütteln um eine der Spalten zu entfernen und nur eine übrig zu lassen.

Fügen Sie dem Menü Freigabeschaltflächen hinzu

Ziehen Sie ein Widget für Freigabeschaltflächen (Pro) in die Spalte.

Teilen-Schaltflächen> Inhalt

1. Edite los elementos de la Soziales Netzwerk gemäß Sein necesario.
2. Haut: Minimum
3. Ausrichtung: Links

Teilen-Schaltflächen> Stil

1. Knopfgröße: 1
2. Farbe: Benutzerdefinierte Farbe und wählen Sie Schwarz (# 000000)

Entwerfen Sie die zweite Spalte

Klicken Sie mit der rechten Maustaste auf die Spaltenkennung um die Spalteneinstellungen zu bearbeiten.

Spalte> Stil

Hintergrund

1. Hintergrundfarbe: Auf # 000000 (schwarz) einstellen
2. Zweite Farbe: Auf # 000000 (schwarz) einstellen

Hinweis: Obwohl die neue Hintergrundfarbe festgelegt wurde, wird sie noch nicht angezeigt, da die Spalte noch keinen Inhalt enthält.

Newsletter erstellen Abonnieren Sie das Call-to-Action-Formular

Ziehen Sie ein Widget für den Innenbereich in diese Spalte.

Klicken Sie mit der rechten Maustaste auf ein Spaltenhandle und wählen Sie Beseitigen, abschütteln um eine der Spalten zu entfernen und nur eine übrig zu lassen.

Innenbereich> Erweitert

1. Spanne: Nur für den unteren Bereich auf 130 einstellen
2. Ausgestopft: Stellen Sie 70 für Up, 60 für Right, 70 für Down und 60 für Left ein

Ziehen Sie ein Header-Widget in die Spalte

Passen Sie den Titeltext (d. H. Abonnieren Sie unseren Newsletter) sowie Größe, Farbe usw. an. des Textes nach Bedarf.

Ziehen Sie a Formen Widget (Pro) unter der Kopfzeile

Formular> Inhalt

Formularfelder

1. Klicken Sie auf das X ganz rechts in den Feldern Name und Nachricht, da wir für dieses Beispiel nur die E-Mail benötigen.
2. Einlassgröße: Mittel, mittel
3. E-Mail> Inhalt > Spaltenbreite: 80%

Senden-Schaltfläche

1. Größe: Mittel, mittel
2. Spaltenbreite: 20%
3. Ausrichtung: Richtig
4. Symbol: Langer Pfeil rechts

Form> Stil

Formen

1. Spaltenabstand: 0
2. Zeilenabstand: 0

Feld

1. Textfarbe: Weiß
2. Hintergrundfarbe: Transparent
3. Randfarbe: Weiß
4. Rahmenbreite: 1 nur für den Boden
5. Typografie> Größe: 10

Taste

1. Hintergrundfarbe: Transparent
2. Textfarbe: Weiß
3. Rand: Solide
4. Rahmenbreite: 1 nur für den Boden
5. Randfarbe: Weiß

Erstellen Sie die Produktanzeige

Ziehen Sie ein anderes Widget aus dem inneren Bereich in diese Spalte unter dem Formular.

Innenbereich> Erweitert

1. Ausgestopft: Nur für rechts auf 30 setzen

Empfindlich

1. Auf dem Handy verstecken: Ausblenden

Innenbereich> Design

1. Spaltenabstand: Kein Platz

Klicken Sie mit der rechten Maustaste auf ein Spaltenhandle und wählen Sie Beseitigen, abschütteln um eine der Spalten zu entfernen und nur eine übrig zu lassen.

Spalte bearbeiten

Spalte> Erweitert

1. Spanne: Setze -60 (minus 60) nur für die linke Seite

Klicken Sie mit der rechten Maustaste auf das Steuerelement des Header-Widgets Kopieren Sie den Titel des Newsletter-Titels und fügen Sie ihn in diese Spalte ein

Titel> Stil

1. Textfarbe: Schwarz (# 000000)
2. Gewicht: 700

Titel> Erweitert

1. Spanne: Nur für links auf 20 setzen

Spalte> Stil

Hintergrund

Farbe: Weiß (#ffffff)

Rand

1. Kantenradius: 5 für alle Seiten

Kastenschatten (normal)

1. Farbe: rgba (0,0,0,0,21)
2. Box Shadow> Horizontal: 0
3. Box Shadow> Vertikal: 10
4. Box Shadow> Unschärfe: 30
5. Box Shadow> Erweiterung: -10 (negativ 10)
6. Position: Gliederung

Kastenschatten (float)

1. Farbe: rgba (0,0,0,0,21)
2. Box Shadow> Horizontal: 0
3. Box Shadow> Vertikal: 15
4. Box Shadow> Unschärfe: 40
5. Box Shadow> Erweiterung: -10 (negativ 10)
6. Position: Gliederung

Ziehen Sie a Bild Widget unter der Kopfzeile

Bild

Wähle noch kein Bild aus

1. Bildgröße: Voll
2. Ausrichtung: Links

Klicken Sie nun mit der rechten Maustaste auf das Titel-Widget-Steuerelement , duplizieren Sie es und passen Sie den Stil des doppelten Widgets an.

Titel> Stil

1. Größe: 15
2. Gewicht: 300

Ändern Sie nun den Wortlaut jedes einzelnen.

Klicken Sie mit der rechten Maustaste auf die Spaltenkennung und duplizieren Sie es zweimal, um insgesamt 3 Spalten zu haben.

1. Bearbeiten Sie die Spalte der mittleren und letzten Spalte und ändern Sie die Ränder im Spalte> Erweitert bis -40 für den linken Rand in der mittleren Spalte und -20 für den linken Rand in der letzten Spalte.
2. Bearbeiten Sie für jede Spalte das Bild-Widget und wählen Sie ein Bild aus. Sogar .gif-Bilder funktionieren hier einwandfrei.
3. Passen Sie Ihren Text und Ihre Ränder nach Bedarf an.

Fit fürs Handy

Bearbeiten Sie jeden der internen Abschnitte in der linken Spalte

Innenbereich> Erweitert

1. Ausgestopft: 25 für alle Seiten

Klicke auf das Zahnrad / Zahnradsymbol befindet sich unten links im Bedienfeld, um zum Popup-Fenster Einstellungen zurückzukehren.

Popup-Einstellungen> Layout

1. Breite: 100vw

Formen

Stellen Sie die Breite des E-Mail-Felds und der Schaltfläche Senden auf 80% bzw. 20% ein.

Legen Sie die Veröffentlichungsoptionen fest

Klicke auf das Zu posten Taste. Sie existieren nicht Bedingungen, Löst ausoder Erweiterte Regeln Klicken Sie für dieses Popup-Fenster auf Speichern und schließen Taste.

Bearbeiten Sie die von Elementor erstellte Header-Vorlage Ihrer Site

Gehen Plantillas> Creador de temas> Überschriften > Wählen Sie Ihre Kopfzeile aus und klicken Sie auf Mit Elementor bearbeiten

Klicken Sie in Ihrer Menüschaltfläche auf das Widget-Steuerelement um das Widget zu bearbeiten, falls vorhanden, oder ein neues zu erstellen.

Taste

1. Verknüpfung: Klicke auf das Dynamisch Symbol und wählen Sie Aktionen> Popup-Fenster
2. Klicken Sie erneut auf Entstehen und wählen Sie in Aktion Popup umschalten
3. Suchen Sie im Popup-Feld das soeben erstellte Popup und wählen Sie es aus.

Klicke auf das Aktualisieren Schaltfläche zum Speichern von Änderungen an der Header-Vorlage

Alles bereit. Gehen Sie zu Ihrer Live-Site und klicken Sie auf Menütaste in Ihrer Kopfzeile und sehen Sie Ihr neues Popup-Menü in Aktion.

Cousin: Agregue efectos de animación de entrada en cualquiera de sus Widgets para agregar efectos geniales. Simplemente edite un widget, vaya a su pestaña Avanzado, elija una de las animaciones de entrada que se enumeran allí.