Neue Testshops sind online

Also ich sitze schon seit 2 Stunden drann. Eingebunden habe ich das iframe. Habe aber eine fixe grösse eingegeben. Das sollte aber nicht so sein.
Ich möchte es responsive haben. Das iframe wird auf meinem smartphone nicht dargestellt.
Dort steht dann "(Link nur für registrierte Nutzer sichtbar.) hat die Verbindung abgelehnt."

Hier ist der Blog (Link nur für registrierte Nutzer sichtbar.)

 

Auf der tumblr Seite muss man Datenschutz akzeptieren. Deshalb wurde es im iframe nicht angezeigt

 

Ich danke für deine Hilfe, soweit funktioniert es nun. Wie kann ich den eigentlich die Bilder in dem Textfeld so einfügen, das sich diese auch frei bewegen lassen, wie in Word z.B.... Meine letzte Spalte sollte Kontakt sein mit so nem Telefonbutton usw. Ich hab was auf Word fertig gemacht bekomme es aber nicht rein... und wenn ich das Bild einfüge dann ist es im starr.. geht das auch anders?
auch die Punkte macht er nicht, hab nun striche gemacht, aber das ist blöd.

 

Niemals niemals niemals nie etwas einfach aus Word im Shop einfügen!
Damit überträgst du neben Texten und Bilder auch tonnenweise Datenmüll, der die Darstellung des Shops kaputt machen kann. Entweder die Texte direkt schreiben, oder über den "aus Word einfügen" - Button einfügen (dann sind die Formatierungen weg).

Für Telefon und Co nimmt man keine Bilder mehr, sondern FontAwesome-Icons. Das sind Schriftzeichen, die sich leichter einfügen lassen und weniger Ladezeit brauchen.

In einem Shop der Version 3.11. müsste FontAwesome 5.3.1 integriert sein,
(Link nur für registrierte Nutzer sichtbar.)

 

Hallo. Ich habe mir den Code aus dem Testshop 2 kopiert. Die 3 animierten Bilder im oberen Contentbereich. Allerdings funktioniert die Animation der Bilder noch nicht. Was muss ich hierfür tun?

Mein Shop ist unter (Link nur für registrierte Nutzer sichtbar.) zu sehen (Katalogbild + 2 Sale Dummies)

 

Du musst auch das css dafür übernehmen, ich denke das fehlt Dir noch.

 

Wo finde ich das?

 

Versuche es mal damit im eigenen css im Style Editor:

Code:

.home-teaser {
    position: absolute;
    height: calc(100% - 15px);
    width: calc(100% - 15px);
    display: block;
    left: 7px;
    top: 7px;
    background: transparent 50% 50% no-repeat;
    background-size: cover;
    overflow: hidden;
}

Man findet das, wenn man mit der rechten Maustaste auf das Element klickt und im Menüfeld "Untersuchen" oder "Element Untersuchen" auswählt.
Dadurch öffnet sich die Console mit den html- und css-codes.
Zumindest im Chrome oder Firefox (wenn Firebug installiert ist) und Edge hat so etwas glaube ich auch

 

Wo finde ich den denn? Ich hatte vorhin im Testshop 2 von Gambio geschaut. Entweder übersehen oder ich bin blind.

 

Hab ihn gefunden. Auf den kleinen Pfeil hab ich natürlich nicht geklickt.

 

Hab den Code nun ans Ende im CSS Editor kopiert. Jetzt werden die 3 Bilder auf meiner Startseite nicht mehr angezeigt.

 

Welchen Code hast du eingefüg?

Nachtrag: da gibt es noch mehr Codes, als den einen, den ich oben gepostet habe.
hast du die anderen auch?

 

Das habe ich in den CSS Editor kopiert:

Code:

.home-teaser {
    position: absolute;
    height: calc(100% - 15px);
    width: calc(100% - 15px);
    display: block;
    left: 7px;
    top: 7px;
    background: transparent 50% 50% no-repeat;
    background-size: cover;
    overflow: hidden;
}

Habe nur den einen kopiert. Versuche das gerade logisch zu verstehen.

 

Dann füge das noch hinzu:

Code:

.home-teaser-row {
    margin-top: -15px;
    padding: 7px;
}

und

Code:

