HowToDo
Anleitung zur Erstellung von fullwidth-Elementen für Jimdo-Creator Webseiten
Publikation: https://fliphtml5.com/
nachfolgendes Element: fullwidth bg-black font-white
Integration der Fullwidth-Widgets
Für die Integration der fullwith-Widgets auf der eigenen Jimdo-Creator Webseite 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 können hierfür die u.a. Skripte verwend werden. (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
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 Head-Bereich)
<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-stockholm.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[*/
/* eigenes CSS hier 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!
PS: ...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.
nachfolgendes Element: fw-image
