[GELÖST] Animierte Shapes

  • Loetzerich
  • Loetzerichs Avatar Autor
  • Neues Mitglied
  • Neues Mitglied
  • Beiträge: 4
  • Dank erhalten: 0

Animierte Shapes wurde erstellt von Loetzerich

Posted 2 Jahre 2 Monate her #1
Hallo,

dank der Video Dokumentation zum Einbau von Shapes mit der Shape Divider App ist es ja super easy, shapes einzubauen. Nun möchte ich aber gern animierte Shapes von Shapedivider.com einbinden. Ist dies auch möglich? Da man dort nur einen statt 2 Codes erhält, stehe ich auf dem Schlauch, wie ich das umsetzen kann. Habe den Code aufgeteilt und bekomme den Divider auch angezeigt, aber nicht IN dem gewünschten Bereich, sondern direkt DARUNTER, sprich er überlappt nicht die gewünschte Grafik.

Ich wäre dankbar, wenn jemand einen Tipp für mich hätte.

Gruß,
Birgit
Last Edit:2 Jahre 2 Monate her von Loetzerich
Letzte Änderung: 2 Jahre 2 Monate her von Loetzerich.

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Administrator antwortete auf Animierte Shapes

Posted 2 Jahre 2 Monate her #2
Vielleicht wäre ein Link hilfreich!
von Administrator

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

  • Loetzerich
  • Loetzerichs Avatar Autor
  • Neues Mitglied
  • Neues Mitglied
  • Beiträge: 4
  • Dank erhalten: 0

Loetzerich antwortete auf Animierte Shapes

Posted 2 Jahre 2 Monate her #3
Falls du einen Link zu meinen fehlerhaften Versuchen meinst, die Seite ist noch nicht veröffentlicht. Geht natürlich erst online, wenn sie funktioniert. Aber es ging mir ja auch nicht um eine Fehlersuche, sondern um eine grundsätzliche Angabe, wo der html-Code von Shapedivider.com hin müsste.

In der Joomlaplates Video Anleitung zur Shape Divider App ist es ja super einfach erklärt: Html-Code ins Modul, CSS-Code in Benutzerdefinierte CSS. Aber bei Shapedevider.com bekommt man eben nur einen Code. Hier mal eine Beispiel-Shape:

shorturl.at/CUVZ0

Dort kann man den Code entnehmen. Und wie dieser korrekt auf das Modul und auf die CSS aufgeteilt werden müsste (bzw. was ggf. noch hinzugefügt werden muss), das ist es, was ich gern wissen möchte. Wenn ich nur den Bereich mit den SVG Angaben in das Modul schreibe und den Rest in die CSS, dann wird der Divider angezeigt, aber eben nicht über der Grafik liegend, sondern darunter. Also teile ich es entweder falsch auf, oder es fehlt noch etwas.

Gruß,
Birgit
von Loetzerich

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

joomlaplates antwortete auf Animierte Shapes

Posted 2 Jahre 2 Monate her #4
Hallo,
für die animierten Shapes gibt es keinen Code da PRO Version von Shapedivider, siehe Bild
Ansonsten können sie die Shapes ganz genauso einbinden wie die anderen auch.
von joomlaplates

Anhänge:

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

  • Loetzerich
  • Loetzerichs Avatar Autor
  • Neues Mitglied
  • Neues Mitglied
  • Beiträge: 4
  • Dank erhalten: 0

Loetzerich antwortete auf Animierte Shapes

Posted 2 Jahre 2 Monate her #5
Ich weiß, dass man für die animierten Shapes die Pro Version benötigt. Deshalb hatte ich ja auch einen Beispiel-Shape OHNE Animation verlinkt. Es geht auch nicht um die Animation, sondern wie man diesen Code (der eben nicht wie bei der Shape Divider App geteilt in Html und CSS Code geliefert wird) einbaut.

Muss der Code aufgeteilt werden (wenn ja, wie?) oder komplett als Html ins Modul eingegeben werden (was muss dann noch in die benutzerdefinierte CSS?)

Gruß,
Birgit
von Loetzerich

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

joomlaplates antwortete auf Animierte Shapes

Posted 2 Jahre 2 Monate her #6
Hallo,CSS code kommt in die custom.css
Code:
.shapedividers_com-9998{overflow:hidden;position:relative;}.shapedividers_com-9998::before{content:'';font-family:'shape divider from ShapeDividers.com';position: absolute;bottom: -1px;left: -1px;right: -1px;top: -1px;z-index: 3;pointer-events: none;background-repeat: no-repeat; background-size: 100% 76px;background-position: 50% 100%; background-image: url('data:image/svg xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M35.28 1.67c-3.07-.55-9.27.41-16.15 0-6.87-.4-13.74-.58-19.13.1v.4h35.28z" fill="#ffffff"/><path d="M35.28 1.16c-3.17-.8-7.3.4-10.04.56-2.76.17-9.25-1.47-12.68-1.3-3.42.16-4.64.84-7.04.86C3.12 1.31 0 .4 0 .4v1.77h35.28z" opacity=".5" fill="#ffffff"/><path d="M35.28.31c-2.57.84-7.68.3-11.8.43-4.1.12-6.85.61-9.57.28C11.18.69 8.3-.16 5.3.02 2.3.22.57.85 0 .87v1.2h35.28z" opacity=".5" fill="#ffffff"/></svg>'); }@media (min-width:768px){.shapedividers_com-9998::before{background-size: 100% 138px;background-position: 50% 100%; } } @media (min-width:1025px){.shapedividers_com-9998::before{ bottom: -0.1vw;left: -0.1vw;right: -0.1vw;top: -0.1vw; background-size: 100% 105px;background-position: 50% 100%; }}@media (min-width:2100px){.shapedividers_com-9998::before{background-size: 100% calc(2vw 105px);}}
Und dann kommt der DIV in das Modul
Code:
<div class="shapedividers_com-9998" ></div>

Die Klasse des Divs muss natürlich mit der Klasse des Shape Dividers identisch sein

Last Edit:2 Jahre 2 Monate her von joomlaplates

Anhänge:

Letzte Änderung: 2 Jahre 2 Monate her von joomlaplates.

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Installations-Service

Sparen Sie Zeit, wir installieren ihr gekauftes Joomla Template
mit all den dazugehörigen Extensions und dem "Demo Inhalt" innerhalb der nächsten 24 Stunden
auf einem Server/Webhost ihrer Wahl

Kaufen - 59€

Copyright © 2008 - 2025 Joomlaplates | Professional Joomla Templates

Impressum & Datenschutz | AGB