Der EDD Checkout Block ermöglicht es Ihnen, eine vollständig angepasste Checkout-Seite für Ihren Easy Digital Downloads-Shop zu erstellen. Dieser Block zeigt alle Checkout-Elemente an, einschließlich Formulare für Rechnungsdaten, Warenkorbzusammenfassung und Zahlungsoptionen, mit vollständiger Kontrolle über Styling und Layout.
Eine gut gestaltete Checkout-Seite ist der letzte Schritt, um Besucher zu Käufern zu machen. Mit diesem Block können Sie ein Checkout-Erlebnis schaffen, das Vertrauen aufbaut, Reibungsverluste reduziert und perfekt zu Ihrer Marke passt. Passen Sie Formularfelder, Schaltflächen, Warenkorbanzeigen und Zahlungsbereiche an, um einen nahtlosen Übergang vom Warenkorb zum abgeschlossenen Kauf zu schaffen.
Hinzufügen des EDD Checkout Blocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen EDD Checkout Block zu Ihrer SeedProd-Seite hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter Design > Blöcke > Easy Digital Downloads den Checkout-Block per Drag & Drop in den gewünschten Bereich Ihrer Seite.
Der EDD Checkout Block befindet sich unter Easy Digital Downloads und kann hinzugefügt werden, um eine benutzerdefinierte Checkout-Seite zu erstellen.
Schritt 2: Design anpassen
Nach dem Hinzufügen klicken Sie auf den EDD Checkout Block, um seine Einstellungen zu öffnen. Im Tab Stile können Sie jeden Aspekt des Erscheinungsbilds Ihrer Checkout-Seite anpassen.
Felder:
- Hintergrundfarbe der Felder: Legen Sie die Hintergrundfarbe für Formular-Eingabefelder wie Name, E-Mail und Adresse fest
- Textfarbe der Felder: Wählen Sie die Farbe für den Text, der in die Formularfelder eingegeben wird
- Rahmenfarbe der Felder: Legen Sie die Farbe für die Rahmen um die Eingabefelder fest
- Rahmenbreite der Felder: Passen Sie die Dicke der Feldrahmen an (Oben, Rechts, Unten, Links)
- Zeilenabstand: Steuern Sie den vertikalen Abstand zwischen den Zeilen der Formularfelder
- Abgerundete Ecken: Passen Sie die Rundung der Feldecken an. Höhere Werte erzeugen rundere Felder
Schaltflächen:
- Schaltflächenstil: Wählen Sie die visuelle Gestaltung für Checkout-Schaltflächen wie „Kauf abschließen“. Optionen sind Flat (modernes flaches Design), 2D (subtile Tiefe), Vintage (klassischer Look), Ghost (transparent mit Rahmen) oder Link (einfacher Textlink)
- Schaltflächenfarbe: Legen Sie die Hintergrundfarbe für die Kaufschaltfläche fest
- Abgerundete Ecken: Passen Sie die Rundung der Schaltflächenecken an
Warenkorb:
- Rahmenfarbe des Warenkorbs: Legen Sie die Farbe für die Rahmen um den Warenkorb-Zusammenfassungsbereich fest
- Rahmenbreite des Warenkorbs: Passen Sie die Dicke der Warenkorbrahmen an (Oben, Rechts, Unten, Links)
- Hintergrundfarbe: Legen Sie die Hintergrundfarbe für den Warenkorb-Zusammenfassungsbereich fest
- Typografie der Kopfzeile: Steuern Sie die Schriftarteigenschaften für Kopfzeilen des Warenkorbs wie „Bestellübersicht“
- Farbe der Kopfzeile: Legen Sie die Farbe für den Text der Warenkorbkopfzeile fest
- Schriftart für Artikel: Passen Sie die Schrifteigenschaften für Produktnamen im Warenkorb an
- Farbe für Warenkorbartikel: Wählen Sie die Farbe für den Text der Warenkorbartikel
- Schriftart für Links: Steuern Sie die Schrifteigenschaften für Warenkorb-Links
- Farbe für Warenkorb-Links: Legen Sie die Farbe für klickbare Links im Warenkorbbereich fest
Zahlungsbereich:
- Hintergrundfarbe: Legen Sie die Hintergrundfarbe für den Bereich der Zahlungsmethoden fest
- Farbe der Zahlungsrahmen: Wählen Sie die Farbe für Rahmen um Zahlungsoptionen
- Breite des Zahlungsrahmens: Passen Sie die Dicke der Rahmen im Zahlungsbereich an (Oben, Rechts, Unten, Links)
- Radius des Zahlungsrahmens: Steuern Sie die Rundung der Ecken des Zahlungsbereichs
- Farbe der Beschriftung: Legen Sie die Farbe für Beschriftungen von Zahlungsfeldern fest
- Schriftart der Beschriftung: Passen Sie die Schrifteigenschaften für Zahlungsbeschriftungen an
- Farbe des Titels: Wählen Sie die Farbe für Titel von Zahlungsmethoden (wie „Kreditkarte“ oder „PayPal“)
- Schriftart des Titels: Steuern Sie die Schrifteigenschaften für Zahlungstitel
- Farbe der Beschreibung: Legen Sie die Farbe für Beschreibungen von Zahlungsmethoden fest
- Schriftart der Beschreibung: Passen Sie die Schrifteigenschaften für Zahlungsbeschreibungen an
- Farbe des Gesamtbetrags: Wählen Sie die Farbe für die Anzeige des Bestellgesamtbetrags
- Schriftart des Gesamtbetrags: Steuern Sie die Schrifteigenschaften für den Gesamtbetrag
Der Tab „Stile“ bietet umfassende Anpassungsoptionen für Formularfelder, Schaltflächen, Warenkorbanzeige und Zahlungsbereiche.
Schritt 2a: Wählen Sie einen Vorlagenstil
Im Tab Vorlagen können Sie aus vordefinierten Feldstilen auswählen, um das Erscheinungsbild Ihres Checkout-Formulars schnell zu ändern.
- Helles Eingabefeld, Eingabefeld ohne Rahmen, Eingabefeld mit breitem Rahmen, Graues Eingabefeld, Dunkles Eingabefeld, Feld mit unterem Rahmen, Transparentes Eingabefeld: Wählen Sie aus sieben verschiedenen Designvorlagen für Ihre Formularfelder, jede mit einzigartigen Styling-Ansätzen. Sehen Sie sich jede Vorlage in der Vorschau an, um diejenige zu finden, die am besten zu Ihrem Seitendesign passt.
Der Tab „Vorlagen“ bietet sieben vordefinierte Feldstile, um das Erscheinungsbild Ihres Checkout-Formulars schnell anzupassen.
Schritt 3: Erweiterte Optionen konfigurieren
Im Tab Erweitert können Sie Ihren EDD Checkout-Block weiter anpassen:
Abstand:
- Abstand (Außen): Steuern Sie den äußeren Abstand um Ihren Checkout-Block (Oben, Rechts, Unten, Links). Dies bestimmt, wie viel Platz zwischen dem Checkout-Formular und den umgebenden Elementen vorhanden ist
- Abstand (Innen): Passen Sie den inneren Abstand innerhalb Ihres Checkout-Blocks an (Oben, Rechts, Unten, Links). Dies schafft Freiraum zwischen dem Checkout-Inhalt und seinen Rändern
Attribute:
- CSS-ID: Zeigt die automatisch generierte eindeutige Kennung für Ihren Checkout-Block an. Diese ID wird automatisch von SeedProd für benutzerdefiniertes Styling oder zur gezielten JavaScript-Steuerung erstellt
- Benutzerdefinierte Klasse: Fügen Sie benutzerdefinierte CSS-Klassen hinzu, um bestimmte Stile aus Ihrem Theme oder benutzerdefinierten CSS anzuwenden.
- Benutzerdefinierte Attribute: Fügen Sie dem Wrapper-Element des Checkouts beliebige HTML-Attribute hinzu. Geben Sie jedes Attribut in eine neue Zeile im Format ein: attribut-name|wert (z. B. data-checkout|edd-checkout)
Gerätesichtbarkeit:
- Auf Desktop ausblenden: Blenden Sie den Checkout-Block auf Desktop-Bildschirmen aus
- Auf Tablet ausblenden: Blenden Sie den Checkout-Block auf Tablet-Geräten aus
- Auf Mobilgeräten ausblenden: Blenden Sie den Checkout-Block auf Mobilgeräten aus
Animationseffekte:
- Eingabeanimation: Wählen Sie aus verschiedenen Animationseffekten, die abgespielt werden, wenn das Checkout-Formular in die Ansicht gescrollt wird. Optionen sind Bounce, Fade In, Zoom In, Rotate In und viele mehr
Die Registerkarte „Erweitert“ bietet Optionen für Abstände, benutzerdefinierte Attribute, Geräte-Sichtbarkeit und Animationseffekte.
Schritt 4: Speichern Sie Ihre Änderungen
Wenn Sie mit der Konfiguration des EDD Checkout-Blocks fertig sind und dessen Erscheinungsbild angepasst haben, stellen Sie sicher, dass Sie Ihre Arbeit speichern.
Sie haben erfolgreich einen EDD Checkout-Block zu Ihrer Seite hinzugefügt! Diese umfassende Checkout-Lösung hilft Ihnen, ein professionelles, markenbezogenes Checkout-Erlebnis zu schaffen, das das Vertrauen der Kunden stärkt und den Kaufprozess optimiert. Experimentieren Sie mit verschiedenen Feldstilen, Farben und Layoutoptionen, um eine Checkout-Seite zu erstellen, die Besucher zu Käufern macht und Ihre Verkäufe digitaler Produkte maximiert.