Verbesserungen

Dieser Code ordnet deinen Cookie-Banner unten an -> Head

Iframe responsive: -> Head

/*<![CDATA[*/

iframe {

max-width: 100%;

}

/*]]>*/

</style>

Füge diesen Code einfach in ein Widget/HTML-Modul ein. Ersetze die Xe bitte noch durch deine Nr.

<a href="tel:+49XXXXXXXX">+49 (0) XXX/XXXXX</a>

Mit diesem Snippet kannst du den Text durch einen eigenen ersetzen. Verändere dazu den rotmarkierten Text.

/*<![CDATA[*/

.cc-m-form-note {

display:none;

}

.cc-m-form::after {

display: block;

content: 'Please fill the required fields marked with *';

}

/*]]>*/

</style>

Mit diesem CSS-Code kannst du den Hinweis einfach ausblenden.

/*<![CDATA[*/

.cc-m-form-note {

display:none;

}

/*]]>*/

</style>

Eigener Warenkorb

/*<![CDATA[*/

@media (min-width: 768px) {

.j-cart.is-empty {

position: absolute;

top: 0;

right: 0;

}

.j-cart.has-products {

position: absolute;

top: 0;

right: 0;

}

.j-cart-icon {

background: url(https://u.jimcdn.com/cms/o/s16d5d641fa1e718c/userlayout/img/shopping-basket-40513.png?t=1516609369) transparent no-repeat center left 18px !important;

background-size: 40% !important;

width: 80px;

height: 55px;

border: none !important;

}

.j-cart-icon::before,

.j-cart-icon:before {

content: """";

}

.j-cart-item-amount {

margin-left: 29px;

color: #333333;

}

.j-cart-item-amount {

line-height: 7.6;

font-size: 70%;

font-weight: bold;

}

@media (max-width: 767px) {

.j-cart-icon {

background: url(https://u.jimcdn.com/cms/o/s16d5d641fa1e718c/userlayout/img/shopping-basket-40513.png?t=1516609369) transparent no-repeat center left 18px !important;

background-size: 40% !important;

width: 80px;

height: 55px;

border: none !important;

}

.j-cart-icon::before,

.j-cart-icon:before {

content: """";

}

.j-cart-item-amount {

margin-left: 15px;

color: #333333;

}

.j-cart-item-amount {

line-height: 8;

font-size: 70%;

font-weight: bold;

}

/*]]>*/

</style>

Warenkorb ausblenden:

/*<![CDATA[*/

.j-cart.is-empty{

display: none;

}

/*]]>*/

</style>

Hintergrundfarbe Galerie ändern

/*<![CDATA[*/

.pswp__bg.pswp__bg {

background: #fff;

}

/*]]>*/

</style>

Lauftexte

<marquee direction="left">Dein Lauftext von rechts nach links!</marquee>

Dein Lauftext von rechts nach links!

<marquee direction="right">Dein Lauftext von links nach rechts!</marquee>

Dein Lauftext von links nach rechts!

<marquee behavior="alternate">Dein Lauftext mit automatischem Richtungswechsel!</marquee>

Dein Lauftext mit automatischem Richtungswechsel!

Verlinkungen auf verschiedene Unterseiten

Mit dem folgenden kleinen Tutorial kannst Du Verlinkungen zu Seitenpositionen auf verschiedenen Unterseiten erstellen. Füge dafür einfach den ersten Code in ein Widget/HTML-Modul ein. In diesem legst Du zunächst fest, wohin (auf welche Unterseite) dieser Link führen soll. Im nächsten Schritt vergibst Du die Bezeichnung für die Verlinkung. Den zweiten Code fügst Du genau an der Stelle ein, ebenfalls in ein Widget/HTML-Modul, zu welcher verlinkt werden soll. Möchtest Du zu zum Beispiel zu einem Text verlinken, so kannst Du den Code direkt dadrüber einfügen.

<a href="http://www.deine-jimdo-seite.de/deine-unterseite/#linkname">Bezeichnung</a>

Pflichttext ausblenden

/*<![CDATA[*/

.cc-m-form-note {

display: none !important;

}

/*]]>*/

</style>

newticker

//<![CDATA[

<!--

var line=new Array()

line[1]="Dein cooler Newsticker für aktuelle Ansagen und Informationen"

line[2]="Informiere deine Besucher sofort über Neuigkeiten auf deiner Seite"

line[3]="..ganz einfach und unkompliziert ohne großen Aufwand"

line[4]="mit deinem neuen Newsticker!"

var ts_fontsize="15px"

var longestmessage=1

for (i=2;i<line.length;i++){

if (line[i].length>line[longestmessage].length)

longestmessage=i

}

var tscroller_width=line[longestmessage].length

lines=line.length-1 //--Number of lines

if (document.all||document.getElementById){

document.write('<form name="bannerform">')

document.write('<input type="text" name="banner" size="'+tscroller_width+'"')

document.write(' style="background-color: transparent; '+document.bgColor+'; color: '+document.body.text+'; font-family: arial; font-size: '+ts_fontsize+'; font-weight:bold; border: medium none" onfocus="blur()">')

document.write('<\/form>')

}

temp=""

nextchar=-1;

nextline=1;

cursor="\\"

function animate(){

if (temp==line[nextline] & temp.length==line[nextline].length & nextline!=lines){

nextline++;

nextchar=-1;

document.bannerform.banner.value=temp;

temp="";

setTimeout("nextstep()",3000)}

else if (nextline==lines & temp==line[nextline] & temp.length==line[nextline].length){

nextline=1;

nextchar=-1;

document.bannerform.banner.value=temp;

temp="";

setTimeout("nextstep()",3000)}

else{

nextstep()}}

function nextstep(){

if (cursor=="\\"){

cursor="|"}

else if (cursor=="|"){

cursor="/"}

else if (cursor=="/"){

cursor="-"}

else if (cursor=="-"){

cursor="\\"}

nextchar++;

temp+=line[nextline].charAt(nextchar);

document.bannerform.banner.value=temp+cursor

setTimeout("animate()",35)}

//if IE 4+ or NS6

if (document.all||document.getElementById)

window.onload=animate

// -->

//]]>

</script>

Logo-Zoom

<style>

/* <![CDATA[ */

#cc-website-logo img:hover {

-webkit-transform:scale(1.2);

transform:scale(1.2);

}

#cc-website-logo img {

-webkit-transition: all 0.7s ease;

transition: all 0.7s ease;

}

