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

Wie füge ich Schaltflächen in der Weebly-Site hinzu und passe sie an?

9

Schaltflächen auf einer Weebly- Site sind eines der wichtigen Elemente, die für den Aufruf zum Handeln verwendet werden. Sie können beispielsweise eine Schaltfläche hinzufügen, mit der Benutzer aufgefordert werden, ein PDF-Dokument herunterzuladen. Da Weebly eine sehr geringe Anzahl von Designs hat, ist es ein häufiges Problem, dass Ihnen das gesamte Design gefällt, aber die Schaltfläche dieses Themas möglicherweise einen störenden Stil hat. In einem solchen Szenario ist es einfach, den Standardstil des Weebly-Schaltflächenelements durch Ihr eigenes benutzerdefiniertes CSS oder den Schaltflächenstil eines anderen Themas zu ersetzen. In diesem Artikel werden die Möglichkeiten zum Anpassen des standardmäßigen Weebly-Schaltflächenelements erläutert.

Standard-Schaltflächenelement hinzufügen

Weebly bietet standardmäßig ein Drag-and-Drop-Schaltflächenelement, das in vier verschiedene Typen angepasst werden kann. Das Schaltflächenelement ist in der Elementkategorie "Struktur" gruppiert. Standardmäßig können Benutzer zwei Arten von kleinen Schaltflächen und zwei Arten von großen Schaltflächen hinzufügen.

Wie füge ich Schaltflächen in der Weebly-Site hinzu und passe sie an?

Weebly Standard-Schaltflächenstile

Bei allen nicht-responsiven Designs verwendet Weebly Bilder, um eine Schaltfläche zu erstellen, und bei allen responsiven Designs wird der Stil der Schaltflächen in der Datei „main.less” gesteuert. Klicken Sie nach dem Ziehen und Ablegen auf die Schaltfläche in Ihrem Inhaltsbereich, um die folgenden Anpassungsoptionen anzuzeigen:

  • Schaltflächentext – Text, der auf der Schaltfläche angezeigt werden soll.
  • Schaltflächenstil – Wählen Sie einen der vier verfügbaren Stile.
  • Position – Mitte, rechte oder linke Ausrichtung der Schaltfläche.
  • Link – Fügen Sie Links zum Schaltflächentext hinzu.
  • Abstand – Passen Sie die oberen und unteren Ränder an.

Wie füge ich Schaltflächen in der Weebly-Site hinzu und passe sie an?

Optionen für Weebly-Button-Elemente

Neben dem Drag-and-Drop-Button-Element bietet Weebly auch einen Call-to-Action-Button in Landing-Page-Vorlagen.

Ersetzen oder ändern Sie die Stile der Schaltflächen unter „main.less”, um die Schaltflächen auf Ihrer Weebly-Site mit responsiven Designs anzupassen.

Responsiv vs. nicht ansprechend

Bevor Sie versuchen, den Stil Ihrer Schaltflächen zu ändern, überprüfen Sie, welche Art von Design Sie derzeit verwenden. Es gibt drei Arten von Schaltflächen, die in Weebly-Designs verwendet werden:

  • CSS-Buttons zu responsiven Themes – Beispiel-Theme Slick, Cento.
  • CSS-Buttons bei nicht-responsiven Themes – Beispiel-Theme Cleancut.
  • Bildschaltflächen bei nicht reagierenden Themen – Beispielthema Stadt.

Nicht reagierende Themes mit Bild-Buttons – hier verwendet das Button-Element ein Bild und das CSS ruft dieses Bild nur als Hintergrund auf, das Beispiel-Theme ist City.

Nicht reagierende Themes mit CSS-Buttons – Themes wie Cleancut verwenden komplette CSS-Buttons ohne Bilder, obwohl es sich um ein nicht-responsives Theme handelt.

Responsive Themes – alle aktuellen Themes wie Slick, Cento, Paper usw. sind vollständig responsiv und das Button-Element wird aus CSS-Code generiert.

