Responsive Bootstrap Template für das CMS webEdition 7

Das Thema Responsive Webdesign und das Open Source CMS webEdition passen immer besser zu einander. Deshalb haben wir uns entschlossen, ein Responsive webEdition-Template Redakteuren und Web-Entwicklern kostenlos bereitzustellen. Es soll helfen einen guten Einblick über die Möglichkeiten des CMS und der HTML-Templates zu gewinnen, die gerne weiterverwendet, weiterentwickelt und ergänzt werden dürfen.

Download webEdition 7 Backup Download Bootstrap Dateien

Wie sehen die Seiten und Templates aus?

Live Demo CMS Zugang anfordern

Hier findest Du ganz wichtig unsere Nutzungsbedingungnen zur Verwednung der Templates bzw. den zur Verfügung gestellten Dateien.

Features unserer webEdition Templates

Responsives Design

Responsive Webdesign stellt die Technik zur Verfügung, welche es ermöglicht eine optimale Sichtbarkeit Ihrer Inhalte auf den verschiedensten Endgeräten wie Desktop/Notebook, Tablet oder Smartphone zu gewährleisten.

Ladezeiten optimiert

Geringe Ladezeiten und weniger Server-Traffic, ein Muss für zeitgemnäßes HTML und OnPage-SEO. Daraus ergibt sich dann auch gleich ein besseres Ranking bei Google (PageRank) und natürlich zufriedenere Besucher.

CSS Framework Bootstrap

Bootstrap unterstützt allgemeine Gestaltungselemente welche zum täglichen Gebrauch gehören. Davon profitiert nicht nur der Webdesigner, sondern auch der Redakteur. Es ist flexibel, skalierbar und einfach anpassbar.

Icon WebFonts

Bessere und schärfere UI Icons mit Web Fonts. Eingebunden als vektorbasierter Zeichensatz, werden sie unabhängig von verschiedenen Bildschirmauflösungen (auch Retina!) immer sauber und klar dargestellt.

HTML5

Mit HTML5 lassen sich Inhalte wie Texte, Bilder oder Hyperlinks semantisch auszeichen. Das ist aus SEO-Gesichtspunkten fundamental wichtig. Suchmaschinen können Content einfacher identifizieren und korrekt indizieren.

CSS3

CSS3 bietet Selektoren, mit denen sich sich tolle und einfache Gestaltungsmöglichkeiten im HTML ergeben. Macht in Summe deutlich weniger Code und weniger Markup – freut den Websidesigner der flexibel und schneller arbeiten kann.
Erst ansehen und dann ausprobieren – bitte sehr!

Hier die Screens zur Ansicht. Live und in Farbe gibt's die HMTL-Seiten hier zu sehen.

Startseite: Browser- & Backend-Ansicht im CMS
Startseite: Browser- & Backend-Ansicht im CMS
Übersichtsseite: Browser- & Backend-Ansicht im CMS
Inhaltsseite: Browser- & Backend-Ansicht im CMS
Kontaktseite: Browser- & Backend-Ansicht im CMS
Installation

Einfacher können wir's nicht machen: Dateien auf den Server laden, webEdition in der Version 7 installieren, Backup einspielen und alles ist schön!

1. Download

Lade Dir die externen Dateien wie CSS oder Less, Javascript, Bootstrap etc. in einem Paket als Zip-Datei herunter. Für individuelle Anpassungen benötigst Du einen Code-Editor (wir empfehlen Dreamweaver) und einige Kenntnisse in HTML und CSS. Die Quelldateien beinhalten notwendige Kommentare für eigene Anpassungen. Wähle die für Dich passende Download-Version aus.

Download CSS Version

Enthält die minimierte Master-CSS-Datei. Einfach hochladen und gut. Eine vorhandene Bootstrap CSS-Datei kann damit auch ersetzt werden. Eigene Farben, Fonts oder Schriftgrößen kannst Du bequem hier anpassen. Aus dem Download-Paket dann einfach die bootstrap.css auf Deinem Server austauschen. Denke daran, vor dem Überschreiben die alte Datei sichern.

