Hintergrund-Scroll-Effekte sind eine kreative Möglichkeit, die Aufmerksamkeit deiner Besucher zu erregen und sie zu ermutigen, deine Website weiter zu erkunden.Wichtig:
  Du kannst Scroll-Effekte nur ...

Wix Editor: Scroll-Effekte für den Hintergrund deines Streifens anwenden

<div data-component-type="text"><div>Hintergrund-Scroll-Effekte sind eine kreative Möglichkeit, die Aufmerksamkeit deiner Besucher zu erregen und sie zu ermutigen, deine Website weiter zu erkunden.</div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/10/26/226b9d0f-cb17-4e06-9eef-3cea999fe35e/5901e994-227c-4212-bbaf-eb8d33edb4d4.gif" alt="GIF des Scroll-Effekts, der auf einen Streifen auf einer Website von Wix angewendet wird." /></div></div><div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-title">Wichtig:</div><div class="info-content"><ul>
  <li>Du kannst Scroll-Effekte nur in der <a data-composite="true" href="https://support.wix.com/de/article/wix-editor-deine-website-speichern-in-der-vorschau-anzeigen-und-veröffentlichen#previewing-your-site" target="">Vorschau</a> oder auf deiner Live-Website sehen. Die Art, wie sie im Editor angezeigt werden, entspricht nicht der Darstellung auf der Live-Website.</li>  <li>Es ist nicht möglich, deinem Streifen einen Scroll-Effekt hinzuzufügen, wenn du Spalten hinzugefügt hast.</li>  <li>Scroll-Effekte werden auf der mobilen Version deiner Website nicht angezeigt.</li></ul></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-a-scroll-effect" level="3">Einen Scroll-Effekt hinzufügen</h2></div><div data-component-type="text"><div>Füge einen Effekt hinzu, um ein dynamisches Erlebnis für deine Website-Besucher zu schaffen. Du kannst verschiedenen Streifen verschiedene Effekte hinzufügen, also probiere die Optionen aus und erstelle spannende, einzigartige Seiten.</div></div><div data-component-type="heading"><h2 id="" level="4">Um einen Scroll-Effekt hinzuzufügen:</h2></div><div data-component-type="text"><ol>
  <li>Klicke im Editor auf den Streifen.</li>  <li>Klicke auf das Symbol für <strong>Hintergrund-Scroll-Effekte</strong> <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2020/06/14/0d7a15a7-9ef2-4a0c-8594-2082193c0727/7268557d-4f5a-477c-8f66-6c18163c31f0.png" />.</li>  <li>Wähle einen Scroll-Effekt aus. </li>  <li>(Optional) <a data-composite="true" href="https://support.wix.com/de/article/wix-editor-deine-website-speichern-in-der-vorschau-anzeigen-und-veröffentlichen#previewing-your-site" target="">Zeige eine Vorschau deiner Website an</a>, um die Scroll-Effekte in Aktion zu sehen.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/10/14/1bb99c6a-c1ee-4a92-a21d-0b976233f5f1/fa0bc816-e20d-4e27-af39-808e60a9cc41.png" alt="Screenshot des Panels für den Hintergrund-Scroll-Effekt für Streifen im Wix Editor." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="available-scroll-effects" level="3">Verfügbare Scroll-Effekte</h2></div><div data-component-type="text"><div>Wähle den Effekt „Einblenden“ oder „Ausblenden“, um das Engagement der Besucher zu steigern.</div></div><div data-component-type="text"><div>Klicke unten auf eine Option, um mehr über die einzelnen Effekte zu erfahren.</div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Hinweis:</div><div class="info-content"><div>Die verfügbaren Effekte variieren je nach ausgewähltem Streifenhintergrund (z. B. Bild, Video oder Farbe).</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Einblenden</h4><div class="collapsible-content"><div>Wenn Besucher auf der Seite nach unten scrollen, wird der Hintergrund von Weiß eingeblendet. Wenn sie wieder nach oben scrollen, werden Bild, Video oder Farbe wieder ausgeblendet.</div><div><br /></div><div><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/08/11/b144dfc5-fb6e-469a-a0ca-da2e75290275/f4e1e376-2359-4810-b98d-7e8560420c1b.gif" /></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Ausblenden</h4><div class="collapsible-content"><div>Wenn Besucher auf der Seite nach unten scrollen, wird dein Hintergrund Weiß ausgeblendet. Wenn sie wieder nach oben scrollen, werden das Bild, das Video oder die Farbe wieder eingeblendet.</div><div><br /></div><div><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/08/11/86529b70-252b-4c3b-b08f-662657c7e514/b1fdb3d3-e43b-4813-9461-249265af2e9c.gif" /></div></div></div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Hinweis:</div><div class="info-content"><div>Um Scroll-Effekte zu erzeugen, wird das Streifenbild/-video so vergrößert, dass es die Seite ausfüllt. Um Verzerrungen zu vermeiden, verwende große, hochwertige Bilder und Videos.</div></div></div></div>

Erwecke deine Website zum Leben und ermutige deine Besucher, mit deinen Galerien zu interagieren, indem du Mouseover-Effekte anwendest.Füge farbige Überlagerungen hinzu, ändere die Farbe der Navigatio...

Wix Editor: Mouseover-Effekte auf deine Galerie anwenden