/*]]>*/

</style>

KLapptexte

Dieser Code kommt in ein Widget/HTML-Modul, dort wo die Klapptexte benötigt werden. Beachte bitte, solltest du mehrere Klapptexte bzw. Elemente auf einer Unterseite nutzen, so kannst du das gerne machen. Der grünmarkierte Teil darf dann allerdings nicht noch mal eingefügt werden.

<dl>

<dt>

Mehr Informationen.. <a href="javascript:return false;" class="closed">Details</a>

</dt>

<dd>

Hier kommt der Text rein, der ausklappen soll.

</dd>

<dt>

Wenn Du.. <a href="javascript:return false;" class="closed">Details</a>

</dt>

<dd>

Hier kommt der Text rein, der ausklappen soll.

</dd>

<dt>

Und hier.. <a href="javascript:return false;" class="closed">Details</a>

</dt>

<dd>

Hier kommt der Text rein, der ausklappen soll.

</dd>

</dl>

</script><script type="text/javascript">

//<![CDATA[

$(document).ready(function(){

$("dt").click(function(){ // trigger

$(this).next("dd").slideToggle("slow");

$(this).children("a").toggleClass("closed open");

});

//]]>

</script>

Das folgende CSS kommt in den Headbereich deiner Jimdo-Seite.

/*<![CDATA[*/

dd {

display: none;

}

/*]]>*/

</style>

Füge diesen Code in den Headbereich deiner Seite ein und ergänze noch die Zieladresse, also wohin deine Seite beim Aufruf weiterleiten soll.

//<![CDATA[

<!--

window.location.replace("https://www.deine-Zieladresse.de");

/* Varianten */

/* window.document.location.replace("https://www.deine-Zieladresse.de"); */

/* document.location.replace("https://www.deine-Zieladresse.de"); */

//–>

//]]>

</script>

Cooler Fad-In-Effekt, damit deine Seite langsam eingeblendet wird, also wie auf dieser hier ;-)

/*<![CDATA[*/

body {

-webkit-animation: fadein 5s;

-moz-animation: fadein 5s;

-ms-animation: fadein 5s;

-o-animation: fadein 5s;

animation: fadein 5s;

}

@keyframes fadein {

from { opacity: 0; }

to { opacity: 1; }

}

@-moz-keyframes fadein {

from { opacity: 0; }

to { opacity: 1; }

}

@-webkit-keyframes fadein {

from { opacity: 0; }

to { opacity: 1; }

}

@-ms-keyframes fadein {

from { opacity: 0; }

to { opacity: 1; }

}

@-o-keyframes fadein {

from { opacity: 0; }

to { opacity: 1; }

}

/*]]>*/

</style>

Füge den HTML-Code im HTML-Modus eines Textfeldes vor dem Text ein.

Hier bekommt ihr übrigens die benötigten Farb-Codes für euren Hintergrund: https://html-color-codes.info/webfarben_hexcodes/

Füge den HTML-Code im HTML-Modus eines Textfeldes ein.

Reflection

CONTACT