Erweiterte Webdesign-Techniken mit All One: Animierte Effekte & Anpassungen

Erweiterte Webdesign-Techniken mit All One: Animierte Effekte & Anpassungen

Web Tools
March 09, 2025•2 min read

Viele glauben, dass Websites, die mit All One erstellt werden, nicht professionell aussehen können. Das ist jedoch ein Irrtum! Mit ein wenig individuellem Code kannst du deine Website optisch und funktional auf ein neues Level heben. In diesem Artikel zeige ich dir fünf einfache, aber wirkungsvolle Effekte, die du mit benutzerdefiniertem CSS umsetzen kannst.

1. Bildvergrößerung beim Hover

Ein stilvoller Effekt, bei dem sich Bilder vergrößern, wenn der Nutzer mit der Maus darüberfährt.

Schritt-für-Schritt-Anleitung:

  1. Gehe in den Webtools-Builder von All One.

  2. Öffne den CSS-Editor und scrolle nach unten.

  3. Kopiere diesen CSS-Code und füge ihn in den Editor ein:

    .your-image-element:hover {
    transform: scale(1.2);
    transition: transform 0.3s ease;
}

  4. Ersetze .your-image-element mit dem CSS-Selektor deines Bildes.

  5. Speichern und testen!

Falls die Vergrößerung zu stark ist, kannst du den Skalierungswert (scale(1.2)) verringern.

2. Farbverlaufsanimation für Buttons

Statt statischer Buttons kannst du mit einem Farbverlaufs-Hintergrund mehr Dynamik erzeugen.

So geht's:

  1. Füge diesen CSS-Code in den Editor ein:

    .cool-button {
    background: linear-gradient(90deg, #0044cc, #00aaff);
    transition: background 0.5s ease;
}

  2. Wechsle zum Button, den du anpassen willst.

  3. Füge in den erweiterten Einstellungen unter „CSS-Klasse“ cool-button hinzu.

  4. Speichern und testen!

Du kannst die Farbwerte ändern, um deinen gewünschten Farbverlauf zu erstellen.

3. Farbverlauf in Headlines

Wie beim Button kannst du auch Überschriften mit einem Farbverlauf versehen.

Code für den Effekt:

.cool-header {
   background: linear-gradient(to right, #0044cc, #00aaff);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

Anwendung:

  1. Füge diesen Code in den CSS-Editor ein.

  2. Weise der gewünschten Überschrift die Klasse cool-header zu.

  3. Speichern und testen!

4. Schwebender Google-Bewertungsbutton

Dieser Effekt zeigt eine schwebende Schaltfläche, die Besucher direkt zu deiner Google-Bewertungsseite weiterleitet.

Schritte:

  1. HTML-Code für den Button einfügen (im Footer oder an einer beliebigen Stelle):

    <a href="DEIN-GOOGLE-BEWERTUNGSLINK" class="floating-review-button">Bewertung abgeben</a>

  2. CSS-Code für das Styling einfügen:

    .floating-review-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #0044cc;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

  3. Speichern und testen!

5. Automatisch scrollendes Logo-Karussell

Perfekt, um Partner- oder Kundenlogos dynamisch anzuzeigen.

So fügst du es hinzu:

  1. Erstelle eine Reihe mit mehreren Bildern.

  2. Füge diesen CSS-Code hinzu:

    .logo-carousel {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
    animation: scroll 10s linear infinite;
}

@keyframes scroll {
    from { transform: translateX(100%); }
    to { transform: translateX(-100%); }
}

  3. Weise der Bildreihe die Klasse logo-carousel zu.

  4. Speichern und testen!

Fazit

Mit diesen fünf CSS-Tricks kannst du bewegte, ansprechende und professionelle Websites mit All One erstellen. Falls du alle Codes als Google-Dokument erhalten möchtest, kannst du dich mit mir in Verbindung setzen!

Lass mich wissen, falls du Fragen hast oder weitere Anpassungen wünschst. 🚀

Back to Blog