So erstellen Sie modale Tailwind-CSS-Popups für Ihre Website

Es ist entscheidend, die Aufmerksamkeit der Kunden auf sich zu ziehen, um die Verkaufskonversionen zu steigern, und dies kann ganz einfach mit Popups erreicht werden!

Modale Tailwind-CSS-Popups werden aufgrund ihrer Funktionalität meistens bevorzugt. Um Ihre Verkaufskonversionen zu steigern und Ihrem Publikum Ankündigungen zu zeigen, können Sie diese Art von Popups verwenden.

Wie können Sie ein Popup- und ein modales Rückenwind-CSS zusammenbringen? Wir haben Tailwind CSS und modale Popup-Konzepte erklärt. Hier erfahren Sie auch, wie Sie Popups für Ihre Website erstellen!

Rückenwind-CSS

CSS bedeutet, wie HTML-Elemente auf dem Bildschirm einer Website angezeigt werden. Tailwind CSS ist ein anpassbares Framework, das es sehr praktisch und einfach auf Websites zu verwenden macht. Darüber hinaus handelt es sich um ein Utility-basiertes Framework, sodass Sie Schnittstellen mit anpassbaren Optionen erstellen können.

Tailwind CSS verfolgt einen anderen Ansatz als andere Frameworks. Es gibt Ihnen mehr Kontrolle über Ihre Website. Indem Sie eine Tailwind-CSS-Datei aus dem CDN in einem Link-Formular hinzufügen, können Sie sie einfach verwenden. Alles, was Sie tun müssen, ist, den Link zum Kopfteil der HTML-Seite hinzuzufügen. Außerdem ist es möglich, Ihrer Website anpassbare Codes hinzuzufügen.

Aufgrund dieser Eigenschaften eignet sich Tailwind CSS für die Erstellung von Websites in kurzer Zeit. Abgesehen davon geht es bei Tailwind nicht um bestimmte Designs und festgelegte Layouts. Auf diese Weise können Sie entscheiden, wie Ihre Website aussehen soll, indem Sie verschiedene Elemente zusammenbringen. Darüber hinaus bietet es den Vorteil, einzigartige Websites mit Anpassungsoptionen zu erstellen.

Sie können beispielsweise Größe, Schriftarten, Farben und Schatten von Elementen anpassen, die Sie Ihrer Website hinzufügen möchten. Tailwind CSS-Code kann so aussehen:

 <div class="space-y-5"> <div class="p-3 bg-white shadow rounded-lg"> <h3 class="text-xs border-b">font-sans</h3> <p class="font-sans"> The quick brown fox jumps over the lazy dog. </p> </div> <div class="p-3 bg-white shadow rounded-lg"> <h3 class="text-xs border-b">font-serif</h3> <p class="font-serif"> The quick brown fox jumps over the lazy dog. </p> </div> <div class="p-3 bg-white shadow rounded-lg"> <h3 class="text-xs border-b">font-mono</h3> <p class="font-mono"> The quick brown fox jumps over the lazy dog. </p> </div> </div>

Wenn Sie diesen Code hinzufügen, können Sie ihn mit verschiedenen Schriftarten anpassen. Und das Ergebnis wird so aussehen:

(Quelle)

Was ist modales Popup?

Modale Popups werden meistens für Newsletter-Anmeldungen und Anmeldeformulare bevorzugt. Zur Steuerung, Registrierung und Anmeldung von Formularen werden meistens modale Popups verwendet. Um Benachrichtigungen anzuzeigen, können diese Popups auch auf einer Website verwendet werden.

Mit modalen Popups ist es möglich, Tipps, Suchformulare, Videos und Bilder im Vollbildmodus sowie Kontaktformulare anzuzeigen.

Ein modales Popup auf einer Website zeigt die zuletzt aktualisierte Seite an, ohne erneut geladen zu werden. Sie müssen die Daten also nicht noch einmal eingeben. So können relevante Informationen ohne Zeitverlust eingesehen werden.