<div data-component-type="text"><div>Erwecke deine Website zum Leben und ermutige deine Besucher, mit deinen Galerien zu interagieren, indem du Mouseover-Effekte anwendest.</div><div><br /></div><div>Füge farbige Überlagerungen hinzu, ändere die Farbe der Navigationspfeile und passe die Form eines Bildes an, um die Aufmerksamkeit der Besucher zu erregen, wenn sie mit der Maus über ein Bild fahren.</div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Hinweis:</div><div class="info-content"><div>Zurzeit sind Mouseover-Effekte nur für Gittergalerien und bestimmte voreingestellte Designs von Slidergalerien verfügbar. Wenn du eine andere Galerie hast, aber Mouseover-Effekte hinzufügen möchtest, kannst du <a data-composite="true" href="https://support.wix.com/de/article/wix-editor-das-design-deiner-galerie-anpassen#changing-your-gallery-type" target="_blank">mit einem einzigen Klick zu einem dieser Designs wechseln</a>.</div></div></div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/5c3e602a-8647-41f7-bb22-686374bf97ce/2022/06/03/9e137f03-54b4-4d0e-88b2-91561f433939/53c4f58d-a13b-43dc-bc3d-c2e77b8e9095.gif" /></div></div><div data-component-type="heading"><h2 id="" level="3">Um Mouseover-Effekte auf deine Galerie anzuwenden:</h2></div><div data-component-type="text"><ol>
  <li>Klicke auf die Galerie in deinem Editor.</li>  <li>Klicke auf das Symbol für Design <img data-composite="true" src="https://d2eyqiy4n03ve6.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2015/08/06/4eff39fe-9315-4c5e-85c0-05f99ce8c414.png" />.</li>  <li>Klicke auf <strong>Design anpassen</strong>.</li>  <li>Klicke auf <strong>Mouseover</strong>.</li>  <li>Passe die folgenden Optionen an:
    <ul>
      <li><strong>Mouseover:</strong> Wähle eine Farbe, die über deine Bilder gelegt werden soll, und passe die Transparenz an.</li>      <li><strong>Navigationspfeile:</strong> Wähle eine Farbe für deine Navigationspfeile und passe deren Transparenz an.</li>      <li><strong>Ecken:</strong> Ändere die Form deiner Bilder, indem du die Ecken abrundest.</li>    </ul>  </li></ol></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Hinweis:</div><div class="info-content"><div>Die Anpassungsoptionen hängen vom gewählten Galeriedesign ab.</div></div></div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/5c3e602a-8647-41f7-bb22-686374bf97ce/2022/06/03/035cee93-d1da-41dc-9da8-f6fbf55bcb9d/89955cb0-20a8-4aa2-aedf-b319c89e2548.jpg" /></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Möchtest du einen Mouseover-Effekt entfernen?</div><div class="info-content"><div>Um einen Mouseover-Effekt aus deiner Galerie zu entfernen, ziehe einfach die Mouseover-Schieberegler auf 0 Prozent und setze die Eckenradien zurück auf 0 Pixel.</div></div></div></div>

Füge deiner Website Tiefe hinzu, indem du Scroll-Effekte zu Bildhintergründen hinzufügst.Das Hintergrund-Scrollen erzeugt einen einzigartigen Effekt, wenn Besucher auf deiner Website navigieren, und d...

Wix Editor: Scroll-Effekte zu Bildhintergründen hinzufügen

<div data-component-type="text"><div>Füge deiner Website Tiefe hinzu, indem du Scroll-Effekte zu Bildhintergründen hinzufügst.</div></div><div data-component-type="text"><div>Das Hintergrund-Scrollen erzeugt einen einzigartigen Effekt, wenn Besucher auf deiner Website navigieren, und du kannst entweder Fixiert oder Parallax anwenden, um dem Aussehen und Inhalt deiner Website zu entsprechen.</div></div><div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-title">Wichtig:</div><div class="info-content"><div>Du kannst Scroll-Effekte nur in der <a data-composite="true" href="https://support.wix.com/de/article/wix-editor-deine-website-speichern-in-der-vorschau-anzeigen-und-veröffentlichen#previewing-your-site" target="">Vorschau</a> oder auf deiner Live-Website sehen. Die Art, wie sie im Editor angezeigt werden, entspricht nicht der Darstellung auf der Live-Website.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-parallax-scrolling-to-a-background-image" level="3">Parallax-Scrolling zu einem Hintergrundbild hinzufügen</h2></div><div data-component-type="text"><div>Parallax-Scrolling auf Hintergrundbildern erzeugt ein Gefühl von Tiefe und Ebenen auf deiner Website.</div></div><div data-component-type="text"><div>Dein Seitenhintergrund und der Inhalt oben verschieben sich mit unterschiedlicher Geschwindigkeit, was ein tolles und unterhaltsames Erlebnis für deine Besucher schafft.</div></div><div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-title">Wichtig:</div><div class="info-content"><div>Parallax Scrolling wird auf der mobilen Version deiner Website nicht angezeigt.</div></div></div></div><div data-component-type="heading"><h2 id="" level="4">Um einen Parallax-Effekt hinzuzufügen:</h2></div><div data-component-type="text"><ol>
  <li>Öffne die entsprechende Seite in deinem Editor.</li>  <li>Klicke auf der linken Seite des Editors auf <strong>Website-Design</strong> <img data-composite="true" src="https://lh4.googleusercontent.com/NGhfYiQ_DgWkGYdWrvVIwfJDcQpmDHrE9WY8cYOOttpHUa8ipZRUayIj4ogzOvanaOM4d4WUA-xy73wbFcJqHPWhW_TJplazf_ymsrS928EU5K9qxdgKOIb0ZdHV5UOwwrzM-1TzgJLlCVQR7N4TakSlM6pbziOeVZg_bl93DoJWU1rBF_sJkg1k" />.</li>  <li>Fahre mit der Maus über den <strong>Seitenhintergrund</strong> und klicke auf <strong>Anpassen</strong>.</li>  <li>Klicke auf der Hintergrundbildvorschau auf <strong>Einstellungen</strong> <img data-composite="true" src="https://lh4.googleusercontent.com/eqvqTFBPOviyHY23ZuOVCXWqz4DHLmJ94uiiKUx3TyD0HsAhOCSDcjT-lw_XcP6qcNOR71NA7qNQd0k11Kz5PGCKB0huzmq7STCAVmZB55Mvm92vCpLdy-5nCJXtKkbBrr8Ghkbo=s0" />.</li>  <li>Wähle unter <strong>Scroll-Effekte</strong> die Option <strong>Parallax</strong> aus.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/07/16/440fed23-5a8a-40cc-becb-83a36d7877b8/b22d9b9f-345b-46bb-88ea-2df86a5deb9d.gif" alt="GIF, das eine Live-Website von Wix mit Parallax-Scrolling im Bildhintergrund zeigt" /></div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Hinweis:</div><div class="info-content"><div>Da dieser Effekt erfordert, dass das Bild die gesamte Seite ausfüllt, empfehlen wir, große, hochwertige Bilder als Seitenhintergrund zu verwenden.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-freeze-scrolling-to-your-background-image" level="3">Hintergrundbild ist beim Scrollen fixiert</h2></div><div data-component-type="text"><div>Füge dem Hintergrundbild deiner Seite einen Standbild-Effekt hinzu. Das bedeutet, dass sich dein Seitenhintergrund nicht bewegt, wenn Besucher nach oben oder unten scrollen, aber der Inhalt im oberen Bereich schon.</div></div><div data-component-type="text"><div>Dies ist der perfekte Effekt, um deine Website-Seiten raffiniert und dynamisch zu gestalten und deine Besucher zu ermutigen, weiter zu suchen.</div></div><div data-component-type="heading"><h2 id="" level="4">Um den Effekt „Bild ist fixiert“ hinzuzufügen:</h2></div><div data-component-type="text"><ol>
  <li>Öffne die entsprechende Seite in deinem Editor.</li>  <li>Klicke auf der linken Seite des Editors auf <strong>Website-Design</strong> <img data-composite="true" src="https://lh4.googleusercontent.com/NGhfYiQ_DgWkGYdWrvVIwfJDcQpmDHrE9WY8cYOOttpHUa8ipZRUayIj4ogzOvanaOM4d4WUA-xy73wbFcJqHPWhW_TJplazf_ymsrS928EU5K9qxdgKOIb0ZdHV5UOwwrzM-1TzgJLlCVQR7N4TakSlM6pbziOeVZg_bl93DoJWU1rBF_sJkg1k" />.</li>  <li>Fahre mit der Maus über den <strong>Seitenhintergrund</strong> und klicke auf <strong>Anpassen</strong>.</li>  <li>Klicke auf der Hintergrundbildvorschau auf <strong>Einstellungen</strong> <img data-composite="true" src="https://lh4.googleusercontent.com/eqvqTFBPOviyHY23ZuOVCXWqz4DHLmJ94uiiKUx3TyD0HsAhOCSDcjT-lw_XcP6qcNOR71NA7qNQd0k11Kz5PGCKB0huzmq7STCAVmZB55Mvm92vCpLdy-5nCJXtKkbBrr8Ghkbo=s0" />.</li>  <li>Wähle unter <strong>Scroll-Effekte</strong> die Option <strong>Bild ist fixiert</strong> aus.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/07/23/58bd0b14-a587-45e8-81a5-1c3b6c133dc4/0d206d15-287c-46a6-a8dd-cdaae51c5a85.gif" alt="GIF, das eine Live-Website von Wix mit dem Effekt „Beim Scrollen fixiert“ im Bildhintergrund zeigt" /></div></div>

