check [GELÖST] Animierte Shapes

  • Beiträge: 4
  • Dank erhalten: 0

Animierte Shapes wurde erstellt von Loetzerich

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
Letzte Änderung: 1 Jahr 9 Monate her von Loetzerich.
1 Jahr 9 Monate her #1

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

  • Beiträge: 924
  • Dank erhalten: 152

Administrator antwortete auf Animierte Shapes

Vielleicht wäre ein Link hilfreich!
1 Jahr 9 Monate her #2

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

  • Beiträge: 4
  • Dank erhalten: 0

Loetzerich antwortete auf Animierte Shapes

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
1 Jahr 9 Monate her #3

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

  • Beiträge: 2142
  • Dank erhalten: 323

joomlaplates antwortete auf Animierte Shapes

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.
1 Jahr 9 Monate her #4
Anhänge:

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

  • Beiträge: 4
  • Dank erhalten: 0

Loetzerich antwortete auf Animierte Shapes

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
1 Jahr 9 Monate her #5

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

  • Beiträge: 2142
  • Dank erhalten: 323

joomlaplates antwortete auf Animierte Shapes

Hallo,CSS code kommt in die custom.css
.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
<div class="shapedividers_com-9998" ></div>

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

Letzte Änderung: 1 Jahr 9 Monate her von joomlaplates.
1 Jahr 9 Monate her #6
Anhänge:

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 - 2024 Joomlaplates | Professional Joomla Templates

Impressum & Datenschutz | AGB