
Hi und herzlich Willkommen zu meinem Drupal 8 Kurs.
Solltest du zu diesen Kurslektionen Fragen oder Probleme haben, zögere nicht, diese in diesem Kurs zu stellen. Ich werde sie so schnell wie ich kann beantworten. Zur Motivation weise ich noch auf tolle Websites hin, die mit Drupal umgesetzt wurden. Viel Spaß und Freude an diesem Kurs und vielen Dank, dass du diesen Kurs erworben hast! :)
Für eine Alternative zu XAMPP, schaue Dir Lektion 5 an. Dort stelle ich kurz Acquia Dev Desktop vor, welches sich ebenfalls ideal für eine lokale Drupal-Instanz eignet.
Bevor wir mit der Erstellung einer Website mit Drupal 8 beginnen, müssen wir uns einen lokalen Server installieren. Hier hilft uns die kostenlose Software XAMPP, die uns eine lokale Entwicklungsumgebung auf unseren eigenen Computer bereitstellt.
In diesem Video laden wir XAMPP herunter und installieren es. Im Anschluss starten wir die Software.
WICHTIG: Das Xampp Control Panel (Software), worüber ihr die Server startet (Apache, MySQL, FTP-Server) solltet ihr vor dem Herunterfahren eures PCs oder Macs immer "Stoppen". Wollt ihr eure Arbeit am Localhost fortsetzen, so startet ihr die Software und die Server einfach wieder.
Drupal ist ein Content Management System basierend auf die Scriptsprache PHP. Um Inhalte bei Drupal zu speichern, benötigt es eine MySQL Datenbank. Diese Datenbank richten wir uns auf unserem lokalen Server ein. Alles was wir dafür brauchen ist erstmal nur ein Browser wie Firefox oder Google Chrome um die Benutzeroberfläche von phpmyadmin zu starten. Mehr dazu im Video.
Hinweis für XAMPP Nutzer:
Bitte nutzt eine XAMPP Version mit der PHP-Version 7.1 statt PHP 7.2. Die neueste PHP-Version verursacht noch Probleme bei der Installation von Drupal 8.4.x.
Drupal ist kostenlos. Bevor wir Drupal installieren können, müssen wir es erst herunterladen, entzippen bzw. entpacken und alle Dateien auf dem lokalen Server ablegen. Wo wir die Dateien genau ablegen, erkläre ich in diesem Video.
Wer Drupal 8 installieren möchte, der hat zwei Möglichkeiten. Entweder lokal auf seinem eigenem Computer bzw. Mac oder online auf einem Webserver. Hat man ein Webpaket bei einem Hostinganbieter wie Strato, 1&1, Webhostone oder andere Anbieter, so nimmt man sich deren Zugangsdaten zur Hand.
Beispiel wie im Video (lokale Installation):
Lokal haben wir die Datenbank selbst erstellt (phpmyadmin) und die Dateien unter C:\Xampp\htdocs\Drupal abgelegt. Anschließend öffnen wir den Browser und starten die Installationsroutine mit folgender URL: http://localhost/drupal/
Installation auf ein Webpaket / Webserver:
Haben wir die Zugangsdaten vom Webhoster parat, so finden wir dort die FTP-Zugangsdaten. Via File Transfer Protocol (kurz FTP) müssen wir die entpackte Drupal-Version, welche wir im Vor-Video heruntergeladen haben, auf dem Server laden. Das macht man am besten mit Filezilla. Dieses Programm kann man sich hier (https://filezilla-project.org/) kostenlos herunterladen und installieren.
Nachdem man über Filezilla die Daten hochgeladen hat, widmen wir uns der Installation von Drupal.
Im Anschluss startet man die Installationsroutine, je nach dem welche Domain auf das Webpaket-Verzeichnis leitet: www.deinedomain.de
Während der Installation benötigst du eigene MySQL-Zugangsdaten zur Datenbank, inklusive Passwort. Das Beispiel wie oben im Video wird so nicht funktionieren. Diese entnimmst du aus den Zugangsdaten vom Webhoster und trägst sie ein: MySQL Datenbank Name, Datenbank-User, Host (in meisten Fällen geht hier auch localhost oder der eigene Domainname).
Hinweis: Acquia Dev Desktop 2 ist ab der Nutzung von Drupal 8.4.x nicht mehr auf dem neuesten Stand!
Ich empfehle hier die Nutzung von XAMPP, die Bitnami Drupal Stack ( -> siehe Lektion 8) oder MAMPP. Acquia liefert hier global eine zu alte PHP- und Drush-Version aus. Somit würde Drupal 8.4.x nicht optimal auf eurer Entwicklungsumgebung laufen.
Acquia Dev Desktop stammt von den Drupal-Machern. Es bietet einen einfachen Assistenten an und erspart euch diverse Konfigurationseinstellungen, die bei XAMPP und Co. evtl. von Nöten sein müssten. In diesem Video stelle ich Acquia Dev Desktop 2 kurz vor.
Die Alternative zu Acquia Dev Desktop 2: Bitnami Drupal Stack für Windows User
Ihr wollt Drupal lokal auf dem eigenen Rechner ausprobieren und euch trotzdem nicht mit der Einrichtung MySQL-Datenbank und weiteren Settings herumplagen? Dann habe ich hier eine Alternative für euch. Drupal wird hier inkl. lokalen Server ganz bequem via Windows Setup installiert.
Herzlichen Glückwünsch! Bis zu diesem Punkt hast du schon eine große Hürde gemeistert. Du hast Drupal 8 selbstständig installiert. Nun ist es Zeit, sich das Content Management System mal genauer anzusehen. Welche Funktionen habe ich? Wie ist die Übersicht? Welche Bereiche gibt es? Dieses Video beantwortet deine ersten Fragen, bevor wir uns im Detail auf Drupal stürzen.
Statische Seite anlegen:
Die ersten Seiten kannst du in Drupal ganz einfach anlegen. Ähnlich wie in Wordpress benötigt man hierzu nur wenige Klicks. Zu Beginn klickt man im eingeloggten Zustand auf "Content" und dann auf den Button "Add content". Hier hat man die Wahl zwischen einem Artikel (zeitkritischer Content) oder einer Basic Page (statischer Inhalt). In dieser Lektion lernen wir das Anlegen von statischen Seiten.
Wer sich jetzt fragt, wie ich dieser Seite denn Bilder hinzufügen kann, der schaut sich das Video an. Hier erkläre ich, wie man zur statischen Seite noch Bilder hinzufügt und wie man diese anordnen kann.
Zeitkritischer Inhalt / Artikel erstellen: In diesem Video erstellen wir einen Artikel und stellen hier schon gleich die ersten Unterschiede bei den Inhaltstypen fest. Während wir bei statischen Seiten (Basic Page) kein Feld für einen separaten Bildupload haben, können wir hier sauber und ordentlich ein eigenes Bild direkt bei der Erstellung des Bildes hochladen. In diesem Video erkläre ich euch mehr dazu und wir ihr einen Artikel anlegt.
Übung zur Vertiefung:
Lege selbst drei weitere Artikel (zeitkritische Inhalte) und mindestens eine statische Seite (wie z.B. ein Impressum) an.
Warum? Ganz einfach. Mit mehr Inhalt lässt sich besser arbeiten und ihr vertieft gleichzeitig noch das hier bereits Gelernte.
Wenn ihr alles richtig gemacht habt, sollte eure Drupal Website in etwa so ähnlich aussehen wie die hier im Video gezeigte. Ich war etwas fleißiger und habe noch zwei weitere statische Seiten namens "Produkt" und "Dienstleistungen" hinzugefügt.
Wie ändern wir die Anordnung unserer Menüpunkte? Wie entferne ich den Menüpunkt zum Impressum vom Hauptmenu ins Footer-Menu? Auf diese Fragen gibt es die Antworten im Video. Nach dem Ansehen werdet ihr feststellen, dass es doch eigentlich ganz einfach ist.
Was sind Blöcke? Im Prinzip genau das, was es auch Bedeutet. Blöcke lassen sich in jedes Theme an bestimmten Bereichen (die vom Theme-Ersteller festgelegt wurden) positionieren. So lässt sich ein Login-Block z.B. in die linke Sidebar einbauen. Im Video geben wir anfangs einen ersten groben Überblick zum Thema Blöcke in Drupal.
P.s.: Unter Drupal-Leuten nennt man Bereiche > Regions.
Wie wäre es mit einem individuellem Block in der linken Sidebar?
In diesem Video erstellen wir als Beispiel einen Block mit Text und Link. Diesen positionieren wir in der linken Sidebar und erklären, wann wir diesen erstellen Block in bestimmten Situationen, an bestimmten Stellen oder für bestimmte User auch mal nicht anzeigen lassen können.
Wie entferne ich einen Block? Wir entfernen als Beispiel den "Powered by Drupal"-Block in diesem Video.
Der wirklich einfachste Weg das bisherige Design-Theme schnell farblich anzupassen, geht über das bestehende Standard-Theme namens Bartik. In diesem Video erklären wir, wie ihr ein individuelles und eigenes Farbschema zum Theme nutzen und einstellen könnt.
Ein anderes Theme finden und installieren
Nehmen wir mal an, wir haben keine Lust auf das Bartik-Theme und wollen uns schnell mit alternativen Themes auseinandersetzen. Dann ist diese Lektion die Richtige für Dich.
Wir installieren ein Beispiel-Theme und aktivieren es in Drupal.
Zum Download des Themes kannst du hier klicken: https://www.drupal.org/project/adaptivetheme
Erweitere deine Hauptnavigation (Main-Navigation) mit Drop-Down Menus:
Leider ist diese Funktion nicht mit dem Standard-Bartik Theme realisierbar, da nicht jedes Theme für Drop-Down Menüs vorbereitet wurde. Da wir aber in den vorangegangen Lektionen ein alternatives Theme installiert haben, kann ich euch nun zeigen, wir ihr spielend einfach Drop-Down Menüs in eure Hauptnavigation erstellt.
Neben den Inhaltstypen "Article" und "Basic Page" möchten wir nun einen weiteren Inhaltstyp mit festen vorgegebenen Felder definieren. Wie wir am besten vorgehen, wird in diesem Video erklärt.
Bevor ihr jetzt alle Inhalte für das Produkt "Fallschirm" fein säuberlich einpflegt (oder vielleicht sogar schon eigene Inhaltstypen nutzt) solltet ihr vorab eure Formularfelder testen. Sind alle Felder mit Inhalt in der Datenbank hinterlegt, ist es nicht mehr möglich, diese Felder zu editieren. D.h. ihr müsst den bisherigen Inhalt unter dem Feld löschen und neu anlegen. Wie ihr einen Content-Type korrigiert und was man noch bei den Veröffentlichungsoptionen auf der Startseite machen kann, erfahrt ihr in diesem Video.
Individuelle Übersichtsseiten mit Views
In diesem Video lernen wir die Funktion "Views" kennen und erstellen damit eine Produktübersichtseite unserer Fallschirme.
Aber wie stelle ich nun meine Produktdetails der Übersichtsseite nun untereinander dar? In diesem Video zeige ich es Dir. Hierzu nutzen wir erste kleine HTML-Kenntnisse eines <div>-Elements.
Taxonomie-Funktion in Drupal:
Die Taxonomiefunktion in Drupal erlaubt die hierarchische Kategorisierung von Begriffen. Diese Begriffe lassen sich dann mit Inhalten wie die aus dem Content Type "Article" oder andere taggen. Sinnvoll ist dies, wenn man Inhalte später mit Views nach diesen festgelegten Begriffen "filtern" und anzeigen möchte.
Unsere Content-Types wie Article und Fallschirme wollen wir jetzt um das Taxonomy-Vokabular "Fallschirmwelt" erweitern. Im Content-Type "Article" haben wir bereits ein Tags-Feld. Dieses fügen wir auch beim Content-Type "Fallschirm" hinzu.
Mit Views lassen sich nicht nur Übersichten / Ansichten von bestimmten Inhaltstypen generieren. Mit Views kannst du auch eine Übersicht über alle Inhalte eines bestimmten getaggten Begriffs anzeigen. Wie das geht, erfährst du ausführlich in diesem Video.
Nehmen wir mal an, ich möchte in der Sidebar rechts einen Block erstellen, der mir die neuesten drei Produkte anzeigen soll. Diese sollen zusätzlich direkt zur Produktbeschreibung verlinken. Mit Views lassen solche "Übersichten" auch als Block darstellen. Mehr dazu ausführlich im Video.
Ziel: Wir erstellen einen Block mit einer Slideshow. Diese Slideshow zeigt uns die neuesten Artikelbilder an. Bei Klick aufs derzeit angezeigte Bild, gelangen wir zum Artikel. Bevor wir dies mit Views einrichten können, bedarf es jedoch ein wenig Vorbereitung und ein paar Bibliotheken, welche wir im Drupal System unter Libraries hinterlegen müssen.
Teil 2: Wir sind mit unserer Slideshow fast am Ziel: Nur noch wenige Klicks und die Slideshow sollte laufen. In diesem Video erstellen wir dazu eine View welche in einem Block platziert wird.
In diesem Video zeige ich Dir, wie du schnell und einfach weitere Benutzer hinzufügen kannst. Du kannst z.B. neu hinzugefügte Nutzer auch als weiteren Administrator mit den gleichen Rechten einrichten.
Die Benutzerverwaltung von Drupal sieht eigentlich nur kompliziert aus, denn sie ist in Wirklichkeit logisch und einfach aufgebaut. Du kannst dem Benutzer je nach Benutzerrolle ganz individuelle Rechte vergeben und wieder entziehen.
Wenn zur Website keine Benutzerregistrierung gewünscht wird, dann kannst du diese spielend einfach deaktivieren. Wie das geht, erkläre ich Dir in diesem Video.
In den meisten Fällen wird das Standard-Registrierungsformular in Drupal nicht ausreichen. Wenn zusätzliche Felder bei der Registrierung ausgefüllt werden müssen, kann man das Formular einfach um weitere Felder erweitern. Im Gegensatz zu Drupal 7 benötigt man in diesem Fall keine zusätzlichen Module.
Tipp: Für zusätzliche Sicherheit kann man sich ein CAPTCHA Modul installieren und das Feld dazu in der Registrierung erweitern.
Standardmäßig setzt Drupal neue User in die Benutzerrolle "Authenticated User" bzw. "authentifizierte Benutzer". Das ist bei mehreren Benutzerrollen mit Administratoren, Autoren und einfachen Usern aber evtl. gar nicht gewünscht. Wer hier neue Benutzer eine eigene Rolle zuweisen möchte, schaut sich das Video hier an.
Drupal Datenbank sichern: Mit Drupal kann man schnell und sehr rudimentär seine Datenbank der Website sichern. Und das ohne den Umweg ins phpmyadmin-Tool gehen zu müssen. Dazu installiert man sich das Modul Backup & Migrate von der Drupal.org Projektseite und installiert es. Im Video zeige ich euch, wie ihr das Modul installiert und eure Datenbank lokal abspeichert.
In diesem Beispiel sichere ich die Drupal Website auf meinem lokalen Server. Selbstverständlich geht dies auch genauso über den FTP-Client bei einer Verbindung zu eurem Webserver. In diesem Video zeige ich euch, wie ihr die Dateien entsprechend abspeichert - inkl. der zuvor gesicherten Datenbank-Datei.
Es gibt viele Wege Drupal zu aktualisieren. Der für Anfänger einfachste Weg ist, dies manuell zu tun. Man lädt sich die aktuellste Version herunter und löscht aus dieser Version die Ordner /sites, /modules und /themes. Warum? Da diese beim rüberkopieren auf den Web- oder lokalen Server in keinem Fall überschrieben werden dürfen. Mehr dazu in diesem Video. Wichtig: Bitte sichert vorher eure bisherigen Daten auf dem Server und in der Datenbank. Die vorherigen Videos helfen dabei.
Endlich! Genug Englisch gelernt. In diesem Video stellen die Systemsprache von Englisch auf Deutsch um.
XAMPP-Nutzer: Bitte beachtet, dass unter XAMPP Probleme auftauchen können. Dies kann mit einer veralteten "cacert.pem"-Datei zu tun haben. Ich empfehle die Umstellung über Acqia Dev Desktop oder auf dem Webserver (vorher ein Backup machen und in den Wartungsmodus wechseln!)
Unter Extend / Erweitern befinden sich bei Drupal 8 bereits viele Module an Bord, die man bei Drupal 7 noch aufwendig suchen und installieren musste. Wir verschaffen uns in diesem Video einen kurzen Überblick.
Falls der aktuelle Drupal 8 Umfang nicht ausreicht und das System um weitere Module erweitert werden muss, so empfiehlt sich ein Besuch bei Drupal-org. Hier kann man nach vielen weiteren Modulen suchen und diese direkt mittels Download-Link installieren. Im Video installieren wir ein Cookie-Hinweis Modul.
Alle Projekt-Dateien zum Theming in Drupal 8
Im Laufe des Themings spreche ich ab und zu davon, dass ich euch die Dateien zur Verfügung stelle. In dieser ZIP ist alles drin. Sollte also im Kurs auf die eine oder andere Datei (z.B. das nackte Dootstrap-Theme) hingewiesen werden, dann nutze diese ZIP.
Brackets ist ein kostenloser und quelloffener Code-Editor für HTML, PHP, JS und vielen weiteren Sprachen. Beim Theming und auch sonst müssen wir Dateien mitunter editieren, erweitern oder neu erstellen. Mit einem Editor geht das Ganze leichter. Du kannst selbstverständlich jeden anderen Editor nutzen. Hauptsache man findet sich gut zurecht. Mit dem Editor öffnen wir nun das Drupal Projekt auf unserem Server unter htdocs, damit wir im Anschluss schnell Zugriff auf alle Dateien haben.
Falls du bereits einen SASS-Compiler hast, so kannst du diesen Schritt überspringen. Mit SASS kompilieren wird CSS-Dateien. Dies erlaubt uns Variablen für wiederkehrende CSS-Eigenschaften zu definieren. Ich nutze hier die möglichst faulste (aber nicht schlechteste) Methode, die mir im Netz begegnet ist, um SASS zu kompilieren. In der (mit Prepros kompilierten) ausgegebenen CSS-Datei ist dann alles drin: Bootstrap, Font-Awesome und deine eigenen Projekt-Styles.
Dootstrap Basis Theme für Drupal 8: Hier stelle ich euch ein nacktes Bootstrap Theme zur Verfügung, welches wir für die Design-Umsetzung nutzen werden. Bitte nicht verwirrt gucken. Ich habe es "Dootstrap" genannt. ;)
In diesem Video wird das Doostrap-Theme nun mit dem Compiler verknüpft, damit Prepros hier immer wieder eine frische style.css kompilieren kann.
Wer einen eigenen Compiler hat: Die Stylesheets in dem Ordner dootstrap/assets/stylesheets müssen in einer Datei namens style.css unter dootstrap/css ausgegeben werden.
Jetzt wird es spannend. Ich habe für euch mit Photoshop einen Design-Entwurf für das Theme vorbereitet. Genau diesen Entwurf werden wir als Drupal 8 Theme erstellen. In diesem Video stelle ich euch den Entwurf vor.
Wichtig zu jedem Theme: Die Regionen! Denn nur so, können wir dynamische Inhalte an den Stellen platzieren, die wir vorab im Entwurf und im Theme definiert haben. Im noch nackten "Dootstrap" Theme habe ich die Regionen für euch schon festgelegt. Ich stelle diese aber hier kurz vor, damit ihr ein Verständnis dafür erlangt.
Kurz vor der Umsetzung, schauen wir zum Verständnis uns noch mal kurz die wichtigsten Dateien des Themes an.
So, es wird kurz aufgeräumt. In diesem Video entferne ich die unnötigen Blöcke und schalte das Caching der CSS- und JS-Dateien ab.
Endlich starten wir die Designumsetzung und für euch ist folgendes dabei wichtig: In diesem Video zeige ich euch, wie ich in den bestimmten Dateien Variablen für Farben setze und wo ich genau die Styles reinschreibe, damit die bisherigen Standard-Styles von Bootstrap überschrieben werden. Habt ihr dies erst einmal verinnerlicht, ist der Rest der Umsetzung und Gestaltung auch kein Problem mehr. In diesem Video passen wir den Header und die Navigation nach Designvorlage an.
Nun binden wir ganz klassisch das Logo über die Design bzw. Theme Settings von Drupal ein.
So ganz perfekt wie im Entwurf, sieht es in unserer Umsetzung noch nicht aus. Daher passen wir das Logo in der Höhe an und entfernen noch den unschönen Border-Radius der Navbar.
Zeit für ein paar Social Media Buttons. Zugegeben, Whatsapp macht keinen Sinn, wenn man auf keine "Whatsapp-Seite" verlinken möchte. Aber man kann ja auch Twitter wählen.
In diesem Video fügen wir erst einmal die Social Media Buttons über einen benutzerdefinierten Block ein. Diesen platzieren wir in unsere Social Media Area und passen zum Schluss noch die Sub-Bar an, da die Abstände nicht ganz passten.
Social Media Circle Buttons. Damit Sie in Etwa so ähnlich aussehen, wie im Entwurf, gönnen wir den Social Media Buttons nun ein wenig CSS. In dem Video habe ich die Styles soweit vorbereitet und erkläre die Eigenschaften dazu kurz.
Breadcrumbs lassen sich auf der Startseite (im Gegensatz zum Design-Entwurf) irgendwie nicht darstellen. In diesem Video aktiviere ich die Breadcrumbs mithilfe eines Moduls "Easy Breadcrumbs" und platziere diese in unserem Breadcrumb-Bereich des Themes.
Bislang ist das Breadcrumb optisch noch nicht zufriedenstellend. Daher nutzen wir neben CSS auch die Möglichkeit eines Template Overwrites in Anspruch. Gleichzeitig lernt ihr, wie man Template-Overwrites für das eigene Theme anlegt und nutzt. Am Ende sieht das Breadcrumb doch ganz ansprechend aus und wir können neben der Navbar auch unsere Sub-Bar gestaltungstechnisch abschließen. Der Header ist am Ende des Videos fertig.
Es wird wieder Zeit aufzuräumen. Im Content-Bereich sind einige Blöcke zu sehen, die da nicht hingehören und die wir nicht brauchen. Daher entfernen wir diese unter Struktur > Blocklayout. Und es gibt auch wieder etwas zum Thema Breadcrumb. Damit die Titel richtig gesetzt werden und keine Node-Zahlen zu sehen sind, müssen wir eine Einstellung bei den Easy-Breadcrumb Settings vornehmen.
In diesem Video richten wir in einem Zug einen neuen Content-Type (Inhaltstyp), erstellen dazu die passende Node-Template-Datei, legen die Unterseite an und versehen diese mit einem Grid von Bootstrap. Am Ende dieses Videos ist die Unterseite aus dem Entwurf schon umgesetzt.
Der Vollständigkeithalber hier noch der Nachtrag zur allgemeinen Text-Schriftgröße via CSS. Diese könnt ihr einfach allgemein in eurer project.scss definieren.
Wir sind bereits bei der Startseite: In diesem Video legen wir einen benutzerdefinierten Block an und platzieren diesen in der Big Teaser-Region unseres Themes. Am Ende gestalten wir diesen mittels CSS wie in der Entwurfsvorlage.
In unserem Entwurf haben wir unter dem Teaser drei Kacheln, die aus den letzten drei Artikeln bestehen sollen. In diesem Video zeige ich euch, wie wir diese mit einem Views-Block anlegen.
Für die optimale Darstellung des News-Blocks / Newsbereichs auf der Startseite, müssen wir an das HTML-Markup der front--page.html.twig ran. Für die unterschiedlichen Hintergrundbereiche bauen wir <section /> Tags ins Markup und bauen dort neue <container>-Tags hinein, so dass der Content mittig ausgespielt wird und nicht über die volle Breite geht.
Letzte CSS Anpassungen für den News-Block/News-Bereich.
Der 3er Newsblock mit den letzten drei Artikeln kann sich schon sehen lassen, ist allerdings noch nicht perfekt. Dafür zeige ich dir, wie man beispielhaft Abstände des Bereichs hinzufügt, Hintergrundfarben ändert und Textgrößen anpasst. Am Ende haben wir ein zufriedenstellendes Ergebnis des News-Bereichs.
Ein weiterer Block auf der Startseite der einen Text, einen Button und ein dazugehöriges Bild anzeigt. In diesem Video erkläre ich euch, wie ihr diesen schnell einrichten könnt.
In diesem Video fügen wir noch das fehlende Bild zum Text des Info-Blocks ein. Zudem setzen wir in unserer project.scss, dass ab einer Screen-Größe von 762px die <h2> einen Abstand haben soll.
In diesem Video fügen wir in wenigen Minuten einen zweiten Info-Block hinzu. Diesmal jedoch in umgekehrter Bild-Text-Reihenfolge.
Bildabstand in den Info-Blöcken hinzufügen: In den Infoblöcken sind im Entwurf größere Bildabstände vorhanden, als in unserer Umsetzung. Diesen Mangel gilt es noch zu beheben. Wir setzen hier eine Klasse ein, die unser Problem schnell und allgemein für beide Blöcke behebt.
Footer-Vorbereitung: Damit wir einen Footer umsetzen können, wie auch im Entwurf zu sehen ist, solltet ihr jetzt ein paar Seiten anlegen. Schaut euch für mehr Informationen das Video dazu an.
Footer Menü-Blöcke anlegen und platzieren: In diesem Video lege ich den ersten Menu-Block im Footer an. Die restlichen bereitet ihr soweit vor, bis wir anschließend zur Gestaltung des Footers kommen.
In diesem Video gestalten wir den Footer ganz einfach mit CSS nach der Gestaltungsvorlage.
Die Social Media Buttons haben wir ja schon im Header angelegt. Also müssen wir in der Hinsicht auch nichts neues erfinden. Platziert in der vierten Footer-Block Region einfach den Social Media Share Buttons-Block und ändert den Titel in "Social Media".
Zum Abschluss binden wir noch eine Footer-Linie mithilfe eines weiteren Div-Containers ein. Nachdem ich dies abgeschlossen hatte, fiel mir allerdings noch eine weitaus angenehmere Variante mit gleichem Ergebnis ein: Setze beim Footer einfach einen Border-Bottom: 30px solid $main-color ein.
Zwischen Entwurf und Umsetzung sind nur noch wenige Unterschiede zu sehen. Die letzten beseitigen wir nun in diesem Video.
Zu unserer bestehenden Produktübersicht "Fallschirme" fügen wir beispielhaft einen Textbereich hinzu. Im Textbereich bietet es sich an das Thema Tokens kurz vorzustellen und anzuwenden. In diesem Fall möchten wir zusätzlich noch die Anzeige, wie viele Fallschirme sich in der Übersicht befinden. Da Drupal pro Produkt in der View eine weitere Reihe (row) anlegt, wissen wir, dass wir hier den Token View-rows einsetzen können.
Wichtig: Falls ihr Abschnitt 8 übersprungen habt, solltet ihr bei eurem Theme Bootstrap oder ein alternatives Framework im Hintergrund nutzen um auf dessen Grid-System zurückgreifen zu können.
In diesem Video stellen wir die Produktübersichtsseite (View) mithilfe von Bootstrap so um, dass es mobil optimal dargestellt (responsive) werden kann.
Wie deaktiviere ich eigentlich den Feed-Link aus der View?
Gute Frage. In diesem Video wird diese beantwortet, bevor wir mit der weiteren optischen Optimierung fortschreiten. Auch unnötige Zeilenumbrüche <br> wollen wir aus den Feldern der View-Row entfernen.
In einem Rutsch verbessern wir die Produktübersichtsseite in der Darstellung: Dazu passen wir die Abstände an, vergrößern die Schrift bei den Produkttiteln, geben den Preis rechtsbündig und in "grün" aus und erhöhen den Abstand zwischen den Views (als Content) und dem Footer, damit dieser nicht oben dran klatscht.
Produktübersichtsseite mit Buttons zu den jeweiligen Produktseiten (Nodes)
In diesem Video erkläre ich, wie man auf der Produktübersichtsseite noch Links bzw. Buttons zum angebotenen Inhalt hinzufügt.
Wenn wir von der Produktübersichtsseite auf die Detailseite klicken, gelangen wir zu einer Node. In diesem Fall ist es Inhaltstyp namens "Fallschirm". Diesen wollen wir optisch etwas aufwerten, dafür benötigen wir eine Node, die wir für unser Theme "Dootstrap" überschreiben und anpassen können. Wie das geht, erkläre ich in diesem Video.
Node eines Inhaltstypen im eigenem Theme umgestalten
In diesem Video lernen wir, wie wir ein Node zu einem Inhaltstypen umgestalten können. Dabei zeige ich euch, wie ihr ein bestimmtes Feld, welches ihr in einem Inhaltstyp angelegt habt, an einer bestimmten Position eures Templates darstellt.
Drupal 8 Dokumentation: Hilfe beim Theming und mehr
Wer mehr als nur Werte und Variablen in seiner Node, seiner Page oder in seinen Views nutzen möchte, dem empfehle ich für Detailfragen einen Blick in die offizielle Drupal 8 Dokumentation. In diesem Video blicken wir auch kurz in das Thema des Themings. Generell empfiehlt es sich, auch bei Problemen (wie lösche ich den Cache,wenn Drupal über die Website nicht erreichbar ist - Stichwort: Truncate Cache Clear) die Dokumentation aufzusuchen.
Bei Fragen zum Kurs solltet ihr natürlich mich fragen. Ich helfe euch gerne.
Was ist Drush?
Drush ist eine shell-basierte Anwendung zur Kontrolle, Manipulation und Administration von Drupal 8 Websites. Du kannst mit dieser Anwendung spielend leicht und in sekundenschnelle Befehle für Drupal ausführen, ohne dich über den Browser ins Backend von Drupal durchklicken zu müssen.
Drush ist bei Acquia Dev Desktop 2 bereits an Bord
Wo du es findest, zeige ich dir in diesem Video.
Ohne Acquia Dev Desktop benötigt man den Composer (Windows/Mac/Linux)
Installiert den Composer. Je nach System gibt es mehrere Möglichkeiten. Windows User nutzen am einfachsten die composer-setup.exe. Geht hierzu auf die getcomposer .com Website.
Drush installieren
Nach Composer geht die Installation von Drush ziemlich einfach. In diesem Video installieren wir Drush in wenigen Minuten.
Drush starten und Cache der Drupal 8 Seite leeren
Achtet beim öffnen der Konsole darauf, dass ihr im Verzeichnis der Drupal 8 Website unterwegs seid. Jeder Drush-Befehl beginnt mit "drush" unter Windows.
Den Cache der Drupal 8 Website leert ihr mit dem Befehl: drush cr
Mit Drush neue Module herunterladen, installieren, aktivieren und deinstallieren
Drush macht es einem ziemlich einfach in sekundenschnelle weitere und neue Module zu installieren. Bitte beachtet, dass bei Fehlern ein Cache-Reset von Nöten ist. Gebt hierzu "drush cr" ein.
Drupal mit Drush in den Wartungsmodus versetzen, updaten und wieder live schalten
Ganz wichtig: Sichert vorher eure Website (siehe Abschnitt 5)! Wie wir die Website in den Wartungsmodus versetzen, ein Update durchführen und den Wartungsmodus wieder abschalten, seht ihr in diesem Video.
Die wichtigsten User-Kommandos für Drush
In diesem Video zeige ich Dir wie man einzelne User-Informationen abruft, das Passwort eines Users ändert, einen neuen User hinzufügt und wieder löscht.
Drush Kommandos online abrufen
Wer weitere Drush Commands erlernen möchte, dem sei die Website drushcommands*com empfohlen. Hier sind alle aktuellen Commands inkl. Erklärung (leider auf englisch) vorhanden. Ideal um das Wissen um Drush zu vertiefen. Die Möglichkeiten sind groß.
Erstelle großartige, richtig flexible, modulare WEBSITES mit Drupal 8!
Der erste große, deutschsprachige Drupal 8 Kurs mit kostenlosem Bootstrap Basis-Theme inkl. Font-Awesome!
Vergiss teure Komponenten und Module, wie bei Joomla und Wordpress. Bei Drupal baust du beispielsweise Immobilien-Websites, Produktdatenbanken und mehr auch ohne Programmierkenntnisse - (Stichwort Views, Inhaltstypen, Taxonomie)
Lerne, wie du deine Drupal Website in Minutenschnelle erweitern kannst.
Dieser Kurs bietet dir EIN ECHTES PRAXISBEISPIEL - vom grafischen Design bis hin zur Umsetzung in Drupal!
Mit Drupal 8 erlernst du bereits jetzt die BASIS für künftige Drupal-Versionen.
Wusstest Du, dass viele internationale Unternehmen und Institutionen ebenfalls Drupal als CMS für ihre Websites einsetzen? Mit diesem Kurs, kannst Du das auch!
Drupal 8 ist ein Content-Management-Framework (CMF) und -System (CMS). Es ist kompakt und komplett flexibel. Jede Funktionalität lässt sich modular nachrüsten. Im Gegensatz zu Joomla! und Wordpress sind alle Module kostenlos, ohne heimliche und kommerzielle Backlinks und gemeinschaftlich von der großen Drupal-Community entwickelt. Das bedeutet für Dich: Großartige Websites mit geringen Kostenaufwand.
Mit diesem Kurs schubse ich Dich ins kalte Wasser von Drupal. Ich verspreche Dir, du wirst schnell selbst schwimmen können - und das komplett ohne Programmierkenntnisse! Wir behandeln anfangs die Grundlagen von Drupal, gehen über in die Besonderheiten und befassen uns am Ende mit dem Theming und der Optimierung deiner Website.
Es gibt Momente, da verzweifelt man ein wenig an Drupal. Dieser Kurs schafft Abhilfe und erklärt auch den teilweise schwierigen Einstieg in Drush. Drush ist eine Shell-Kommandozeile für Drupal.
Willst Du ein eigenes Theme für Drupal umsetzen, so ist dieser Kurs genau das Richtige für Dich. Ein Basis-Template inklusive Bootstrap-Framework stelle ich Dir gratis zur Verfügung.
Bis zum Theming erkläre ich die Grundlagen von Drupal. Bis dahin sind noch nicht mal HTML- und CSS-Kenntnisse notwendig. Beim Theming allerdings schon. Und wenn du Dich bereits mit Bootstrap auskennst, wirst Du diesen Kurs sogar lieben!