Wir werden besprechen, wie Sie den Stil der Schaltfläche sowohl bei responsiven als auch bei nicht responsiven Designs ändern können.

Fall 1 – Hinzufügen von benutzerdefinierten Schaltflächenbildern zu nicht reagierenden Designs

Das wichtige Merkmal des Weebly-Button-Elements ist seine Fähigkeit, sich an die Länge des Textes anzupassen. Die Schaltfläche wird automatisch an die Länge des eingegebenen Textes angepasst. Dies wird erreicht, indem eine Schaltfläche in zwei Bilder aufgeteilt wird. Bevor Sie fortfahren, führen Sie die folgenden Schritte aus, um zu verstehen, wo die Schaltflächenbilder auf einer Weebly-Site gespeichert sind.

  • Melden Sie sich bei Ihrem Weebly-Konto an und wählen Sie die Website zum Bearbeiten aus.
  • Navigieren Sie zur Registerkarte „Theme” und klicken Sie auf die Schaltfläche „HTML / CSS bearbeiten”.
  • Im Abschnitt "Assets" sehen Sie verschiedene Schaltflächenbilder wie unten gezeigt:

Wie füge ich Schaltflächen in der Weebly-Site hinzu und passe sie an?

Schaltflächenbilder auf nicht responsiven Weebly-Designs

Wir haben festgestellt, dass alle nicht reagierenden Designs, die Bilder für Schaltflächen verwenden, 9 Bildersätze (insgesamt 18) für kleinere und größere Schaltflächen haben, aber 2 spezifische Bilder in CSS als Hintergrund für die Schaltfläche verwenden. Überprüfen Sie „main_style.css” und finden Sie heraus, welche Bilder für Schaltflächen verwendet werden. Das folgende Beispiel zum Thema Stadt zeigt, dass „button-highlight.png” und „button-highlight-large.png” für kleinere bzw. größere Schaltflächen verwendet werden.

Wie füge ich Schaltflächen in der Weebly-Site hinzu und passe sie an?

Bilder, die für Schaltflächen in nicht ansprechenden Designs verwendet werden

Wenn Ihnen diese Schaltflächen nicht gefallen, ändern Sie einfach das Bild in eines der verfügbaren Bilder aus 9 Sets. Sie ändern „button-highlight.png” in „button-purple.png”. Falls Ihnen eines der vorhandenen Schaltflächenbilder nicht gefällt, erstellen Sie Ihre eigenen benutzerdefinierten Bilder mit ähnlichen Größen und geteiltem Stil und laden Sie sie im Abschnitt "Assets" hoch. Stellen Sie sicher, dass Sie den Namen des Bildes in „main_style.css” für die Eigenschaft „background” verwenden.

Fall 2 – Anpassen von CSS-Schaltflächen für nicht ansprechende Designs

Wenn Sie im Abschnitt „Assets” Ihres nicht reagierenden Themes keine Schaltflächenbilder finden, überprüfen Sie die „main_style.css”, um den Abschnitt „Schaltflächen” anzuzeigen. Unten ist der CSS-Code aus dem Cleancut-Thema, der nach Bedarf für Hintergrund, Farben, Hover-Effekt usw. angepasst werden kann.

