TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

Wie füge ich 3D-CSS-Drucktasten in Weebly hinzu?

9

In unserem vorherigen Artikel haben wir gesehen, wie Sie das standardmäßige Weebly-Schaltflächenelement hinzufügen und anpassen. Obwohl es möglich ist, die Schaltflächen zu ändern, ist das Bearbeiten des vorhandenen Schaltflächenstils eine komplizierte Aufgabe und funktioniert oft nicht wie erwartet. Die einfache Lösung besteht darin, Ihr eigenes benutzerdefiniertes CSS/HTML mit dem Weebly-Einbettungscodeelement einzubetten. Sie erhalten beim Einbetten nicht die Anpassungsoptionen, können jedoch leicht attraktive Schaltflächen mit CSS-Effekten erstellen. Hier erklären wir, wie Sie 3D-CSS-Drucktasten auf der Weebly-Site hinzufügen.

3D-CSS-Drucktasten

Unten sehen Sie, wie die 3D-Drucktasten aussehen werden.

Wie füge ich 3D-CSS-Drucktasten in Weebly hinzu?

Die Tasten haben folgende Funktionen:

  • Es sind keine Bilder erforderlich, was die Ladegeschwindigkeit der Website und Ihren Aufwand für die Erstellung von Bildern verbessert.
  • Farben und Stile können leicht an jede Art von Thema und Layout angepasst werden.
  • Sie können die Anzahl der Schaltflächen in HTML mit dem Einbettungscodeelement steuern. Dies bedeutet, dass Sie eine unterschiedliche Anzahl von Schaltflächen auf verschiedenen Seiten platzieren können, wobei das Quell-CSS gleich bleibt.
  • Jede Schaltfläche kann mit einer einzelnen oder allen Seiten Ihrer Site verknüpft werden.

Wie füge ich 3D-CSS-Drucktasten in Weebly hinzu?

Wir erklären hier, wie Sie 5 Schaltflächen mit dem obigen 3D-Stil hinzufügen. Sie können das CSS und den entsprechenden HTML-Code entfernen oder hinzufügen, um Schaltflächen hinzuzufügen oder zu entfernen und die Farbe und Stile zu ändern.

Schritt #1 – Hinzufügen von Button-CSS

Der erste Schritt besteht darin, zu entscheiden, ob Sie die Schaltflächen nur auf wenigen Seiten oder auf vielen Seiten Ihrer Site hinzufügen möchten. Wenn Sie einige Seiten hinzufügen möchten, fügen Sie den CSS-Code nur zu diesen Seiten unter "Seiten > Seite auswählen > SEO-Einstellungen > Kopfzeilencode" wie unten gezeigt hinzu:

Wie füge ich 3D-CSS-Drucktasten in Weebly hinzu?

Kopfzeilencode in Seite hinzufügen

Wenn Sie die Schaltflächen auf mehreren Seiten hinzufügen möchten, empfiehlt es sich, die CSS-Stile in einem externen Stylesheet hinzuzufügen und auf die Seite zu verlinken. Weebly hat standardmäßig nur ein externes Stylesheet pro Site. Gehen Sie zum Abschnitt „Theme > HTML/CSS bearbeiten > Stile > main.less”. Suchen Sie die Datei und fügen Sie den Code am Ende anderer vorhandener Codes hinzu. Speichern Sie Ihre Änderungen und beenden Sie den Code-Editor.

Wie füge ich 3D-CSS-Drucktasten in Weebly hinzu?

Bearbeiten der Haupt-CSS-Datei in Weebly

Wenn Sie den Code-Editor verwenden, müssen Sie das Design unter einem benutzerdefinierten Namen speichern. Wenn Sie das Thema nicht bearbeiten möchten, gehen Sie zum Abschnitt „Einstellungen > SEO > Header-Code”. Hier können Sie den CSS-Code hinzufügen, der auf alle Seiten Ihrer Site angewendet wird (ähnlich wie beim Bearbeiten der main.less-Datei).

Wie füge ich 3D-CSS-Drucktasten in Weebly hinzu?

Kopfzeilencode auf Weebly-Site-Ebene hinzufügen

Hier ist der CSS-Code für 3D-Buttons:

