HowToDo
Anleitung zur Erstellung von fullwidth-Elementen
auf Jimdo-Creator Webseiten
Publikation: https://fliphtml5.com/
CSS .descriptionContainer
fw-column bg-black_33 font-white
Integration der Fullwidth-Widgets
Für die Integration der fullwith-Widgets auf Jimdo-Creator Webseiten ist die Einbindung folgender Skripte/Dateien im Headbereich der Webseite* notwendig:
- jQuery.js (JS-Datei)
- fullwidth.css (CSS-Datei)
- fullwidth.js (JS-Datei)
Einträge im Head-Bereich erfolgen über den Menüpunkt "Head Bearbeiten" (Menü > Einstellungen > Head bearbeiten > gesamte Webseite/Unterseite).
Diese Option steht bereits bei jimdofree-Webseiten zur Verfügung. Für jimdofree-Webseiten genügt es, hierfür die u.a. Skripte zu verwenden (Copy&Paste).
Auf dem Server liegen verschiedene CSS-Dateien für die entsprechenden Jimdo-Designs:
- ../fullwidth-malaga.css
- ../fullwidth-stockholm.css
- ../fullwidth-miami.css
- ../fullwidth-rome.css
fw-column bg-black_33 font-white
Einbinden der Skripte auf der eigenen Webseite
Um die Skripte von der eigenen Webseite aus starten zu können, müssen sie zunächst im upload-Bereich der eigenen Webseite hochgeladen werden. Dazu bietet Jimdo
Creator die Möglichkeit, diese über das Menü > Design > eigenes Design > Dateien aufzurufen und den Upload vorzunehmen. Die Links der hier hochgeladenen Dateien
können anschliessend als Pfadreferenz für die Einträge im Head-Bereich der Webseite benutzt werden.
Kostenlose Version
Für jimdofree-Webseiten können auch einfach die u.a. Links in den head-Bereich der Webseite hinein kopiert werden. So könnt Ihr alles völlig kostenlos ausprobieren. Erst bei Upgrade der Webseite auf ein Bezahlpaket müssen die Skripte auf die Domain angepasst werden.
Syntax (Einträge im Headbereich)
<link type="text/css" media="all" href="https://redesign-berlin.lima-city.de/__css/hide.css" rel="stylesheet"/>
<link type="text/css" media="all" href="https://redesign-berlin.lima-city.de/__css/position.css" rel="stylesheet"/>
<link type="text/css" media="all" href="https://redesign-berlin.lima-city.de/__widgets/fullwidth-animations/fullwidth-malaga.css" rel="stylesheet"/>
<link type="text/css" media="all" href="https://redesign-berlin.lima-city.de/__widgets/fullwidth-animations/backgrounds.css" rel="stylesheet"/>
<style type="text/css">
/*<![CDATA[*/
/* hier eigenes CSS einsetzen
-----------------------------------*/
/*]]>*/
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://redesign-berlin.lima-city.de/__js/modernizr.min.js" type="text/javascript" info="Device-Patches"></script>
<script src="https://redesign-berlin.lima-city.de/__widgets/fullwidth-animations/fullwidth.js" type="text/javascript"></script>
*Achtung: Änderungen in diesem Bereich der Webseite können zu unerwünschten Ergebnissen führen. Ein fehlerhafter Code im head-Bereich wird duch das System ggf. komplett gelöscht. Sicherheitshalber empfiehlt es sich daher, immer eine Sicherung (Kopie) des Inhalts der Head-Einträge in einer txt-Datei lokal zu speichern!
Wichtig: Die Verwendung der zur Verfügung gestellten Skripte geschieht auf eigene Verantwortung und ohne Gewähr!
Das Skript hide.css dient nur einer besseren Darstellung im Bearbeitungsmodus, das Skript position.css bietet zusätzliche Positionierungen und Abstände etc. - die Einbindung dieser Skripte sind optional.
fw-column bg-black_33 font-white
Fragen? Gern!
Kontakt:
redesign-berlin.de
Webdesign - Jimdo-Design
Rue du Capit. J. Maridor 9
13405 Berlin
Tel. +49 (0)30 41709735
Mobil +49 (0)177 3847069
e-mail info(at)redesign-berlin.de
fw-column bg-white