.home-teaser > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent 50% 50% no-repeat;
    background-size: cover;
    -webkit-transition: 300ms ease all;
    -o-transition: 300ms ease all;
    transition: 300ms ease all;
}

Und dann gibt es noch

Code:

.home-teaser img {
    display: none;
}

Mehr mit "home-teaser" habe ich jetzt nicht gesehen.

 

Also alle 4 habe ich nun drin. Entweder dauert es ewig, bis des richtig angezeigt wird nach Löschen des Caches oder ich habe es vielleicht an der falschen Content-Stelle. Derzeit habe ich unter Freier Inhalt 1 folgenden Code drin:

Code:

<div class="row home-teaser-row space-0">
    <div class="col-xs-12 col-md-8" style="margin-bottom:20px">
        <a class="home-teaser" href="/downloads/katalog/katalog_2019_72dpi.pdf" target="_blank">
            <img alt="Pro Tan / Fiesta Sun Produktkatalog 2019" class="img-responsive" src="images/image/katalog2019.jpg" />
        </a>
    </div>

    <div class="col-xs-12 col-md-4" style="margin-bottom:20px">
        <a class="home-teaser" href="sale.php">
            <img alt="Sale" class="img-responsive" src="images/image/sale.jpg" />
        </a>
    </div>

    <div class="col-xs-12 col-md-4" style="margin-bottom:20px">
        <a class="home-teaser" href="info/versand-zahlungsbedingungen.html">
            <img alt="Sale" class="img-responsive" src="images/image/sale.jpg" />
        </a>
    </div>
</div>

<p>
    &nbsp;
</p>

<p style="text-align: justify;">
    Ab sofort k&ouml;nnen Sie unseren neuen Pro Tan &amp; Fiesta Sun Katalog 2019 mit den neuen Produkten aus disem Jahr vorab downloaden. Hierzu einfach oben auf das Bild klicken. Sobald unsere Kataloge aus der Druckerei kommen, werden wir allen Bestandkunden den neuen Produktkatalog 2019 automatisch zukommen lassen. Nutzen Sie die Chance: Besuchen Sie uns auch in der Zeit vom 04. bis 07. April 2019 auf der FIBO 2019 in Halle 8 auf Stand A/46 und testen Sie alle Produkte von Pro Tan und Fiesta Sun vor Ort. Ebenso haben wir eine neue Sales Rubrik eingef&uuml;gt - Echte Schn&auml;ppchen zu knallhart kaklulierten Preisen!
</p>

Und das steht jetzt im CSS Editor:

Code:

.home-teaser-row {
    margin-top: -15px;
    padding: 7px;
}

.home-teaser {
    position: absolute;
    height: calc(100% - 15px);
    width: calc(100% - 15px);
    display: block;
    left: 7px;
    top: 7px;
    background: transparent 50% 50% no-repeat;
    background-size: cover;
    overflow: hidden;
}

.home-teaser > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent 50% 50% no-repeat;
    background-size: cover;
    -webkit-transition: 300ms ease all;
    -o-transition: 300ms ease all;
    transition: 300ms ease all;
}

.home-teaser img {
    display: none;
}

 

Wenn Du da nichts geändert hast, wird der Freie Inhalt 1 nur angezeigt, wenn Du "in kürze verfügbare" Artikel auf der Startseite anzeigen lässt.
Wenn es immer angezeigt werden soll, solltest Du index-mitte oder index-unten nehmen

 

Ich hatte es dort angezeigt ohne in Kürze verfügbare Artikel. Ich schiebe mal den Code eben in den anderen Content Bereich rein zum Testen.

 

Autsch... Wenn ich das in Index-Mitte kopiere und speichere bekomme ich die Fehlermeldung!

 

Warst Du im Quellcode, bzw. in der html-Einstellung?
Sicher, dass du alle < und > kopiert hast?

 

Alles richtig kopiert. Da fehlt nichts. Das Index Mitte ist aus meinem Content Manager nun aber verschwunden. Ich denke, da gibt es Probleme mit den Sprachdateien. Ich habe soeben mal ein Gambio Ticket aufgemacht. Hatte in der Vergangenheit schonmal Probleme mit den Language Files wo sich Gambio an das Fixen gemacht hatte. Ich denke, dass der Fehler nicht ganz behoben wurde beim letzten Mal.

Solange Gambio jetzt nicht gefixt hat, können wir leider nicht weiter basteln.