Erwecke deine Boxen, Repeater und Elemente zum Leben, indem du Mouseover-Effekte hinzufügst. Dies sind Effekte, die deine Besucher sehen, wenn sie mit der Maus über die von dir ausgewählten Elemente f...

Wix Editor: Mouseover-Effekte hinzufügen und einrichten

<div data-component-type="text"><div>Erwecke deine <a data-composite="true" href="https://support.wix.com/de/article/wix-editor-eine-box-hinzufügen-und-einrichten" target="">Boxen</a>, <a data-composite="true" href="https://support.wix.com/de/article/wix-editor-repeater-listen-gitter-hinzufügen-und-einrichten" target="">Repeater</a> und Elemente zum Leben, indem du Mouseover-Effekte hinzufügst. Dies sind Effekte, die deine Besucher sehen, wenn sie mit der Maus über die von dir ausgewählten Elemente fahren.</div></div><div data-component-type="text"><div>Du kannst Elemente so einrichten, dass sie erscheinen oder verschwinden, bestimmte Effekte habe nund die Farbe ändern, wenn man mit der Maus darüberfährt. Du kannst auch den Zeitpunkt deines Effekts festlegen, um sein Potenzial zu maximieren.</div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/10/11/7aef50c2-b1f8-4e0f-93a1-7433b01432c6/7892c0eb-ce2e-4f3a-b93d-fbeb8de76e3a.gif" alt="GIF mit Mouseover-Effekt, der auf einer Website von Wix verwendet wird. Beim Mouseover wird ein Schmetterling angezeigt, der mit den Flügeln schlägt." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-1-add-and-design-an-element" level="3">Schritt 1 | Ein Element hinzufügen und gestalten</h2></div><div data-component-type="text"><div>Mouseover-Effekte sorgen für mehr Spaß und Bewegung auf deiner Website. Füge hierzu entweder eine Box oder einen Repeater aus dem <strong>Elemente hinzufügen</strong>-Panel hinzu.</div></div><div data-component-type="text"><div>Klicke unten auf eine Option, um mehr über das Hinzufügen von Elementen zu erfahren: </div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Box</h4><div class="collapsible-content"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Öffne deinen Editor</a>.</li>  <li>Klicke auf der linken Seite des Editors auf <strong>Hinzufügen</strong> <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/65d5031a-8d20-483c-b08f-0a758e1cf2fd/68a0236f-77f4-43c6-931f-8298ae691a9e/2022/11/17/01f24c8b-2ea3-4d06-a26d-9975a43d617e/a79e245b-4870-4444-ba82-248eca4eb9a7.png" />.</li>  <li>Klicke auf <strong>Box</strong>.</li>  <li>Klicke oder ziehe eine Box, um sie zur Seite hinzuzufügen.<br /> <strong>Tipp:</strong> Klicke auf <strong>Mouseover-Boxen</strong> und wähle eine Box aus, wenn du eine vorgefertigte Mouseover-Box verwenden möchtest. </li>  <li>(Optional) Du kannst <a data-composite="true" href="https://support.wix.com/de/article/wix-editor-eine-box-hinzufügen-und-einrichten#customizing-your-box-design" target="">deine Box gestalten</a> und bei Bedarf Elemente hinzufügen. </li></ol><div><br /></div><div><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/10/11/1d3077ab-7957-49ad-8838-843d5591ed13/8c818c9e-5ca8-4522-a33f-5b98ac044f1d.png" /></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Einen Repeater hinzufügen</h4><div class="collapsible-content"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Öffne deinen Editor</a>.</li>  <li>Klicke auf der linken Seite des Editors auf <strong>Hinzufügen</strong> <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/65d5031a-8d20-483c-b08f-0a758e1cf2fd/68a0236f-77f4-43c6-931f-8298ae691a9e/2022/11/17/01f24c8b-2ea3-4d06-a26d-9975a43d617e/a79e245b-4870-4444-ba82-248eca4eb9a7.png" />.</li>  <li>Klicke auf <strong>Liste</strong>.</li>  <li>Klicke auf <strong>Repeater</strong>.</li>  <li>Klicke oder ziehe einen Repeater, um ihn zur Seite hinzuzufügen.  </li>  <li>(Optional) Du kannst <a data-composite="true" href="https://support.wix.com/de/article/wix-editor-repeater-listen-gitter-hinzufügen-und-einrichten#designing-repeater-items" target="">deinen Repeater gestalten</a> und bei Bedarf Elemente hinzufügen. </li></ol><div><br /></div><div><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/10/11/8c5d812f-8f12-4273-a696-60e626c6f52d/69a0787d-714b-4751-ac58-4bd928ed4153.png" /></div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-2-access-hover-mode" level="3">Schritt 2 | Auf den Mouseovermodus zugreifen</h2></div><div data-component-type="text"><div>Nachdem du dein Element hinzugefügt und gestaltet hast, greife auf den Mouseovermodus zu, um mit dem Hinzufügen von Mouseover-Effekten zu beginnen. Hier kannst du festlegen, was Besucher sehen, wenn sie mit der Maus über deine Box oder deinen Repeater fahren.</div></div><div data-component-type="heading"><h2 id="" level="4">Um auf den Mouseovermodus zuzugreifen:</h2></div><div data-component-type="text"><ol>
  <li>Wähle deine Box/deinen Repeater im Editor aus.</li>  <li>Je nach Element hast du folgende Möglichkeiten, um den Mouseovermodus aufzurufen:
    <ul>
      <li><strong>Box:</strong> Klicke auf das Symbol für <strong>Mouseover-Effekte</strong> <img data-composite="true" src="https://lh5.googleusercontent.com/4G8nL6yqsuPiM-i8g38LbxleCliWtXJ9COztpynjkqbDl4Ewgox2oifnFytJ2Y7OyNseZ5abSbKW6ezusMIm40UWRTaH83zHDl49ffaGMd5RajhyzJE9Ho8fSbmW0B0c92wgSnVl" />.</li>      <li><strong>Repeater: </strong>Klicke auf einen beliebigen Container im Repeater und wähle das Symbol für <strong>Mouseover-Effekte</strong> <img data-composite="true" src="https://lh5.googleusercontent.com/4G8nL6yqsuPiM-i8g38LbxleCliWtXJ9COztpynjkqbDl4Ewgox2oifnFytJ2Y7OyNseZ5abSbKW6ezusMIm40UWRTaH83zHDl49ffaGMd5RajhyzJE9Ho8fSbmW0B0c92wgSnVl" /> aus.</li>    </ul>  </li>  <li>Klicke auf <strong>Jetzt starten</strong>.</li></ol></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Tipp:</div><div class="info-content"><div>Sobald du den Mouseovermodus zum ersten Mal aufgerufen hast, kannst du über die Tabs am oberen Rand des Elements zwischen dem normalen und dem Mouseovermodus wechseln.</div></div></div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/10/11/463673fd-2067-4c9f-b030-3b8a24857b27/150dcfce-f383-4f83-b49f-5cd6cd52f5a4.png" alt="Screenshot einer Box im Editor, in der die Standard- und Mouseover-Tabs hervorgehoben sind." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-3-add-hover-interactions-to-your-element" level="3">Schritt 3 | Mouseover-Effekte zu deinem Element hinzufügen</h2></div><div data-component-type="text"><div><br /></div><div>Im Mouseovermodus kannst du Elemente anzeigen oder verschwinden lassen und tolle Effekte hinzufügen. Alles passiert gleichzeitig, wenn Besucher mit der Maus über deine Box oder dein Repeater-Element fahren. </div></div><div data-component-type="heading"><h2 id="" level="4">Wähle aus, was du tun möchtest:</h2></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Elemente hinzufügen, die bei Mouseover angezeigt werden</h4><div class="collapsible-content"><ol>
  <li>Klicke oben links auf das Symbol <strong>Zu Mouseover hinzufügen</strong> <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2020/07/02/de5afcf6-ced0-44cd-b07f-42bd5e53364d/86a3c2e1-cc9c-494c-b0a0-7514433e0e80.png" />, um Elemente hinzuzufügen, die bei Mouseover angezeigt werden. </li>  <li>Klicke auf das Element, das du der Box oder dem Repeater hinzufügen möchtest.<br />