/* Buttons --------------------------------------------------------------------------------*/ /* Small structure & regular style */ .wsite-button { background: red; background: -moz-linear-gradient(top,#444 0,#333 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#444),color-stop(100%,#333)); background: -webkit-linear-gradient(top,#444 0,#333 100%); background: -o-linear-gradient(top,#444 0,#333 100%); background: -ms-linear-gradient(top,#444 0,#333 100%); background: linear-gradient(top,#444 0,#333 100%); border: 1px solid #000; box-shadow:inset 0 0 15px rgba(0,0,0,0.25); -moz-border-radius: 3px; border-radius: 3px; color: white !important; font-size: 13px; font-weight: 700; padding: 3px 25px; text-align: center; text-decoration: none !important; text-shadow: 0px -1px 1px rgba(0,0,0,0.7); } .wsite-button:hover { background-position:0 0; box-shadow:0 1px 4px rgba(0,0,0,0.3); } .wsite-button:active { background-position:0 0; } .wsite-button-inner { color: #fff !important; padding:0; background: none; } .wsite-button:hover .wsite-button-inner { background:none; } .wsite-button:active { padding:4px 25px 2px; } /* Large structure & regular style */ .wsite-button-large .wsite-button-inner { font-size:14px; padding:0; } .wsite-button-large .wsite-button-inner { background: none; } /* Highlighted styles */ .wsite-button-highlight, .wsite-button-large.wsite-button-highlight { background: #0370EA; background: -moz-linear-gradient(top,#0370EA 0,#0370EA 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#0370EA),color-stop(100%,#0370EA)); background: -webkit-linear-gradient(top,#0370EA 0,#0370EA 100%); background: -o-linear-gradient(top,#0370EA 0,#0370EA 100%); background: -ms-linear-gradient(top,#0370EA 0,#0370EA 100%); background: linear-gradient(top,#0370EA 0,#0370EA 100%); border: 1px solid #0052ad; box-shadow:inset 0 0 18px rgba(0,0,0,0.02); } .wsite-button-highlight:hover, .wsite-button-large.wsite-button-highlight:hover { box-shadow:0 1px 4px rgba(0,0,0,0.3); } .wsite-button-highlight .wsite-button-inner { background-image: none; } .wsite-button-large.wsite-button-highlight .wsite-button-inner { background-image: none; }

Gehen Sie nun zurück zum Editor und ziehen Sie das Schaltflächenelement in den Inhaltsbereich. Sie können sehen, dass die Schaltfläche den neuen Stil hat, wie Sie ihn in „main.less” definiert haben.

Fall 3 – Anpassen von Weebly Buttons an Responsive Themes

Alle neuesten Weebly-Themes sind responsiv und verwenden nur CSS-Codes zum Generieren von Schaltflächen. Wie oben erläutert, werden relevante CSS-Schaltflächenstile in der Datei „main.less” im Abschnitt „/ Buttons /” definiert. Wenn Ihr Theme die @import-Funktion in CSS verwendet, überprüfen Sie die entsprechende Schaltflächendatei für das CSS. Hier müssen Sie diese Codes durch Ihren eigenen benutzerdefinierten CSS-Schaltflächencode ersetzen, um den Standard-Schaltflächenstil zu ändern.

Unten sind die CSS-Stildefinitionen für die Weebly-Schaltfläche:

  • .wsite-Schaltfläche – Kleine Schaltfläche
  • .wsite-button:hover – Schwebeeffekt für kleinen Button
  • .wsite-button:active – Effekt beim Klicken auf den kleinen Button
  • .wsite-button-inner – Definiere den Stil der inneren Elemente wie Schriftgröße und Farbe

Ähnlich größere Schaltflächen verwenden die CSS-Klasse .wiste-button-large.

Hinweis: Wenn Sie Ihrer Site eine Blog-Seite hinzugefügt haben, fügen einige Designs möglicherweise eine zusätzliche CSS-Klasse .blog-button für die Schaltflächen in Blog-Posts hinzu.

Sie können diese CSS- Codes selbst ändern oder ein beliebiges Online-Tool zum Generieren von CSS-Schaltflächen verwenden, um das erforderliche CSS zu erhalten. Zum Beispiel können die kleinen Schaltflächenstile mit Farbverlauf geändert werden, indem die standardmäßigen kleinen Schaltflächencodes durch den folgenden CSS-Code ersetzt werden:

.wsite-button { border-top: 1px solid #96d1f8; background: #6594d6; background: -webkit-gradient(linear, left top, left bottom, from(#7a3e9c), to(#6594d6)); background: -webkit-linear-gradient(top, #7a3e9c, #6594d6); background: -moz-linear-gradient(top, #7a3e9c, #6594d6); background: -ms-linear-gradient(top, #7a3e9c, #6594d6); background: -o-linear-gradient(top, #7a3e9c, #6594d6); padding: 14.5px 29px; -webkit-border-radius: 39px; -moz-border-radius: 39px; border-radius: 39px; -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; box-shadow: rgba(0,0,0,1) 0 1px 0; text-shadow: rgba(0,0,0,.4) 0 1px 0; color: white; font-size: 24px; font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif; text-decoration: none; vertical-align: middle; } .wsite-button:hover { border-top-color: #28597a; background: #28597a; color: #ccc; } .wsite-button:active { border-top-color: #1b435e; background: #1b435e; }

Die Änderung des Schaltflächenelements mit alten und neuen CSS-Codes wird in einem Beispieldesign wie folgt gezeigt:

Wie füge ich Schaltflächen in der Weebly-Site hinzu und passe sie an?

Neuer CSS-Button in Weebly

Hinweis: Sie können die großen Schaltflächenstile auf die gleiche Weise ändern. Stellen Sie sicher, dass Sie die CSS-Codes für kleine und große Schaltflächenstile ändern, um zu vermeiden, dass Schaltflächen auf der veröffentlichten Website beschädigt werden.

Um die Aufgabe für Weebly-Benutzer zu vereinfachen, haben wir drei Arten von Schaltflächen, die Weebly-CSS-Klassen verwenden. Sie können das CSS im Abschnitt „/ Buttons /” Ihres „main.less” durch einen der folgenden Codes ersetzen, um den Stil der Schaltflächen zu ändern.

Stil1:

/* Buttons */ .wsite-button, .wsite-editor .wsite-button { height: auto; padding: 0; background: none; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .wsite-button .wsite-button-inner, .wsite-editor .wsite-button .wsite-button-inner { height: auto; padding: 8px 12px; background: #333333; color: #ffffff; border: 2px solid #333333; border-radius: 1px; text-transform: uppercase; letter-spacing: 0.05em; white-space: normal; font-family: 'Quattrocento Sans', sans-serif; font-size: 14px; font-weight: 700; line-height: normal; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .wsite-button-large, .wsite-editor .wsite-button-large { background: none; } .wsite-button-large .wsite-button-inner, .wsite-editor .wsite-button-large .wsite-button-inner { padding: 12px 16px; font-family: 'Quattrocento Sans', sans-serif; font-size: 16px; font-weight: 700; line-height: normal; } .wsite-button:hover .wsite-button-inner { background: #ffffff; color: #333333; border: 2px solid #333333; } .wsite-button-highlight, .wsite-button-large.wsite-button-highlight, .wsite-editor .wsite-button-highlight, .wsite-editor .wsite-button-large.wsite-button-highlight { background: none; } .wsite-button-highlight .wsite-button-inner, .wsite-button-large.wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-large.wsite-button-highlight .wsite-button-inner { background: #b9b9b9; color: #ffffff; border: 2px solid #b9b9b9; } .wsite-button-highlight:hover .wsite-button-inner, .wsite-button-large.wsite-button-highlight:hover .wsite-button-inner { background: #a1a1a1; border: 2px solid #a1a1a1; }

Stil2:

/* Buttons */ .wsite-button, .wsite-editor .wsite-button { height: auto; padding: 0; background: none; } .wsite-button .wsite-button-inner, .wsite-editor .wsite-button .wsite-button-inner { height: auto; padding: 10px 16px; background: #35A89A; color: white; border-radius: 0; text-transform: uppercase; letter-spacing: .07em; font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 500; line-height: normal; -webkit-transition: all 350ms ease-in; -moz-transition: all 350ms ease-in; -ms-transition: all 350ms ease-in; -o-transition: all 350ms ease-in; transition: all 350ms ease-in; } .wsite-button-large { background: none; } .wsite-button-large .wsite-button-inner { padding: 12px 20px; font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 500; line-height: normal; } .wsite-button:hover .wsite-button-inner { background: #177267; } .wsite-button-highlight, .wsite-button-large.wsite-button-highlight, .wsite-editor .wsite-button-highlight, .wsite-editor .wsite-button-large.wsite-button-highlight { background: none; } .wsite-button-highlight .wsite-button-inner, .wsite-button-large.wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-large.wsite-button-highlight .wsite-button-inner { background: white; color: #35A89A; border: 2px solid #35A89A; } .wsite-button-highlight:hover .wsite-button-inner, .wsite-button-large.wsite-button-highlight:hover .wsite-button-inner { background: #35A89A; color: white; }

Stil3:

/* Buttons */ .wsite-button, .wsite-editor .wsite-button { display: inline-block; height: auto; padding: 0; background: none; } .wsite-button:focus, .wsite-editor .wsite-button:focus { outline: none; } .wsite-button .wsite-button-inner, .wsite-editor .wsite-button .wsite-button-inner { display: inline-block; height: auto; padding: 8px 16px; background: #a1a1a1; color: white !important; border: 2px solid #a1a1a1; border-radius: 2px; text-transform: uppercase; letter-spacing: 0.05em; white-space: normal; font-family: 'Open Sans', sans-serif; font-size: 13px; font-weight: 400; line-height: normal; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .wsite-button-large, .wsite-editor .wsite-button-large { display: inline-block; height: auto; padding: 0; background: none; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .wsite-button-large .wsite-button-inner, .wsite-editor .wsite-button-large .wsite-button-inner { display: inline-block; height: auto; padding: 12px 24px; background: #a1a1a1; color: white !important; border: 2px solid #a1a1a1; border-radius: 2px; text-transform: uppercase; letter-spacing: 0.05em; white-space: normal; font-family: 'Open Sans', sans-serif; font-size: 15px; font-weight: 400; line-height: normal; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .wsite-button:hover .wsite-button-inner, .wsite-button-large:hover .wsite-button-inner { background: transparent; color: #a1a1a1 !important; } .wsite-button-highlight, .wsite-button-large.wsite-button-highlight, .wsite-editor .wsite-button-highlight, .wsite-editor .wsite-button-large.wsite-button-highlight { background: none; } .wsite-button-highlight .wsite-button-inner, .wsite-button-large.wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-large.wsite-button-highlight .wsite-button-inner { background: transparent; color: #808080 !important; border: 2px solid #808080; } .wsite-button-highlight:hover .wsite-button-inner, .wsite-button-large.wsite-button-highlight:hover .wsite-button-inner { background: #808080; color: white !important; }

Hinzufügen von benutzerdefinierten CSS-Schaltflächen mithilfe des Embed-Code-Elements

Das Anpassen vorhandener Elemente ist eine schwierige Aufgabe, da Weebly häufig den Code ändert und der Umfang der Schaltfläche ohne großen Reiz auf den vorhandenen Stil beschränkt wird. Der einfachste und einfachste Weg besteht darin , Ihre eigenen benutzerdefinierten CSS- Schaltflächen hinzuzufügen, anstatt den vorhandenen Code zu ändern. Dies bietet endlose Möglichkeiten, Ihrer Weebly-Site verschiedene Arten von 2D- und 3D-CSS-Schaltflächen hinzuzufügen. Das Problem ist jedoch, dass Sie jedes Mal das Element „Embed Code” mit vordefiniertem Stil hinzufügen müssen, anstatt das Element „Button” zu verwenden.

Sie können beispielsweise Farbverlaufsschaltflächen mit unterschiedlichen Stilen hinzufügen, wie unten gezeigt, indem Sie den heruntergeladenen HTML- Code in das Element " Embed Code " und das CSS unter dem Haupt-Stylesheet ("main_style.css" für nicht reagierende Designs und "main.less" für ansprechende) hinzufügen Themen).

Laden Sie den CSS-/HTML-Code für dieses Weebly-Widget mit Farbverlaufsschaltflächen herunter.

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