Download "Ready to use"

Download Less-Version

Enthält die quelloffenen Less-Dateien zum kompilieren. Für die Profis - oder die die es werden wollen – unter Euch. Als Kompiler empfehlen wir WinLess oder Crunch.

Download Less-Quelldateien

2. Dateistruktur anlegen

Für den schnellen Einsatz in nahezu jedem Web-Projekt. Im CSS-Download-Paket findest Du nach dem entpacken (unzip) folgende Datei-Struktur:


     bootstrap/

    ├── bootstrap-untouched/

    │   ├── js/...

    │   ├── less/...    

    ├── css/

    │   ├── bootstrap.css

    │   ├── master.css

    │   ├── webedition-tmpl.css

    ├── js/

    │   ├── bootstrap.js

    │   ├── plugins.js

    │   ├── script.js

    └── img/

    └── fonts/ 

              

Hier die Datei-Struktur der quelloffenen Less-Dateien (inkl. CSS). Kompiliert wird immer nur die master.less. Nach dem Entpacken (unszip) sollte es dann so aussehen:


     bootstrap/

    ├── css/

    │   ├── bootstrap.css

    │   ├── master.css

    │   ├── webedition-tmpl.css

    ├── js/

    │   ├── bootstrap.js

    │   ├── plugins.js

    │   ├── script.js

    ├── less/

    │   ├── custom/

    │   │   ├── responsive.less

    │   │   ├── variables.less

    │   │   ├── webedition-tmpl.less

    │   ├── master.css

    │   ├── master.less

    └── img/

    └── fonts/

              

3. Import webEdition Backup

Alle Daten sind hochgeladen. Jetzt wär' der richtige Zeitpunkt webEdition in der Version 7 zu installieren – wenn nicht schon getan. Im Anschluss einfach unser webEdition-Backup in webEdition importieren.

Download webEdition Backup

Der Import des webEdition Backups ist kinderleicht.
Im webEdition Hauptbildschirm klicken Sie auf:
DateiBackupBackup wiederherstellen. Doku zum Einspielen eines Backups als PDF (ab Seite 43)

Achtung:

Beim Import nur Dokumente, Objekte und Binärdaten (Bilder) auswählen. Andernfalls werden die Logindaten aus der eigenen webEdition-Installation überschrieben und ein Login mit dem eigenen Account ist nicht möglich!

FAQ

Sollten noch Fragen offen geblieben sein, hier einige Anmerkungen oder Wissenswertes rund um unsere Templates und deren Nutzung.

Erstellt und gestest haben wir unsere webEdition-Templates mit der Version 7.0, die Du hier herunterladen kannst.

Die Templates bzw. unser Backup für die webEdition Version 6.3.8. kannst du hier herunterladen.

Nein, denn dazu gehört noch etwas mehr. Aber für die Zukunft ist ein vollständig barrierefreies Templates basierend auf Bootstrap geplant. Ziel der Weiterentwicklung des CMS webEdition ist u.a. auch die barrierefreie Pflege von Internetpräsenzen.

Unbedingt! In der "Ready to use" Version musst Du die bootstrap.css anpassen. Das kannst Du sogar recht komfortabel unter getbootstrap.com/customize/. Die generierte bootstrap.css Datei einfach gegen unsere austauschen. Das wars. Aber Achtung: unbedingt vorher noch eine Kopie unserer Version erstellen.

Irgend etwas unklar? Wir helfen gerne weiter!

Anfragen bitte an hilfe@goldorange.com. Wir bitten um Verständnis, dass umfänglicher Support nicht ohne Weiteres möglich ist. Wäre aber im Rahmen eines gemeinsamen Projekts denkbar.

Kommentare zu den responsiven webEdition Templates
comments powered by Disqus