</li></ol><div><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/10/16/22b7aab2-ce14-4bf7-92c1-3779a5ee6d24/4599069f-6ae9-4b84-90d1-a6e50985a345.png" /></div><div><strong>Hinweis:</strong> Nicht alle Elemente können im Mouseovermodus hinzugefügt werden.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Elemente bei Mouseover ausblenden</h4><div class="collapsible-content"><div>Lass ein Element verschwinden, wenn Besucher mit der Maus darüber fahren. Du kannst bestimmte Elemente ausblenden oder die gesamte Box oder den Repeater.</div><div><br /></div><div>Wähle das Element aus und drücke die <strong>Entf</strong>-Taste auf deiner Tastatur oder klicke auf das Symbol für <strong>Element ausblenden</strong> <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2020/06/13/5ddfce41-1ea9-49a7-83d8-0ceef0167d71/1a9d4f68-6b2f-4ed8-a79e-75686785bc3f.png" />.<br />
</div><div><strong>Tipp: </strong></div><div>Klicke oben links auf das Symbol für <strong>Ausgeblendet bei Mouseover</strong> <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2020/07/02/835b6f66-6611-4808-9b75-7fb0f14c3437/df08a290-cf02-4d11-92c8-4c46d1efb5f9.png" />, um auf die Liste der ausgeblendeten Elemente zuzugreifen und diese zu verwalten. </div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Wähle einen Effekt für das Element bei Mouseover</h4><div class="collapsible-content"><div>Du kannst jedem Element in deiner Box oder jedem Repeater-Element einen Effekt hinzufügen, einschließlich der Box/des Repeater-Elements selbst. Lasse Elemente wachsen, schrumpfen, sich drehen oder zur Seite neigen.</div><ol>
  <li>Wähle die Box/den Repeater in deinem Editor aus.</li>  <li>Klicke auf <strong>Effekt auswählen</strong>.</li>  <li>Wähle einen der verfügbaren Effekte aus.<br /> <strong>Tipp:</strong> Wähle den Effekt <strong>Combo</strong>, um mehrere Effekte zu kombinieren. Mit diesem Effekt kannst du dein Element zum Beispiel gleichzeitig vergrößern und rotieren.</li>  <li>(Optional) Klicke auf <strong>Anpassen</strong>, um den Effekt auf deine individuellen Bedürfnisse zuzuschneiden.</li></ol><div><br /></div><div>Nachdem du einen Effekt für dein Element ausgewählt hast, lege den Zeitpunkt für dessen Erscheinen fest. </div><ol>
  <li>Wähle das Element in deinem Editor aus.</li>  <li>Klicke auf das Symbol für <strong>Zeitpunkt</strong> <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2020/11/16/02c478a1-3f29-47fb-9e44-18d67903ba61/6f1d33b5-0a3e-4c02-b0af-41a025b7eda0.png" />.</li>  <li>Verwende die verfügbaren Optionen, um den Zeitpunkt für deinen Effekt festzulegen:
    <ul>
      <li><strong>Dauer:</strong> Ziehe den Schieberegler, um die Dauer (in Sekunden) deines Effekts auszuwählen, nachdem Besucher mit der Maus über das Element fahren.</li>      <li><strong>Verzögerung:</strong> Ziehe den Schieberegler, um die Verzögerung (in Sekunden) von der Zeit, in der deine Besucher mit der Maus über das Element fahren, bis zu dem Moment, in dem sie den Effekt sehen, auszuwählen.</li>      <li><strong>Easing:</strong> Wähle aus, wie dein Element vom regulären Zustand zum Effekt übergehen soll, nachdem Besucher mit der Maus darüber fahren (z. B. Zunahme und Nachlassen des Effekts). </li>    </ul>  </li></ol></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">(Nur Container) Das Design des Containers beim Mouseover ändern</h4><div class="collapsible-content"><div>Du kannst das Design der Box im Mouseovermodus bearbeiten, um die Hintergrundfarbe, den Rand, die Ecken und den Schatten zu ändern. </div><ol>
  <li>Wähle die Box in deinem Editor aus.</li>  <li>Klicke oben im Feld auf den Tab <strong>Mouseover</strong>. </li>  <li>Klicke auf das Symbol für <strong>Design</strong> <img data-composite="true" src="https://lh4.googleusercontent.com/4O8XC2DBehwJKcPpek4YdvPZFUcQfbQiK6vOyYtovzErBWB_HjLgWHG1aekjaqsK1EUhkZ_Wpu_Iff8fipzak6hfFJ_bI7uK5qFEE_GbfxSgIiFMgoPlJbrlWz5aoLxrPxaoftXQ" />.</li>  <li>Wähle den entsprechenden Tab auf der linken Seite des Panels aus, um das Design zu bearbeiten: 
    <ul>
      <li><strong>Füllfarbe &amp; Deckkraft:</strong> Ziehe den Schieberegler, um die Deckkraft des Hintergrunds anzupassen, und klicke auf das Farbfeld, um die Farbe zu bearbeiten. </li>      <li><strong>Rand :</strong> Klicke auf das Farbfeld, um die Farbe zu bearbeiten, und ziehe die Schieberegler, um die <strong>Deckkraft &amp; Farbe</strong> und <strong>Breite</strong> des Randes anzupassen. </li>      <li><strong>Ecken:</strong> Wähle eine Ecke aus, um die Rundung der Ecken anzupassen. Klicke auf das Symbol für Link, um alle Ecken gleich zu gestalten.  </li>      <li><strong>Schatten:</strong> Klicke auf den Schalter, um einen Schatten zu aktivieren, und bearbeite dann den Winkel, den Abstand, die Größe und vieles mehr. </li>    </ul>  </li></ol><div><strong>Tipp:</strong> Du kannst auch <a data-composite="true" href="https://support.wix.com/de/article/wix-editor-mouseover-effekte-hinzufügen-und-einrichten" target="">das Design bestimmter Elemente innerhalb der Box im Mouseovermodus ändern</a>. </div><div><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2022/05/02/ed677d56-dee4-483a-bd0e-721dd41b9672/de4f34f7-c4bd-43f7-a0e9-c87db4565a1c.png" /></div></div></div></div>