<style type="text/CSS"> a.css3dbutton { background: #c1e75c; color: black; text-decoration: none; font: bold 18px Arial; position: relative; display: inline-block; margin-right: 15px; padding: 15px; border-radius: 85px; width: 85px; height: 85px; outline: none; box-shadow: 0 8px 0 #8dab3b, 0 0 3px rgba(0,0,0, 0.2), 0 20px 20px #eee; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } a.css3dbutton span.outer{ text-align: center; width: 100%; display: block; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%); } a.css3dbutton span.outer span.top{ display: block; padding-bottom: 4px; } a.css3dbutton span.outer span.bottom{ border-top: 1px solid black; padding-top: 4px; display: block; text-transform: uppercase; line-height: 12px; font-size: 60%; } a.css3dbutton:hover { background: #9cc62b; box-shadow: none; -ms-transform: translateY(8px); -webkit-transform: translate3D(0, 8px, 0); -moz-transform: translateY(8px); transform: translate3D(0, 8px, 0); } a.css3dbutton.blue{ background: #a6e9f7; box-shadow: 0 8px 0 #529dad, 0 0 3px rgba(0,0,0, 0.2), 0 20px 20px #eee; } a.css3dbutton.blue:hover { background: #66cbe1; box-shadow: none; } a.css3dbutton.pink{ background: #fbbaba; box-shadow: 0 8px 0 #d74848, 0 0 3px rgba(0,0,0, 0.2), 0 20px 20px #eee; } a.css3dbutton.pink:hover { background: #ea6161; box-shadow: none; } a.css3dbutton.yellow{ background: #f3fa86; box-shadow: 0 8px 0 #dbcd2f, 0 0 3px rgba(0,0,0, 0.2), 0 20px 20px #eee; } a.css3dbutton.yellow:hover { background: #ecd347; box-shadow: none; } a.css3dbutton.brown{ background: #e0c87e; box-shadow: 0 8px 0 #b3805b, 0 0 3px rgba(0,0,0, 0.2), 0 20px 20px #eee; } a.css3dbutton.brown:hover { background: #b3805b; box-shadow: none; } </style>

Erfahren Sie mehr über das Bearbeiten von Quell-CSS/HTML in Weebly.

Schritt #2 – HTML-Code hinzufügen

Ziehen Sie ein Einbettungscodeelement per Drag & Drop auf eine Seite, auf der Sie die Schaltflächen hinzufügen möchten, und fügen Sie den folgenden Code ein. Vergessen Sie nicht, # durch Ihre eigenen Links zu ersetzen.

<div> <a href="#" class="css3dbutton"> <span class="outer"> <span class="top">Register </span> <span class="bottom">Register here free</span> </span> </a> <a href="#" class="css3dbutton blue"> <span class="outer"> <span class="top">Login</span> <span class="bottom">Login to access</span> </span> </a> <a href="#" class="css3dbutton pink"> <span class="outer"> <span class="top">Sign Up</span> <span class="bottom">Sign up for free</span> </span> </a> <a href="#" class="css3dbutton yellow"> <span class="outer"> <span class="top">Blog</span> <span class="bottom">Subscribe to blog</span> </span> </a> <a href="#" class="css3dbutton brown"> <span class="outer"> <span class="top">Forum</span> <span class="bottom">Read forum posts</span> </span> </a> </div>

Schritt #3 – Anpassen der Tasten

Es gibt endlose Möglichkeiten, die Schaltflächen nach Ihren Wünschen anzupassen. Hier sind einige allgemeine Szenarien, nach denen Sie möglicherweise suchen.

Hinzufügen oder Entfernen von Schaltflächen

Angenommen, Sie benötigen nur 3 statt wie im Beispiel 5 Tasten. In diesem Fall können Sie den Code für die 4. und 5. Schaltfläche sowohl aus CSS als auch aus HTML löschen. Wir empfehlen jedoch, die maximale Anzahl von Stilen in CSS hinzuzufügen und dann die Anzahl der Schaltflächen in HTML zu steuern. In diesem Szenario, in dem Sie nur 3 Schaltflächen benötigen, lassen Sie den CSS-Code unverändert, in dem 5 verschiedene Stile definiert sind, und fügen Sie HTML-Code nur für 3 Schaltflächen hinzu.

Auf diese Weise können Sie auf einer Seite 3 Schaltflächen, auf einer anderen Seite 5 Schaltflächen usw. hinzufügen.

Anpassen der Farben und Größe

  • Sie können die Textfarbe und die Farbe der Schaltflächenattribute wie Hintergrund und Schatten ändern.
  • Ändern Sie die Breiten- und Höhenattribute, um die runde Schaltfläche in eine ovale Größe oder andere Proportionen zu ändern.

Denken Sie daran, dass Sie das Abstandselement verwenden können, um ausreichend Platz über und unter den Schaltflächen hinzuzufügen. Ebenso können Sie die Schaltfläche mit dem Abstandshalter rechts oder links von jedem anderen Element platzieren.

Aufnahmequelle: www.webnots.com
Hinterlasse eine Antwort

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen