Codepen in Divi eingefügt, Animation und Größen verhältnis nicht stimmig

Webmen

Hallo ihr lieben,

ich würde gerne Code Pen vorlagen in meiner Divi Seite einfügen und komme zu folgenden Problemen:

1. Im Visual Studio Code Dokument funktioniert alles einwandfrei.
2. Füge ich den Code in Divi ein, sieht das alles ganz anderes aus und ich kann in Divi die Größe nicht mehr einstellen. Die frage... muss ich alles dann im Code verändern und Divi unterstützt das nicht mehr?
3. Die Animation wird irgendwie von Divi geblockt, die funktioniert nämlich nicht.
https://codepen.io/z-/pen/OBPJKK hier der Code pen wie es sein soll.
Muss ich in Divi irgendwas frei schalten?extra Codes hinzufügen? ich hab sowas noch nie gemacht mit externen Codes.

Würde mich sehr freuen wenn mir jemand ein paar Tipps und Hilfestellungen gibt, weil sonst bekomm ich keinen Code am laufen, hab schon andere versucht.

Vielen dank, das du es bis hier hin schon gelesen hast. liebe Grüße Sascha

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

r23

Zitat von Webmen

2. Füge ich den Code in Divi ein, sieht das alles ganz anderes aus und ich kann in Divi die Größe nicht mehr einstellen. Die frage... muss ich alles dann im Code verändern und Divi unterstützt das nicht mehr?

Was hast du wo und wie geändert? Wo hast du das JavScript eingebaut? und warum fügst du css über einen link ein "https://codepen.io/z-/pen/a8e37ca…e5acedab458.css"

zu dem Codepen Scipt eine kleine Anmerkung

anstatt die .click () Methode zu verwenden, kannst du die .on () Methode mit dem \"click\" Ereignis als Parameter verwenden. Zum Beispiel:

```javascript
$(".option").on("click", function(){
$(".option").removeClass("active");
$(this).addClass("active");
});
```

Das ist die empfohlene Art, Ereignishandler zu binden, seit jQuery 1.7. Die .click () Methode ist nur ein Kürzel für die .on () Methode.
Die .click () Methode ist nicht veraltet, aber einige IDEs wie zum Biepsiel PHPStorm können eine Warnung anzeigen.

Zitat von Webmen

3. Die Animation wird irgendwie von Divi geblockt, die funktioniert nämlich nicht.

JavaScript fehlt?

Webmen

Den Code hab ich wie im Screenshot zu sehen eingefügt....>

$(".option").on("click", function(){
$(".option").removeClass("active");
$(this).addClass("active");
});

Dieser Code steht auch in der Html Datei..
leider konnte ich die HTML Datei nicht hochladen, hab den aber als PDF gespeichert und angefügt.

Vielleicht kann dir das weiterhelfen, danke schon mal für deine Zeit.
Eine Idee Warum meine Seite so verzerrt aussieht? Oder eher gesagt komplett zerstört?

Webmen

Wenn ich den Code hier einfüge...
dann funktioniert zwar alles, aber nicht auf der Seite, dann ist der code irgendwie neben meiner seite..

r23

Zitat von Webmen

Wenn ich den Code hier einfüge..

du musst an der gewünschten Stelle den HTML Code einfügen.

Code

<div class="options">
        <title>Document</title><div class="option active" style="--optionBackground:url(https://66.media.tumblr.com/6fb397d822f4f9f4596dff2085b18f2e/tumblr_nzsvb4p6xS1qho82wo1_1280.jpg);">
           <div class="shadow"></div>
           <div class="label">
              <div class="icon">
                 <i class="fas fa-walking"></i>
              </div>
              <div class="info">
                 <div class="main">Blonkisoaz</div>
                 <div class="sub">Omuke trughte a otufta</div>
              </div>
           </div>
        </div>
        <div class="option" style="--optionBackground:url(https://66.media.tumblr.com/8b69cdde47aa952e4176b4200052abf4/tumblr_o51p7mFFF21qho82wo1_1280.jpg);">
           <div class="shadow"></div>
           <div class="label">
              <div class="icon">
                 <i class="fas fa-snowflake"></i>
              </div>
              <div class="info">
                 <div class="main">Oretemauw</div>
                 <div class="sub">Omuke trughte a otufta</div>
              </div>
           </div>
        </div>
        <div class="option" style="--optionBackground:url(https://66.media.tumblr.com/5af3f8303456e376ceda1517553ba786/tumblr_o4986gakjh1qho82wo1_1280.jpg);">
           <div class="shadow"></div>
           <div class="label">
              <div class="icon">
                 <i class="fas fa-tree"></i>
              </div>
              <div class="info">
                 <div class="main">Iteresuselle</div>
                 <div class="sub">Omuke trughte a otufta</div>
              </div>
           </div>
        </div>
        <div class="option" style="--optionBackground:url(https://66.media.tumblr.com/5516a22e0cdacaa85311ec3f8fd1e9ef/tumblr_o45jwvdsL11qho82wo1_1280.jpg);">
           <div class="shadow"></div>
           <div class="label">
              <div class="icon">
                 <i class="fas fa-tint"></i>
              </div>
              <div class="info">
                 <div class="main">Idiefe</div>
                 <div class="sub">Omuke trughte a otufta</div>
              </div>
           </div>
        </div>
        <div class="option" style="--optionBackground:url(https://66.media.tumblr.com/f19901f50b79604839ca761cd6d74748/tumblr_o65rohhkQL1qho82wo1_1280.jpg);">
           <div class="shadow"></div>
           <div class="label">
              <div class="icon">
                 <i class="fas fa-sun"></i>
              </div>
              <div class="info">
                 <div class="main">Inatethi</div>
                 <div class="sub">Omuke trughte a otufta</div>
              </div>
           </div>
        </div>
     </div>

Alles anzeigen

die notwendiegen Scripte fügt du leider so ein

Code

<link href="https://codepen.io/z-/pen/a8e37caf2a04602ea5815e5acedab458.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://codepen.io/z-/pen/a8e37caf2a04602ea5815e5acedab458.js"></script>

dies ist keine gute Idee,

1. jQuery hat du bereits
2. DSVGO
3....

Webmen

Vielen Dank, hab die Codes an die richtige Stelle eingefügt und dann hat es funktioniert. :)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Codepen in Divi eingefügt, Animation und Größen verhältnis nicht stimmig

Jetzt mitmachen!