Verwende Animationen, um deine Website zum Leben zu erwecken. Füge Effekte wie „Einschweben“ und „Ausdehnen“ hinzu, um fantasievolle, ansprechende Seiten zu erstellen. Du kannst auswählen, wie und wan...

Wix Editor: Eine Animation hinzufügen und anpassen

<div data-component-type="text"><div>Verwende Animationen, um deine Website zum Leben zu erwecken. Füge Effekte wie „Einschweben“ und „Ausdehnen“ hinzu, um fantasievolle, ansprechende Seiten zu erstellen. Du kannst auswählen, wie und wann deine Animationen abgespielt werden sollen - nur einmal, beim Scrollen, in Loop und mehr.</div></div><div data-component-type="text"><div>Du kannst Animationen auf eine Vielzahl von Elementen anwenden und sogar unterschiedliche Effekte auf dasselbe Element auf deiner Desktop- und Mobile-Website anwenden. <a data-composite="true" href="https://support.wix.com/de/article/wix-editor-animations-und-scroll-effekte-auf-deiner-mobilen-website-verwenden" target="">Unsere Mobile-Animationen</a> sind für kleinere Bildschirme geeignet, sodass du deine Besucher auf jedem Gerät beeindrucken kannst.</div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/10/27/55dc04b3-50cb-4d05-ade2-500451d1b712/3f99c39f-9485-40ff-a7e8-2f2a056d6edd.gif" alt="Gif, das verschiedene Bildanimationen zeigt, wenn durch die Website gescrollt wird" /></div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Probleme mit deiner Animation?</div><div class="info-content"><div><a data-composite="true" href="https://support.wix.com/de/article/wix-editor-fehlerbehebung-für-animationen-auf-deiner-live-website#troubleshooting-your-animations" target="_blank">Folge unseren Schritten hier</a>, damit sie auf deiner Live-Website wie erwartet funktionieren.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-animation-to-an-element" level="3">Animation zu einem Element hinzufügen</h2></div><div data-component-type="text"><div>Füge eine Animation zu deinen Elementen hinzu, um deine Website dynamisch und ansprechend zu gestalten. Jede Animation hat ihren eigenen Effekt, sodass du sie mit verschiedenen Elementen kombinieren kannst und bei deinen Besuchern einen bleibenden Eindruck hinterlässt.</div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Tipp:</div><div class="info-content"><div>Du kannst einer Gruppe von Elementen eine Animation hinzufügen, indem du die Gruppe auswählst und auf das Symbol für Animation <img data-composite="true" src="https://d2eyqiy4n03ve6.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2015/08/09/440e8afd-e063-4c4d-a21a-2014df55796f.png" /> klickst.</div></div></div></div><div data-component-type="heading"><h2 id="" level="4">Um eine Animation hinzuzufügen:</h2></div><div data-component-type="text"><ol>
  <li>Klicke in deinem Editor auf das entsprechende Element.</li>  <li>Klicke auf das Symbol für <strong>Animation</strong> <img data-composite="true" src="https://d2eyqiy4n03ve6.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2015/08/09/440e8afd-e063-4c4d-a21a-2014df55796f.png" />.</li>  <li>Wähle eine Animation aus den verfügbaren Optionen aus.
    <ul>
      <li><strong>Entrance:</strong> Die Animation wird einmal abgespielt, wenn das ausgewählte Element auf dem Bildschirm angezeigt wird.</li>      <li><strong>Loop:</strong> Die Animation wird in einer Endlosschleife abgespielt.</li>      <li><strong>Scroll:</strong> Die Animation wird abgespielt, wenn das Element in die Ansicht gescrollt wird.</li>    </ul>  </li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/06/25/552af7bd-1e21-45f5-803c-a4edae294dc4/7315905f-eeec-41e0-b947-81a566dd6f03.gif" alt="Gif, das eine Reihe verschiedener Animationen zeigt, die in einer Schleife angezeigt werden können" /></div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Hinweis:</div><div class="info-content"><div>Elemente in deiner Kopfzeile werden nur einmal beim ersten Besuch der Seite animiert.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="customizing-an-animation" level="3">Eine Animation anpassen</h2></div><div data-component-type="text"><div>Nachdem du eine Animation zu einem Element hinzugefügt hast, kannst du diese so anpassen, dass sie sich so verhält, wie du möchtest und wie es zu deiner Website passt.</div></div><div data-component-type="text"><div>Passe Einstellungen wie Leistung, Richtung und Verzögerung an, um deine Besucher zu beeindrucken und zu begeistern.</div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Hinweis:</div><div class="info-content"><div>Die verfügbaren Anpassungsoptionen hängen von der ausgewählten Animation ab.</div></div></div></div><div data-component-type="heading"><h2 id="" level="4">Um die Animation anzupassen:</h2></div><div data-component-type="text"><ol>
  <li>Klicke in deinem Editor auf das entsprechende Element.</li>  <li>Klicke auf das Symbol für <strong>Animation</strong> <img data-composite="true" src="https://d2eyqiy4n03ve6.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2015/08/09/440e8afd-e063-4c4d-a21a-2014df55796f.png" />.</li>  <li>Klicke auf <strong>Anpassen</strong> und verwende die folgenden Optionen, um deine Animation anzupassen: 
    <ul>
      <li><strong>Leistung:</strong> Klicke auf das Dropdown-Menü und wähle aus, wie stark die Animation beim Abspielen ist.</li>      <li><strong>Richtung:</strong> Wähle, aus welcher Richtung die Animation ausgeführt wird (z. B. im Uhrzeigersinn oder von rechts).</li>      <li><strong>Abstand: </strong>Verwende den Schieberegler, um den Abstand zwischen dem Start- und dem Endpunkt des Effekts zu ändern.</li>      <li><strong>Dauer:</strong> Verwende den Schieberegler, um festzulegen, wie lange die Animation abgespielt werden soll.</li>      <li><strong>Verzögerung:</strong> Verwende den Schieberegler, um die Verzögerung zwischen dem Laden der Seite und dem Beginn der Animation zu erhöhen oder zu verringern.</li>      <li><strong>Animationstyp:</strong> Wähle beim Scrollen zwischen In-, Out- oder kontinuierlicher Animation.</li>      <li><strong>Bewegungsstil:</strong> Wähle die Intensität der Bewegung aus, zum Beispiel leicht oder mäßig.</li>    </ul>  </li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/06/25/4f98ea4d-c496-4aed-bf3c-e306f532ff56/315ea9ba-9865-429d-80bf-808500df8d6f.png" alt="Screenshot der Einstellungen für die Spiegelanimation, die verschiedene Einstellungen wie Richtung und Dauer der Animation anzeigt" /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-animations-to-your-mobile-site" level="3">Animationen zu der mobilen Version deiner Website hinzufügen</h2></div><div data-component-type="text"><div>Du kannst nicht nur Animationen zu Elementen auf deiner Desktop-Website hinzufügen, sondern sie auch zu der mobilen Version deiner Website hinzufügen, damit deine Besucher ein großartiges Browser-Erlebnis auf all ihren Geräten erhalten.</div></div><div data-component-type="text"><div>Animationen für Mobile wurden speziell für kleinere Bildschirmauflösungen und -größen entwickelt, sodass du dir keine Gedanken über die Abstände machen musst. </div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Hinweis:</div><div class="info-content"><div>Animationseffekte, die du auf dem Desktop hinzufügst, werden nicht auf deine Mobile-Website übertragen, da sie für unterschiedliche Bildschirmgrößen optimiert sind. Wenn du möchtest, dass ein Element auch in der Mobile-Ansicht Mobile animiert wird, folge den untenstehenden Schritten.</div></div></div></div><div data-component-type="heading"><h2 id="" level="4">Um eine Animation zu der mobilen Version hinzuzufügen:</h2></div><div data-component-type="text"><ol>
  <li>Öffne deinen <a data-composite="true" href="https://support.wix.com/de/article/wix-editor-den-mobile-editor-aufrufen" target="_blank">Mobile-Editor</a>.</li>  <li>Klicke auf das entsprechende Element.</li>  <li>Klicke auf das Symbol für <strong>Animation</strong> <img data-composite="true" src="https://d2eyqiy4n03ve6.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2015/08/09/440e8afd-e063-4c4d-a21a-2014df55796f.png" />.</li>  <li>Wähle eine Animation aus den verfügbaren Optionen aus.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/07/10/3477bba7-63ae-455f-8f8a-dd5804e5379a/bc38ef96-1084-40cd-ac94-e4db745283b6.gif" alt="Eine Animation für ein Element im Mobile-Editor auswählen" /></div></div><div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-title">Wichtiger Hinweis zu Velo:</div><div class="info-content"><div>Wenn du Velo (Code) verwendest, um ein Element ein- oder auszublenden, muss die Animation auch über Velo eingestellt werden.</div></div></div></div>

Derzeit gibt es im Editor keinen Lauftext-Effekt (auch bekannt als Marquee-Effekt).Du kannst einen ähnlichen Effekt mit Diashows in voller Breite erzielen. Mehr erfahren.Zusätzlich kannst du den folge...

Wix Editor Funktionsvorschlag: Lauftext-Effekt (Marquee-Effekt)

<div data-component-type="text"><div>Derzeit gibt es im Editor keinen Lauftext-Effekt (auch bekannt als Marquee-Effekt).</div></div><div data-component-type="text"><div>Du kannst einen ähnlichen Effekt mit Diashows in voller Breite erzielen. <a href="https://support.wix.com/de/article/eine-diashow-hinzuf%C3%BCgen-1663275">Mehr erfahren.</a></div></div><div data-component-type="text"><div>Zusätzlich kannst du den folgenden Code im <a href="https://support.wix.com/de/article/html-code-hinzuf%C3%BCgen-921806">HTML-Element</a> verwenden, um einen ähnlichen Effekt zu erzeugen:</div></div><div data-component-type="text"><div> <strong>&lt;marquee behaviour = &quot;scroll&quot; direction = &quot;left&quot;&gt; HTML-Lauftext hier &lt;/ marquee&gt;</strong></div></div><div data-component-type="text"><div>Wir arbeiten stets daran, unsere Produkte zu aktualisieren und zu verbessern und dein Feedback ist uns sehr wichtig.<br /><br /></div><div>Wenn du dir diese Funktion wünschst, klicke bitte auf <strong>Stimme abgeben</strong> und wir halten dich auf dem Laufenden.</div></div>

Zurzeit unterstützt Wix die Ausblend-Funktion für Textelemente nicht.Alternativ kannst du einen ähnlichen Effekt erzeugen, indem du deinen Text aufteilst und auf jedes Element in verschiedenen Zeitabs...

Wix Editor Funktionsvorschlag: Text ausblenden

<div data-component-type="text"><div>Zurzeit unterstützt Wix die Ausblend-Funktion für Textelemente nicht.</div></div><div data-component-type="text"><div>Alternativ kannst du einen ähnlichen Effekt erzeugen, indem du deinen Text aufteilst und auf jedes Element in verschiedenen Zeitabständen <a data-composite="true" href="https://support.wix.com/de/article/wix-editor-eine-animation-hinzufügen-und-anpassen" target="_blank">Animationen anwendest</a>.</div></div><div data-component-type="heading"><h2 id="" level="4">Um eine Animation zu deinem Text hinzuzufügen:</h2></div><div data-component-type="text"><ol>
  <li>Wähle ein Textelement in deinem Editor aus.</li>  <li>Klicke auf das Symbol für <strong>Animation</strong> <img data-composite="true" src="https://d2eyqiy4n03ve6.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2015/08/09/440e8afd-e063-4c4d-a21a-2014df55796f.png" />.</li>  <li>Wähle einen Effekt aus und klicke auf <strong>Anpassen</strong>, um die Zeiteinstellungen anzupassen (z. B. Dauer und Verzögerung).</li>  <li>Wiederhole die Schritte 1-3 für jedes Textfeld, das du animieren möchtest.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2023/06/08/f3ef7636-96b7-499c-93e0-02eef03d7420/0756fd60-8ca7-4f9a-a2bb-04f640eed9eb.png" alt="Die Animationseinstellungen für ein Textelement im Editor. Der Cursor fährt über den Schieberegler, der die Verzögerung steuert." /></div></div><div data-component-type="text"><div>Wir arbeiten konstant daran, unsere Produkte zu aktualisieren und zu verbessern. Dein Feedback ist uns daher sehr wichtig.</div></div>

Zurzeit unterstützt Wix das Hinzufügen und Anpassen von Unschärfe-Effekten auf Streifen, Spalten und Container-Boxen auf deiner Website nicht.Wir arbeiten konstant daran, unsere Produkte zu aktualisie...

Wix Editor Funktionsvorschlag: Unschärfe-Effekte zu Streifen, Spalten und Containern hinzufügen

<div data-component-type="text"><div>Zurzeit unterstützt Wix das Hinzufügen und Anpassen von Unschärfe-Effekten auf Streifen, Spalten und Container-Boxen auf deiner Website nicht.</div></div><div data-component-type="text"><div>Wir arbeiten konstant daran, unsere Produkte zu aktualisieren und zu verbessern. Dein Feedback ist uns daher sehr wichtig. </div></div><div data-component-type="text"><div>Wenn du dir diese Funktion wünschst, klicke bitte auf <strong>Stimme abgeben</strong> und wir halten dich über alle Neuigkeiten dazu auf dem Laufenden.</div></div>

Textmasken eignen sich hervorragend für kurze Textabschnitte, die die Aufmerksamkeit deiner Besucher erregen sollen. Sie bieten die Möglichkeit, ein Bild, Video oder einen Farbverlauf anzuzeigen, soda...

Wix Editor: Textmasken hinzufügen und anpassen

