Hallo,
ich würde gerne den “Umriss-Stil für Schaltfläche” wie es ihn bei Slide-Shows und Bild-Bannern zur Auswahl gibt auch bei “Mit mehreren Spalten” und dem Kontaktformular nutzen.
Eine entsprechende Einstellung konnte ich leider nicht finden und auch keinen Beitrag hierzu.
Wie sich der Code entsprechend anpassen?
Hey @timh222
Du hast uns nicht das Theme preisgegeben das du verwendest. Das ist wichtig weil alle Themes unterschiedlich in der Code Struktur aufgebaut sind.
Und hat dir diese Theme Einstellung nicht helfen können um deine CTA (Call-to-action) Buttons abzurunden?
VG,
Sorry! Es handelt sich um Ride 12.0.0
In den Theme Einstellungen kann ich nur den Rand der Schaltfläche einstellen. Ich möchte aber, dass der Hintergrund der Schaltfläche nicht weiß ist, sondern transparent und es nur einen weißen Rand gibt.
Wie in diesem Beispiel:
Wenn das nicht mit dem nativen Theme-Farbschemen geht (vielleicht ein neues Farbschema erstellen und auf Abschnitt-Ebene zuweisen), dann wird’s kompliziert:
Wichtig:
Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.
Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!
Habe ich jetzt gegoogelt in unserem Experten Design-Forum nachgeforscht:
Die Implementierung eines “Umriss-Stils für Schaltflächen” (oft als “Outline Buttons” bezeichnet) in den “Mit mehreren Spalten”-Abschnitt und das Kontaktformular deines Shopify-Themes kann etwas komplex sein, wenn die Option nicht von Anfang an verfügbar ist.
Weitere Ressourcen:
Es erfordert normalerweise, dass du sowohl die Liquid-Template-Dateien als auch die zugehörigen CSS-Dateien bearbeitest. Hier ist ein allgemeiner Ansatz, wie du vorgehen könntest:
Identifiziere die relevanten Abschnitte:
liquid-Dateien, die den “Mit mehreren Spalten”-Abschnitt und das Kontaktformular steuern. Sie könnten Namen wie multi-column.liquid und contact-form.liquid im Sections-Ordner haben.Füge die Option in den Abschnitt ein:
Bearbeite die CSS-Dateien:
Assets-Ordner zu finden sind (z.B. theme.scss.liquid).Beispiel IF-Bedingung für die Liquid-Template-Anpassung:
{% if section.settings.button_style == 'outline' %}
{% else %}
{% endif %}
Beispiel für das CSS:
.button-outline {
background-color: transparent;
border: 1px solid #ffffff; /* Angenommen, du möchtest eine weiße Umrisslinie */
color: #ffffff; /* Weiße Textfarbe */
padding: 10px 20px;
text-transform: uppercase;
transition: background-color 0.3s ease;
}
.button-outline:hover {
background-color: #ffffff; /* Hintergrundfarbe beim Hover */
color: #000000; /* Textfarbe beim Hover */
}
Die genaue Implementierung kann je nach Theme variieren. Wenn du nicht vertraut mit der Theme-Entwicklung bist, kann es ratsam sein, die Hilfe eines Entwicklers in Anspruch zu nehmen, da solche Anpassungen Fehler verursachen können, wenn sie nicht richtig umgesetzt werden.
Um eine Schaltfläche zu erstellen, die dem Stil in deinem Bild entspricht (transparenter Hintergrund mit einem weißen Rand und weißem Text), musst du entsprechenden CSS-Code zu deinem Theme hinzufügen. Hier ist ein Beispiel für den CSS-Code, der eine solche Schaltfläche erstellen würde:
.custom-outline-button {
background-color: transparent; /* Stellt den Hintergrund transparent ein */
color: #ffffff; /* Weiße Schriftfarbe */
border: 2px solid #ffffff; /* Weißer Rand mit 2px Dicke */
padding: 10px 20px; /* Innenabstand der Schaltfläche */
text-transform: uppercase; /* Text in Großbuchstaben */
transition: all 0.3s ease; /* Übergangseffekt für Hover-Status */
}
.custom-outline-button:hover {
background-color: #ffffff; /* Hintergrundfarbe beim Überfahren mit der Maus */
color: #000000; /* Textfarbe beim Überfahren mit der Maus */
}
Um diesen Stil anzuwenden, füge den oben genannten CSS-Code zu den Assets deines Shopify-Themes hinzu, typischerweise in die Datei theme.scss.liquid oder eine äquivalente CSS-Datei.
Dann musst du sicherstellen, dass der Button im HTML-Code deines Themes mit der Klasse .custom-outline-button versehen ist. Hier ist ein Beispiel, wie der HTML-Code aussehen könnte:
Wenn du die Schaltfläche in einer bestehenden Sektion anpassen möchtest und nicht sicher bist, wie du auf den HTML-Code zugreifen kannst, suche nach der Sektion im Sections-Ordner und finde den entsprechenden Button-Code. Dort kannst du dann die Klasse ändern oder hinzufügen. Denke daran, dass du möglicherweise vorhandene Klassen im HTML nicht überschreiben willst, falls sie für andere Stile oder JavaScript-Funktionalitäten verwendet werden. Du kannst mehrere Klassen zu einem Element hinzufügen, indem du sie durch Leerzeichen trennst.