Eines der wichtigsten Merkmale von modalen Popups ist, dass sie geräuschlos sind. Daher sollten Trigger vorhanden sein, damit sie aktiviert werden können. Diese Auslöser können für bestimmte Aktionen festgelegt werden, um modale Popups zu aktivieren. Beispielsweise ist das Hervorheben von Newsletter-Popups und -Benachrichtigungen sehr nützlich.

Diese Arten von Popups können mit CSS, HTML und JavaScript erstellt werden. Wir konzentrieren uns auf CSS-Modal-Tailwind-Popups und ihre Erstellungsschritte.

Modales Tailwind-CSS-Popup

Wie wir bereits erklärt haben, ermöglicht die Verwendung anpassbarer Codes die Erstellung von Popups für Ihre Website. Entscheiden Sie sich also für Ihren Popup-Stil entsprechend der Persönlichkeit Ihrer Website und fangen Sie an, damit zu spielen!

Mit Tailwind ist es sehr einfach, eine CSS-Datei als Rohform zu nehmen und sie über eine Konfigurationsdatei zu verarbeiten. Die Ausgabe wird nach diesem Konfigurationsprozess erstellt und das Tailwind-CSS-Popup ist einsatzbereit.

Modal Tailwind CSS hat viele Vorteile, wie zum Beispiel:

• Mindestens Codezeilen in einer Datei haben
• Anpassbare Designs
• Responsive Websites erstellen
• Auch das nachträgliche Vornehmen von Änderungen ist einfach, da die Anpassungsoptionen einfach zu verwenden sind. Tailwind-Popup-Formulare sind bequem und sehr zugänglich!

Modaler Popup-Tailwind-CSS-Code kann wie folgt aussehen:

 <!-- Button trigger modal --> <button type="button" class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out" data-bs-toggle="modal" data-bs-target="#exampleModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog relative w-auto pointer-events-none"> <div class="modal-content border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current"> <div class="modal-header flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md"> <h5 class="text-xl font-medium leading-normal text-gray-800">Modal title</h5> <button type="button" class="btn-close box-content w-4 h-4 p-1 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body relative p-4"> Modal body text goes here. </div> <div class="modal-footer flex flex-shrink-0 flex-wrap items-center justify-end p-4 border-t border-gray-200 rounded-b-md"> <button type="button" class="px-6 py-2.5 bg-purple-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-purple-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-800 active:shadow-lg transition duration-150 ease-in-out" data-bs-dismiss="modal">Close</button> <button type="button" class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out ml-1">Save changes</button> </div> </div> </div> </div>

Wenn Sie diesen Code zu Ihrer Website hinzufügen, sieht das Endergebnis so aus:

(Quelle)

Erstellen Sie modale Tailwind-CSS-Popups mit Popupsmart

Mit Popupsmart können Sie ganz einfach modale Rückenwind-Popups erstellen. Popupsmart ist ein intelligenter Popup-Builder ohne Code, mit dem Sie einzigartige Popups erstellen können.

Je nach Ziel können Sie verschiedene Arten von Popups erstellen und diese in weniger als 5 Minuten zu Ihrer Website hinzufügen. Mit Popupsmart erstellte Popups können verwendet werden, um Ihre E-Mail-Liste zu erweitern, mehr Anrufe zu erhalten und die Verkaufskonversion zu steigern. Sie können auch Feedback mit Formularen in Ihren Popups erhalten und Ihre Kunden effektiver erreichen.

Popupsmarte Layouts & Erstellen eines modalen Popups

Es gibt so viele verschiedene Popup-Vorlagen, aus denen Sie bei Popupsmart wählen können. Melden Sie sich an und beginnen Sie mit der Erstellung Ihres Popups, indem Sie auf die Schaltfläche „Neues Popup erstellen“ klicken.

Je nach Geschäftsziel haben wir eine Reihe von Popup-Layoutoptionen. Um beispielsweise Ihre Produkte zu bewerben und die Conversions mit Popups zu steigern, können Sie dieses Layout verwenden:

Wenn Sie eine Ankündigung zeigen möchten, können Sie dieses Layout unten verwenden und es an die Identität Ihrer Marke anpassen.