<div data-component-type="text"><div>Textmasken eignen sich hervorragend für kurze Textabschnitte, die die Aufmerksamkeit deiner Besucher erregen sollen. Sie bieten die Möglichkeit, ein Bild, Video oder einen Farbverlauf anzuzeigen, sodass dein Text auf der Seite wirklich hervorsticht.</div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/9432a2ad-f01d-4a3d-ae53-370c37e15e62/2023/11/03/0d860607-9020-456c-8957-3feea9d91130/fead554e-e689-4706-a768-a0db8a292745.gif" alt="GIF des Texts „Untold Stories“, in den Buchstaben wird die Vogelperspektive eines Waldes gezeigt." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-a-text-mask-element" level="3">Ein Textmaskenelement hinzufügen</h2></div><div data-component-type="text"><div>Füge zunächst ein Textmaskenelement zu deiner Website hinzu.</div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Empfehlung:</div><div class="info-content"><div>Um die beste Leistung deiner Website auf Mobilgeräten zu gewährleisten, empfehlen wir, bis zu 10 Textmasken pro Seite hinzuzufügen.</div></div></div></div><div data-component-type="heading"><h2 id="" level="4">Um ein Textmaskenelement hinzuzufügen:</h2></div><div data-component-type="text"><ol>
  <li>Öffne die entsprechende Seite im Editor.</li>  <li>Klicke auf <strong>Elemente hinzufügen</strong> <img data-composite="true" src="https://lh6.googleusercontent.com/wxyz6iTTXelz2xXwuasGwpKeKXJ48QqQbsqnvNHXPPFhUoFwEpbyvVnUAUuu5P8Lb49aWypUXNJKNXLtraRABJlDtAArfyAtS2Q098MAGk2dUow8dG6qo4arZexOqrvH0MydkF_f3lmFOB_hYV8O_KKJqhaDEm8mj3NJ6n9VIGrR5rUn20dQN0moP1cm" />.</li>  <li>Klicke auf <strong>Text</strong>.</li>  <li>Klicke auf <strong>Textmaske</strong>.</li>  <li>Ziehe ein Textmaskendesign, das dir gefällt, auf deine Seite. <br /> <strong>Tipp:</strong> Einige unserer Designs enthalten einen Videohintergrund. Fahre mit der Maus über ein Design, um es in Aktion zu sehen.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/13691038-5aa8-4672-9b95-348c0733cabc/2023/10/02/0a743b40-e97f-4e2e-a1db-7c4fb9e564c6/3f81e574-9fe1-42a7-b80a-bc440ed8d1d2.png" alt="Screenshot, der das Hinzufügen-Panel in deinem Editor und die Option zum Hinzufügen einer Textmaske zu deiner Website zeigt" /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="changing-the-text-on-a-text-mask" level="3">Den Text einer Textmaske ändern</h2></div><div data-component-type="text"><div>Sobald du dein Textmaskenelement hinzugefügt hast, kannst du mit der Anpassung beginnen. Ändere zunächst den Text.</div></div><div data-component-type="heading"><h2 id="" level="4">Um den Text zu ändern:</h2></div><div data-component-type="text"><ol>
  <li>Klicke im Editor auf das Textmaskenelement.</li>  <li>Klicke <strong>Text ändern</strong>.</li>  <li>Gib unter <strong>Eigenen Text hinzufügen</strong> deinen Text ein. <br /> <strong>Hinweis:</strong> Der Text wird automatisch gespeichert.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/06/25/fd88627b-0a8b-4d23-80c3-bac3d42ef0e5/4a8d09c5-7f83-4111-b944-6e23bd47d4af.png" alt="Screenshot, der die Maske für hervorgehobenen Text und die Option zum Ändern des Texts zeigt." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="resizing-a-text-mask-element" level="3">Die Größe eines Textmaskenelements ändern</h2></div><div data-component-type="text"><div>Ändere als Nächstes die Größe des Textmaskenelements, damit es perfekt auf deine Seite passt.</div></div><div data-component-type="heading"><h2 id="" level="4">Um die Größe einer Textmaske zu ändern:</h2></div><div data-component-type="text"><ol>
  <li>Klicke in deinem Editor auf das Element.</li>  <li>Ziehe die Ziehpunkte des Elements, um es zu vergrößern oder zu verkleinern.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/06/25/304f28f8-46b7-44cb-a680-f1067bab26b9/f45c9cd8-8e14-4f89-b0a0-457933232e08.gif" alt="Gif, das die Bewegung der Ziehpunkte des Elements zeigt. Sie bewegen sich hinein und heraus, um die Größenveränderung zu zeigen." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="designing-a-text-mask-element" level="3">Ein Textmaskenelement gestalten</h2></div><div data-component-type="text"><div>Abschließend kannst du deiner Textmaske den letzten Feinschliff verpassen, indem du das Design änderst.</div></div><div data-component-type="heading"><h2 id="" level="4">Um eine Textmaske zu gestalten:</h2></div><div data-component-type="text"><ol>
  <li>Klicke im Editor auf das Textmaskenelement.</li>  <li>Klicke auf das Symbol für Design <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/9432a2ad-f01d-4a3d-ae53-370c37e15e62/2023/01/15/da3a0953-fac9-4714-99c3-5143a7309f78/8c0dcbc6-53e9-4783-b922-42b912ec5dd3.png" />.</li>  <li>Wähle aus, wie du deine Textmaske gestalten möchtest:</li></ol></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Die Füllung anpassen  </h4><div class="collapsible-content"><ol>
  <li>Klicke auf das Symbol für Füllen <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/13691038-5aa8-4672-9b95-348c0733cabc/2023/09/13/6193cc04-dbe4-49c6-880b-ecc7f6380896/7ac89b60-de86-4819-8bc8-93e9e5e70439.png" />.</li>  <li>Klicke im Tab <strong>Medien</strong> auf <strong>Medien ändern</strong>.</li>  <li>Ziehe den Schieberegler, um die Deckkraft der Medienfüllung anzupassen.</li>  <li>(Optional) Aktiviere den Schalter <strong>Farbüberlagerung anwenden</strong>, um eine Farbebene über dem Hintergrund hinzuzufügen. <br /><strong>Tipp:</strong> Unter <strong>Mischmodus</strong> kannst du die Deckkraft der Überlagerung festlegen und auswählen, wie sie überblendet werden soll.</li>  <li>Scrolle nach oben und klicke auf den Tab <strong>Farbverlauf</strong>.</li>  <li>Klicke neben dem Schieberegler auf das Feld „Farbverlauf ändern“.</li>  <li>(Im „Individuelle Farbe“-Panel) Wähle die gewünschte Art des Farbverlaufs aus dem Aufklappmenü aus:
    <ul>
      <li><strong>Linear, sternenförmig oder konisch:</strong></li>    </ul>  </li>  <li>Gestalte deinen Farbverlauf, indem du die Farben, den Winkel und den Fokus anpasst.</li>  <li>Klicke oben auf das Symbol für Fließender Farbverlauf <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2022/05/30/baab6082-d665-455d-913c-75cc9f1b3363/171c6a7b-0759-4221-81cf-d774441aa694.png" />.</li>  <li>Gestalte deinen Farbverlauf, indem du die Farben anpasst und die Größe und Ausbreitung jeder Farbe festlegst.</li></ol></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Text formatieren </h4><div class="collapsible-content"><ol>
  <li>Klicke auf das Symbol für Text <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/13691038-5aa8-4672-9b95-348c0733cabc/2023/09/13/4bd319c0-5416-4d39-a691-d2cacf2dcbd1/cce038c8-9d55-477b-9e97-b2e8df2629a4.png" />.</li>  <li><strong>Schriftart:</strong> Wähle eine andere Schriftart aus dem Aufklappmenü aus.</li>  <li><strong>Stile:</strong> Gestalte deinen Text fett, kursiv, unterstrichen oder streiche ihn durch.</li>  <li><strong>Ausrichtung &amp; Formatierung:</strong> Richte deinen Text links, zentriert oder rechts aus und wähle die Textrichtung (z. B. von links nach rechts).</li>  <li><strong>Großschreibung:</strong> Wähle aus, an welcher Stelle du deinen Text großschreiben möchtest.</li>  <li><strong>Zeichenabstand:</strong> Ziehe den Schieberegler, um den Abstand zwischen den einzelnen Zeichen anzupassen.</li>  <li><strong>Zeilenabstand:</strong> Ziehe den Schieberegler, um den Abstand zwischen den einzelnen Zeilen anzupassen.</li>  <li><strong>HTML-Tag auswählen:</strong> Wähle das entsprechende Tag für deinen Text aus (z. B. H1, P), um deine Barrierefreiheit und SEO zu verbessern.</li></ol></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Den Schatten festlegen</h4><div class="collapsible-content"><ol>
  <li>Klicke auf den Schalter <strong>Schatten anwenden</strong>, um die Option zu aktivieren.</li>  <li>Klicke auf das Rad, um den Winkel des Schattens anzupassen, oder gib den Winkelgrad in das Feld ein.</li>  <li><strong>Abstand:</strong> Ändere den Abstand zwischen dem Text und dem Schatten.</li>  <li><strong>Weichzeichnen:</strong> Gestalte deinen Schatten mehr oder weniger unscharf, je nachdem, was dir gefällt.</li>  <li><strong>Deckkraft &amp; Farbe:</strong> Passe die Deckkraft und Farbe deines Schattens an.</li></ol></div></div></div>

Erste Schritte

Template auswählen

Einen Profi von Wix engagieren

Grundlagen

Erfahre, wie du Wix für den Aufbau deiner Website und deines Unternehmens nutzen kannst

Effekte und Animationen verwenden