Responsive Templates kostenlos für webEdition 7

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

Download Javascript & CSS Dateien

Wie sehen die Seiten und die webEdition-Templates überhaupt aus?

Live Demo CMS Zugang anfordern

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

Features & Komponenten unserer webEdition Templates

In den webEdition-Templates stehen den Redakteuren folgende Funktionen bzw. Module zur Verfügung: Bilderslider (Carousel), flexibel erweiterbare Container (Card), Buttons und Buttongruppen (Buttons), Aufklapp-Elemente (Collapse), bildschirmfüllende Bilder mit einstellbaren Transparenzen, Bildergalerien bzw. Sammlungen, Videos über die YouTube API, E-Mail-Formular, Google Maps-Karte, ein- oder mehrspaltige Textfelder und demnächst kommen noch folgende Funktionen bzw. Module dazu: Parallax Scroll-Effekte, Produkt-Seiten, Warenkorb-Funktion, Newsletter-Anmeldung,...

Responsives Design

Responsive Webdesign stellt die Technik zur Verfügung, welche es ermöglicht eine optimale Darstellung von Inhalten 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 und natürlich zufriedenere (mobile) Besucher.

CSS Framework Bootstrap

Bootstrap ist ein anpassungsfähiges und zuerst für mobile Geräte entwickeltes Framework. Gut dokumentiert profitiert so nicht nur der Webdesigner, sondern auch Redakteure. Es ist flexibel, skalierbar und einfach anpassbar.

Icon WebFonts

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

HTML5

Mit HTML5 lassen sich Inhalte wie Texte, Bilder, Videos 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 gibt's ein paar Videos, in denen wir die Funktionsweise unserer webEdition-Templates zeigen möchten. Live und zum Anfassen gibt's die HMTL-Seiten hier zu sehen.

webEdition7 Template Tutorial: Card - Teil 1

Mit dem Card Modul lassen sich viele UI Elemente umsetzen. Dieses Video zeigt Euch einige Beispiele und die dafür nötigen Einstellungen.

webEdition7 Template Tutorial: Card - Teil 2

Im 2. Teil unseres Card Tutorials geht es um die Verwendung von Icons, anstatt Bilder.

webEdition7 Template Tutorial: Heroteaser

Bei diesem Tutorial zeigen wir Euch das Zusammenspiel mehrerer Module.


webEdition7 Template Tutorial: Bilderkarussell / Carousel

Ein Carousel ist ein guter Start für jeden Homepage. Hier erklären wir Euch, wie Ihr vorgehen müsst.

webEdition7 Template Tutorial: Sidebar

Mit unseren Templates habt Ihr die Möglichkeit Eure Seiten ein beliebiges Spaltenraster zu geben. Einige Beispiele zeigen wir Euch in diesen Video.

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, Fonts, Beispielbilder und Javascript in einem Paket als Zip-Datei herunter. Individuelle Anpassungen sind nur sehr eingeschränkt möglich und verlangen einige Kenntnisse in HTML und CSS. Quelloffene SCSS-Dateien auf Basis von SASS bieten wir kostenpflichtig an. Wer Interesse daran hat, sendet bitte seine Anfrage an: info@goldorange.com.

Komprimierte Version

Die Javascript & CSS Dateien sind bereits zur eine master.css bzw. master.js Datei komprimiert.

Dadurch wird die Dateigröße erheblich verringert und der Server muss weniger Requests ausführen. Schnellere Ladezeiten kommen bei Google gut an!

2. Dateistruktur

Der Download der komprimierten Dateien enthält folgende Struktur:

    dist/
    ├── css/
    │   ├── master.css
    ├── fonts/
    │   ├── ...
    ├── img/
    │   ├── ...
    ├── js/
    │   ├── master.js
    ├── php/
    └── ├── ...
              

Diese Dateien müssen ins Root auf den Webserver geladen werden.

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.

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 (7.0.0.0, SVN-Revision: 11989), die Du hier herunterladen kannst.

Wir bieten auch webEdition-Templates auf Basis von Bootstrap 3 an, die mit webEdition in der Version 6 und 7 kompatibel sind. Diese Templates bzw. unser Backup für die webEdition Version 6.3.8. kannst du hier herunterladen oder vorher ansehen.

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.

Das geht - allerdings nur sehr eingeschränkt. Wir haben unsere master.css aus der SASS-Datei heraus kompiliert und minimiert. Versierte HTML-Entwickler können ganz sicher Anpassungen bzgl. Schrift-Font oder Farben vornehmen. Aber Achtung: am besten immer eine Kopie unserer ursprünglichen Version zur Hand haben.

Quelloffene SCSS-Dateien auf Basis von SASS bieten wir kostenpflichtig an. Wer Interesse daran hat, sendet bitte seine Anfrage an: info@goldorange.com.

Hier gleich ein Link zum Thema "SASS für Einsteiger"

Ja. Wir veröffentlichen diese webEdition-Templates auf Basis der Creative Commons Namensnennung Lizenz. Somit sind unsere Templates für die private und kommerzielle Nutzung geeignet. Wer Fragen zur Nutzung bzw. zum Einsatz hat, darf uns gern eine Mail an hilfe@goldorange.com senden. Wir melden uns umgehend.

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.

Bereistellung quelloffene Dateien (SASS) und Installations-Support

Was bedeutet eigentlich "Quelloffen"? In unsere master.css-Datei werden aktuell 4 SASS-Dateien hinein kompiliert. Jede einzelne Datei enthält Informationen zu Farben, Fonts, Größenangaben, etc. Wer also zental individuelle Anpassungen vornehmen möchte, kommt mit unseren SASS-Dateien natürlich schnell und komfortabel voran. Weil wir aber hier viel Zeit und Herzblut eingebracht haben, können wir diese nicht kostenlos zur Verfügung stellen. Wir nehmen aber gern Anfragen für die Bereistellung quelloffener Dateien (SCSS) entgegen. Das gilt auch für einen kostenpflichtigen Installations-Support. Wir können gern unser Backup auf Ihrem Server installieren. Dafür einfach eine unverbindliche Anfrage starten.

Ich möchte mehr Informationen zur Bereistellung quelloffener SASS-Dateien.

Infos zu quelloffenen Dateien anfordern

Ich möchte wissen, was Installations-Support bedeutet und ob dafür ein eigener Webserver notwendig ist.

Infos zum Installations-Support anfordern
Kommentare zu den responsiven webEdition Templates
comments powered by Disqus