Abgesehen davon gibt es viele verschiedene Layouts, die Sie verwenden können. Sie können sich Popup-Designs zur Inspiration ansehen.

Berücksichtigen Sie Ihr Ziel von Popups und entscheiden Sie sich für diese Vorlagen. Sie können die Schriftarten und Farben Ihres Popups anpassen. Vergessen Sie nicht, eine aufmerksamkeitsstarke und gut geschriebene Überschrift und Beschreibung hinzuzufügen. Fügen Sie Ihrem Popup außerdem die Bilder Ihrer Produkte und Dienstleistungen hinzu, um eine bessere Wirkung zu erzielen.

Beispielsweise haben wir ein benutzerdefiniertes Layout geändert, um eine Ankündigung anzuzeigen.

Im Abschnitt „Anpassen“ ist die Bearbeitung von Überschrift, Beschreibung und Bildteilen möglich.

Modale Tailwind-CSS-Popup-Integration mit Popupsmart

Wenn Sie mit der Erstellung Ihres Popups fertig sind und Zieloptionen ausgewählt haben, ist Ihr Popup zur Veröffentlichung bereit!

Das Hinzufügen eines Popups zu Ihrer Website ist sehr einfach, da Popupsmart über ein benutzerfreundliches Integrationssystem verfügt, das gut anpassbar ist.

Alles, was Sie tun müssen, ist den Code zu kopieren und einzufügen, den Sie nach der Fertigstellung Ihres Popups erhalten. Dann können Sie im Abschnitt „ Veröffentlichen “ den Code schnell abrufen, indem Sie auf Ihre Domain klicken. Dann können Sie diesen Code zu Ihrer Website hinzufügen, und Ihr Popup ist einsatzbereit! Es sollte so aussehen:

Sie können diesen Code entweder an Ihren Entwickler senden, mit gängigen CMS-Diensten einrichten oder mit Google Tag Manager einrichten !

Wenn es einsatzbereit ist, kann Ihr Popup auf Ihrer Website so aussehen:

FAQ

Wofür wird Tailwind CSS verwendet?

Tailwind CSS wird zum schnellen Erstellen von Websites verwendet. Es ist hochgradig anpassbar und mit verschiedenen Optionen einfach zu bedienen. Es wird zum Erstellen von Schnittstellen auf einer Website verwendet. Sie können jedes Element Ihrer Website mit Tailwind CSS anpassen. Folglich ist es möglich, einzigartige Websites mit unterschiedlichen Funktionen zu erstellen.

Wie erstellt man ein Tailwind-Popup in CSS?

Mithilfe von Codes und Anpassungen können Sie Tailwind-Popups in CSS erstellen. Indem Sie diese Schritte und Ideen befolgen, die wir in den vorherigen Abschnitten gegeben haben, können Sie Ihre eigenen modalen Tailwind-CSS-Popups erstellen. Darüber hinaus sind modale Tailwind-CSS-Popups vollständig anpassbar und geben Ihnen die Autonomie, die Elemente Ihrer Website zu erstellen.

Popupsmart macht es mit seinen gut gestalteten Popup-Vorlagen noch einfacher. Sie können diese Layouts in kurzer Zeit personalisieren. Erwägen Sie, diese Popups hinzuzufügen, um Ihre Zielgruppe zu erreichen und Ihre E-Mail-Liste zu erweitern.

Das ist alles für die modale Tailwind-CSS-Popup-Erstellung! Wir hoffen, dass Ihnen das Lesen dieses Themas gefallen hat und Sie erfahren haben, wie Sie Ihr eigenes Popup erstellen.

Kommentieren Sie unten, wie Sie Popups verwenden, und teilen Sie uns Ihre Ideen mit!

Sehen Sie sich auch diese Inhalte an:

• Wie erstelle ich modale Popups? / Bootstrap & jQuery & CSS
• So erstellen Sie Popup-Formulare für Ihre Website (2022 & kostenlos)
• Kann ich meinem Popup benutzerdefiniertes CSS hinzufügen?