So erstellst du effizient Wordpress-Websites mit Divi

1. Einführung: Hallo und herzlich willkommen, wie Sie WordPress-Websites mit Divi effizient erstellen können. Mein Name ist Chris, und ich bin seit drei Jahren freiberuflich als Webentwickler tätig, oft arbeite ich mit WordPress. Im Laufe der Jahre bin ich gekommen, um zu lernen, wie man WordPress-Websites den richtigen Weg zu bauen, und was ich damit meine, ist, wie man Websites effizient zu bauen, die auch in der Lage sind , leicht aktualisiert werden und pflegen auf der Strecke. Sie sehen, als ich meine erste Website gebaut habe, habe ich beschlossen, mein eigenes Thema von Grund auf neu zu bauen. Ich nahm einen 7-stündigen Kurs, nur um die Grundlagen zu lernen und dann verbrachte die nächsten Wochen in Vollzeit auf meiner Website zu arbeiten, um es zum Laufen zu bringen. brauchte nicht nur eine lange Zeit, um zu bauen, jedes Mal, wenn ich es aktualisieren wollte, sogar nur um einen Text auf einer Lernseite zu ändern, musste ich in den Back-End-Code springen und die Website manuell aktualisieren. Vertrauen Sie mir, es ist ein Schmerz im Hintern und ich fragte mich, wie professionelle Freiberufler und Agenturen WordPress-Sites machen? Sicher verbringen sie nicht 40 Stunden die Woche damit, ein einziges Grundstück zu bauen, was fehlt mir hier? Nun, es war erst, wenn ich Monate und Jahre freischaffend mit WordPress verbrachte, mit anderen Entwicklern zu sprechen und für Agenturen zu arbeiten , erkannte ich den richtigen Weg, um WordPress-Sites zu entwickeln. Nun, versteh mich nicht falsch, wenn du dein eigenes Thema erstellen möchtest, um als Produkt auf Themenwald oder ähnlichen Marktplätzen zu verkaufen , sei mein Gast. Aber für den Aufbau schnell und [unhörbar] WordPress-Websites für Kunden anpassen, wollen Sie nicht, um das Rad jedes Mal neu zu erfinden, wenn Sie mit einer neuen Website-Entwicklung beauftragt sind. Also in diesem Kurs werde ich Ihnen beibringen, wie WordPress-Websites viel schneller zu entwickeln und zu aktualisieren , indem Sie ein Premium-Theme wie Divi anpassen. Divi ist jetzt das, was ich benutze, um alle meine eigenen Websites sowie Websites für Kunden zu entwickeln , und ich habe festgestellt, dass es eines der vielseitigsten und effizientesten Themen ist, um das Layout oder Design zu erstellen, das Sie bitte. Also, wenn Sie bereit sind, den richtigen Weg zur Entwicklung von WordPress-Websites zu lernen, klicken Sie auf das nächste Video und lassen Sie uns beginnen. 2. Das brauchst du für den Kurs: Bevor wir anfangen, brauchst du ein paar Dinge. Nummer 1, einige frühere Fähigkeiten. Sie werden einige grundlegende Kenntnisse in HTML, CSS und PHP benötigen, und einige grundlegende Webmaster-Fähigkeiten, dh, wie zu hosten und verwenden Tools, um Ihre Website zu aktualisieren. Wenn dies Ihr erster Kurs auf Web-Entwicklung ist und Sie nicht mit den Grundlagen vertraut sind, empfehle ich Ihnen auf jeden Fall, meine erste Skill-Share-Klasse „Understanding Web Development“ zu sehen , die Ihnen das Anfängerwissen geben wird, um teilzunehmen diese Klasse. Was unseren Technik-Stack betrifft, ist es sehr einfach. Nummer 1, wir brauchen einen Server, der ein Ort ist, um Ihre neue Website zu hosten. Wir brauchen WordPress und wir werden Divi brauchen. Hosting wir in Verständnis Web-Entwicklung abgedeckt und wir abgedeckt ein wenig Installation WordPress. Divi natürlich, ist ein benutzerdefiniertes Premium-Thema, so dass es mit einem Preis kommen. Zu den Tools, die Sie benötigen, um Ihre WordPress-Website zu entwickeln, gehören ein Code-Editor, ein FTP-Client und wenn Sie Ihre Website lokal erstellen, ein PHP-Webserver, wie MAMP auf Mac oder WAMP auf dem PC. Aber wieder, all diese waren in meiner letzten Klasse abgedeckt. Also sollten Sie das jetzt verstehen und bereit sein, das in die Praxis umzusetzen. Wenn nicht, überprüfen Sie vielleicht einige dieser Teile der vorherigen Klasse und besuchen Sie uns hier, wenn Sie bereit sind. Ich denke, das deckt ab, was wir brauchen, um loszulegen. Ich werde Sie im nächsten Video sehen, wo wir WordPress und Divi diskutieren, und wie wir gemeinsam WordPress-Websites erstellen können super schnell und doch vollständig anpassbar zur gleichen Zeit. 3. Einführung in Wordpress: Wenn Sie meinen vorherigen Kurs zum Verständnis der Webentwicklung genommen haben, wären Sie durch die Bonusstunde am Ende der Klasse in WordPress eingeführt worden . Um zusammenzufassen, ist WordPress im Grunde ein freies und Open-Source-Content-Management-System basierend auf PHP und MySQL. Im Wesentlichen ist es eine Reihe von Code, der die Grundlage für eine inhaltsbasierte Website bildet. Aber was meine ich, wenn ich eine inhaltsbasierte Website sage? Nun, wenn Sie jemals einen Online-Blog gelesen oder durch Seiten einer Unternehmenswebsite gelesen haben, dann haben Sie mit einer inhaltsbasierten Website interagiert. Es ist einfach eine Website, die Inhalte anzeigen kann, sei es eine Reihe von Seiten oder Blog-Posts, die regelmäßig veröffentlicht werden. Die meisten Websites, würde ich sagen, passen zu diesem Modell einer inhaltsbasierten Website. Das heißt, die Website ist einfach eine Quelle von Inhalten, wo der primäre Zweck der Website ist, dass Benutzer Inhalte zu konsumieren. Das war's. Um dies mit einer so genannten Web-App zu vergleichen. Web-Apps bieten einige benutzerdefinierte Funktionen. Zum Beispiel Google Docs. Es ist ein Ort, an dem Sie freigegebene Dokumente schreiben, bearbeiten und anzeigen können. Facebook, eine weitere Web-App für soziale Netzwerke und die Verbindung mit Freunden und Dropbox eine App für Dateispeicherung. Nun, während Content-basierte Websites, die auf WordPress gebaut werden könnten auch als Apps betrachtet werden, sie alle teilen eine grundlegende Funktionalität, die Inhalte zu teilen ist. Während alle Beispiele, die ich bereits erwähnt habe, tun sie alle etwas ganz anderes. Grundsätzlich, es sei denn, Sie wollen eine neue Software entwickeln, um Facebook oder ABNB zu konkurrieren, dann sprechen sie die meiste Zeit, wenn jemand sagt, dass sie eine Website wollen , wahrscheinlich über eine inhaltsbasierte Website. WordPress ist definitiv die beliebteste Software für die Entwicklung dieser Websites. In der Tat, nach einigen Quellen, versorgt es fast ein Drittel des Internets. Popularität einer bestimmten Plattform ist eine gute Sache, weil dies bedeutet, dass es eine riesige Gemeinschaft von Entwicklern, die Unterstützung bieten und Tausende von Themen und Plug-Ins für Ihre WordPress-Website erstellen . Warten Sie, was sind Themen und Plug-Ins? Ich bin froh, dass du gefragt hast, weil ich gerade dabei war, sie zu decken. Wenn Sie eine WordPress-Website installieren, erhalten Sie das folgende Design. Im Grunde sehen sie so aus. Dies wird entsprechend dem angepasst, was Sie bei der Installation in das Formular einfügen. Wir werden die Installation später übergehen. Aber im Grunde ist dies Ihr Blog-Titel und das ist Ihr Slogan, der als Untertitel endet. Das ist dynamisch, wenn Sie die Installation durchführen. Aber dieser Blick mit dem Teil und der Hello Welt hier unten wird die gleiche sein wenn Sie eine WordPress-Website jetzt zur gleichen Zeit veröffentlicht wurde dieser Kurs aufgezeichnet. Der Haftungsausschluss hier ist, dass WordPress ändert ihr Thema jedes Jahr, bringen sie ein neues Standard-Theme. Wenn Sie diesen Kurs später im Jahr oder 2019, 2020 machen, hat sich das Standardthema wahrscheinlich bis dahin geändert. Aber für jetzt, jeder, der WordPress installiert bekommt dieses Thema, das heißt 2017. Obwohl es 2018 ist, haben sie das Thema 2018 noch nicht veröffentlicht. Was wir jetzt tun wollen, nur um Ihnen Themen und Plugins zu zeigen , ist in unser WordPress-Dashboard gehen. Ich bin momentan abgemeldet, also muss ich meine Login-Daten eingeben. Ich habe die hier gerettet. Dies sind die, die wir im späteren Video zur Installation von WordPress verwenden werden. Aber es ist im Grunde, was Sie einrichten, wenn Sie WordPress installieren. Was Sie bekommen, ist das WordPress-Dashboard. Das ist es. Das Frontend Ihrer Website ist das, was wir zuvor gesehen haben. Das wirst du sehen. Wenn Sie eingeloggt sind, erhalten Sie diese Leiste hier oben, die Ihnen nur zeigt, dass Sie eingeloggt sind und dann können Sie gehen und tun Dashboard. Je nachdem, welche Plugins oder Dinge Sie nicht gespeichert haben, könnte es hier oben mehr geben. In der Tat, mit Divi, wird es einige neue Tasten, die hier kommen. Auch bestimmte Teile der Seite, die Sie als Admin bearbeiten können, können Sie bearbeiten, eingeloggt. Das ist Ihre Vorderseite der Website. Dies ist Ihr Dashboard, das nur die Nutzung Ihrer Website sehen und einsehen kann. Dann all diese Felder, all diese kleinen Menüs, Zeug, die nur Administratoren sehen können. Das erste, worüber ich sprechen möchte, sind Themen. Sie gehen zum Erscheinungsbild, klicken Sie auf Themen, und Sie können hier sehen, das Thema, über das ich sprach 2017 installiert ist. Wenn Sie dies bereits im Jahr 2015 installiert haben, hätten Sie das als Standardthema erhalten. Im Jahr 2016 hätten Sie das als Standardthema erhalten. Sie können hier reingehen und Sie können eine Live-Vorschau sehen und sehen, wie Ihr Thema aussehen würde , wenn Sie dieses Thema verwenden würden. Anstatt sofort umzuschalten, können Sie ein bisschen eine Vorschau haben, wenn Sie es mögen. Großartig. Sie können aktivieren und veröffentlichen oder Sie können einige der Einstellungen hier ändern und dann aktivieren und veröffentlichen, und Sie erhalten dieses Thema. Nun, um Themen ein wenig zu erklären, ist es im Grunde wie die Haut Ihrer Website. Es wird Layout und so organisieren. Wenn wir uns die Vorschau von 2017 hier ansehen, hat es dieses große Bild mit Ihrem Blog-Titel und Untertitel. Entschuldigung, Slogan ist, wie sie es in WordPress nennen. Dann haben Sie die Menüleiste, und es ist eine Parallaxe Sache, so dass sich das Bild nicht ändert, aber der Inhalt kommt von unten. Jetzt gibt es natürlich einige Anpassungen mit diesem. Wir können dies auf eine Seite mit statischem Inhalt setzen , anstatt eine Liste aller Blogbeiträge. Es gibt eine Menge, die wir tun können, aber im Grunde ist die Haut oder das Layout durch das Thema diktiert. Eigentlich einer der Gründe, warum ich Divi gerne als Thema benutze, ist es ziemlich Bass beginnt oder es macht nichts Verrücktes mit dem Layout. Es hat nur eine Menüleiste, die Sidebar. Es ist ziemlich minimal, was gut ist, weil es uns viel Raum für Anpassung gibt. Sobald wir Divi installiert haben und anfangen, es zu benutzen, werden Sie beginnen, Themen ein wenig besser zu verstehen. Aber die anderen wichtigsten Dinge, die wir in WordPress stecken ist treffend genannt Plugins. Sie können hier hineingehen und Sie können sehen, welche Plugins wir bereits installiert haben. Dies sind einige Standard-Plugins, die mit dieser WordPress-Installation kommen. Wenn wir neue hinzufügen wollten, gibt es Tausende und Tausende von Plugins. Was sind Plugins? Plugins sind im Grunde zusätzliche Funktionen, die in Ihr Projekt gehen können. Wenn wir eine Meta-Beschreibung hinzufügen wollten, die wir in einem zukünftigen Video tun werden. Ich werde über einige der beliebtesten Plugins gehen. Wir können ein SEO-Plugin hinzufügen. Wir können Dinge wie Google Analytics hinzufügen. Es gibt einige, die sehr grundlegende Funktionalität, die nur Klonen einer Seite, klingt sehr einfach, aber WordPress enthält es nicht standardmäßig. Jemand dupliziert Seiten. Die, die ich benutze. Jemand hat ein Plugin erstellt, mit dem Sie Seiten duplizieren können. Um Themen und Plugins zusammenzufassen. Themen wie Ihre Haut, es ist das Layout, es ist, worauf die Website basiert. Sie diktieren, was auf den Seiten läuft, aber das Layout und das grundlegende Styling werden durch das Thema bestimmt. Plugins geben Ihrer Website neue Funktionen, die sie vorher nicht hatte. Es gibt einen Kompromiss von Plugins manchmal fügen sie zu viel hinzu. Es kann Ihre Website belasten. Wenn alles, was es erfordert, eine kleine Codeänderung ist und Sie gerne eingehen und den Code ändern, dann geht es Ihnen gut. Andernfalls ist es manchmal am besten, ein Plugin zu verwenden. Das sollte feststellen, was ein Thema und ein Plugin ist. Ich möchte Ihnen zeigen, sobald wir in ein bestimmtes Thema gehen, gibt es eine Option, um anzupassen. Jetzt wird dies vom Theme-Entwickler eingerichtet. Sie wählen, was Sie in dieses angepasste Menü setzen möchten. Sie sind nur durch das begrenzt, was der Theme-Entwickler entscheiden, hier zu setzen. Aber was wir tun können, ist unser eigenes Logo zu setzen. Wir können den Website-Titel und Slogan ändern, was die Sache ist, die hier kommt. Wir können uns entscheiden, sie überhaupt nicht zu zeigen. Einige dieser Änderungen werden live angezeigt, während wir sie tun. Wir können das Farbschema ändern. Hier unten wird es heller Text auf dunklem Hintergrund sein , anstatt dunkler Text auf hellem Hintergrund. Hier können wir Menüs erstellen. Wir können Widgets hier erstellen, die wahrscheinlich am besten, sie im Dashboard zu tun. Aber im Grunde lassen Sie uns einfach eine Änderung erstellen. Ich mag diesen dunklen Hintergrund, also werde ich darauf klicken und dann werde ich auf Veröffentlichen klicken. Das wird unsere Veränderungen zum Leben bringen. Nun, das war nur eine Vorschau. Jetzt ist es live, weil es hier veröffentlicht steht. Nun, das ist wahrscheinlich der erste Ort, an dem Sie Ihr Thema anpassen würden. Aber du kannst sehr tief gehen. Wie tief Sie gehen können, ist, dass Sie tatsächlich in den Code graben können. Sie können hier runter gehen, um Redakteur. Sie haben die vollständige Quellcode-Steuerung Ihres Themes. WordPress gibt uns eine Warnung. Sie haben die Möglichkeit, Ihre gesamte Website durcheinander zu bringen , wenn Sie sich mit den PHP-Vorlagen verwirren. Es wird nicht geraten, dass du hier drin Sachen ohne zu wissen, was du tust und was du zu erreichen versuchst. Ich werde auf verstehen klicken. Dann sehen wir hier unsere Theme-Dateien. Dieses ist die Stylesheets, die alle unsere Styles haben. Dann haben wir all diese Vorlagendateien, die ich später im Kurs erklären werde. Im Grunde, was ich hier raus wollte, ist das, was macht WordPress mächtig. Sie haben Anpassungsoptionen auf oberster Ebene, mit denen Sie Dinge ändern können. Klicken Sie erneut auf anpassen, können Sie in visuelle Builder gehen und klicken Sie in und ändern Sie die Dinge, wie Sie auf jeder Website ohne Code tun würden. Aber wenn Sie dann tiefer gehen müssen, gibt es vielleicht etwas, das Sie ändern können. Sie können direkt in den Code gehen und die gesamte Codebasis ist vollständig Open Source. Ich habe eine lokale Installation direkt hier. Dann kann ich es dir zeigen. Dies ist etwas, das ich später im Kurs in der Installation von WordPress lokal einrichten werde. Aber wie Sie sehen können, ist dies WordPress genau hier. Ja, es gibt auch eine Datenbank, die vollständig editierbar ist, aber hier sind alle Ihre Dateien. Wenn wir in WP Content gehen und wir uns mit Themen befassen, dann gehen wir in 2017, dies wird mit dem übereinstimmen, was hier ist. Siehst du, wir haben das Stylesheet hier. Stylesheet dort. Die Datei functions.php, sehr wichtig ist, ist da, und es ist auch da. Sie können es hier bearbeiten oder Sie können es hier bearbeiten. Der Punkt, den ich mache, ist die vollständige Anpassung der Codebasis und auch der Vorteil eines Dashboards, in dem Sie eingehen und Dinge ändern können , ohne in den Code eingraben zu müssen. Das ist, was WordPress wirklich mächtig macht. Deshalb ist es ein sehr beliebtes CMS. 4. Einführung in Divi: Divi ist ein Premium-Thema, das von einer Firma namens Elegant Themes erstellt wurde. Leider ist Divi, wie wir bereits erwähnt haben, ein kostenpflichtiges Thema, und zum Zeitpunkt der Aufnahme dieses Kurses sind es $89 pro Jahr, um die Rechte zu haben, Divi zu verwenden. Nun, wenn $89 für Sie nach viel klingt, verstehen Sie einfach den möglichen Wert hier. Mit einem Abonnement von $89 pro Jahr können Sie so viele Divi-Sites erstellen, wie Sie möchten. Wenn Sie freiberuflich sind oder eine Agentur betreiben, diese $89 zu einem Kinderspiel, da Sie nur einmal pro Jahr zahlen, und dann können Sie diesen Wert für alle Ihre Kunden anbieten. Aber es liegt an dir. Ich kann nur für mich selbst sprechen, wenn es um Divi geht, und ich muss sagen, dass es sich lohnt. Es gibt ein paar Alternativen, die wir in nur einer Sekunde besprechen werden, also bleiben Sie dran. Moment möchte ich aber mehr über Divi erklären, und dafür ist es Zeit, zum Computer zurückzukehren. Wir werden darüber nachdenken, wie man Divi in einem späteren Video installiert. Aber nur um Ihnen eine schnelle Demonstration zu geben, nachdem Sie Divi installiert und aktiviert haben, wird Ihre Website dazu ändern. Dies ist im Grunde Divi standardmäßig, und es mag auf den ersten Blick nicht so beeindruckend aussehen, aber die Macht von Divi liegt im Seitenaufbau. Also, was ich tun werde, ist auf „Neue Seite“ zu klicken und wir können beginnen zu sehen, was die Divi-Seite Builder mögen. Jetzt in einer traditionellen Wordpress-Seite oder Wordpress-Post ohne Divi, das ist, was Sie verwenden würden. Also Ihre Optionen hier oben und Sie können in eine Überschrift setzen. Also hier oben wäre eine Überschrift 1, also werde ich sie in Überschrift 2 setzen, und wie gut sein, nennen wir es einfach Überschrift 2 Ich weiß nicht, was ich da hineinlegen soll, und dann hast du Absatz bla, bla, bla, bla, bla. Sie können es fett formatieren, Sie können es kursiv, Sie können in der Mitte nach links, rechts ausrichten , in ein Zitat machen, einen Link einfügen, all das Zeug, aber das ist ziemlich alles. Sie können zu Text gehen und ihn im HTML-Stil bearbeiten. Sie werden also sehen, dass, wenn wir etwas ausgerichtet haben, es in einem Stil nach links ausgerichtet ist, also nur um zu demonstrieren, dass ein linker ausrichten, sorry, Text in der Zeile rechts, und es ändert es dort, aber wir können in HTML gehen und ändern Sie es nach links und es ist links. Nun, das heißt, WordPress normaler Editor, aber die Macht von Divi ist im Page Builder, wie ich schon sagte. Ich werde auf diese große lila Schaltfläche klicken, um den Page Builder zu verwenden. Ich verwende gerne den Standardeditor, weil Sie die Struktur sehen können, aber Sie können auch einen visuellen Builder verwenden, der es Ihnen ermöglicht, Dinge zu erstellen und sie sofort visuell zu sehen. In dieser Demo, um Ihnen die Macht von Divi zu zeigen, Ich denke, wird beeindruckender sein, um den visuellen Builder zu verwenden, also werde ich über in das springen. Es fragt, ob Sie die Tour machen wollen, Sie können definitiv diese Tour machen, ich werde nur anfangen zu bauen, weil ich das vorher getan habe. Sie haben Ihre Seite, die so leer ist, aber dann haben Sie dies, was Ihr Abschnitt ist, Sie Zeile, Sie können in einer anderen Zeile hinzufügen. Sie können es zu einer zweispaltigen Zeile machen, und dann können Sie Module einfügen. Ich laufe das nur schnell als Demo durch, du wirst sehen, was wir weiter unten auf der Strecke machen können. Aber lassen Sie mich sehen, was ich in ein Bild setzen werde. Ich habe noch keine Bilder. Welche Bilder habe ich? Ich habe ein Foto von mir. Also kann ich das dort platzieren, und das wird die Hälfte der Seite beanspruchen, weil ich ein zweispaltiges Layout eingerichtet habe. Dann kann ich hier vielleicht einen Text aufstellen, und vielleicht wird der erste Teil des Textes eine große Überschrift sein , die sagt: „Hi, ich bin Chris.“ Sie können sehen, dass diese Veränderungen lebendig vor Ihnen geschehen, das ist die Macht des visuellen Builders von divi. Dies ist im Wesentlichen das, was ein Seitengenerator tut, nicht notwendigerweise auf diese visuelle Weise, aber es ermöglicht Ihnen, eine Seite basierend auf Abschnitten, Zeilen, Spalten und Modulen zu erstellen . Das unterscheidet sich leicht zwischen verschiedenen Seitenbuildern, aber das ist im Allgemeinen eine gute Struktur, eine gute Hierarchie, um Dinge zu betrachten: Abschnitte, Spalten, Zeilen und Module. So funktioniert es definitiv in Divi. Also, wenn Sie das mögen, zum Beispiel, möchten Sie vielleicht in einen anderen Abschnitt einfügen, und es kann ein Abschnitt mit voller Breite oder ein regulärer Abschnitt sein, dann wird es Sie noch einmal fragen, wie viele Spalten möchten Sie in Ihrer Zeile? Vielleicht vier Spalten, die Sie hier sehen können. Jetzt kann ich die Taste drücken und weitere Module hinzufügen. Sie können auch ein benutzerdefiniertes Codemodul hinzufügen, Sie einfach den gewünschten Code ein und es ist immer noch ausgerichtet. Ich denke, die größten Vorteile des Seitenbaus ist das Layout, weil wir diese vier Spalten reaktionsschnell Layouts erstellen können. Wenn ich es wollte, glaube ich nicht, dass es funktioniert, wenn Sie Visual Builder haben. So können Sie hier sehen, dass es reagiert, das war auf der linken Seite und das war auf der rechten Seite. Aber jetzt, da ich es geschrumpft habe, geht es in eine schrumpfte Umgebung. Dies ist die Macht der Verwendung eines Premium-Thema übrigens, es ist definitiv alles für mobile optimiert, so dass Sie diese flüssigen Layouts haben können, aber dann können Sie auch die Vorteile von Modulen nehmen. Also, was wäre ein cooles, wie ein Kreiszähler. Dann müssen Sie nur eine Nummer eingeben. Sie haben diesen Kreis, der direkt animiert, indem Sie ihn in wie setzen. Um dies zu programmieren, würde so viel mehr Zeit in Anspruch nehmen, aber Sie erhalten diese Elemente oder ihre Codemodule in Divi, dass Sie einfach Dinge hineinwerfen können, sagen wir, auf 50 Prozent abgeschlossen. Dann drücken Sie „Tick“, und dann kommen Sie hierher, und dann können Sie Entwurf veröffentlichen oder speichern. Das ist also im Wesentlichen der Divi Page Builder und das ist was Divi zu einem leistungsstarken Werkzeug für die Entwicklung auf der Webpresse macht. Aber es ist wichtig zu beachten, dass Divi nicht das einzige Thema ist , das mit einem Page Builder kommt. Ich habe das Gefühl, es wäre eine Verfehlung von mir, nur über Divi zu reden und nichts anderes. Einer der beliebtesten war früher als Visual Composer bekannt und jetzt heißt es WP Bäckerei Page Builder. Ich weiß nicht, warum sie den Namen geändert haben, aber Sie können ihn immer noch mit dem Suchbegriff Visual Builder finden. Sie können auf ihre Seite gehen, und sie behaupten, die Nummer eins Wort drücken Seite Builder Plugin sein. Es hat also die sehr ähnliche Art, Seiten mit Abschnitten, Zeilen, verschiedenen Modulen zu erstellen. Aber der große Unterschied zwischen diesem und Divi ist es für jedes WordPress-Theme. Diese beiden sind die, die ich persönlich benutzt habe. Ich habe diesen Page Builder auf einem Thema namens Fortuna verwendet. So können Sie sehen, ob Sie in Themenwälder gehen, die ein Ort ist, wo Sie Premium-Themen finden können, finden Sie ein paar Themen mit Visual Composer oder WP Bakery Page Builder als etwas, das enthalten ist. Wenn ich hier nach unten scrolle [NOISE], ist das alles. Das sind eine Menge Demos. ( LACHEN). Also das Feature Highlights, offensichtlich muss es voll reaktionsschnell sein, in der heutigen Zeit, alles muss reagieren. Visual Composer, die sie den Namen noch nicht geändert haben, kommt mit diesem und auch Premium-Plugin namens Revolution Slider, also ist das nur ein Beispiel. Ich bin mir sicher, dass Sie andere Themen finden werden, bei denen Visual Composer es ebenfalls installiert hat. Es gibt noch einen, der Elemental heißt , auf den mein Freund Louis mich gesetzt hat. Er sagt, es ist der beste Page Builder, es ist der neue. Es behauptet auch, die Nummer eins Wordpress-Seite Builder zu sein. Es hat nicht so viele Benutzer wie WP Bäckerei Page Builder, weil sie schon länger. Aber er schwört darauf und es hat tatsächlich eine kostenlose Version. Also, wenn Sie mit einem Budget sind, werde ich nur auf die Preise klicken hier. Wenn Sie mit einem Budget sind, können Sie die nicht Pro-Version, Ich denke, die kostenlose Version, haben ähnliche Funktionalität. Wenn Sie mehr über Elementar erfahren möchten, gibt es ein Video, das Sie hier sehen können, ich werde es nicht abspielen, weil Sie es in Ihrer eigenen Zeit sehen können. Ich habe vorher noch keinen benutzt, aber probiere es auf jeden Fall aus, wenn ich mit einem Budget war. Wie gesagt, der Rest des Kurses konzentriert sich ausschließlich auf Divi, weil es einfach zu zeitaufwendig wäre, um Ihnen zu zeigen wie man es auf jedem einzelnen Page Builder macht, und viele der Prinzipien sind die gleichen. Also der Punkt, den ich hier zu bekommen versuche ist die Macht, einen Page Builder mit einem Premium-Thema zu verwenden, es ermöglicht uns, Websites viel schneller zu erstellen. Aber wir verwenden WordPress, und wenn der Page Builder richtig eingerichtet ist, haben wir immer noch viele Anpassungsoptionen; wir können Websites basierend auf einem Design erstellen, das der Kunde uns gibt oder dass wir uns uns selbst. Es gibt uns eine große Balance zwischen der Lage, Seiten relativ schnell zu erstellen, aber dann in der Lage zu sein, alles, was wir brauchen, anzupassen und zu bearbeiten. Wenn du bereit bist, von der Theorie und dem nächsten Video weiterzugehen, werden wir endlich in den Aufbau unserer Wordpress-Website mit Divi stecken bleiben. Also freue ich mich, Sie im nächsten Video zu sehen. 5. Wordpress installieren – lokal: In diesem Video werden wir WordPress installieren. Nun, es gibt zwei Möglichkeiten, das zu tun. Wir können WordPress auf einem Host installieren, so dass es live im Internet ist. Wir können das mit cPanel tun, und es ist eigentlich ziemlich einfach, oder wir können lokal hosten. Lokales Hosting bedeutet nur, dass wir unseren eigenen Server einrichten, es gibt ein bisschen mehr Konfiguration, die läuft, aber dann ist es komplett nur auf unserem Computer gehostet. Es ist im Grunde überhaupt nicht im Internet. Es gibt Vor- und Nachteile für beide, aber die lokale Installation ist ein wenig komplizierter, also dachte ich, wir würden das zuerst durchgehen. Wenn Sie nur diesen Teil überspringen und gehen Sie direkt auf die Installation von WordPress auf direkt auf Ihrem Hosting, können Sie einfach überspringen und überprüfen Sie, dass. Aber was ich zuerst tun werde, denn was wir zuerst brauchen, ist WordPress selbst. Also werde ich zu wordpress.org gehen. Eigentlich, bevor wir WordPress herunterladen, brauchen wir einen neuen Ordner, in dem unsere Website untergebracht werden kann. Also werde ich in meinen Code-Ordner gehen, und ich werde in setzen, was soll ich das nennen, Skillshare Wordpress-Website. Also jetzt habe ich ein Verzeichnis, in dem ich unsere Website speichern kann. Ich werde auf diesen Button klicken hier auf „wordpress.org“ stellen Sie sicher, dass Sie zu wordpress.org gehen, nicht wordpress.com, und dann können Sie einfach diesen Button hier klicken, um die neueste Version herunterzuladen. Also werde ich zu navigieren, wo unsere WordPress-Website sein wird, klicken Sie auf „Speichern“ und das wird als ZIP-Datei an diesem Ort speichern. Also, wenn ich hier reingehe, gibt es die ZIP-Datei, ich kann sie durch einen Doppelklick auf „Mac“ extrahieren, und das ist unser WordPress-Setup hier. Also werde ich das in dieses Verzeichnis verschieben, dieses Verzeichnis loswerden, das von der ZIP-Datei erstellt wurde, und die ZIP-Datei loswerden. Nun, die andere Sache, die Sie brauchen, ist ein Server, um das auszuführen. Wie ich im letzten Kurs gesprochen habe, heißt der Server, den ich benutze, MAMP. Das liegt daran, dass ich einen Mac benutze, können Sie WAMP verwenden. Ich möchte hier auf viele Details eingehen, weil ich es in meiner vorherigen Klasse zum Verständnis der Webentwicklung behandelt habe. Aber im Grunde stehen die Buchstaben in MAMP für Mac, Apache, MySQL und PHP. Die wichtigsten Dinge, die Sie hier beachten müssen, ist, dass WordPress auf PHP und MySQL basiert, deshalb brauchen wir das im Stack. Apache spielt keine Rolle, warum wir Apache verwenden. Dann steht M für Mac, weil ich einen Mac betreibe. Wenn ich Windows ausführen würde, würde ich WAMP verwenden, das alle die gleichen Buchstaben außer W für Windows ist, und dann LAMP für Linux. Um Sie nicht zu verwirren, wenn Sie MAMP nicht bereits heruntergeladen und installiert haben, können Sie hier klicken. Wenn Sie Hilfe beim Einrichten benötigen, schauen Sie sich das Video über die Installation eines Servers aus meiner vorherigen Klasse an. Also habe ich MAMP bereits installiert, also werde ich hier hineingehen. Was ich tun muss, wenn Sie sich vom letzten Kurs erinnern, ist direkt MAMP in das Projektverzeichnis. Entschuldigung, vielleicht habe ich das ein bisschen schnell gemacht. Hier ist eine Anzeige, sehr ärgerlich. Ich werde in MAMP Preferences gehen, und dann werde ich in den Webserver gehen. Wie Sie sehen können, Links zu der letzten Skillshare Klasse, die ich getan habe, die ich gerade den Project Directory Skillshare Course in diesem genannt habe. Diese, die ich im Code speichern, werde ich zu Skillshare WordPress-Seite gehen und ich werde auf „Auswählen“ klicken. Dann werde ich auf „OK“ klicken und dann werde ich auf „Service starten“ klicken. Es dauert ein wenig Zeit, aber dann sollten Sie hoffentlich sehen, dass diese beiden grün leuchten, und plötzlich beginnt Ihre MAMP Startseite. Also, wenn Sie schnell auf Ihre Website zu gelangen, können Sie auf „Meine Website“ klicken und was passieren wird, ist es bringen WordPress. Also in diesem Stadium, alles, was Sie klar sein müssen, ist die WordPress-Dateien in diesem Verzeichnis. Nun, es gibt zwei Aspekte, um WordPress. Einer ist der Code, der alle Code-Dateien ist, die wir hier haben. Grundsätzlich sind die PHP-Vorlagen und alles andere, was dazu gehört, das Front-End-Zeug, das in Themes gespeichert ist, aber wir sind ein bisschen vor uns selbst. Dann ist der andere Teil die Datenbank. Also müssen Sie beide WordPress laufen. Wir haben hier unseren Server, dem MySQL ausgeführt wird, wie wir hier sehen können, aber wir haben noch keinen Server für WordPress eingerichtet. Auch wenn Sie dies auf cPanel auf Ihrem Host einrichten, müssen Sie dies nicht einmal tun, es wird einfach automatisch installiert. Aber weil wir es lokal machen, wird es eine neue Datenbank für uns einrichten. Nachdem ich die Sprache gewählt habe, werde ich zu diesem Bildschirm weitergeleitet , der mich darüber informiert, dass ich die Datenbank einrichten muss. Leider sind sie durch das WordPress-Setup nicht in der Lage, die Datenbank zu beeinflussen, aber die Informationen, die wir in und dann die nächste Registerkarte, werden wir in das, was eine wp-config-Datei genannt wird, gehen , wo Sie speichern Sie diese Informationen oben in hier, die WordPress ermöglicht, sich mit seiner Datenbank zu verbinden. Auch wenn Sie cPanel verwenden und dies direkt auf Ihrem Hosting tun, geschieht dies alles automatisch, so dass Sie sich keine Sorgen darüber machen müssen. Also vielleicht, wenn dies ein bisschen zu kompliziert ist, hosten Sie es einfach per Ein-Klick-Installation, die das nächste Video sein wird. Andernfalls, wenn Sie es definitiv lokal hosten möchten, fahren Sie fort. Was wir tun müssen, ist, wie es heißt, eine Datenbank zu erstellen. Also gehe ich hier zurück auf die Startseite, gehe zu Tools und klicke auf „phpMyAdmin“. Wenn Sie diese Seite verloren haben, ist die URL nur lokaler Host. Dann der Port, der für mich 8888/phpMyAdmin ist. Nun, was wir hier tun müssen, ist eine neue Datenbank einzurichten, und wir können das tun, indem wir auf „Neu“ klicken. Also hier drin, werde ich einfach diese Skillshare WordPress nennen. Also, jetzt haben wir eine leere Datenbank in unserem phpMyAdmin, das ist alles, was wir brauchen, um WordPress zu kommen und alle Tabellen und die Anfangsdaten zu erstellen , um im Grunde mit WordPress zu beginnen. Zum Glück müssen wir nicht alle Tabellen in der Datenbank selbst erstellen. Wir könnten hier auch einen Benutzer einrichten, wie ich es hier getan habe, aber das müssen wir auch nicht tun. Was wir also tun können, ist, dass es einen Standardbenutzer gibt, den wir verwenden können , der nur der Root-Benutzer ist. Wenn ich hier wieder reingehe, lassen Sie uns das tatsächlich in die Praxis umsetzen. Ich werde den Datenbanknamen kopieren, ihn dort ablegen, und dann für Benutzername und Passwort kann ich einfach root setzen. Es ist nicht so wichtig, Ihren Benutzernamen und Ihr Passwort zu ändern und das alles einzurichten, da wir es lokal ausführen. Grundsätzlich könnte niemand Ihre Datenbank hacken, es sei denn, ich hatte Zugriff auf Ihren Computer. Während, wenn dies online wäre, würden Sie wahrscheinlich nicht root und root verwenden wollen , weil das viel hackbarer wäre. Datenbank-Host, können wir als localhost und Tabelle Präfix verlassen. Es ist also immer eine gute Idee, das als wp_ zu belassen, nur um der Konvention zu folgen. Wenn wir also hier auf „Absenden“ klicken, wird die Verbindung hoffentlich erfolgreich sein. Dies bestätigt also, dass alle Details korrekt sind, und wir können einfach auf „Run The Installation“ klicken und jetzt WordPress wird die Datenbank für uns einrichten. Also für den Website-Titel, werde ich es Christopher Dodd nennen, weil das mein Name ist. Benutzername, ich werde es einfach Admin nennen. Ich werde ihren Vorschlag verwenden, und es ist immer eine gute Idee, Benutzernamen und Passwörter zu speichern. Also werde ich eine Textbearbeitungsdatei öffnen und auf „Neues Dokument“ klicken. Also werde ich das hier setzen, damit ich es nicht vergesse. Dies wird Ihr WordPress-Login sein. Ja, stellen Sie sicher, dass Sie daran halten, weil Sie gehen, um es brauchen, wenn Sie sich auf Ihre WordPress-Website anmelden. Ich werde meine E-Mail-Adresse eingeben, so dass ich über diese Website kontaktiert werden kann, weil wir es vor Ort tun, müssen wir Suchmaschinen nicht davon abhalten, die Website zu indizieren, weil es nicht einmal im Internet ist. Der letzte Schritt besteht darin, auf „Install WordPress“ zu klicken, und es besagt, dass es jetzt installiert ist. Nun, was ich möchte, dass Sie tun, ist, zurück zu Ihrem phpMyAdmin zu gehen und einfach zu aktualisieren. So können Sie hier aktualisieren oder Sie können hier aktualisieren, und plötzlich werden Sie sehen, dass es all diese Tabellen gibt. Einige von ihnen, ich bin mir ziemlich sicher, werden bereits viele Daten eingelegt haben. Also zu gehen und dies manuell zu tun wäre lächerlich, so zum Glück, WordPress setzt dies alles für uns in der berühmten fünf Minuten Installation. Jetzt können wir uns auf unserer Website anmelden, oder wenn wir es nur sehen wollen, ist dies unsere Website. Also, wenn wir uns einloggen wollen, können Sie sich das holen, und gut. Jetzt ist der Vorteil des lokalen Hosting, Nummer 1, wenn Sie es völlig privat halten wollen und Sie definitiv nicht wollen, dass jemand es sieht. Es ist nicht im Internet, also kann niemand es finden. Außerdem haben Sie Zugriff auf die Dateien direkt auf Ihrem Computer, so dass Sie alles wirklich schnell und einfach bearbeiten können. Sie müssen nicht hochladen, herunterladen. Wir könnten einfach mit unserem Code-Editor durchgehen und öffnen. Ja, es gibt Vorteile, Vor- und Nachteile, die lokal gegenüber von Anfang an gehostet werden. Eines der Negative davon ist, dass wir die Website migrieren müssen , um sie ins Internet zu bekommen, aber das ist keine große Sache, weil ich Ihnen zeigen werde , wie das am Ende des Kurses zu tun. So installieren Sie WordPress lokal. Denken Sie daran, dass Sie jedes Mal, wenn Sie Ihren Computer starten, müssen Sie Ihren Server neu starten, um auf diese Website zugreifen zu können. Es funktioniert nicht, es sei denn, der Server läuft. Aber ja, das war's. Jetzt haben Sie eine neue WordPress-Installation, mit der Sie arbeiten können. Im nächsten Video werde ich kurz beschreiben, wie man dies direkt auf cPanel in der Cloud, im Internet, auf Ihrem Hosting-Konto macht, was nur ein bisschen einfacher ist. Also werde ich dich auf dem nächsten Video sehen. 6. Wordpress installieren – cPanel: Im letzten Video richten wir WordPress lokal ein. Aber in diesem Video werde ich Ihnen zeigen, wie Sie WordPress auf cPanel, auf Ihrem Hosting einrichten . Es ist eigentlich ziemlich einfach, cPanel macht dies sehr einfach. Was ich tun werde, ist ein neues Fenster zu öffnen und ich gehe zu einer Domain, die ich bereits eingerichtet habe. Wenn du den letzten Kurs mit mir gemacht hättest, würdest du dich an skillsharecourse.space erinnern. Es gibt derzeit nichts, also bekomme ich diesen Fehler. Aber Sie können auf Ihre Website cPanel zugreifen, indem Sie dash cPanel setzen. Nun, wenn Sie hier nicht folgen, im Grunde, was ich bereits getan habe, ist, dass ich eine Domain erstellt habe und dann habe ich mit dieser Domain mit Hosting verknüpft und wenn das alles neu für Sie ist, gehen Sie definitiv zurück zur vorherigen Klasse, , die Webentwicklung verstehen und die Abschnitte über die Bereitstellung Ihrer Website im Internet auschecken . Schauen Sie sich den Unterschied zwischen Domain und Hosting an, wenn Sie damit nicht vertraut sind. Aber im Grunde beginnen wir vom Endpunkt der letzten Klasse. Wenn irgendetwas davon keinen Sinn ergibt, ermutige ich Sie auf jeden Fall, zurückzugehen und diesen Kurs zu nehmen. immer, wir sind jetzt auf cPanel und wie Sie sehen, habe ich eine Reihe von Logins bereits, weil ich cPanel auf vielen Konten verwaltet. Aber was ich im Grunde für meine Website getan habe, habe ich bereits einen cPanel-Benutzernamen eingerichtet. Ich verwende das gleiche Passwort wie für unsere lokale Installation. Aber ich konnte Admin nicht verwenden, weil ich das schon vorher benutzt hatte. Skill Share Kurs ist also der Benutzername in meiner Instanz. Ich werde auf „Login“ klicken und jetzt bin ich in cPanel. Jetzt, wenn Sie in cPanel sind, alles, was Sie tun müssen, um WordPress zu installieren, ist gehen zu Web-Anwendungen und klicken Sie dann auf „WordPress“. Das Tolle an der Installation über Ihr cPanel ist, dass Sie die Datenbank nicht einrichten müssen. Ich klicke einfach auf diese Schaltfläche, installiere diese Anwendung und ich möchte kein Verzeichnis, ich werde es nur direkt in der Stammdomäne haben. Alles andere ist in Ordnung, was ich tun werde, ist die gleichen Anmeldedaten zu verwenden, die wir für die lokale Version festgelegt haben. Idealerweise würden Sie Ihr Passwort nicht dasselbe für cPanel und WordPress wollen , aber nach diesem Kurs werde ich sowieso löschen, so dass es nicht wirklich wichtig ist zu viel. Für die Administrator-E-Mail, werde ich in meine E-Mail setzen, so dass diese Website kann mich erreichen, wenn es irgendwelche Probleme oder eine Benachrichtigung, Website-Titel wird Christopher Dodd sein und ich werde meinen Slogan als setzen WordPress-Webentwickler. Wir können alles als Standard belassen und dann auf „Installieren“ klicken. Auch, wenn Sie die letzte Klasse in der stehenden Web-Entwicklung genommen haben, hättest du mich das auch vorher gesehen, es ist sehr schnell und ziemlich einfach. Also einfach so, Ihre WordPress-Website ist jetzt installiert und Sie können hier gehen und plötzlich bin ich auf meiner neuen WordPress-Website und wenn ich in den Admin gehen wollte, gehe ich in den Admin so und es ist nur die Benutzername und Passwort, die ich bei der Installation eingerichtet habe. Dort haben Sie es, wir haben eine frische WordPress-Installation. Von diesem Punkt können Sie entscheiden, ich meine, Sie haben sich wahrscheinlich bereits entschieden, aber von diesem Punkt aus können Sie an der Cloud-basierten arbeiten oder Sie können an der lokalen Installation arbeiten. Anscheinend habe ich es hier bereits lokal eingerichtet und es ist im Allgemeinen einfacher, mit lokalen Dateien zu arbeiten, plus ich werde in einem späteren Video migrieren. Ich werde es auf dem lokalen Hosting tun. Aber man kann es genauso gut direkt vom Hosting online machen. Das deckt die Einrichtung von WordPress. Der nächste Schritt ist für uns, dieses Thema zu ändern. Dies ist das Standard-Thema von WordPress und natürlich das Thema, das wir verwenden, ist Divi. Aber es gibt ein wichtiges Konzept, um über das Erstellen von Themen oder Anpassen von Themen zu lernen , und das ist untergeordnetes Thema. Im nächsten Video werden wir ein Kinderthema erstellen und darüber sprechen, was ein Kinderthema ist und warum Sie eines verwenden sollten. Ich werde Sie im nächsten Video sehen. 7. Ein Divi Child-Theme erstellen: Also, weil wir über die Einrichtung eines neuen Theme in unserer WordPress-Website sprechen, beginne ich hier in der Themes-Abschnitt. In Wirklichkeit können wir kein Divi-Thema von hier hinzufügen, weil es ein Premium-Thema ist. Nur um Ihnen zu zeigen, wenn wir auf „Thema hinzufügen“ klicken, können wir durch alle Themen suchen, die bereits auf WordPress.org verfügbar sind, und alle diese, wenn Sie sie installieren, sollten kostenlos oder zumindest frei sein, um mit zu beginnen. Sie könnten später mehr für eine Premium-Version berechnen, aber wenn Sie nur mit einem kostenlosen Thema gehen wollten, dann könnten Sie genau hier aussehen. Da wir ein Premium-Thema verwenden, im Fall von Divi diese Datei von ihnen abholen, müssen wir im Fall von Divi diese Datei von ihnen abholen,und die Art und Weise, wie wir das tun, ist, sich bei unserem Elegant Themes Konto anzumelden. Eigentlich, bevor ich in das springen, wollte ich nur zur Kenntnis nehmen, dass ich meine WordPress-Website auf dem lokalen Host erstellen werde , also mache ich es lokal. Denken Sie daran, ich habe es auch in einer Remote-Domain getan, SkillShareCourse.space. Wenn Sie sich von vorher erinnern, haben wir WordPress auf unserem Hosting im Internet vor eingerichtet, aber es wird ein wenig komplizierter sein, auf diese Dateien zuzugreifen. Was ich mit meiner lokalen Installation tun werde ist, dass ich einfach direkt hierher gehen und diese Dateien bearbeiten kann. Für den Fall, dass Sie laufen Ihre WordPress-Website vollständig auf Hosting, vollständig aus der Ferne, und Sie sind nicht hosten es lokal, müssen Sie einen Weg, um auf diese Dateien zugreifen und den besten Weg für mich zu finden , das FTP ist. Nun, da wir FTP in der letzten Klasse behandelt haben, werde ich es nicht noch einmal übergehen, aber wenn Sie Hilfe beim Zugriff auf die Dateien auf Ihrem Remote-Server benötigen, gehen Sie auf jeden Fall zurück zum Verständnis der Webentwicklung und schauen Sie sich die Lektion über FTP an. Mit dem aus dem Weg, werde ich zu Elegant Themes gehen und ich werde mich anmelden, und ich werde die neueste Version von Divi greifen. Wenn du dich bei Elegant Themes einloggst, erhältst du diesen Mitgliederbereich, in dem du deine Downloads sehen kannst. Sie haben einige andere Dinge, die Sie hier auch herunterladen können, einschließlich Monarch, das ist ein Social Sharing-Plug-in, das ich verwende. Gehen Sie zu Divi und klicken Sie dann auf „Download“ und Sie werden sehen, dass ich dieses in Klammern habe, weil ich tatsächlich bereits Divi heruntergeladen habe, aber nur um sicherzustellen, dass ich die neueste Version habe, werde ich das speichern und knallen, ich habe es heruntergeladen. Jetzt, da Sie es heruntergeladen haben, können Sie zurück zu Ihrem WordPress-Dashboard und dann in Ihrem Theme Abschnitt, klicken Sie auf „Upload Theme“, gehen Sie hier und laden Sie es hoch. Nun, weil ich lokal bin, wird es nicht wirklich hochgeladen, es macht es eigentlich nur alles auf meinem eigenen Computer. Upload ist ein bisschen ein falscher Begriff hier, aber es spielt keine Rolle. Es ist das Gleiche. Es wird dasselbe sein, es auch auf Ihrem Remote-Hosting zu tun. Wenn Sie nicht davon überzeugt sind, dass Sie es aktivieren möchten, können Sie eine Live-Vorschau auf den ersten Blick, aber da wir von Grund auf neu beginnen, gibt es keine Fortschritte. Es ist völlig sicher, einfach auf „Aktivieren“ zu klicken. Wir haben Divi installiert, und ich möchte, dass Sie bemerken, was hier passiert, wenn wir auf unsere WordPress-Website gehen. Sehen Sie, wie es völlig anders ist. Verstehen Sie mich nicht falsch, die Beitragstypen, die wir vorher hatten, wir haben immer noch Hallo Welt, wir haben immer noch diese Dummy-Kommentare, und wir haben immer noch eine Beispielseite, aber wie alles angelegt ist, ist völlig anders. Wenn Sie sich vorher erinnern, hatten wir dieses Thema mit der kleinen Poppflanze und dem Titel dort, wir haben jetzt Divi, die auf den ersten Blick ziemlich erträglich aussieht, aber das ist eigentlich eine gute Sache, weil wir kann es einfacher an das anpassen, was wir wollen. Es ist besser, von einem nackten Ausgangspunkt zu beginnen und darauf aufbauen zu können, als all diese ausgefallenen Layouts zu haben und dann herausfinden zu müssen , wie man einfach zu einem normalen Layout zurückkehrt. Was ich jetzt tun werde, bevor wir anfangen, unsere Divi-Installation anzupassen, ist ein Kinderthema zu erstellen, das ist der wichtigste Punkt, den ich in diesem Video machen möchte. Um ein wenig mehr über untergeordnete Themen zu erfahren, habe ich hier eine URL kopiert. Dies ist auf dem WordPress.org-Codec. können Sie mehr über untergeordnete Themen lesen. Es spricht darüber, warum ein untergeordnetes Thema zu verwenden, wie man ein untergeordnetes Thema zu erstellen, und die verschiedenen Vorlagendateien und alles, aber vielleicht, was nicht abgedeckt ist, ist das, was wirklich ein Kinderthema? Ein untergeordnetes Thema ist im Grunde ein neues Thema. Es wird hier ein neues Thema geben, aber im Wesentlichen wird es nur ein paar verschiedene Dateien darin haben, und es verweist auf ein übergeordnetes Thema. In diesem Fall wird es Divi sein, das das übergeordnete Thema sein wird. Der Punkt eines untergeordneten Designs ist, dass wir Aktualisierungen oder Änderungen am übergeordneten Design vornehmen können, ohne tatsächlich das übergeordnete Design zu berühren. Was passiert ist, wenn wir dieses Kinder-Theme erstellen, und ich werde Ihnen in nur einer Sekunde zeigen, die WordPress-Installation wird in das Kind-Design zu suchen, es wird zu diesen Dateien zuerst gehen, aber wenn es sie nicht finden kann, Es wird direkt zu den Eltern gehen. Das ist einfach wirklich sauber. Wenn Sie das Thema bearbeiten möchten, ist es am besten, einfach dieses sauber zu lassen, wie es ist, um nicht zu gehen und zu ändern, was Divi er getan hat, aber wenn Sie Änderungen vornehmen möchten, ist es am besten, es in einem untergeordnetes Thema. Der einfachste Weg, um an ein Kinderthema zu denken, würde ich sagen, ist es nur ein Thema, in dem Sie alle Ihre Anpassungen einfügen , während Sie immer noch das übergeordnete Thema nutzen, und halten Sie Ihre Anpassungen und das Kernthema getrennt, aber immer noch in der Lage, beide Vorteile zu nutzen. Wieder, ich rede hier nur theoretisch, wir werden jetzt tatsächlich ein Kinderthema sehen. Vor allem, warum ein Kinderthema verwenden? Wir haben schon ein bisschen darüber geredet. Es ist eine gute Möglichkeit, etwas über die Themenentwicklung zu lernen, aber der größte Grund ist, die Dinge sauber zu halten. Sie werden Ihre geänderten Dateien in einem Thema haben und Sie werden das unveränderte ursprüngliche Design in seinem eigenen Theme-Ordner haben . Wir können die Schritte hier folgen, aber weil wir Divi verwenden, haben Divi tatsächlich ein Tutorial, wie man ein Kinderthema speziell für Divi erstellt. Ich werde in Divi Kind Thema tippen, und genau hier, Ich habe dies ein paar Mal zugegriffen. Es wird nur der ultimative Leitfaden zum Erstellen eines Divi-Kinderthemas genannt. Weil ich das lokal mache, kann ich hier direkt in dieses Verzeichnis gehen. Was ich tun muss, ist in das Theme-Verzeichnis zu gehen. Ich werde WP-Inhalte gehen. Ich werde mich mit Themen beschäftigen. Hoppla, ich habe versehentlich beides geöffnet. Ich werde in Themen gehen und Sie können hier Divi sehen. Jetzt wollen wir es nicht anfassen, wie wir bereits gesagt haben, wir wollen Divi sauber halten und das bedeutet, dass, wenn wir Divi aktualisieren, dies keine dieser Anpassungen unterbrechen wird. Stattdessen erstellen wir einen neuen Ordner namens Divi child, und Sie können dies nennen, was Sie wollen. Divi Kind ist nur der aussagekräftigste Name möglich. Damit ein untergeordnetes Design funktioniert, gibt es eine wichtige Datei, die Sie benötigen, und das ist eine style.css. Ich werde nach unten scrollen, wo es Ihnen den genauen Code gibt, den Sie einfügen können. Hier können Sie die Richtung sehen, die ich Ihnen gerade beim Erstellen eines Divi-Child-Verzeichnisses im Theme-Verzeichnis gegeben habe, und dann ist der nächste Schritt, die style.css hinzuzufügen. Sie können dies einfach direkt kopieren und einfügen. Ich werde das kopieren und ich werde eine neue Datei mit meinem Code-Editor erstellen, Atom. Atom ist jetzt geöffnet. Ich werde eine neue Datei erstellen. Ich werde diesen Kopier- und eingefügten Code einfügen. Ich gehe zu „Speichern unter“, und ich gehe zurück in mein WordPress-Verzeichnis. Ich gehe in mein Themes-Verzeichnis, finde mein Kinderthema, Divi-Kind, und ich werde es nicht „fz3temp-2" nennen, das ist einfach lächerlich. Es muss style.css genannt werden. Auf jeden Fall ändern Sie das nicht. Dies ist der Dateiname, nach dem WordPress suchen wird, also stellen Sie sicher, dass es style.css ist. Das ist die Grundlage für Ihr Kind Thema. Eine andere Sache, die Sie einfügen sollten, ist eine Funktion PHP-Datei, und das wird Ihr Elternthema Stylesheet in die Warteschlange stellen, was bedeutet, dass es zuerst auf diese schauen wird, es wird die Informationen erhalten, aber dann wird es dauern die Stile aus dem übergeordneten Design. Wiederum, einfach kopieren und einfügen. Ich werde das nehmen. Ich werde eine neue Datei im Atom erstellen, das einfügen. Ich werde das als functions.php speichern. Auch hier ist es sehr wichtig, wie Sie diese nennen, denn dies sind alle WordPress-Vorlagendateien. WordPress wird speziell für diese Namen suchen. Ich nenne das function.php. Im Wesentlichen ist das alles, was Sie brauchen. Sie können eine Miniaturansicht für Ihr Divi-Kinderthema erstellen, aber Sie brauchen es wirklich nicht. Du wirst in der Lage sein, nur den Namen zu lesen. Wenn Sie kreativ werden möchten, können Sie die Miniaturansicht ändern, aber es ist wirklich nicht wichtig. Was jetzt passieren wird, ist, dass wir wieder in unsere Themes Bereich unserer Website gehen . Übrigens, dieser Bereich hier, alles, was es tut, ist, die Ordner hier zu referenzieren. Sie können Divi, 2015, 2017, 2016 sehen. Das sind alle Themen hier. Wenn wir also die Seite aktualisieren, sehen Sie unseren neu erstellten Ordner, das Divi-Kind ist da und es hat keine Miniaturansicht, denn wie ich gerade erwähnt habe,haben denn wie ich gerade erwähnt habe, wir kein Thumbnail eingefügt, aber es spielt wirklich keine Rolle. Wir können hineingehen und auf „Aktivieren“ klicken, und jetzt wechseln wir zu unserem Kinderthema. Wenn alles gut gelaufen ist, können wir nachladen und es ist genau die gleiche Website. Du denkst vielleicht, nun, Chris, wenn es genau das Gleiche sein wird, warum haben wir ein Kinderthema erstellt? Der Grund, warum, wie ich bereits sagte, ist, dass Sie Ihre Änderungen in eine andere Datei einfügen. Was wir tun können, ist mehr Funktionen hier reinzubringen. Was wir tun können, ist hier benutzerdefinierte Stile hinzuzufügen, was übrigens, wir werden einige Theme-Anpassungen in diesem Kurs durchführen, so dass Sie tatsächlich sehen, wie es ist, ein untergeordnetes Thema zu aktualisieren und welche Änderungen wir tatsächlich tun werden, aber für jetzt, unsere theoretische Grundlage, können wir alle Änderungen, die wir wollen in dieses Thema einfügen und dann müssen wir nicht das ursprüngliche Thema ändern. Hoffentlich verstehen Sie, was ein Kinderthema mittlerweile ist, zumindest aus theoretischer Sicht. Wie gesagt, wir werden tatsächlich dieses untergeordnete Thema bearbeiten, einige Änderungen erstellen. Es ist sehr gute Praxis, ein Kinderthema zu haben. Ich würde sagen, das ist eines der Dinge, die ich nicht getan habe, als ich anfing, und ich wünschte, ich hätte es getan. Es ist nur eine gute Praxis zu tun und auch es macht die Dinge viel sauberer. Wirklich wichtig, dass Sie das Kinderthema einrichten, und damit fertig ist, ist es Zeit, tatsächlich in Divi stecken zu bleiben und einige Anpassungen zu machen. Wir sehen uns im nächsten Video. 8. Erste Schritte mit Divi: In diesem Video werden wir behandeln, wie man mit Divi anfängt. Was ich damit meine, ist, einige der Standardeinstellungen hier zu ändern. Offensichtlich ist das erste, was mir auffällt , dass wir das Divi-Logo anstelle unseres eigenen Logos haben. Das Menü ist schrecklich, wir haben „Sample Page“ und „Uncategorized“. Dies ist nur ein Standardverhalten, wir zeigen auf unserer Titelseite eine Sammlung aller Blogbeiträge. Im Moment haben wir nur einen Blog-Beitrag, der sagt: „Hallo Welt“, das ist nur ein Stück Dummy-Inhalt, mit dem WordPress beginnt. Aber wenn wir mehrere Blogbeiträge hätten, wäre dies ein Index, durch den wir blättern könnten. Es ist auch in die Seitenleiste gesetzt. Schließlich ist es in einer Fußzeile mit gesetzt, „Designed by Elegant Themes“ „Powered by WordPress“. Es ist sehr Divi gebrandmarkt im Moment, die Menüs sind falsch, der Inhalt Dummy-Inhalt, und wir haben eine Sidebar. Das erste, was ich bereits erwähnt habe, ist, dass ich das Website-Logo aktualisieren möchte. Nun gibt es zwei Orte, an denen Sie Ihr Thema anpassen können. Sie können den „Theme Customizer“ verwenden, wie wir es vorher gemacht haben. Divi bietet hier viele Möglichkeiten. Der Ort, an dem ich gerne zuerst schaue, wenn ich die Optionen für Divi ändere, ist, wenn ich in das „Dashboard“ gehe, haben wir hier ein neues Menü, das vorher offensichtlich nicht da war, es wurde gerade von Divi eingefügt, wo wir hineingehen können unsere „Theme-Optionen“. Auch hier wären die beiden Orte, an denen Sie Divi anpassen sollten, bevor Sie in irgendeinen Code graben, „Theme Options“, „Theme [unhörbar] „und „Module Customizer“, ich musste nicht sehr viel verwenden, aber das ist auch ein Ort, an dem Sie Anpassungen erstellen können. Jetzt, sobald Sie zu den „Allgemein“ Theme-Optionen von Divi, die die erste Registerkarte, die angezeigt wird, erhalten Sie das erste Feld als „Logo“, was angemessen ist, weil das ist das erste, was ich ändern möchte. Ich werde in einen Ordner gehen, den ich von Dateien für diesen WordPress-Kurs vorbereitet habe. Ich habe dieses Logo, es ist ein ziemlich schreckliches Logo, das ich erstellt habe. Ich habe nur im Grunde ein Bild von meinem Gesicht verfolgt und ich werde das nur als meine Website verwenden. Nun, aus S.E.O-Gründen, werden Sie etwas etwas mehr beschreibend hier reinbringen wollen. In der Tat sollte der Titel wahrscheinlich ein bisschen anders sein. Denn hier werde ich sagen: „Christopher Dodd, Web Developer.“ Dann werde ich auf „Als Logo festlegen“ klicken und das wird das Logo sein. Es gibt viele andere Optionen hier in den Divi-Optionen, aber jetzt werde ich nur auf „Änderungen speichern“ klicken und dann werde ich die Website ansehen. Wie Sie sehen können, ist mein Gesicht jetzt das Logo der Website. Was ich als Nächstes tun möchte, ist diese Titelseite zu ändern. Was ich dafür tun muss, ist, standardmäßig, und dies geschieht in jedem WordPress-Theme, ist, dass es alle Blog-Posts, die es einen Blog-Index bieten zu zeigen. Oft sind die meisten Websites, die Sie nicht nur Ihren Blog-Index zeigen möchten. Es ist wichtig zu wissen, wie man das ändert und es ist eine sehr einfache Angelegenheit. Du gehst einfach in „Einstellungen “, glaube ich, es liest sich. Dann zeigt Ihre Homepage die Sache an, die Sie ändern müssen. Moment werden die neuesten Beiträge angezeigt, aber wir können eine statische Seite erstellen. Ich hätte im Voraus eine Seite erstellen sollen, aber lassen Sie uns einfach die Beispielseite für jetzt verwenden. Ich werde auf „Änderungen speichern“ klicken. Nun, wenn wir zurück zur Homepage gehen, haben wir die Beispielseite und es ist gut, weil es in einigen Inhalten dort platziert ist. Sie können sehen, wie es jetzt aussehen würde, mit einer Seite anstelle des Blog-Index auf der Titelseite Ihrer Website. Das nächste, was ich tun möchte, ist, mein Menü zu aktualisieren. Ich gehe zurück in „Dashboard“. Der Weg zum Menü ist über „Erscheinungsbild“ und klicken Sie dann auf „Menüs“. Ich werde meinem Menü einen Namen geben und ich werde es einfach „Hauptmenü“ nennen. Sie können sehen, dass ich das schon mal gemacht habe, weil ich Vorschläge habe. Klicken Sie auf „Menü erstellen“. Nun, ich habe dieses Menü und bevor wir Seiten hineinlegen, die übrigens keine haben, werde ich auf den „Anzeigeort“ klicken, das ist „Primärmenü“. „ Menü speichern“, um sicherzustellen, dass es an diesem Ort angezeigt wird. Da wir nur eine Seite haben, werde ich nur eine Seite zum Menü hinzufügen. „ Menü speichern“ erneut. Wenn ich hier gehe, bevor Sie aktualisieren, stellen Sie sicher, dass Sie sich das ansehen und Sie werden bald sehen, dass, wenn ich es aktualisiere, es kommt mit meinem neuen Menü, das gerade nur ein Element hat. Nur um klar zu sein, der Grund, warum es blau und nicht dunkel wie der Rest von diesen ist, weil, dies ist die aktive Seite. Im Moment haben wir nur eine Seite, so wird es blau für die Titelseite, aber wir können in mehr Seiten hinzufügen. Nur um das Menü zu demonstrieren, haben wir nicht viele Seiten zu verlinken, aber wir können unsere benutzerdefinierten Links erstellen. Der beste Weg, um einen Dummy-Link zu erstellen, ist es nur, einen Hash zu setzen. Aber wir können sagen, vielleicht wollen wir eine „Portfolio Tab“ haben, vielleicht wollen wir eine „Services Tab“ haben , und vielleicht wollen wir eine „Tab für Blog“. Was Sie hier sehen werden, ist, dass Sie jetzt all diese Links haben. Ich werde „Sample Page“ loswerden, weil es die Homepage ist, wir brauchen es nicht wirklich als Menü-Link zu haben. Aber eine Sache, die ich Ihnen über Menüs zeigen werde, ist, dass wir verschachtelte Menüs haben können. Das zeige ich dir jetzt. Sagen wir einfach, Sie hatten einen Blog und Sie hatten verschiedene Themen, also vielleicht eines der Themen ist: „WordPress.“ Es wird zu diesem Menü hinzugefügt. Was ich tun kann, um es zu einem Untermenüpunkt eines anderen Menüpunkts zu machen, ist, darauf zu klicken. Übrigens kann ich es an verschiedene Positionen im Menü ziehen, aber wenn ich es nur ein wenig nach rechts ziehe, können Sie sehen, dass es etwas eingerückt ist. Ich habe es reingesteckt. Es wird jetzt sagen, „Sub Item“ und das ist ein „Sub Item“ von „Blog“. Um diese Änderung zu sehen, werde ich auf „Menü speichern“ klicken und dann werde ich aktualisieren. Wie Sie sehen können, haben wir den Link „Portfolio“, und dann haben Sie den Link „Blog“, und dann haben Sie diesen Unterlink von Blog, der „WordPress“ ist. Das sind deine Menüs. Das nächste, was von Bedeutung ist wahrscheinlich der „Theme Customizer“. Ich gehe auf die Seite. Klicken Sie auf „Theme Customizer“. Sie können es vom vorderen Ende oder vom hinteren Ende aus tun. Wie Sie es im Back-End tun würde, „Aussehen“ und dann, „Anpassen“ hier. Aber Sie können es tun, während Sie auf der Website sind. Was in Divi leistungsstark ist, ist, dass wir „Typografie“ -Einstellungen ändern können, wir können die „Körper-Text-Größe“ erhöhen. Dies sind einige allgemeine Typographie-Änderungen, die auf unserer Website gehen, es sei denn, wir überschreiben sie. Es ermöglicht uns, die Kopfzeilenschriftart und Textschriftart zu ändern, so dass wir ändern können, was Sie wollen. Lassen Sie uns wählen, Ich denke, [unhörbar] ist ziemlich in, wenn sie es haben. Nein. Was ist mit „Anaheim“? Nein. Es ist ein bisschen boxy, nicht wahr? Du verstehst den Punkt. Du kannst alles hineinlegen, was du willst. Dann, Textschriftart. Ich mache „Abel“. Wow, das ist nicht sehr lesbar. Das ist auch nicht toll. Diese sind sehr stilvoll, aber nicht sehr lesbar. Droid Sans, das ist in Ordnung, Droid Sans wird es tun. Wir können die Farbe der Körperverbindung ändern. Wie Sie hier sehen können, ist das ein Link. Wir können ändern und dann plötzlich ändert sich das. Ich werde Standard erstellen, weil Blau historisch die Linkfarbe war so dass viele Leute wissen, dass ein blauer Text ein Link ist, und wir können die Textfarbe des Körpers ändern. Vielleicht wollen wir es mehr Ohnmacht, die wahrscheinlich empfehlen oder mehr schwarz. können wir auch tun. Also bekommst du den Punkt. Ich werde auf Veröffentlichen klicken, damit diese Änderungen live sind. Ich gehe zurück in hier, Layout-Einstellungen. Du hast eine Menge Einstellungen in Divi, um ehrlich zu sein. Sie können sich sehr mitreißen lassen und Sie könnten einfach hier rumhängen und tatsächlich ist das wahrscheinlich eine gute Empfehlung, einfach hier zu hängen und zu sehen, was Sie anpassen können. Spielen Sie herum, weil dies die oberste Ebene der Anpassung in Divi ist. Die tiefste Ebene wäre das Schreiben von Code, aber das ist wahrscheinlich der erste Ort, an dem Sie sich diese und die Themenoptionen ansehen sollten , über die ich zuvor gesprochen hatte. Wir können auch das Gesamtfarbschema ändern.Sie erhalten das Bild. Wir können Dinge anpassen, die auf der gesamten Website durch dieses Menü passieren wird. Also haben wir das Logo, wir haben unser eigenes Menü, und wir haben die Titelseite von Beiträgen auf eine einzelne Seite geändert, die wir später bearbeiten werden. Aber die Sidebar auf der Homepage, es ist jetzt kein guter Blick. Also, was ich tun werde, ist, dass ich zu Menüs gehen und ich werde in Widgets gehen. Es ist ein bisschen verwirrend Ort, aber Ihre Sidebar ist mit Widgets eingerichtet. Also, wenn Sie Ihre Sidebar finden und die Widgets darin anpassen möchten, können Sie dorthin gehen. Jetzt werfen sie hier eine Menge rein, die du wahrscheinlich nicht brauchst. Ich sehe kaum jemanden, der ein Meta-Menü in der Sidebar hat. Kategorien, die Sie einfügen können, wenn Sie denken, dass das gut ist, Archive, wenn Sie denken, dass das ist, was Sie Ihrem Publikum zeigen möchten, aber wir können wahrscheinlich eine Menge davon loswerden. Also, was ich tun werde, ist einfach alle diese Archive löschen, aktuelle Kommentare, Suche. Sie können nach der oberen Leiste suchen, eigentlich nach der Menüleiste. Wir müssen nicht unbedingt zweimal suchen. Ich werde nur die letzten Beiträge verlassen, weil ich persönlich gerne aktuelle Beiträge in meiner Sidebar haben, und ich werde ihm einen Titel der letzten Beiträge geben, damit die Leute wissen, dass das meine letzten Beiträge ist. Ich denke, es hat standardmäßig aktuelle Beiträge. Wenn ich die Seite jetzt aktualisiere, können Sie sehen, dass sich die Seitenleiste hier geändert hat. Anstatt all diese Widgets zu sehen, die wir nicht wirklich brauchen, haben wir gerade die letzten Beiträge bekommen. Das ist großartig. Gleichzeitig möchte ich sowieso keine Sidebar auf der Titelseite meiner Website haben. Sie werden sehen, wie wir diese Titelseite mit Divi aufbauen, werden wollen, dass der erste Abschnitt in voller Breite ist und ich möchte einen Benutzer nicht mit zu vielen Links auf der Titelseite verwechseln. Also möchte ich nicht wirklich, dass diese Sidebar überhaupt erscheint. Mit Divi ist es ziemlich einfach, die Sidebar zu deaktivieren. Ich werde auf „Seite bearbeiten“ klicken und es gibt tatsächlich auf der rechten Seite hier, Divi-Seite Einstellungen. Also hier drüben im Seitenlayout ist es so eingestellt, dass es jetzt die rechte Seitenleiste enthält , aber ich könnte die Seitenleiste nach links verschieben, wenn ich wollte, oder ich kann für die Breite gehen, die die Seitenleiste vollständig loswird. Das gefällt mir. Ich werde auf Update klicken und es steht Seite aktualisiert. So kann ich auf Seite anzeigen klicken und plötzlich gibt es keine Sidebar. Also, wenn ich gehe, um einen Blog-Beitrag zu überprüfen , sagen wir hallo Welt, Ich kann es so mit der URL zugreifen, und wenn wir auf den Beitrag schauen, können wir den Beitrag dort sehen und wir können die Seitenleiste sehen. Wenn Sie also diese Seite vollständig ausschalten möchten, gibt es Möglichkeiten, dies zu tun. Wir können es mit CSS verstecken. Wir können auch die Vorlage ändern. Aber wenn Sie glücklich sind, das für jede einzelne Seite zu bearbeiten, können Sie dies über Seite bearbeiten tun. Das letzte, was ich ändern wollte, war die Fußzeile. Im Moment sagt es Designed by Elegant Themes, powered by WordPress. Aber wir brauchen nicht wirklich zu primo elegante Themen oder WordPress, wenn wir nicht wollen. In der Tat, das ist ein guter Raum, um in einige Copyright-Informationen oder einen Link zu unserer eigenen Website zu setzen , oder wenn Sie in der Lage sind, und der Kunde hat nichts dagegen, vielleicht wollen Sie Design nach und Sie werden dort verlinken. Aber auf jeden Fall fragen Sie Ihren Kunden oder wen auch immer Sie die Website aufbauen , ob Sie das zuerst tun können, wenn Sie das tun wollen. Im Wesentlichen gibt es keine Notwendigkeit, Elegant Themes und WordPress-Links unten in Ihrer Fußzeile zu haben. Was ich also tun werde, ist, dass ich das ändern werde, indem ich in den Theme Customizer gehe. Welche erinnern, können wir in den Namen unserer Website gehen, scrollen Sie nach unten, klicken Sie auf Theme Customizer, oder natürlich können wir in Aussehen angepasst durch das Dashboard als auch gehen . Ich kann einfach auf die Fußzeile gehen, die eigentlich nur ein Teil der vollständigen Datensatz-unteren Leiste ist, den Teil, den wir bearbeiten möchten. So kann ich auf die untere Leiste gehen und ich kann die Foto-Credits bearbeiten. Also werde ich nur das Copyright Christopher sagen, und dann kann ich dort auch etwas HTML einfügen. Also könnte ich ein Link-Tag einfügen und es auf eine andere Website verlinken lassen. Wieder, ich setze nur einen Hash ein, um ein Platzhalter zu sein, und dann können Sie sehen, dass der Text ein bisschen anders ist, um anzuzeigen, dass es ein Link ist. Sie können auch Foto-Credits ganz deaktivieren so dass es nicht einmal Copyright Christopher überhaupt sagen muss. So können Sie es einfach vollständig deaktivieren oder Sie können das einschalten und Ihren benutzerdefinierten Text haben. Unten rechts haben Sie vielleicht diese Links bemerkt, die von Divi kommen. Wenn ich hier nur auf Veröffentlichen klicke, zeige ich Ihnen, wo Sie darauf zugreifen können. Ich habe die Theme-Optionen bereits hier geöffnet. Sie können Ihre Facebook, Ihre Twitter, Ihre Google Plus-Links dort einfügen und so, wenn jemand auf diese klickt, wird es zu diesen Links gehen. Ehrlich gesagt, ich habe Facebook und ich habe Twitter und kein großer Nutzer von Google Plus. Also oft verstecke ich diesen Abschnitt und setze meine eigenen sozialen Links ein. Ich möchte auch auf andere Profile verlinken, nicht nur auf diese drei. Also bin ich mir nicht sicher, warum Divi diese wahrscheinlich ausgewählt hat , weil sie die meisten Blogger freundlich sind, aber ich mag es, um YouTube und Instagram zu verlinken. Normalerweise erstelle ich mein eigenes kleines Foto mit diesen Links. Grundsätzlich haben wir also die Basis unserer Website. Wir haben eine Titelseite und ein Menü, das eigentlich noch nichts tut, aber dazu kommen wir. Das Wichtigste, was unsere Website jetzt braucht, ist der Inhalt. Also, im nächsten Video werden wir über das Hinzufügen von Inhalten sprechen, denn wenn Sie keine Inhalte haben, haben Sie nichts zu zeigen und es ist schwierig, Ihre Website selbst zu organisieren, wenn Sie nichts darauf haben. Also werden wir einige Inhalte im nächsten Video hinzufügen, und in den folgenden Videos werden wir mit einigen Anpassungen und Seitenaufbau fortsetzen . Also sehe ich dich auf der nächsten. 9. Inhalte zu deiner Website hinzufügen: In Ordnung. Also dieses Video, wir werden alles über Inhalte sprechen und wir werden einige Inhalte zu unserer WordPress-Website hinzufügen. Denken Sie daran, WordPress ist die beliebteste Plattform für Aufbau von inhaltsbasierten Websites und für eine inhaltsbasierte Website, um eine gute Content-based-Website zu sein, muss es Inhalte ganz offensichtlich haben. In WordPress gibt es ein paar verschiedene Inhaltstypen, die wir hinzufügen können, in WordPress gibt es zwei Dinge namens Post Types, was ein bisschen verwirrend ist, weil einer von ihnen tatsächlich als Beiträge. Aber im Wesentlichen Post Types funktionieren auf die gleiche Weise. Divi fügt tatsächlich einen dritten Post-Typ namens Projects hinzu, und ich habe noch nicht wirklich erklärt, was ein Post-Typ ist, aber im Grunde ist es nur eine Möglichkeit, Inhalte dynamisch hinzuzufügen. So können wir hier auf dem Beitragsmenü sehen, können wir uns alle Beiträge ansehen. Wir können neue Beiträge hinzufügen, wir können unsere Beiträge kategorisieren und wir können sie taggen. Wenn ich zu Seiten gehe, erlaubt es keine Kategorien und Tags, aber es erlaubt uns, alle Seiten anzuzeigen und neue Seiten hinzuzufügen. Wenn wir zu Projekten gehen, die von Divi hinzugefügt wird, können wir zu allen Projekten gehen, Sie kategorisieren und Tags. Der Unterschied zwischen Beiträgen und Seiten besteht darin, dass Beiträge, Sie als Blogbeiträge vorstellen können. Sie haben also eine festgelegte Zeit und werden zu dem so genannten RSS-Feed hinzugefügt. Also, wenn jemand Ihren Blog über einen Blog-Leser abonnieren möchte, wenn Sie einen neuen Blog-Beitrag veröffentlichen, werden sie benachrichtigt. Also in vielerlei Hinsicht entgegengesetzt wie eine Seite, aber es hat nur ein Date darauf und es ist nur gebaut, um wie ein Blog-Post zu sein. also auf Seiten wechseln, sind Seiten ziemlich ähnlich wie Posts, das andere ist, dass Seiten kein Datum auf ihnen haben, es sei denn, Sie sollten speziell ein Datum in den Inhalt einfügen. Sie haben keine Kategorien und haben keine Tags, da Seiten im Allgemeinen zur Navigation oder zum Erstellen einer speziellen Seite verwendet werden , die nicht wirklich den regulären Inhalt auf der Website darstellt. Zum Beispiel, wenn wir zu einer meiner Lieblings-Blogger-Websites namens Nomadic Matt gehen , auf nomadic matt.com. Wir können hier sehen, dass das erste, was wir uns ansehen, eine Seite ist, sie fügt zur Navigation hinzu, weil er uns mit seinen verschiedenen Büchern hier verknüpft. Aber Sie können hier in diesem Abschnitt sehen, dass er uns mit seinen Blogbeiträgen verbindet, und im Wesentlichen haben wir das Gleiche bekommen, wir haben eine Seite und ich denke, Sie könnten dies auch als eine Seite betrachten. Aber wenn man sich den Beitrag anschaut, ist es offensichtlich, dass es sich um einen Blogbeitrag handelt. Du hast dich hier verabredet und er setzt die Seitenleiste da rein. Also ja, es ist ein bisschen ein subtiler Unterschied, aber Beiträge, die Sie sich vorstellen können, als Blog-Beiträge und Seiten sind im Grunde alles andere. Natürlich, in Divi, Es ist ein wenig anders in dem Sinne, dass Sie einen dritten Post-Typ haben und das ist Projekte. Dies ist, was Divi wirklich gut für den Aufbau persönlicher Portfolio-Websites macht, ist, weil vielleicht möchten Sie Ihre früheren Projekte, früheren Kundenarbeitsportfolio, was auch immer Sie es in einen separaten Abschnitt nennen möchten. So macht Divi das einfach, indem Sie Ihnen einen anderen Post-Typ geben, und das ist, was als Custom Post Type bekannt ist, weil es nicht standardmäßig mit WordPress kommt. Zum Glück hat Divi es für uns automatisch eingebracht, also mussten wir das nicht selbst aufstellen. In Ordnung. Der letzte Teil der Inhalte, über die wir sprechen müssen, sind Medien und im Grunde, wenn wir jetzt nur zu Medien gehen, werde ich einen neuen Tab öffnen und wir haben alle Bilder, die wir bereits auf der Website hier platziert haben. Wir können neue Bilder hinzufügen, indem wir hier neue hinzufügen. Also im Grunde tun Medien an sich nichts, es sei denn, ich stelle hier ein Dokument ein und verweise jemanden damit. Aber wir können Medien in Post-Seiten und Projekte einbetten. Die Medien werden die meiste Zeit also Bilder sein , die Sie vielleicht Audiodateien hier einfügen möchten. Vielleicht möchten Sie hier Videodateien einfügen und vielleicht einfach nur Dokumente speichern. Also denke ich, die Medien sind nur ein anderer Inhaltstyp, aber es geht Hand in Hand und eingebettet in Beiträge, Seiten und Projekte. Jetzt, da ich Ihnen einen Überblick gegeben habe, ist es an der Zeit, tatsächlich Inhalte zu erstellen. Also werde ich in Post gehen und klicken Sie auf Alle Beiträge, und Sie können hier in der Tabelle sehen, dass wir unseren ersten Beitrag sehen können, und es gibt uns den Titel, den Autor und die Kategorie, die in WordPress Sie eine Kategorie haben. Wenn Sie also keine Kategorien eingerichtet haben, wird es einfach unkategorisiert sagen. Also, was ich jetzt tun werde, ist, weil hallo Welt nur ein Dummy Blog-Post ist, ich kümmere mich nicht wirklich darum. Ich werde es abnehmen und von vorne anfangen. Also werde ich auf „Neu hinzufügen“ klicken, um einen neuen Beitrag hinzuzufügen, und übrigens, die Funktionalität zwischen diesem und Seiten und Projekten ziemlich genau gleich. Es gibt also keine Lernkurve mit dem Erstellen von Seiten und Projekten, das ist genau das gleiche im Grunde. Also werde ich sagen, dass dies ein Blog-Beitrag zum Erstellen einer Divi-Site ist. Wenn ich Tab klicke, um zum nächsten Feld zu wechseln, wird die URL für mich erstellt. Da dies ein Blog-Beitrag ist, was es in der URL tun wird, ist das Datum der Veröffentlichung, die es annehmen wird, ist das heutige Datum zwischen der Domäne und dem Titel des Beitrags in der URL. Ich mag das nicht wirklich und es hilft nicht wirklich bei SEO oder so. Also werde ich das in einer Sekunde ändern. Dass es einen Unterschied zwischen Beiträgen und Seiten gibt, tun Seiten das nicht. Also, nachdem ich in einen Namen und dann gehen Sie zum nächsten Abschnitt, wird einen Link mit dem erstellen und unten hier haben wir die WordPress-Standard-Editor für die Erstellung von Blogposts und in dieser Situation, Sie wollen die WordPress Standard verwenden Editor. Du könntest den Divi-Builder benutzen, den wir vorhin besprochen haben. Aber ich würde den Divi Builder nur verwenden, um Seiten zu erstellen , weil ich meine Blogbeiträge gerne mit dem Standard beibehalten möchte, was hier der WYSIWYG-Editor genannt wird, denn in dem, was Sie sehen, ist, was Sie bekommen. Einer der Gründe, warum es wirklich wichtig ist, Ihre Blogposts mit WordPress zu erstellen ist eingebaute WYSIWYG-Editor anstatt der Page Builder ist, wenn Sie zu einem anderen Thema wechseln würden, würde alle Ihre Blogpost gebrochen sein, da der Page Builder, was er tut, Code auf der Seite einfügt, die Divi interpretiert. Wenn Sie also später Ihr Thema ändern würden, werden alle Inhalte in Divi stecken bleiben. Also versteh mich nicht falsch, ich liebe Divi und ich denke, es ist sehr mächtig, wenn du Seiten mit dem Page Builder erstellen möchtest. Aber was Beiträge betrifft, die den regulären Inhalt Ihrer Website sind, möchten Sie nicht zurückgehen und sie neu erstellen müssen. Also am besten, diesen Bereich hier zu nutzen. In Ordnung. Also werde ich auf eine Website gehen, die mir nur Lorem Ipsum gibt , um in einige Dummy-Inhalte zu setzen. Lassen Sie mich einfach zu einem dieser gehen. Ich werde das hineinlegen. Das ist also Ihr grundlegender Absatz, den ich einige Überschriften hinzufügen möchte. Ich werde eingehen und eine Unterüberschrift einfügen, und dann können Sie tiefer mit den Überschriften gehen, um Überschrift 3 zu tun, was noch kleinere Unterüberschriften ist. Ich werde es Unter-Unter-Überschrift nennen, und dann werde ich einfach genau den gleichen Text einfügen. Ich denke, das ist ein Divi-Thema, so dass Sie den Auszug ändern können. Wenn WordPress eine Vorschau Ihres Blog-Beitrags zeigt, wird dieser Auszug angezeigt. Andernfalls wird nur ein Auszug angezeigt, der auf dem basiert, was bereits auf der Seite ist. Was Sie tun können, ist das Layout zu ändern, so dass Sie die Seitenleiste mit Divi ausblenden können. Sie können einen Entwurf speichern, wenn Sie ihn noch nicht veröffentlichen möchten, und Sie können eine Kategorie zuweisen. Ich werde das jetzt tun. Ich werde diesem Beitrag eine Kategorie geben, weil es darauf basiert, wie man eine Divi-Site baut. Ich werde ein wenig breiter mit dem Thema zu gehen und ich werde sagen dies basierend auf WordPress-Entwicklung als die Kategorie. Kategorien sind leistungsstark, da Sie Ihre Inhalte basierend auf einer bestimmten Gruppierung abschneiden können. Sie können dies auch mit Tags tun, aber Tags sind sekundär zu Kategorien. Normalerweise müssen Sie nur Ihre Inhalte kategorisieren, aber Sie können sie auch mit Tags versehen, wenn Sie eine so genannte zusätzliche Taxonomie hinzufügen möchten. Das letzte, was wirklich wichtig ist, ist, ein vorgestelltes Bild zu setzen. Ich habe kein Bild speziell für diese Beiträge, also werde ich vielleicht einfach gehen und jetzt eines herunterladen. Also, ich werde nur ein Bild finden, nur ein zufälliges Bild. Ich sollte das nicht tun, weil es von jemand anderem gehört, aber das ist nur für Demonstrationszwecke. Normalerweise möchten Sie Bilder verwenden, für die Sie die Rechte haben, oder Sie werden nicht in Schwierigkeiten für das Kopieren bekommen. Ich werde es speichern und ich werde es in die Dateien für den WordPress-Kurs einfügen und dann werde ich es hochladen. Das wird im Grunde mein vorgestelltes Bild werden. Wieder werde ich Text für SEO, wie man eine Divi-Seite zu bauen. Ich hätte wirklich ein Bild von einer Divi-Seite speziell für diesen Blogbeitrag bekommen sollen, aber das ist nur für Demonstrationszwecke. Eine Sache, die wir tun können, bevor wir auf Veröffentlichen klicken Wenn Sie sehen möchten, wie es aussieht, bevor Sie es tatsächlich veröffentlichen, können Sie auf Vorschau klicken und plötzlich haben Sie einen Titel, Sie haben Ihren Autorennamen, Sie haben die Datum, an dem es veröffentlicht wurde, welche Kategorie es unter ist, und wie viele Kommentare, und Sie können sehen, dies ist das schöne Layout. Das ist alles im Grunde getan von Divi und WordPress. Ich werde hier auf Veröffentlichen klicken und jetzt wird der Blog-Beitrag live. Sie können einen Beitrag anzeigen, der das Laden beendet und Sie können Ihren fertigen Beitrag sehen. Da gehst du, sehr nett. Nun, die zwei Dinge, die ich sagte, ich wollte ändern, war, dass ich diese Date-Sache loswerden wollte. Ich glaube wirklich nicht, dass es mit SEO hilft und es hilft wahrscheinlich nicht, wenn Leute Ihre Website leichter finden. Also, wenn Sie zu Permalinks in Ihren WordPress-Einstellungen gehen, Ich werde nur gehen und ändern Sie die allgemeinen Einstellungen, um Namen zu posten, so dass Sie hier in dem Beispiel sehen können, es wird nicht das Datum und dann den Beitrag haben. Es wird nur geradeaus zum Postnamen überspringen und das auf Ihre Domain setzen. Übrigens, diese Permalink-Einstellungen können Sie durchgehen und aktualisieren. Vielleicht wolltest du nur das Jahr und dann die Post. Dafür können Sie diese Tags hier verwenden, wenn Sie das wirklich tun möchten. Die meiste Zeit ist es einfach einfacher und am besten, nur den Postnamen drin zu haben. Wir werden Änderungen speichern und jetzt, wenn ich zu diesem Beitrag zurückgehe, den wir erstellt haben, werde ich zu alten Beiträgen gehen und dann einfach voran gehen, um auf Ansicht zu klicken. Es wird nur die Root-Domain haben und dann, wie man eine Divi-Site aufbaut, die auch für SEO gut ist. Sie müssen immer mit SEO im Hinterkopf einbauen. SEO für diejenigen von Ihnen nicht wissen, macht es für Suchmaschinen optimiert , so dass es einfacher ist, Ihre Website in Google oder anderen Suchmaschinen zu rangieren. Jetzt, da wir den Beitrag erstellt haben, ist das Erstellen eines Projekts im Grunde dasselbe. Ich werde hier nicht das ganze Erstellen eines Projektposttyps durchgehen, aber was Sie sehen können, ist genau die gleiche Schnittstelle. Sie können hier sehen wir können Projektkategorien hinzufügen, wir können Projekt-Tags auch hier hinzufügen. Diese sind getrennt, um Kategorien und Tags zu posten. Eines der Dinge dabei ist ein separater Beitragstyp, ist, dass verfügbare Kategorien und Tags für diesen Beitragstyp eindeutig sind. In Beiträgen haben sie ihre eigenen Kategorien und Tags, aber im Wesentlichen ist es ein Duplikat von Beiträgen, das es in einer anderen Kategorie im Sinne platziert, so dass es vollständig von Beiträgen abgeschnitten wird. Die nächste Sache ist Pages, die wiederum genau das Gleiche ist. Wir können unsere Seiten hier und dann einige Wörter danach betrachten, um spezielle Seiten anzuzeigen. Sie können dies hier sehen, ist unsere Titelseite. Es hat einen Strich, einen Strich Titelseite. Wenn Sie E-Commerce ausführen, haben Sie möglicherweise Strich Warenkorb Seite, Sie haben möglicherweise Strich Dash-Checkout Seite, und dieser Strich bedeutet nur, dass es eine spezielle Seite ist und es zeigt Ihnen nur an, welche dieser Seiten Ihre Startseite, Ihre Warenkorbseite und all das. Dies ist ein Entwurf, den ich früher erstellt habe, und dann ist der Entwurf hier natürlich alle Seiten, die sich im Entwurfsmodus befinden, also haben Sie sie tatsächlich noch nicht veröffentlicht. Im Wesentlichen, was Sie von Ihrer Website tun wollen, ist, so viel Inhalt wie möglich zu haben. Es ist schwierig, Ihre Inhalte zu kategorisieren, wenn Sie nur einen Blogbeitrag haben, und es ist schwierig, Navigation in verschiedenen Teilen Ihrer Website zu haben, wenn Sie nur eine Seite haben. Also sollten Sie wirklich da rein gehen, neue Blog-Posts erstellen, und im Wesentlichen mein Rat an jeden, der eine Website startet, ist , mindestens fünf Blog-Beiträge zuerst zu schreiben oder fünf Seiten auszuschreiben und all das zuerst zu entwerfen, und dann beginnen, das in WordPress zu setzen, denn es ist schwer, diese Menüs zu erstellen, diese Layouts zu erstellen und alles andere zu erstellen, wenn Sie noch nicht wirklich Inhalt auf Ihrer Website haben. Denken Sie daran, dass inhaltliche Websites mit Inhalten gefüllt werden sollen. Was wir tun könnten, ist durchzugehen und alle diese neuen Beiträge zu erstellen, aber im Wesentlichen ist der Prozess für jeden von ihnen gleich. Ich ermutige Sie, durch zu gehen und einige Inhalte zu erstellen, vielleicht sogar einige Dummy-Inhalte, wenn Sie nur einige Dummy-Inhalte dort hineinwerfen wollen , das ist alles gut. Ich werde ein wenig voran gehen und ich werde einige meine eigenen Inhalte einfügen und ich werde Sie im nächsten Video sehen. In der nächsten werden wir Seiten erstellen, die ein bisschen mehr involviert sind, weil wir den Page Builder verwenden und wir werden die Homepage aufbauen. Wir sehen uns im nächsten Video 10. Verwendung des Divi-Pagebuilders: So haben wir im letzten Video über das Hinzufügen von Inhalten gesprochen. Zwischen diesem Video und diesem habe ich in mehr Blog-Posts im Beitrag Abschnitt hinzugefügt, wie Sie hier sehen können. Aber auch in Projekten ging ich hinein und stellte einige Projekte ein. Um klar zu sein, nein, ich habe nicht für Amazon, Facebook oder Google gearbeitet. Ich dachte nur, sie wären einfache Beispiele, um zu demonstrieren, was Sie in Ihre Projekte setzen sollten. Nun, da wir hier einige Inhalte haben, haben wir einige Beiträge, wir haben einige Projekte, wir können jetzt beginnen, einige Seiten zu erstellen, die einige dieser Inhalte dynamisch einbringen. Natürlich, wenn wir auf unsere Website gehen, ist die erste Seite, die repariert werden muss, unsere Titelseite. Dies ist nur eine Beispielseite, die von WordPress kam, so ist es Zeit, in und ändern Sie es, wie wir es möchten. Wie ich zuvor geklärt habe, können Sie mit Divi, sobald Sie auf Bearbeiten klicken, sobald Sie auf Bearbeiten klicken, den Divi Builder verwenden. Ich werde nur all dies löschen und dann auf „Use Divi Builder“ klicken. Eigentlich, wenn Sie das löschen wollen, was Divi tun würde, ist, dass es den Text, den Sie vorher hatten, als Textmodul hier setzen würde. Damit du es nicht verlieren würdest. Ich wusste nur, dass wir es loswerden würden, also habe ich es vorher loswerden. Aber ich hätte es genauso einfach umgekehrt machen können, was ich jetzt nur demonstrieren werde. Nur als Referenz für den Fall, dass Sie eine Seite ändern möchten , die in der WordPress Wheezy getan wurde, müssen wir das tun, aber wollen zu Divi wechseln. Wenn ich darauf klicke, wird der Text, den wir als Textmodul haben , in die erste Spalte der ersten Zeile des ersten Abschnitts eingefügt , der standardmäßig eine einspaltige Zeile ist. Jetzt habe ich vor der Verwendung von Visual Builder demoliert, was für einige von Ihnen das vorziehen könnte. Nur um Ihnen das wieder zu zeigen, Sie im Grunde den Mauszeiger über die verschiedenen Teile Ihrer Seite und Sie können bearbeiten. Das ist der Abschnitt. So können Sie auf die „Zahnrad“ klicken und Sie können Abschnittseinstellungen so ändern. Sie können auf Ihre „Zeile“ klicken, und Sie können Zeileneinstellungen wie folgt aktualisieren, und Sie können Ihre Texteinstellungen für dieses Modul bearbeiten, in einer anderen Zeile hinzufügen, mit wie vielen der Spalten Sie wollen, und dann können Sie in einem anderen -Abschnitt auch. Wir haben eine regelmäßige Spezialität für Breite. Ich als persönliche Präferenzverwende den Visual Builder nicht wirklich, verwende den Visual Builder nicht wirklich weil er mit diesen verschiedenen Dingen, die schweben, ein bisschen pfiffig ist. Es ist nur eine persönliche Vorliebe. Wenn Sie einen Visual Builder verwenden möchten, Sie auf jeden Fall den Visual Builder. Aber meine Präferenz ist der Standard-Builder. Ich gehe einfach zurück in die Bearbeitung, und hier ist der Standard-Builder. Nun, warum ich den Standard-Builder mag ist es nur viel klarer, wo die Abschnitte sind. Also kann ich hier eine Zeile hinzufügen, und ich kann eine zweispaltige Zeile hinzufügen, und ich kann Module hier einfügen, und ich kann den Namen des Moduls sehen. Es gibt mir nur einen guten Überblick über die Struktur der Seite, während die andere zeigt Ihnen genau, wie es auf der Seite aussieht. Aber dann ist vielleicht vielleicht ein bisschen schwieriger, die Struktur zu ändern. Also für mich mag ich das, vielleicht liegt das daran, dass ich eher ein Entwickler bin. Völlig überlassen Sie, wie Sie es tun möchten. Nun, was ich tun möchte, ist uns eine Homepage für diese Website zu erstellen. Die Website, die ich erstelle, und Sie haben sie wahrscheinlich inzwischen gesammelt, ist eine persönliche Website. Ich habe ein Logo von meinem Gesicht. Ich habe Portfolio Services Blog, und die Website, die ich nur meinen Namen genannt habe. Divi ist gut dafür und ich dachte nur, dass es ein einfaches Thema wäre, mit dem man anfangen kann, man muss keine Website über seine persönliche Marke oder Ihr Profil überhaupt machen. Nur um Sie wissen zu lassen, das ist die Website, die ich bauen möchte. Wieder, wie ein Beispiel, werden wir eine freiberufliche Portfolio-Website aufbauen. Aber die gleichen Prinzipien gelten für alles, was Sie bauen möchten. In Bezug auf die beliebte moderne Web-Design, oft werden Sie sehen, genau wie auf meiner Website hier, die meine eigentliche Portfolio-Website ist, werden Sie sehen, was Held Bild genannt wird. Es braucht nur ein bisschen zu laden. Aber das ist im Grunde ein Bild mit voller Breite. Das ist übrigens auch auf Divi aufgebaut, also werden wir etwas Ähnliches bauen. Dies ist ein Bild in voller Breite, und es hat ein bisschen von dem, was ich will, dass die Leute sehen, und was man als Call-to-Action bezeichnet. Dies ist im Grunde nur eine Schaltfläche, aber diese ganze Sache ist ein Call-to-Action, weil ich Leute dazu führe eine Aktion zu ergreifen, von dem Moment an sie die Website sehen. Das ist nur ein bisschen über Design. Was ich tun werde, ist, weil ich möchte, dass es in voller Breite ist, muss ich tatsächlich einen anderen Abschnittstyp in Divi machen. Ich klicke auf „Abschnitt voller Breite“ und ich ziehe das über das, was wir bereits haben. Sie können hier sehen, dass es keine Zeilen gibt, da Sie nur eine Zeile mit dem Abschnitt voller Breite erhalten. Aber was ich hier tun werde, Module einfügen. Diese Module sind ein wenig anders für unseren Abschnitt mit voller Breite zu einem Abschnitt mit normaler Breite. Aber was ich hier tun werde, ist, dass ich einen Header in voller Breite machen werde , der es mir ermöglicht, Überschriftentexte, eine Schaltfläche oder zwei Schaltflächen in der Tat, und auch in dieses Hintergrundbild einzufügen. Ich werde sagen willkommen auf meiner Website als Titel. Ich mache WordPress-Sites. Dann für diesen Button werde ich mein Portfolio sehen. Sie können zwei Knöpfe drin haben. Ich werde mich nicht mit dem zweiten Knopf beschäftigen. Sie können es in die URL einfügen, und weil wir es noch nicht erstellt haben, werde ich es nur in einen Hash als Platzhalter setzen. Sie können Bilder hier einfügen, aber was wir wollen, ist ein Hintergrundbild und in Divi gehen Sie zu den Hintergrundeinstellungen. Genau hier ist, wenn Sie eine einfarbige Farbe als Hintergrund wollen, hier ist, wenn Sie einen Farbverlauf wollen, hier ist, wenn Sie einen Bildhintergrund wollen, und hier ist, wenn Sie einen Videohintergrund wollen. Das ist echt cool. Sie haben vielleicht auf anderen Websites gesehen, sie haben einen Video-Hintergrund. Divi macht das wirklich einfach, indem Sie hier die Option „Video-Hintergrund“ verwenden. Ich gehe zurück zum Bild, und ich gehe zu Dateien hochladen. Ich habe es schon hier. Dies ist das Heldenbild, das ich auf so ziemlich allen meinen Websites verwende, und ich werde ihm einen besseren Namen geben. Ich tippe einfach meinen Namen ein. Christopher Dodd, Heldenbild. Dann hier unten, stellen Sie sicher, dass es in voller Größe ist. Als Hintergrund festlegen. Mach dir keine Sorgen, dass das jetzt abschneidet. Möglicherweise müssen wir die Hintergrundgröße und die Bildposition anpassen. Also ist mein Kopf oder der wichtigste Teil oben rechts. Ich werde nach rechts oben positionieren, und hoffentlich sieht das gut aus. Sonst können wir damit herumtreiben. Die Größe des Hintergrundbildes können wir auf Abdeckung einstellen, was bedeutet, dass es den gesamten Abschnitt abdecken wird. Das ist gut, weil wir es reaktionsschnell brauchen. Ich werde auf „Speichern und Beenden“ drücken. Jetzt werde ich Änderungen in der Vorschau anzeigen. Wir hätten genauso leicht auf Update klicken können. Es spielt keine Rolle, denn wir arbeiten noch nicht wirklich an einer Live-Website, aber wenn Sie eine Seite auf einer bestehenden Website aktualisieren, würden Sie wahrscheinlich zuerst eine Vorschau anzeigen wollen. So, wie Sie sehen können, haben wir diese volle Breite Bild, willkommen auf meiner Website, Ich mache WordPress-Sites, sehen Sie meine Portfolio-Schaltfläche. Ich sehe, dass wir etwas ändern müssen, und das heißt, das ist einfach nicht groß genug. Wie Sie hier sehen können, ist mein Gesicht ein wenig abgeschnitten, es sieht gruselig aus und hat eigentlich nur meine Zähne. Der Topper Teil meiner Zähne gerade oben und so, was ich tun will, ist, zu zwingen, dies eine bestimmte Höhe zu haben. Nun, was ich tue und das ist etwas, das ich euch in der letzten Klasse gezeigt habe, ist, mit eurer Website im Browser herumzuspielen , bevor ihr irgendwelche permanenten Änderungen vornimmt. Durch die Verwendung der Befehlsoption I auf Chrome, mit Mac, kann ich die Entwickler-Tools aufrufen. Sie sehen hier, dass dies bereits reagiert. Jetzt sieht das ein bisschen besser aus. Aber wieder, auf einem größeren Bildschirm, wird es mir das Gesicht abschneiden. Was ich tun möchte, ist hier zu inspizieren und das wird die Überschrift bringen, aber wenn ich weiter in die Kette gehe, kann ich hier sehen und Sie können aus den Klassennamen sammeln, das ist der Abschnitt, E-t ist das Präfix, das Divi verwendet, also, wenn Sie e-t, p-b, e-t, p-b, e-t, p-b sehen , ist das ein guter Tipp, wenn Sie die Website von jemand anderem besuchen und sehen möchten , ob es auf Divi gebaut ist. Sie können den Code auschecken und wenn er et_pb_ hat, dann ist es sehr wahrscheinlich, dass sie auch Divi verwenden. Das ist also ziemlich cool, du kannst die Seiten anderer Leute ausspionieren. Was ich hier tun möchte, ist nur zu überprüfen, ob ich dies zuerst beeinflussen kann. Ich werde die Höhe ändern. Tut mir Leid, ich sollte ein bisschen nachholen. Wenn ich dies auswähle, kann ich mit diesem Panel einen Stil direkt darauf anwenden. Ok. Das ist es, was ich hier mache. Ich werde in 800 Pixel setzen. Ok. Das ist cool und alles, es machte den Abschnitt größer, aber das Element, das mein Bild darin hat, ist offensichtlich nicht da. Ich werde das nur abbrechen, was ich tun kann, indem ich dieses Kontrollkästchen aktiviere und ich werde eine Schicht tiefer gehen. Wie Sie hier in dieser Ebene sehen können, können Sie sehen, dass es dort auf das Hintergrundbild verweist , und ich kann das ein- und ausschalten. Jetzt, wenn ich hier hoch gehe und ihm eine Höhe gebe, da gehst du, wird es jetzt größer. Jetzt ist 800 ein bisschen viel. Ich brauche es nicht, um den ganzen Weg runter zu gehen. Wahrscheinlich brauchen wir nur dort. Sogar bei voller Breite. Eigentlich werde ich nur schließen, weil das so breit ist, wie ich kann. Selbst bei voller Breite kann man immer noch mein Gesicht und ein bisschen Arme sehen. Ich glaube, ich mache es jetzt nur 500. Es ist wichtig zu beachten, dass dies hier keine Änderungen dauerhaft machen wird. Dies ist nur für Sie, um mit spielen und beeinflussen die Ausgabe auf dem Bildschirm, so dass Sie herausfinden können, was Sie in Ihrem Dashboard ändern. Was ich tun werde, ist zurück zu gehen und dieses Modul zu finden. Wir waren in diesem Abschnitt und dann eine Schicht tiefer ist dies auch Abschnitt genannt, aber in HTML, aber wie Sie hier sehen können, ist die Klasse pb-Modul. Was wir tun müssen, ist zurückzugehen und das in unserem Divi Page Builder zu finden. Ich gehe hier in die volle Breite Moduleinstellung und hier können Sie benutzerdefinierte CSS hinzufügen. Sie können dies auch in Ihrer style.css hinzufügen und versuchen, es zu referenzieren, aber in diesem Fall beeinflussen wir nur ein einzelnes Element, also ist es sicher, es von hier aus zu tun. Ich werde in Höhe 500 setzen. Eines der coolen Features, die Divi seit der Aktualisierung ihres Themas gesetzt hat, ist, sobald Sie in etwas klicken, wird es Ihnen sagen, was die Klasse ist, die Sie beeinflussen werden. Wir können diese et_pb_full width_header_0 überprüfen gehen. Ich kann hier zurück auf unsere Seite gehen und ich kann nachsehen, ist das der? Wie Sie hier sehen, et, pb_full width, header, null, das passt hier oben. Dieser Stil sollte auf dieses Element angewendet werden. Ich gehe nach unten scrollen und ich werde auf „Speichern und Beenden“ klicken. Dann werde ich wieder eine Vorschau. Dadurch wird die Seite aktualisiert. Da gehst du. Jetzt wird dies immer 500 Pixel hoch sein. Das ist ein gutes Beispiel dafür, wie Sie in Code graben würden, um Styling-Optionen und so zu ändern. Aber wie Sie im nächsten Video sehen werden, wir noch tiefer in Code graben, um einige ernsthaftere Anpassungen durchzuführen. Der nächste Abschnitt, den ich auf dieser Website bauen werde, wird ein bisschen wie ein Autotext Abschnitt sein, es wird über meine wichtigsten Verkaufsargumente als Freiberufler sprechen. Ich werde nur diesen ganzen Abschnitt löschen und dann gehe ich hierher und beginne einen neuen Abschnitt, nur damit ich von vorne anfangen kann. Was ich tun werde, ist, dass ich drei Autotexte haben werde , und ich möchte, dass sie alle eine gleiche Breite haben. Ich werde klicken, wählen Sie diese. Dies ist, was ich am Divi-Builder-Standard mag, Sie können deutlich sehen, dass es hier drei Spalten gibt und Sie können auf eine von ihnen klicken, um ihnen ein Modul hinzuzufügen. Ich werde auf den ersten klicken, einen Autotext hinzufügen und ein Autotext ist im Grunde nur ein Element, das einen Titel, ein bisschen Inhalt, einen Link und ein Symbol hat ein bisschen Inhalt, . Also werde ich sagen, ein Auge für Design, ist einer meiner Verkaufsargumente. Wir müssen es nicht verknüpfen, wenn wir es nicht wollen. Also werde ich einfach keinen Link dort einfügen und dann kann ich Divi's Icon-Bibliothek verwenden , indem ich auf „Use icon“ klicke. Sie können auch ein Bild hochladen und ein Bild verwenden, aber ich werde ein Symbol verwenden und ich muss nur etwas finden, das Design kommuniziert. Ich könnte hier ein wenig für euch vorwärts gehen, denn ich werde zwei weitere Autotexte erstellen und einfach den Prozess für diesen einen kopieren, aber lassen Sie mich einfach ein Symbol finden, das Design kommuniziert. Ich will nicht den ganzen Tag damit verbringen, also werde ich nur dieses Basketball-aussehende Ding wählen, von dem ich denke, dass es dribble ist. Ok. Hier können Sie das Admin-Label ändern. Ich werde das in Design ändern und Sie werden sehen, warum in nur einer Sekunde. Jetzt kann ich sehen, ohne hineinzugehen, was sagen wird. Also habe ich es als Design bezeichnet, also weiß ich, dass das der Design-Blurb ist. Ich werde hier schnell vorwärts gehen, zwei weitere Autotexte einfügen und Sie werden das Ergebnis in nur einer Sekunde sehen. In Ordnung. Also habe ich meine drei Autotexte da drin und ich werde jetzt Änderungen ansehen, um zu sehen, wie es aussieht. Alles klar, los geht's. Wie Sie sehen können, sieht es ein bisschen seltsam aus, weil die Titel links ausgerichtet sind und die Symbole in der Mitte sind. Außerdem wäre es gut, einige Inhalte unter ihnen zu haben. Also gehe ich jetzt zurück und repariere das. Also bin ich gerade voran gegangen und habe das schnell weitergeleitet, das durchgemacht. Ich werde auf Vorschau klicken und jetzt können Sie sehen der Text zentriert ist und es ein bisschen wie ein Autotext. Wie ich das gemacht habe, nur um euch eine Zusammenfassung zu geben, ging ich zum Inhalt, um dieses kleine bisschen Inhalt hinzuzufügen, und dann ging ich auf die Registerkarte Design und dann scrollte ich nach unten zum Text und richtete das als Zentrum aus, um das zu tun. Das sieht ziemlich gut aus. Denken Sie daran, dass dies alles reaktionsschnell ist, weil wir es auf Divi gebaut haben. Wenn ich so hinuntergehe, wird es übereinander stapeln. Wenn es zum Beispiel vier gäbe, wäre es vielleicht diese Bildschirmgröße bekommen und zwei Reihen von zwei, so sehr intelligent. Manchmal müssen Sie es vielleicht ändern, aber die meiste Zeit ist Divi ziemlich gut darin, es reaktionsschnell zu machen. Eigentlich möchte ich eine Sache hier in eine andere Zeile hinzufügen und den Titel für diese Autotexte einfügen. Mit dem Standard-WYSIWYG-Editor von der Webpresse mache ich eine Überschrift 2 und sage:“ Warum sollte ich mich einstellen?“ Ich werde diesem nur ein Admin-Label der Überschrift geben. Nun, was ich tun werde, ist einen neuen Abschnitt hinzufügen und ich werde eine einspaltige Zeile machen und wieder das gleiche einfügen, was ich vor dem Text hatte. Das wird unsere Überschrift sein, gehen, um Zentrum auszurichten, machen es zu einer Überschrift 2 sagen: „Schauen Sie sich meine früheren Kunden an.“ Ich werde diese Überschrift Kunden nennen. Sie können alles, was Sie wollen, darin einfügen, es macht es einfach, herauszufinden, welcher Abschnitt was ist. Ich werde eine Zeile hinzufügen und ich werde einen Abschnitt voller Breite einfügen. Oh, kein Abschnitt voller Breite, sondern eine einspaltige Zeile und hier kann ich einige dynamische Inhalte einbringen. Hier ist ein Element. Sie können ein filterbares Portfolio machen oder Sie können einfach ein normales Portfolio machen. Eigentlich haben wir keine Portfolio-Kategorien eingerichtet , aber wenn Sie Portfolio-Kategorien haben, können Sie filtern. Dadurch wird die maximale Anzahl von Beiträgen festgelegt, die angezeigt werden, und Sie können zeigen, welche Dinge angezeigt werden sollen. Kategorien, die wir nicht wirklich haben, also werde ich das verstecken. Paginierung, das brauchen wir nicht wirklich, aber Sie können das aktiviert haben. Lass uns das einfach reinlegen und sehen, wie es geht. Ich gehe hier wieder hoch und ich werde Änderungen in der Vorschau anzeigen. Schauen Sie sich meine bisherigen Kunden an. Jetzt geht es um diese wirklich großen Blöcke, die ich nicht weiß, warum Divi das standardmäßig macht, weil sie oft hässlich aussehen. Dies ist der Inhalts-Tab, so können wir den Inhalt ändern und sogar den Hintergrund machen. Advanced ist, wo wir in Custom CSS setzen, ID und Klassen und ändern unsere Sichtbarkeit auf Telefon, Tablet oder Desktop, aber Design Tab ist, was wir suchen und was wir hier haben, ist ein Feld namens Layout. Wir können das von voller Breite zu Gitter ändern, was in diesem Fall denke ich, dass es viel besser aussehen wird. Sie haben 70 weitere Anpassungsoptionen, es ist lächerlich. Ich werde mich erst darum kümmern, bis ich etwas sehe, das ich ändern möchte. Zurück zur Vorschau der Änderungen. Sie werden wollen, dass diese Logos wahrscheinlich die gleiche Höhe und Breite haben, wenn Sie möchten, dass sie gut angezeigt werden, aber wie Sie sehen können, zieht dies dynamische Inhalte. Was ich damit meine, ist, sobald ich hier ein neues Portfolioelement hinzufüge, das als Projekte in Divi bezeichnet wird, das hier angezeigt wird, vorausgesetzt, dass es das Maximum nicht erreicht hat. Jetzt habe ich gerade einen weiteren Fehler herausgefunden, den ich hier hatte, was ist, dass ich vergessen habe, die obige Überschrift zu verschieben. Sie können ein Modul wie dieses sehr einfach verschieben, und diese Überschrift wird jetzt oben angezeigt. Lassen Sie uns eine Vorschau darauf. Jetzt hast du diesen Abschnitt, der das Heldenbild mit dem Aufruf zur Aktion ist, du hast „Warum mich anheuern?“ also hast du die Autotexte. Sie können frühere Clients auschecken, die übrigens, wenn Sie auf einen von ihnen klicken, mache ich einen neuen Tab. Sie können eine ganze Seite mit mehr Informationen über dieses Projekt erhalten und das gleiche gilt für all diese. Es wird das gleiche Layout der Seite haben, wenn Sie hineingehen möchten. Dies ist alles Dummy-Inhalt, also gibt es hier nichts Neues zu sehen, das ist nur ein Beispiel. Abschließend möchte ich in einen anderen Abschnitt stellen. Es wird ziemlich ähnlich sein, also was ich tun kann, ist duplizieren oder klonen Abschnitt, wie sie es nennen. Ich werde dies anstelle von Kunden ändern, ich werde sagen: „Lesen Sie meinen Blog.“ Dies ist, wo wir in eine andere Reihe von dynamischen Inhalten setzen können. Ich werde das Portfolio entfernen, indem ich hier klicke und ich werde dieses Modul loswerden und dann ein neues Modul dort einfügen und ich kann zum Blog gehen. Jetzt kann ich nach Kategorie filtern, ich kann das Meta-Datumsformat ändern. Ich kann wählen, um den Ausgang anzuzeigen oder den Ausgang nicht anzuzeigen. Ich werde es dem Autor nicht zeigen, weil es alles von mir geschrieben ist. Ich werde keine Kategorien anzeigen, weil es nur eine Paginierung gibt. Sie können die Read more aktivieren, Sie können das Featured Bild deaktivieren, wenn Sie möchten. Aber die einzige Sache, die ich weiß, dass ich ändern möchte , ist, dass ich dieses Layout mit voller Breite nicht möchte, also werde ich das wieder in Grid ändern und zu viele Optionen. Ich werde auf „Speichern und Beenden“ klicken und dann Änderungen in der Vorschau anzeigen. Wenn wir nach unten scrollen, haben wir einen schönen Abschnitt angelegt, der Blogbeiträge auftaucht. Wie Sie hier sehen können, wird der Auszug für jeden von ihnen gleich sein, weil ich in der gleichen Standard Lorem Ipsum Passage, aber ich habe das vorgestellte Bild geändert, um es nur ein bisschen klarer zu machen, was wir hier tun und wieder, das ist voll reaktionsschnell. Du siehst, wie das jetzt und jetzt schrumpft, das auf eine neue Linie bricht. Sogar dies wurde das Zeug in der Fußzeile zentriert. Eine andere Sache zu beachten ist, dass das Menü darin zusammengebrochen ist. Ja, es ist alles reaktionsschnell mit Divi und dem Page Builder und wir haben hier zwei Abschnitte mit dynamischen Inhalten. Offensichtlich gibt es noch ein paar Elemente, mit denen Sie arbeiten können. Das Beste, was zu tun ist, ist wahrscheinlich ein bisschen herumspielen, also gehe ich hier rein und schaue mir die verschiedenen Module an, sieh dir an, was sie tun. Aber im Grunde sind die Prinzipien mit dem Divi Page Builder, Sie haben einen Abschnitt, der in blau ist. Sie haben eine Zeile und Sie haben Spalten, die die Anzahl der Spalten eingerichtet wird, sobald Sie eine neue Zeile erstellen. Sie können Zeilen nicht neu anordnen, aber Sie können immer sagen, dass Sie den Blog in eine der Spalten verschieben wollten. Sie könnten das tun und dann einfach löschen, so dass Sie das Modul aus einem anderen Raum in einen anderen Raum verschieben können. Sie können Zeilen auch neu anordnen, wie wir Ihnen zuvor gezeigt haben. Wir können Abschnitte wie diese neu anordnen , wenn wir diesen Abschnitt oben wollten und wir können sie loswerden. Die Hauptprinzipien sind Abschnitte, Zeilen und Spalten und Module. Das zweite Prinzip ist der Unterschied zwischen diesem statischen Inhalt und dynamischen Inhalten, die andere Inhaltstypen aus verschiedenen Teilen Ihrer Website abrufen. Ich hoffe, das ist eine gute Einführung in den Page Builder und wie man Seiten mit Divi und WordPress erstellt. Im nächsten Video gehen wir über die Anpassung Ihres Codes. In dieser Lektion haben Sie eine kleine Anpassung gesehen, als ich einging und diese auf eine Höhe von 500 geändert habe. Wir können in gehen und überprüfen Element und sehen, dass Änderung direkt dort, aber wir werden auf die anderen Möglichkeiten, wie Sie Ihren Code anpassen können, einschließlich Hinzufügen eines Code-Blog Erstellen von Stilen. Auch, wie man herausfinden kann, welcher Teil der Seite zu stylen und der Unterschied zwischen CSS in line, über die wir ein wenig darüber gesprochen haben, aber wir werden in der nächsten Lektion näher eingehen. Bevor wir das tun, werde ich jedoch sicherstellen, dass ich das retten werde. Ich habe gelegentlich diese Seite geschlossen, ohne meinen Fortschritt zu speichern. Sie müssen hier auf „Aktualisieren“ klicken und jetzt sind diese Änderungen dauerhaft und sind live und Sie haben Ihre Website. Wir sehen uns im nächsten Video. 11. Anpassen mit Code – Grundlagen: Im letzten Video haben wir die Titelseite unserer Website mit dem Divi Page Builder erstellt. Wie Sie sehen können, konnten wir den Page Builder verwenden, um eine ziemlich gute Titelseite mit dynamischem Inhalt zu erstellen, so ziemlich mit Nullcode, abgesehen davon, dass Sie einen Stil darauf setzen. Das ist die Macht des Page Builders, wir können Layouts wie diese erstellen und Elemente von Divi verwenden, ohne Code zu schreiben, und das spart uns viel Zeit. Aber was, wenn wir einen benutzerdefinierten Code hinzufügen möchten? Wenn wir hier in die Bearbeitungsseite gehen, und wir fügen einfach einen neuen Abschnitt hinzu, um ein Modul hinzuzufügen, ist dies die Liste der verfügbaren Module mit Divi. Wenn du einen Kreiszähler erstellen wolltest, ist das cool, du hast das genau da. Sie wollen in das Kontaktformular, eine Galerie, es gibt einige wirklich coole out of the box Features hier in Divi. Aber was passiert, wenn Sie etwas bauen wollen, das nicht wirklich in dieser Liste ist? Eine der Möglichkeiten, wie wir dies tun können, ist die Verwendung eines Codeblocks. Dies ist wie ein bloßes Modul in Devi, das wir hier einfügen können, was wir wollen, damit wir anfangen können, ein bisschen Code zu verwenden, um etwas Custom zu bauen und dann noch Divi's System zu verwenden oder zu nutzen, wie es die Abschnitte hat, Zeilen und Spalten, so dass wir immer noch diese responsiven Spalten erhalten, aber wir können unsere eigenen Elemente mit HTML, CSS erstellen , und wir können sogar ein wenig JavaScript einfügen. Ich denke, das beste Beispiel dafür ist, Ihnen ein aktuelles Kundenprojekt zu zeigen. Das ist etwas, was ich früher im Jahr für einen Kunden in Australien getan habe. Ich baute diese Website basierend auf PSD-Design und baute sie alles in Devi. Eines der Dinge, die in dem Design war, das nicht wirklich Standard in Divi ist, sind diese, ich weiß nicht, wie man sie nennen würde, eine Galerie von Bildern auf dem Hover, es öffnet ein bisschen Text. Das war wahrscheinlich eine schreckliche Erklärung, aber Sie können sehen, wie es hier funktioniert. Es gibt nur diese verblassten Bilder und wenn Sie Ihre Maus über es wird ein bisschen dunkler und einige Text erscheint auf dem Bildschirm. Was ich dafür getan habe, gehe ich einfach rein und zeige es dir jetzt. Alles, was ich getan habe, um zu diesem Punkt zu kommen, ist, dass ich mich gerade mit dem WordPress-Admin angemeldet, ging zurück auf die Seite und dann die obere Leiste verwendet, um zu bearbeiten. Jetzt kann ich hier runter gehen und Sie können das Layout sehen. Ich werde es nebeneinander öffnen. Sie können die Struktur so sehen, wie sie im Divi Page Builder ist, und dann können Sie das Ergebnis hier sehen. Dies ist der Abschnitt, den ich es Highlight Image Box nannte, und wenn wir in diese Highlight Image Box gehen, können Sie einige benutzerdefinierte HTML sehen, und tatsächlich, was das Hover-Verhalten gibt, ist ein CSS, das ich selbst gestylt habe. Lassen Sie uns tatsächlich hineingehen und etwas Ähnliches in unserem Projekt erstellen. Ich bin wieder in unserem eigenen Projekt und nur zu Demonstrationszwecken möchte ich nicht zu lange damit verbringen, benutzerdefinierte Elemente zu programmieren, ich möchte Ihnen nur zeigen, dass das Potenzial hier ist, ich werde nur ein Div erstellen, das haben eine Grenze, die es offensichtlich macht zu sehen, dass wir einen benutzerdefinierten Code einfügen. Aber im Wesentlichen sind die Möglichkeiten unendlich, Sie könnten codieren, was Sie wollen. Ich werde ein Div einlegen. Ich werde einfach ein Div mit dem Wort „Box“ darin und ihm dann eine Grenze geben. Ich werde speichern und beenden und nur sehen, was das als angezeigt wird. Änderungen in der Vorschau anzeigen. Wenn wir runtergehen, können wir unsere Kiste hier sehen. Die Höhe der Box wird proportional zum Inhalt darin hergestellt. Wenn wir mehr Text hinzufügen, wird es größer. Wenn wir die Höhe korrigieren wollten, wollen wir das vielleicht tun, also gehe ich zurück und füge noch mehr Stile ein. Jetzt können Sie sehen, dass die Box 300 ist. Nur um das etwas sauberer aussehen zu lassen, mache ich noch eine Schachtel. Das habe ich wahrscheinlich zu schnell gemacht. Was ich hier getan habe, ist, dass ich auf diese Schaltfläche geklickt habe, um zu duplizieren, ändern Sie dies in Box 2. Dann kann ich dieses Modul für ein zweispaltiges Layout hier verschieben, und ich kann Änderungen in der Vorschau anzeigen. Da gehen wir. Wir haben Box 1, Box 2. Offensichtlich ist das nicht zu beeindruckend, aber ich versuche nur, einen Punkt hier zu beweisen. Sie können beliebige benutzerdefinierte Elemente erstellen, die Sie möchten und in jedes Detail gehen, das Sie im Grunde einfügen können, welchen Code Sie möchten. Dies ist nur ein sehr einfaches Beispiel. Im Fall dieses Client-Projekts, das ich Ihnen gerade gezeigt habe, habe ich keine Inline-Stile gemacht . Vor allem, wenn Sie Stile immer und immer wieder wiederholen, sollten Sie das in CSS einfügen und eine Klasse anwenden. Sie können sehen, dass dieses Feld und dieses Feld identisch sind, und sie haben die gleichen Stile. Jedes Mal, wenn Sie etwas immer und immer wieder kopieren und einfügen, in jeder Entwicklung, jeder Codierung, gibt es wahrscheinlich einen besseren Weg, dies zu tun. Sie können die Stile oder jeden Code, den Sie ständig wiederholen, an eine bestimmte Stelle setzen und dann immer wieder darauf verweisen. Im Falle dieser Stile können wir diesen Stil tatsächlich in die CSS-Datei einfügen und ihn dann mit einer Klasse referenzieren. Auch wenn das zu fortgeschritten für Sie ist, stellen Sie sicher, dass Sie zurückgehen und sehen sollten, sollten Sie die erste meiner Skillshare Klassen Verständnis Web Development. Aber was wir hier sehen, ist ein Inline-Stil. Inline-Stile sind in Ordnung, wenn Sie nur ein Element beeinflussen, und es macht keinen Sinn, Klassen und IDs und Sachen zu erstellen, wenn Sie diesen Code nicht wiederverwenden möchten. Aber wenn Sie es einmal verwenden möchten, können Sie definitiv einen Inline-Stil setzen. Wenn Sie es reaktionsschnell machen möchten, müssen Sie es möglicherweise in CSS verschieben. Aber definitiv in diesem Fall wiederholen wir die gleichen Stile in einer anderen Box. Es wäre viel sauberer, diese Stile herauszunehmen und in eine Klasse zu setzen. In WordPress werde ich Ihnen zeigen, wie Sie das machen. Ich werde das herausnehmen, das eine Klasse ändern und ich werde die Klassenbox mit Grenze nennen. Ich verliere meine Zwischenablage, aber ich erinnere mich, was ich geschrieben habe. Ich werde das kopieren, und dann werde ich hier rüber gehen und das durch Klasse ersetzen. Nun, es sieht vielleicht nicht so aus, als hätte ich viele Charaktere gespart, aber wenn ich viel mehr Stile dafür erstellen würde, würden Sie sehen, dass es viel effizienter ist. Wo kann ich das CSS einfügen? Nun, es gibt tatsächlich ein paar Orte. Der erste Ort, den Sie in Ihr benutzerdefiniertes CSS einfügen können, ist, indem Sie zu Divi, Theme-Optionen gehen und dann nach unten scrollen, und tatsächlich gibt es Ihnen eine Box, um Ihr benutzerdefiniertes CSS zu setzen. Der andere Ort, an dem Sie es ablegen können, ist in Ihrer Datei style.css, die ich zugreifen kann, indem ich zum Aussehen gehe, auf den Editor klicke; es wird sagen: „Warnung, Sie bearbeiten den Quellcode hier.“ Ich werde auf verstehen klicken. Wenn Sie sich erinnern, haben wir unser Kinderthema hier eingerichtet, damit wir benutzerdefinierte Codeanpassungen einfügen können. Wir könnten hier einige benutzerdefinierte Stile einfügen. Sie können es in einem entweder setzen, aber in diesem Fall ist es etwas mit dem Thema zu tun. Vielleicht möchten wir diese Kisten immer und immer wieder wiederverwenden. Es ist nicht einfach eine feste oder eine Oberflächenanpassung. Es baut tatsächlich etwas. Auch hier ist es eine persönliche Wahl, aber für mich würde ich es in meine style.css einfügen wollen. Ich werde hier eine Klassenregel erstellen. Was war es wieder, es war Box mit Grenze, ich werde es öffnen und dann setzen Sie es in den Stil. Wenn ich auf Update-Datei klicke, wird das die CSS-Datei aktualisiert, und ich sollte in der Lage sein, Änderungen hier anzuzeigen die übrigens, wenn Sie eine Vorschau geöffnet haben und es wird nur aktualisieren. Wenn ich dann nach unten scrolle, können Sie hier sehen, dass der Stil nicht zutrifft. Ich werde nur gehen und Element inspizieren und sicherstellen, dass es eine Klasse gibt. Ja, es hat eine Schachtel mit Bordüre. Aber was ich denke, wir hier erleben, ist ein klassisches Problem mit WordPress-Entwicklung und das ist Caching. Wenn Sie mit dem Caching nicht vertraut sind, ist es im Grunde eine Möglichkeit, dass die Website eine Kopie von sich selbst speichert , damit sie in Zukunft schneller geladen wird. Manchmal wird Ihre CSS-Datei zwischengespeichert und die Änderungen, die Sie vorgenommen haben, auch wenn sie sich in der Datei befinden, werden auf Ihrer Website nicht angezeigt. Es gibt eine einfache Möglichkeit, Ihren Cache oder bestimmte Seiten zu aktualisieren. Sie müssen nur in die Dev-Tools gehen. Wenn ich jetzt mit der rechten Maustaste auf die Schaltfläche „Neu laden“ klicke ich einfach mit der rechten Maustaste. Es wird nicht funktionieren. Aber wenn ich Entwicklertools mit Command Option I öffne, Chrome auf Mac verwende, und ich mit der rechten Maustaste auf hier. Ich bin in der Lage, Cache zu leeren und hart neu zu laden. Ich werde darauf klicken und hoffentlich kommen unsere Veränderungen über. Da gehen wir. Wir haben unsere Boxen, aber natürlich haben wir vergessen, den Stil einzubringen , der es zu einer festen Höhe macht. Ich werde das hier reinlegen. Das Gute an diesem CSS-Editor ist, dass er Ihnen Warnungen und Sachen gibt. Ich habe auf Update geklickt, es ist aktualisiert. Ich kann die Seite erneut aktualisieren. Plötzlich haben wir diese beiden Kisten. Dort haben Sie eine Form der Anpassung, bauen benutzerdefinierte Elemente, benutzerdefinierte Module, und dann Styling sie entweder in-line oder indem Sie es in Ihrer styles.css, so dass Sie zu den Divi-Theme-Optionen gehen können. Aber was ist, wenn Sie ein Element verwenden? Du magst es, aber es gibt nur ein paar Dinge falsch. Vielleicht wollten Sie diese Grenze auf diesen Blog-Posts nicht. Sie können ebenso einfach Module bearbeiten, die von Divi erstellt werden, sowie von Ihnen erstellte Module. Wir können herausfinden, wie dies zu tun ist, indem wir diese Module untersuchen. Ich werde mit der rechten Maustaste auf einen von ihnen klicken, auf Inspect klicken. Das bringt mich hierher dorthin, wo dieses bestimmte Element ist. Im Moment inspiziert es diese Überschrift. Aber wenn ich nach oben gehe, bis ich die eigentliche Spalte finde, so habe ich diese Spalte. Ich kann einen Schritt tiefer gehen und zum Artikel gehen. Ich kann nach unten scrollen, bis ich finde, was ihm diese Grenze gibt. Ich kann hier sehen, es gibt einen Stil hier, dot et_pb_blog_grid und auch et_pb_post, der ihm einen Rahmen von einem px solid mit einer Farbe dieses Grau gibt. Wenn ich darauf klicke, wirst du sehen, dass für alles, was diesen Stil oder diese Klasse hat, es jetzt versteckt ist und ich ziehe es wieder an und jetzt nehmen wir es aus. Nun, was wir tun könnten, ist das sofort zu beeinflussen. Wir könnten sagen, Grenze keine und dann haben wir plötzlich keine Grenzen auf diesen Bloggitter. Aber natürlich, es hier in Ihrem Inspektor zu ändern , ist es nur ein Spielplatz, es speichert nichts live auf der Website. Was ich gerne mache, ist einfach diese anderen Stile abzubrechen. Ich weiß nicht, warum das nicht dauerhaft ist und kopieren Sie diesen ganzen Abschnitt. Dann, was ich in der style.css tun werde, gehen nach unten und entfernen Sie einfach all diese auskommentierten Felder. Dies wird hoffentlich den Stil außer Kraft setzen, den Divi dort hineinsetzt. Ich bin eigentlich eher geneigt, dies in die Divi-Theme-Optionen, CSS, zu setzen, nur weil es nur eine Modifikation an etwas ist, das Divi's Kredit, aber das ist nur eine persönliche Präferenz und ich denke, es ist eine gute Demonstration, wo Sie kann es anders als Ihre style.css setzen. Wenn Sie es in den Custom CSS-Teil Ihrer Divi-Theme-Optionen einfügen und auf Speichern klicken, wird es dann gespeichert. Ich gehe zurück und aktualisiere die Seite. Wie Sie sehen können, gibt es keine Grenzen mehr, und wenn wir gehen und nach innen schauen, können wir sehen, dass unser Stil hier. Es gibt die von Divi, die nur innerhalb des Elternthema ist. Aber wie Sie sehen können, haben wir unseren eigenen Stil gemacht, wo wir gesagt haben Grenze keiner und das überschreibt diesen Stil hier. Dies ist ein bisschen CSS. Sie können definitiv mehr über CSS lernen und wie man Dinge überschreibt. Aber im Wesentlichen, was ich abdecken wollte, hier ist, wie Sie tatsächlich gehen würden, um Teile Ihrer Website zu bearbeiten. Ich hoffe, es macht Sinn, jetzt, wo wir Sachen in Page Builder bauen können, können wir uns um das schwere Heben kümmern. Aber wenn wir einige Anpassungen vornehmen müssen, ob es darum geht, ein benutzerdefiniertes Element zu erstellen und immer noch das Gittersystem zu verwenden. Ich kann das hier einfach demonstrieren. Sie verwenden immer noch das Grid-System ist immer noch reagiert. Es nutzt Divi's Grid-System aus. Sie können auch bereits vorhandene Module beeinflussen, die Divi erstellt. Sie können die Stile, die mit diesen Modulen geliefert werden, überschreiben, damit sie wie gewünscht aussehen. Da kannst du sehen, dass alles noch reagiert. Du nimmst nur die Grenze weg. Ich hoffe, dass alles Sinn gemacht hat. Wenn nicht definitiv eine Frage in die Diskussionen stellen. Im nächsten Video werden wir noch tiefer gehen und einige erweiterte Anpassungen in Divi vornehmen, vielleicht reparieren einige dieser Boxen, weil sie gerade nichts tun. Aber im nächsten Video gibt es tatsächlich eine Schicht, die wir tiefer gehen können und das ist, um PHP-Vorlagen und die Struktur unserer Seite zu bewirken. Ich werde Sie im nächsten Video sehen. 12. Anpassen mit Code – Fortgeschritten: Ich nehme dieses Video genau dort auf, wo wir aufgehört haben. Ich bin immer noch in einer Vorschau, wie Sie von der URL hier sehen können, aber ich kümmere mich nicht wirklich um diese Boxen. Ich werde nicht wirklich Änderungen speichern, Ich werde nur auf „Seite anzeigen“ klicken und es wird gefragt, ob ich die Änderungen lassen möchte nicht gespeichert werden. Wenn Sie gehen möchten, ohne zu speichern, können Sie auf „Lassen“ klicken, aber das ist eine gute Warnung, wenn Sie jemals versuchen, den Editor zu verlassen , ohne Ihren Fortschritt zu speichern, das ist eine gute Sache zu haben. Sie werden hier sehen, da wir die Struktur der Seite nicht geändert haben, unser Stil gilt immer noch, aber wir haben diesen Abschnitt nicht mehr mit den Boxen. In diesem Video möchte ich Ihnen zeigen, wie wir einige erweiterte Anpassungen vornehmen. Was wir im letzten Video gemacht haben, ist im Grunde mit den Boxen, wir haben etwas HTML gebaut und mit diesen haben wir es mit CSS gestylt. Eigentlich haben wir die Boxen auch mit CSS gestylt, und was wir tun können, sowie ein benutzerdefiniertes JavaScript einfügen können, aber was passiert, wenn wir die Struktur einer dynamischen Seite ändern wollen, sagen wir einen Blog-Post oder ein Projekt oder etwas in Art ändern wollen einer strukturellen Art und Weise? Das macht vielleicht nicht viel Sinn, nur ich sage es, aber wir werden uns jetzt eingraben und Ihnen ein Beispiel zeigen. Wenn ich nach unten scrolle und zu einem unserer Blogbeiträge gehe, werden alle diese auf der gleichen Vorlage angezeigt, ich zeige Ihnen, was ich damit meine, in nur einer Sekunde. Öffnen Sie diese in separaten Registerkarten und wie Sie sehen können, ist es die gleiche Vorlage. Sie haben die Überschrift, Sie haben durch, und dann die Person, die den Artikel geschrieben hat, Sie haben das Datum, Sie haben die Kategorie, sorry, ich habe gerade auf die Kategorie geklickt, und dann haben Sie die Menge der Kommentare. Sie haben das vorgestellte Bild, und dann haben Sie den Inhalt. Es ist genau das gleiche dafür, es ist alles dynamisch. Aber eine Sache, die ich kürzlich mit einer meiner Websites ändern wollte, war, dass ich nicht wollte, dass diese Überschrift und Metadaten über dem Bild angezeigt werden. Ich wollte, dass es unter dem Bild erscheint, im Wesentlichen wollte ich, dass dieses vorgestellte Bild oben zeigt und vielleicht wollte ich dies auch anpassen. Ich mag die Tatsache, dass es dynamisch den Namen des Autors, das Datum und die Kategorie und die Menge der Kommentare einbringt das Datum und die Kategorie . Aber vielleicht möchte ich den Wortlaut dieser vielleicht Putting Kategorie anpassen ist oder veröffentlicht auf, Das ist alles eine strukturelle Veränderung in WordPress. Nur um den Unterschied zwischen dem, was wir gerade im letzten Video und in diesem Video gemacht haben, zu trommeln , können wir im Grunde alles mit Styling mit CSS zu tun ändern und wir könnten Dinge in den Inhalt mit HTML hinzufügen. Aber in Bezug auf diesen dynamischen Inhalt, der von einer Vorlage in PHP eingezogen wird, müssen wir tatsächlich in die Vorlage eingraben und sie für diese Änderung ändern , um die Standard-Blog-Vorlage zu beeinflussen. Die Art und Weise, wie wir das tun können, ist, indem wir direkt in den WordPress-Code graben. Ich habe mein Themenverzeichnis hier, ich werde einfach rückwärts gehen, damit Sie sehen können, das ist unser Projekt und nur damit Sie wissen, wohin Sie gehen sollen. Hier ist Code, den Sie wahrscheinlich gar nicht berühren möchten abgesehen von der Konfigurationsdatei und stellen Sie sicher, dass es Verbindung mit der Datenbank herstellt, aber wir haben das bereits, den Ordner, in dem Sie am häufigsten bearbeiten werden und so ziemlich nichts sonst ist dieser Themes Ordner und dann gehen Sie in Ihr Kind Thema, denken Sie daran, das ist, warum wir dieses Kind Thema erstellt. Es war so, dass wir alles über Anpassungen in den einen Ordner einfügen und sie referenzieren konnten. Wie gesagt, ich möchte dieses vorgestellte Bild über diese Überschrift und diese Metadaten setzen, und der Weg, dies zu tun, ist durch die einzelne Vorlage. In WordPress werden wir über Templating-Hierarchie in einem zukünftigen Video gehen , aber nur für jetzt wissen, dass, wenn Sie einen Blog-Beitrag oder eine Seite erstellen, es die Vorlage single.php verwendet. Um diese Änderung vorzunehmen, muss ich in den übergeordneten Ordner gehen und die single.php finden. Ich werde das kopieren und dann gehe ich in mein div-Thema und füge es ein. Nun, nur um klar zu sein, was hier vor sich geht, ist, weil ich ein Kinder-Theme verwende, WordPress wird zuerst in diesem Foto suchen, und es wird nach einer single.php und im Grunde alle Vorlagendateien suchen, und wenn sie es hier nicht finden können, es wird es hier laden. Deshalb funktioniert unsere Websites immer noch, wenn wir nicht alle Vorlagen hier drin haben, weil es hier zuerst schaut, um zu sehen, ob es Anpassungen sind, die vorgenommen werden müssen, und wenn es nichts gibt, geht es einfach zum Elternthema. Aber im Wesentlichen, was wir hier tun, ist, dass wir die Vorlage aus dem übergeordneten Thema nehmen und dann können wir sie im Kind bearbeiten, um Anpassungen vorzunehmen. Ich werde mit der rechten Maustaste darauf klicken und in Atom bearbeiten. Nun, Sie werden wahrscheinlich nicht alles hier verstehen und das ist in Ordnung, aber ich würde Ihnen empfehlen, sich vertraut zu machen, mehr über die Template-Hierarchie zu erfahren, mehr über die Funktionen zu erfahren. Dies ist ein laufender Prozess und ich verstehe sicherlich nicht alles, was in den Vorlagendateien passiert. Aber ich kann es herausfinden, nur indem ich so aussieht, als ob Sie dieses div hier für den Hauptinhalt sehen können, es geht den ganzen Weg runter bis hier, und Sie haben einige div-Funktionen. Sie können dieses div sagen, weil sie et Unterstrich pb bekommen haben. Dies ist ein besonderes für div und Sie können diese mit dem übereinstimmen, was Sie auf der Seite sehen, so dass Sie dieses div mit Hauptinhalt sehen können. Wenn ich auf unsere Live-Website zurückgehe und den HTML inspiziere und einen Blick darauf werfen, kann ich den div id Hauptinhalt sehen. Wenn ich nach unten gehe und auf den feinen Inhaltsbereich schaue, werde ich nur kopieren und einfügen, weil Sie tatsächlich hier klicken können, drücken Sie „Befehl F“ auf dem Mac und finden Sie den Inhaltsbereich, indem Sie suchen, dann können Sie dieses div hier sehen, Inhaltsbereich . Auf diese Weise würde ich ein Verständnis dafür bekommen , wie sich diese Vorlage darauf bezieht. Aber es hat eine Menge dynamischer Inhalte, und was wir tun müssen, ist herauszufinden, wo das PHP das Thumbnail packt und es dazu bringen, es über die Überschrift und nicht unter der Überschrift zu setzen. Nun, bevor wir unsere Änderungen vornehmen, wollte ich nur einige zusätzliche Anweisungen und eine zusätzliche Warnung für diejenigen unter Ihnen, die Ihre Website bereits im Internet hosten. Grundsätzlich haben wir dies lokal gemacht, also bin ich in der Lage, einfach in den Ordner mit meiner Website auf meinem Computer zu gehen und einfach Dateien anzuklicken und mit der rechten Maustaste zu ziehen und sie in meinen Editor zu öffnen. Aber wenn Ihre Website bereits im Internet ist, müssen Sie FTP verwenden. Nun, Sie müssen nicht unbedingt FTP verwenden, aber es ist sehr empfehlenswert, und der Grund, warum ist etwas, das ich Ihnen jetzt zeigen werde. Nur weil ich das vorher gemacht habe und es ein echter Ärger war, also stellen Sie sicher, dass Sie FTP verwenden. Ich werde hier rüber gehen, ich bin in meinem Erscheinungsbild Editor, Sie können unsere style.css sehen. Ich werde in functions.php gehen und ich werde einen schlechten Code einfügen. Ich werde nur einen schlechten Code einfügen, ich werde die Datei aktualisieren, und tatsächlich hat WordPress jetzt eingebettet, wo sie tatsächlich herausfinden, wie wenn Sie schlechten Code einfügen und Ihnen nicht erlauben, zu aktualisieren. Aber in früheren Zeiten, wenn Sie einen Fehler gemacht haben, würde es Ihnen erlauben, das zu setzen und dann würden Sie etwas bekommen, das ich gerne den weißen Bildschirm des Todes nenne. Nur um Ihnen zu zeigen, wie das aussehen würde, werde ich nur das in meine Funktionen PHP-Datei hier drüben werfen, ich werde einen schlechten Code einfügen und dann werde ich auf die Website schaukeln und „Refresh“ drücken und plötzlich die ganze Website ist heruntergefahren. Das ist wirklich wichtig, denn wenn Sie einen Fehler auf Ihrer Website in PHP machen, wird es Ihre gesamte Website heruntergefahren. Es ist wichtig zu wissen, dass, wenn dies geschieht, weil Sie zwangsläufig einen PHP-Fehler machen werden , an dem dies passieren wird, nicht ausflippen. Sie können einfach in Ihre PHP-Dateien zurückgehen und herausfinden, wo der Fehler ist und ihn entfernen. Ich werde es jetzt entfernen, drücken Sie „Speichern“ und laden Sie die Seite neu. Plötzlich funktioniert meine ganze Website wieder. Das ist eines der schlechten Dinge über WordPress Ich denke, wenn Sie einen PHP-Fehler machen, wird es Ihre gesamte Website abbauen. Deshalb, wenn Sie eine Website für jemanden erstellen , der bereits eine Website hat oder Sie Ihre bestehende Website aktualisieren, entwickeln Sie definitiv entweder lokal oder an einem anderen Ort wie einem Staging-Server, wir in die Staging gehen -Server später in diesem Kurs. Aber ich wollte das nur wirklich klar machen, wenn Sie einen Fehler in Ihrem PHP machen, kann es die gesamte Website entgleisen, deshalb müssen Sie sicherstellen, dass Sie diese Änderungen erstellen oder diese Änderungen nicht auf einem Live- Website, dass Sie sehr verärgert darüber sein würden, dass es nach unten geht. Der andere Punkt, den ich hier ansprechen möchte, geht auf die Bedeutung der Verwendung von FTP zurück. Wenn ich in der Lage war, den Editor zu verwenden, wie Sie es früher in der Webpresse tun konnten, und sagen wir einfach, ich habe das getan und ich habe diesen Fehler eingefügt. WordPress ermöglicht es mir, diese Vorlagendateien aus dem Dashboard zu bearbeiten. Wenn ich die Seite neu lade, kann ich auf meine Website zugreifen. Also könnte ich so sein: "Ich werde gehen und diesen Code ändern, beheben Sie meinen Fehler“ Aber wenn ich in WordPress-Admin gehe, ist es auch kaputt. Ich habe dies getan, habe diesen Fehler gelegentlich vorher gemacht, wo ich Theme-Vorlagen bearbeitet habe und es hat einen PHP-Fehler verursacht und die Website meines Kunden ist gesunken, und zum Glück war es nie auf einer Live-Website gewesen. Es ist auf dem Bau gewesen. Aber wenn ich keinen Zugriff auf FTP habe, dann ist das alles. Ich bin völlig festgeklemmt. Ich kann den Code nicht bearbeiten. Sie benötigen Zugriff auf den Code auf Dateiebene. Das ist sehr wichtig. Dann gehen wir, ich habe den Code und meine Websites wieder entfernt. Wenn du auf FTP gebissen hast, gehe zurück zu meiner ersten Skill-Share-Klasse, „Understanding Web Development“, und sieh dir das an. Grundsätzlich können Sie einen FTP-Client verwenden, der Ihnen eine ähnliche Schnittstelle gibt. Meine Favoriten sind Cyberduck und Filezilla, aber wenn Sie mehr über FTP erfahren möchten, gehen Sie auf jeden Fall zurück und schauen Sie sich das an. Ich gehe zurück zu dem, worüber wir vorher gesprochen haben. Entschuldigung für die Absperrung, aber das ist sehr wichtig, dass Sie diese Warnung verstehen. Was ich tun werde, ist jetzt tatsächlich eine Verbindung mit FTP herzustellen, weil ich tatsächlich die Vorlage für meine eigene Website gespeichert habe und ich diesen Code tatsächlich referenzieren kann, um mich zu erinnern wie ich es gemacht habe, weil das ein Zug ein paar Dinge ist, um es zu bekommen zu arbeiten. Dies wird tatsächlich eine gute Gelegenheit für Sie zu sehen, wie Sie eine WordPress-Website mit FTP bearbeiten würde. Ich werde Filezilla öffnen. Ich gehe zu meinen Websites und verbinde mich mit FTP auf meiner eigenen Website. Ich werde hier mein Passwort eingeben und was ich tun werde, ist in meine Website zu gehen, und das ist im Wesentlichen, wie Sie es auch mit Ihrer eigenen Website tun würden, Sie können hier sehen, ich habe mein Kind Thema, und ich kann in das graben, und Sie können hier sehen, ich habe eine single.php Vorlage. Ich kann auf „Ansicht“ und „Bearbeiten“ klicken, und was es tun wird, ist eine temporäre Kopie herunterzuladen, die ich bearbeiten und dann wieder auf mein Hosting hochladen kann. Ich muss vorsichtig damit sein. Stellen Sie sicher, dass alle von Ihnen erstellten Änderungen hochgeladen werden. Also im Grunde, auf das zu verweisen, was ich bereits getan habe. Sie können hier unten sehen, dass ich diese Thumbnail-Informationen oben hier oben verschoben habe , wo sie vorher hier war, ich habe diese Funktion versteckt, die die Post-Meta erstellt und ich habe hier meine eigene Post-Meta eingefügt. Auch hier könnte ich in ein einstündiges Video darüber gehen, wie ich das gemacht aber ich möchte nur den Punkt darüber bekommen , wie Sie die Struktur Ihrer Seite bearbeiten würden. Was ich zuerst tun werde, ist das Bild oben zu verschieben und nur zu überprüfen, was ich hier getan habe. Ich kann darauf hinweisen und hier runter gehen. Ich kann finden, wo diese Funktion ist, suchen Sie danach. Wie Sie hier sehen können, werden die Thumbnail-Informationen unterhalb dieser Post Meta generiert. Was ich tun werde, genau wie ich hier drüben getan habe, werde ich das vorgestellte Bild Zeug nehmen. Grundsätzlich alles außer dem Titel, also muss ich dies möglicherweise in zwei Kopien und Pasten tun. Ich möchte es direkt nach dem Post Meta Wrapper setzen, denn hier können Sie den Eintrag Titel sehen. Also muss definitiv dahinter stehen. Ich kann es dort kopieren und einfügen, aber ich habe meine PHP-Tags nicht geöffnet. Für diejenigen von Ihnen, die PHP nicht kennen , möchten Sie vielleicht wieder zurückgehen und die Webentwicklung verstehen. Aber ich habe ein PHP-Tag geöffnet, also kann ich PHP einfügen, das Zeug in kopieren und einrücken. Ich gehe zurück und hole die restlichen Informationen hier. Lassen Sie den Titel dort, gehen Sie auf „Speichern“. Dann werde ich das auch ansprechen, denn das muss kommen. Dies ist tatsächlich, wenn das Bild angezeigt wird. Sie können sehen, dass durch das Drucken Miniaturbild, dies wird übrigens anders sein, für alles, was Sie verwenden, dies ist Code von divi im Moment. Ich werde das aufräumen und den Inhalt dort hineinlegen. Grundsätzlich fragt man, ob es ein Video ist? Es wird das Video anstelle der Miniaturansicht eingefügt, und wenn es sich um eine Miniaturansicht handelt, drucken Sie die Miniaturansicht, und wenn es sich um eine Galerie handelt, drucken Sie eine Galerie. Das sind zusätzliche Dinge, die divi Ihnen erlaubt zu tun. Grundsätzlich haben Sie die meiste Zeit ein Miniaturbild oder ein vorgestelltes Bild für Ihren Blogbeitrag. Ich werde noch einmal sparen, es ist immer eine gute Idee, ständig zu speichern und dann gehe ich zurück zu hier und erfrischen. Da gehst du. Jetzt können Sie sehen, dass das Bild oberhalb der Überschrift und die Metadaten hier angezeigt wird. Aber denken Sie daran, ich wollte das vielleicht ein wenig ändern, also was ich tun werde, ist nach unten zu gehen, und leider gibt es eine Codezeile, in der Divi herausfindet, was man hier reinlegt und alles dort hineinlegt. Aber wir können das in unseren eigenen Code aufteilen, wenn wir wollten, und das habe ich mit meiner eigenen Website gemacht. Ich habe das hier in diesen kleinen Abschnitt aufgeschlüsselt. Ich werde das kopieren und einfügen und es Ihnen dann erklären. Aber zuerst werde ich auskommentieren, dass Post Meta das PHP-Tag schließen, ein PHP-Tag öffnen und dann dazwischen werde ich meinen HTML setzen. Ich werde auf „Speichern“ klicken und jetzt, wenn ich auf „Aktualisieren“ klicke, sollte es diese Post Meta ersetzt haben, die von der divi post Meta-Funktion generiert wurde und meinen eigenen Code einfügen. Ich werde die Seite aktualisieren, und jetzt, Sie können sehen, es hat noch ein paar Worte da drin. Es ist in der Reihenfolge, die ich gewählt habe, und das ist alles, wie es hier vorgegeben hat. Nur um es ein wenig durchzulaufen, das geht nicht alles automatisch, aber gleichzeitig bekommt man genau das, was divi will. Wenn ich das auskommentiere, drücke „Speichern“, es sollte jetzt beide erscheinen, so dass du Seite an Seite sehen kannst, das ist, was divi immer ausgibt, wenn du diese Funktion einsetzt. Aber wenn Sie es so aufschlüsseln, wie wir es getan haben, können Sie Ihren eigenen benutzerdefinierten Code einfügen und es verwendet immer noch dynamische Inhalte. Wir werden das wieder dahin bringen, wo es war. Es verwendet immer noch dynamische Inhalte, also anstatt zu sagen: „Gib mir die Post Meta, was du tust, ist, du sagst die spezifischen Wörter, die du willst und du setzst deine eigenen Zeilen und Sachen ein, aber dann können Sie dynamische Inhalte wie den Autorenlink einfügen. Dann können Sie einen Code eingeben, um die Kategorie zu finden. Dies ist ein wenig zusätzlicher Code, weil Sie vielleicht keine Kategorie haben. Wenn Sie keine Kategorie haben und gebeten haben, eine Kategorie einzugeben, wird dies ein Fehler angezeigt. Sie erhalten also diese bedingte Anweisung hier, um sicherzustellen, dass es eine Kategorie gibt, bevor sie sie anzeigt, und wenn es mehrere Kategorien gibt, werden sie alle hier angezeigt. Für Kategorien, ist ein wenig komplizierter. Veröffentlicht auf ist sehr einfach, es ist die Datumsmethode in WordPress. Also, wenn Sie jemals auf Vorlage sind, können Sie das Datum angeben und es wird das Datum ausgegeben. Dann habe ich in der letzten Spanne die Anzahl der Kommentare und mit dieser Funktion, Kommentarnummer, das erste Argument oder den Parameter darin ist, was zeigt sich, wenn es keine Kommentare gibt? Ich habe keine Kommentare abgegeben. Was zeigt sich, wenn es einen Kommentar gibt? ich einen Kommentar gesetzt habe, und was auftaucht, wenn es mehr als eins gibt und dieses kleine Prozentzeichen ist ein Stück dynamischer Indikator, dass, was auch immer die Kommentarnummer ist, es in diesen kleinen Prozentsatz gehen wird -Zeichen. Ein bisschen komplizierter hier, können Sie im Grunde alles, was Sie wollen, hier einfügen. Ich werde das loswerden, in eine zufällige Spanne setzen, die sagt: „Post ist genial“, ich werde das speichern, und jetzt, plötzlich, haben Sie alle Ihre Vorlagen mit dem statischen Bit Code aktualisiert und Sie können zu jedem Beitrag gehen und Sie 'll sehen, es hat dies, ist das gleiche. Sie werden sehen, Sie haben diesen Beitrag ist genial, so können Sie sehen, dass. Du kannst alles hineinwerfen, was du willst. Ich denke, es macht Sinn, das Datum zu haben, von wem es veröffentlicht wird, und die Kommentarnummer. Aber du kannst tun, was du willst. Das ist das Tolle an WordPress ist, unendliche Ebene der Anpassung, Sie beginnen mit einem Page Builder, um Ihnen eine Seite mit minimalem Code und dann, wenn Sie gehen und etwas ändern möchten, Sie kann durch CSS tun, wie wir es auf dieser Seite und HTML getan haben, oder Sie können gehen und beeinflussen die Vorlagen. Hoffentlich war das nicht zu weit fortgeschritten für Sie, denken Sie daran, dass, es ist eine kontinuierliche Sache mit dem Lernen von Webpresse, auch ich muss ein wenig herum graben und einige Dinge ausprobieren und Probleme lösen, um die Dinge so zu bekommen, wie ich will. Aber das Wichtigste, das hier zu verstehen ist, ist der Rektor. Wenn Sie auf Ihrer Seite ein strukturelles Problem sehen, das Sie nicht mit CSS oder JavaScript beheben können, möchten Sie in Ihre PHP-Vorlagen gehen und sicherstellen, dass diese Anpassungen innerhalb eines untergeordneten Themas durchgeführt und dass Sie sie nicht live ausführen -Site, denn wenn es einen Fehler gibt, wird es Ihre gesamte Website heruntergefahren. Aber wie Sie sehen können, ob Sie es richtig erstellt haben, dann haben alle Ihre Beiträge jetzt das Bild über der Überschrift und die Metadaten. Hoffentlich hat das Sinn gemacht, wenn nicht, auf jeden Fall, setzen Sie einige Kommentare in die Diskussion und ich werde mit Ihnen auf dem nächsten Video sprechen. 13. Die Hierarchie der Wordpress-Vorlagen: Wie Sie im letzten Video gesehen haben, haben wir eine Vorlagendatei in WordPress bearbeitet, die in diesem Fall die single.php war. Aber wenn wir in unseren übergeordneten Ordner mit divi darin gehen, können wir so viele verschiedene Vorlagendateien sehen, footer.php, functions.php, header.php. Es gibt eine ganze Reihe von Vorlagendateien. In diesem Video werden wir über die WordPress-Template-Hierarchie sprechen. In meinem Kopf ist der beste Weg, darüber zu lernen, zwei Möglichkeiten. Aktivieren Sie ein Plug-in auf Ihrer WordPress-Installation mit aufgerufen zeigen aktuelle Vorlage beginnen. Wenn Sie sich jemals auf einer Seite oder einem Abschnitt Ihrer Website befinden und sich fragen, welche Vorlage es ist, hilft das wirklich. Ich gehe nur zu „Plugins“, „Neues hinzufügen“. Ich werde nach der aktuellen Vorlage suchen. Sie können auf „Jetzt installieren“ klicken. Sobald es installiert ist, klicken Sie auf „Aktivieren“ und plötzlich wird es aktiviert. Wenn das funktioniert, sollten wir in der Lage sein, zurück zu unserer Website zu gehen und oben oben werden wir die Vorlage sehen. Diese Vorlage ist page.php. Wenn wir zu unseren Blog-Beiträgen gehen, sollten wir jetzt single.php sehen, weil es die einzelne Seite, einzelne Post Typ ist. Wenn wir zu einem einzelnen Portfolioelement gehen, sollten wir auch Single sehen. Eigentlich gibt es eine separate Vorlagendatei, die als einzelnes Projekt bezeichnet wird. Das ist wirklich, warum dieses Plug-in wirklich gut ist, weil ich zunächst gedacht hätte, dass alles vielleicht auf die Single verweist, aber nein. Es gibt offensichtlich eine benutzerdefinierte Vorlage dafür und Sie können es hier oben sehen. Es gibt Ihnen die relativen Vorlagenpfade, also ist dies in unserem übergeordneten Thema. Sie können sich alle Vorlagendateien ansehen, die darin enthalten sind. Das zweite Tool oder die zweite Ressource, um Template-Hierarchie zu verstehen, ist, ich werde nur auf die WordPress-Website gehen, indem Sie nach WordPress-Template-Hierarchie suchen. Ich habe die Rechtschreibung dort falsch geschrieben, aber WordPress oder Google weiß, wovon ich rede. Wenn wir zu diesem Artikel auf wordpress.org über Template-Hierarchie gehen, kann ich nach unten scrollen und die visuelle Übersicht sehen. Nur um dies mit dem zu vergleichen, was wir hier gerade haben, einzelnes Projekt, ist dies ein benutzerdefinierter Post-Typ, also ist es wahrscheinlich nicht hier aufgeführt. Aber wenn wir zurück zu einem Blog-Beitrag gehen und wir können single.php sehen, aber Sie können dies mit der Template-Hierarchie abgleichen. Was passiert, wenn jemand auf Ihre Website zugreift, wird es durch den Index php gehen, durch singular php kommen und single.php drücken. Wenn es zu einer Seite geht, wird es zu page.php gehen, die wir vorher gesehen haben, als wir auf die Homepage gingen. Eine Seite ist page.php ist die Vorlage dafür. Das ist ein wenig verwirrend an sich, aber zumindest können Sie zusammenfassen, wo alles lebt indem Sie es auf Ihrer Website die Vorlage hier oben sehen und es auch hier sehen. Was ist auch wichtig, hier zu beachten ist, dass, während WordPress wird bei Index php beginnen und nach archive.php suchen, oder nach Singular suchen, wird es nach Single suchen. Es muss nicht unbedingt da sein. Im Falle unseres divi Theme, zum Beispiel, wenn wir in divi theme Ordner gehen und wir nach archive.php suchen, existiert es nicht wirklich in divi. Aber wenn wir es erstellen würden, würde WordPress nach Archiv in der Situation einer Archivseite suchen. Was ist eine Archivseite? Es ist im Grunde, wie Sie hier sehen können, author.php, category.php. Es ist im Grunde ein Index von verschiedenen Beiträgen kategorisiert nach Kategorie, Datum und so, wenn wir in unsere Kategorie klicken, werden Sie jetzt sehen, dass es keine Archivvorlagen gibt, also ist es nur index.php. Aber index.php kümmert sich um die gesamte Website. Vielleicht möchten wir index.php nicht direkt bearbeiten. Vielleicht wollen wir nur diese Archivseite beeinflussen. Hier ist ein Beispiel für die Template-Hierarchie, die für uns arbeitet. Ich werde hier tatsächlich eine Archivseite erstellen. Ich gehe in die Datei, neue Datei in unserem Code-Editor, in diesem Fall Adam ist und was wir tun können, ist den Code aus dem Index zu kopieren. Ich werde in divi gehen müssen,die index.php Vorlage finden, die index.php Vorlage finden dann werde ich jetzt den ganzen Code greifen und den hier kopieren. Dann werde ich das als archive.php speichern. Jetzt fragen Sie sich vielleicht, warum haben wir etwas dupliziert, das bereits da ist? Im Wesentlichen möchten wir die Datei index.php möglicherweise nicht bearbeiten , da dies mit all diesen Vorlagen funktioniert. Es ist eine übergeordnete Datei. Wir wollen nur das Archiv beeinflussen. Wir erstellen eine Vorlage, die WordPress wird für die Änderungen in dort suchen und überschreiben, was in index.php angezeigt wird. Dies ist die gleiche Theorie der untergeordneten Themen und übergeordneten Themen. WordPress wird zuerst einen Ort betrachten und wenn es ihn nicht findet, wird es an die Eltern gehen. Hoffentlich macht dieser Logikfluss Sinn für Sie. Wenn nicht, sollten Sie wieder, wenn Sie während Ihrer Codierungsreise wachsen, beginnen, diese Dinge mehr zu verinnerlichen. Aber ja, wenn wir jetzt in diese gehen und „Refresh“ drücken, können wir sehen, dass die Vorlage als archive.php und nicht index.php mehr verwendet wird. WordPress weiß, wo zu suchen und es wird darauf verweisen. Was ist der Unterschied zwischen Index und Archiv? Nun, es sollte keinen Unterschied geben, weil wir den Code direkt kopiert und eingefügt haben. Aber jetzt, wenn wir Anpassungen vornehmen wollen, können wir das in der archive.php tun. Vielleicht wollen wir auf die Tatsache verweisen, dass es sich um ein Archiv handelt. Lassen Sie mich einfach in den Front-End-Code eingraben und sehen, wo ich das platzieren möchte. Ich sehe, dass dies der Inhaltsbereich ist. Dies ist der Hauptinhalt. Vielleicht stecke ich es hier rein. Ich werde nur eine Überschrift setzen. Ich sage Archive. Ich werde darauf „Speichern“ drücken. Ich gehe zurück zu hier und klicke auf „Aktualisieren“. Sie können sehen, dass Archive da ist, aber es ist weg zur Seite, weil ich es nicht in einen Container gesteckt habe. Das ist mein Schlimmes. Ich werde das entfernen und es in den Behälter legen. Drücken Sie dazu auf „Speichern“. Jetzt können Sie auf jeder Archivseite sehen, Sie haben Archive. Nun, das ist nur statischer Inhalt. Sie möchten wahrscheinlich einige dynamische Inhalte einfügen, die besagt: „Hier sind alle Beiträge aus dieser Kategorie“, und fügen Sie den Kategorienamen und vielleicht auch einige Informationen über die Kategorie. Vielleicht möchten Sie das tun, aber im Wesentlichen zeige ich Ihnen hier nur über die Template-Hierarchie. Sie können die Template-Hierarchie herausfinden, indem Sie einige Recherchen auf wordpress.org durchführen und sich dieses visuelle Diagramm ansehen können, mit dem Sie aktuelle Vorlage anzeigen können, um zu sehen, was auch immer Sie auf Ihrer Website sind. Auch hier haben wir nicht viele Seiten oder Orte, um auf unserer Website zu gehen, aber Sie können dafür sehen, wo ich die Seite bekam und wie Sie dies verwenden würden, ist, sagen wir zum Beispiel, Sie wollten dieses Layout ändern und Sie wollten die Facebook-Bild oder das Bild hier, um über dem Titel zu zeigen. Nun, du gehst hier rauf und siehst du, einzelne project.php. Das ist die Vorlage, die ich ändern muss. Wieder, zurück zu divi hier, würden Sie das finden und Sie würden es nicht direkt auf dem übergeordneten Thema bearbeiten, weil denken Sie daran, wir tun gut und Änderungen am untergeordneten Thema. Aber was Sie tun, ist, dass Sie es einfach kopieren, gehen Sie in Ihr Kind Thema, einfügen und ich werde es nur wirklich schnell für Sie hier zu tun. Grundsätzlich, wenn Sie so etwas ändern wollten, plötzlich erscheint der Titel davor und jetzt ist das nicht sehr praktisch. Aber Sie können hier sehen, ich kann diese Vorlage beeinflussen und das wird jetzt für jedes Projekt gelten. Wenn ich zu Google gehe, Titel Google, so dass Sie vielleicht mehr beschreibenden statischen Text gibt es „Previous client“ dann, wenn wir zurück gehen „Previous client: Google“ und dann wird das für alle Ihre Projekte, „Previous client: Amazon“. Mit diesem Video und dem Video vor, hoffentlich, ich habe Ihnen gezeigt, wie Sie gehen und bearbeiten können Vorlagen. Wenn Sie auf etwas gehen, das dynamische Inhalte wie einen Blog-Beitrag zeigt und Ihnen nicht gefällt, wie er angezeigt wird, möchten Sie vielleicht etwas einfügen, das in jedem Blog-Beitrag angezeigt wird, oder vielleicht möchten Sie den Inhalt in einem Blog-Beitrag neu anordnen so würdest du es tun. Sie würden hineingehen, Sie würden sehen, welche Vorlagen verwendet werden, Sie würden in Ihr Design gehen, diese Vorlage erstellen, wenn sie nicht bereits in Ihrem untergeordneten Design existiert und dann Ihre Änderungen dort erstellen. So können Sie die PHP-Vorlagen in WordPress ändern. Wenn Sie weitere Informationen zur Vorlagenhierarchie benötigen, gibt es viele Informationen online. Auf jeden Fall haben Sie eine Lektüre des wordpress.org Theme Handbuch. Wir sehen uns auf dem nächsten Video. 14. Gestaltung deiner Website: Jetzt im Wesentlichen haben wir alle Teile des Aufbaus auf WordPress abgedeckt. Wir begannen mit dem Thema, wir haben einen Page Builder verwendet, um eine Seite auf Ihrer Website zu erstellen, dann gingen wir in, wie man das Styling mit CSS anpassen, und wir bauen einige benutzerdefinierte Elemente, die seitdem versteckt haben. Dann gruben wir uns auch in die Vorlagen ein. Wir haben alle Schichten von WordPress durchlaufen, beginnend ganz oben, ohne Code, um tief in den Code zu gehen. Im Moment könnten Sie theoretisch dieses Wissen nehmen und damit laufen, den Rest Ihrer Website aufbauen, aber ich dachte nur der Vollständigkeit halber, ich werde Sie durch den Aufbau dieser Website führen, und wenn Sie zusammen bleiben möchten, können Sie mehr über WordPress erfahren. Das erste, was ich als Problem sehe, ist, dass wir diese Menüpunkte haben, und sie verlinken nirgendwo. Das wäre mein erstes, was ich tun würde, wenn wir hier zur URL gehen und wir Projekte eingeben oder einfach nur ein Projekt, können wir einen Index oder eine Archivseite sehen , auf die wir im letzten Video von all unseren Projekten gesprochen haben. Dies wird nur eine grundlegende Archivseite sein, die alle unsere Projekte zusammenbringt. Ich werde dieses Stück Text loswerden, das Archive sagt, weil es nicht wirklich da sein muss und nicht wirklich etwas hinzufügt, also zurück zur Vorlage gehen Archive loswerden. Cool, das ist im Grunde unsere Portfolio-Seite, wir können das verwenden, aber zur gleichen Zeit müssen wir in die Template-Datei eingraben und fein, ein bisschen tiefer in Code gehen, um das Layout zu ändern, und es ist wirklich nicht notwendig. Was ich tun werde, ist eine weitere Seite mit Divi Page Builder zu erstellen, so dass wir unsere Projekte ein wenig schöner darstellen können. Ich gehe zu Neu, Seite, und ich werde es Projekte nennen. Ich werde Tab drücken, so dass es mit einer URL herauskommt, ja, ich mag diese URL. Wenn Ihnen die URL zum Beispiel nicht gefällt, können Sie sie in das ändern, was Sie wollen. Ich ändere oft URLs, um SEO-freundlicher zu sein, also ist das nur ein weiterer Punkt dort. Ich werde vom Standard-WordPress WYSIWYG-Editor zum Divi Builder wechseln. Ich werde hier einen Titel eintragen, nur für die Breite und etwas Text einfügen. Im Text wird Rubrik 1, Vorherige Projekte, ich werde diese Überschrift nennen, also ist es einfacher für mich zu verstehen. Dann kann ich ein Modul darunter hinzufügen, das mein Portfolio zeigt. Sie haben ein schön formatiertes Portfolio-Modul hier in Divi. Das erste, was ich tun werde, ist zu Design gehen, wählen Sie Grid, weil es für die Breite zu groß ist. Ich habe im Moment nur eine Kategorie, also werde ich sie vorerst verstecken, aber ich werde all das behalten. Behalten Sie den Namen Portfolio, und lassen Sie uns einfach eine Vorschau, was wir jetzt haben. Wir haben unsere bisherigen Projekte hier. Eine andere Sache, die ich tun möchte, nur um einige weitere Inhalte zu dieser Seite hinzuzufügen, ist mehr Text, um die Person zu zeichnen. Ich werde hier nur etwas schreiben. Ich werde die Mittellinie, und ich habe nichts dagegen, den Namen Text. Ich werde das oben über Portfolio bewegen, dann werde ich eine Vorschau, dass. Klicken Sie auf die Links unten, um mein vorheriges Projekt zu überprüfen, da gehen wir. Ich bin damit zufrieden, also werde ich auf Veröffentlichen klicken, und mehr auf meinen anderen Menü-Links, also habe ich Portfolio, ich habe Dienste. Ich werde eine neue Seite namens Services hinzufügen. Dies ist im Wesentlichen, wie Sie über den Aufbau einer Website gehen, Sie haben vielleicht ein Design an Sie geschickt, oder Sie könnten es einfach im laufenden Betrieb entwerfen, aber das ist es. Wenn Sie Seiten erstellen, führen Sie erweiterte Anpassungen, wenn nötig. Aber die meiste Zeit mit Divi Builder können Sie einfach das meiste von dem erstellen, was Sie brauchen, nur mit dieser Schnittstelle hier. Wieder, ich werde nur in eine Überschrift setzen. Ich muss eigentlich kein neues Modul für den Text einfügen, ich kann hier nur einen Absatz unter dieses eigentliche Modul setzen. Scheinbar haben wir diese blöden aussehenden Boxen vor loswerden , ich werde tatsächlich einige benutzerdefinierte Elemente bauen nur um euch zu zeigen, wie ihr es machen würdet, falls ihr etwas Custom machen wollt. Ich werde eine gleich dreispaltige Zeile bekommen, und ich werde meinen eigenen Code einfügen. Ich werde ein div einlegen, und ich werde es mit der Klasse Service-Box nennen. Nun, was Sie hier am besten tun können, ist, alles in dem einen Modul gut zu machen, und dann können Sie diese Module einfach im Grunde duplizieren, wenn Sie sie wiederverwenden möchten. Ich werde gerade etwas aufbauen, und ich werde auch in meinen Theme-Editor gehen, damit ich etwas CSS einfügen kann. Sie werden sehen, wie wir eine Service-Box entwickelt haben. Ich werde nur ein bisschen vorwärts und dann komme ich direkt zurück und lasse Sie wissen, was wir getan haben. Was ich hier habe, sieht es immer noch nicht super schön aus, aber es sieht okay aus. Ich habe diese Box, die WordPress Web Development darin sagt, als einer meiner Dienste kann ich das duplizieren, im Grunde, was ich getan habe,habe gerade dieses im Grunde, was ich getan habe, div mit der Klasse Service-Box bekommen, eine h2-Überschrift da drin, hatte tatsächlich eine Hintergrundfarbe, die dies vorher verwendet, aber ich habe beschlossen, das loszuwerden, also kann ich hier die Hintergrundfarbe in meiner eigenen Klasse angeben. Wie Sie sehen können, habe ich eine Service-Box-Klasse, in der ich die Stile definiere, ich gebe ihm einen Rahmen, ich gebe ihm eine minimale Höhe, Texte und Futter in der Mitte, die Hintergrundfarbe wurde auf ein weißer. Dann verwende ich eine CSS-Regel, um die Überschrift in diesem Feld zu markieren, indem ich ihr einen Rand oben gebe und ihm links und rechts etwas auffüllt. Dann schließlich, um diese Hover-Funktionalität zu erhalten, kann ich das in CSS tun, indem ich denke, dies könnte eine Pseudo-Klasse oder so etwas genannt werden, es geht am Ende des Tages mit einem Doppelpunkt und dann schweben, also dann Wann immer ich darüber schwebe, warum habe ich zu viele Seiten geöffnet? Immer wenn ich den Mauszeiger darüber führe , ändert sich diese Hintergrundfarbe. Offensichtlich möchten Sie mehr Zeit damit verbringen, etwas Schöneres zu entwerfen, aber für unsere Zwecke werde ich einfach damit gehen. Ich werde es duplizieren, einen der Dienste in Yii2 Framework Development ändern. Ziehen Sie es dorthin, duplizieren Sie erneut, ändern Sie die Überschrift, Speichern und Beenden, und verschieben Sie sie dann über. Lassen Sie uns eine Vorschau sehen, was wir da haben. Wie Sie sehen können, gelten die Stile für alles, was eine Service-Box ist. Solange wir die Klasse dort haben, wird sie gelten, also haben wir nur die Teile, die wir duplizieren müssen, und der Rest des Stylings und alles ist hier drüben erledigt. Jetzt haben wir das, idealerweise würden wir wollen, um ein paar weitere Informationen dort zu setzen, vielleicht Link zu dem Portfolio, aber für unsere Zwecke, nur um ein kurzes Video zu machen, werde ich sagen, dass ich glücklich bin mit dem und ich werde Publish drücken. Jetzt habe ich eine Services-Seite, Ich kann auf Seite anzeigen klicken, Blog hier, sollte auf den Blog-Index verlinken. Mal sehen, ob wir schon eins haben. Nein, das tun wir nicht. Lassen Sie uns eine Blog-Seite erstellen, um dies zu beenden. Ich werde diesen Blog nennen. Ich werde den Divi Builder noch einmal benutzen. Ich werde in einem Titel setzen, alle meine Blog-Posts, gehen, um es ein Admin Label der Überschrift zu geben. Dann können wir einfach in einem Modul hier für den Blog hinzufügen, Ich bevorzuge Gitter, wie ich schon sagte, als volle Breite, aber was auch immer Schwimmer ist Ihr Boot. Zurück zum Inhalt, ich bringe nur hier durch, Jungs. Ja, ich bin glücklich mit all dem, Speichern und Beenden. Ich werde auf Vorschau klicken, all mein Blog dort gepostet. Sehen Sie, wie schnell dynamischer Inhalt verwendet wurde, als den Seitengenerator zu verwenden. Wenn wir auch einen Text dazwischen einfügen wollten, können wir das genau so tun, wie wir es vorher getan haben, aber um der Zeit willen werde ich nur Publish drücken. Jetzt haben wir alle Seiten, die wir in diese Menüs setzen müssen. Jetzt können wir zurück in Erscheinungsbild, Menüs gehen , das sind alle benutzerdefinierte Links, und was wir tun könnten, ist dies in Projekte zu ändern. Aber auch, es gibt uns die Seiten hier auch einfügen, und das ist wahrscheinlich ein bisschen sicherer zu tun, denn wenn wir die URL ändern, dann wird sie aktualisiert. Ich werde alle diese entfernen, und ich werde in Projekte, Dienstleistungen, Blog setzen. Du kannst sie alle ankreuzen und sie hineinwerfen. Ich möchte zuerst Projekte, ich möchte Dienste zweitens, und ich möchte nicht, dass es Projekte genannt werden, damit ich das Navigationslabel ändern und es Portfolio nennen kann . Dann haben wir Blog-Seite hier. Ich kann in meiner Kategorie dort für WordPress hier hinzufügen, so dass ist auch dynamisch, kann das greifen, legen Sie es dort unten. Dann wollte ich natürlich als Untermenü-Link, also werde ich es über bewegen und es wird Unterpunkt sagen. Wenn ich auf Save Menu klicke, wird das Menü aktualisiert. Sie können sehen, weil unter der Blog-Seite, Blog hervorgehoben ist. Wenn ich darauf klicke, wird das hervorgehoben, wenn ich zu Services gehe, diese meine Services-Seite, wenn ich zu Portfolio gehe, sind sie alle meine Projekte und ich kann in sie graben. Jetzt haben wir eine sehr einfache Website gewährt, aber wir haben alle wichtigen Prinzipien abgedeckt, um es auszubauen. Wenn Sie länger damit verbringen möchten, wenn Sie mitverfolgt haben und dies tatsächlich in etwas einbauen möchten , das Sie tatsächlich veröffentlichen möchten, gehen Sie direkt vor. Aber in meiner Situation, das ist es im Grunde für die Seite Building und die erweiterten Anpassungen, was ich im nächsten Video tun werde, ist installieren Sie einige Plugins, die ich denke, sind wirklich wichtig, und zeigen Sie auch Plugins in Aktion und wie sie tatsächlich aktualisieren Sie Ihre WordPress-Website. Dann im nächsten Video danach, werden wir in ein bestimmtes Plugin gehen, das E-Commerce auf Ihrer Website ermöglicht Wenn Sie also an diesen Dingen interessiert sind, bleiben Sie auf jeden Fall herum. Ich werde Sie im nächsten Video sehen. 15. Plug-ins installieren: Im Moment haben wir die Grundlage für eine ziemlich gute Website. Wir haben Seiten, wir haben ein Menü, wir haben Projekte hier drin, wir haben Blog-Posts, also haben wir eine grundlegende Website eingerichtet. Aber was ich tun möchte, ist zusätzliche Funktionalität zu aktivieren, die vielleicht nicht aus der Box kommt mit WordPress und vielleicht Devi hilft Ihnen auch nicht damit. Manchmal, wenn Sie zusätzliche Funktionalität benötigen oder etwas mehr zu Ihrer Website hinzufügen möchten, sollten Sie einige Plug-Ins installieren. Jetzt nur eine Warnung mit Plugins, bevor wir eintauchen und einige installieren, können Sie beide Plugins durchgehen, definitiv und es gibt viele Plug-Ins für Leute, die Code überhaupt nicht berühren wollen, dass alles, was sie tun, ist einfügen wie eine oder zwei von Code. Es ist am besten, Ihre Website sauber zu halten, wenn es eine Situation gibt, in der alles Notwendige ist, dass Sie einfach in vielleicht nur Ihren Editor gehen und eine Codezeile einfügen. Es ist viel sauberer, nur Ihren Code zu bearbeiten, als ein Plug-in zu installieren. Auf der anderen Seite gibt es Situationen, in denen das Plug-in viel macht und es keine einfache Änderung ist. In diesem Fall ist es eine gute Idee, ein Plug-in zu bekommen. Aber meine Warnung für jeden, der Entwicklung tut, ist, dass Sie Website so sauber wie möglich halten, installieren Sie keine Plug-Ins für absolut alles, es sollte einen klaren Zweck hinter einem Plug-In geben, das Sie installieren. Danach wollen wir aus dem Weg, gehen wir in Plug-Ins Menüpunkt hier und klicken Sie auf Neu hinzufügen. Jetzt kann ein sehr beliebtes Plug-in sogar auf der Titelseite sein. Jetzt ist es vielleicht nicht populär, ein sehr beliebtes Plug-in , nach dem Sie hier suchen können. Ich werde nur überprüfen, ob es populär ist. Yap, ist Yoast SEO und Sie werden sehen, dass dieses Plug-in funktioniert für Sie in nur einer Sekunde. Aber im Grunde erlaubt es Ihnen, Ihre Metadaten für SEO auf Ihren Blogbeiträgen und Seiten zu aktualisieren. Sehr mächtiges Zeug, Sie wollen nicht nur nehmen, was WordPress erzeugt und verwenden, dass oft mal. Also werden wir Yoast verwenden, danach installiert klicken Sie auf Aktivieren und jetzt werden Sie hier sehen, dass Yoast installiert und aktiviert ist. Um Yoast zu verwenden, können Sie einfach in einen beliebigen Beitrag oder eine Seite gehen. Ich gehe zu hier, wo wir unseren Beitrag bereits haben , und ich werde auf Beitrag bearbeiten klicken. Sobald ich drinnen bin, kann ich nach unten scrollen und ich kann einen neuen Abschnitt überprüfen , und das ist meine Vorschau in Google. Sie können sehen, dass der Titel auf Google angezeigt wird, das ist die URL, die angezeigt wird, und das ist der Text. Nun, ich habe gerade ein Bild, du hast einen Titel und du hast eine Passage, die direkt in eine Einführung geht. Das könnte in Ordnung sein. Im Moment sehe ich nicht wirklich etwas falsch daran. Dass Sie vielleicht einen Code oben auf Ihrer Seite haben und Google das interpretiert, indem Sie hier nur einen zufälligen Code eingeben oder Sie diese Dinge immer überprüfen möchten, besonders wenn SEO Ihnen wichtig ist. Vielleicht möchten Sie manchmal, dass der Titel ein wenig anders auf Ihrer Webseite als auf Google ist, vielleicht können Sie eine bessere Überschrift schreiben, um jemanden zu locken, der auf Google sieht, als Sie hier drin können, und Sie wollen nur , um dies möglicherweise relevanter zu machen. Ich weiß nicht, es ist nur gut, zu überprüfen was Ihre Vorschau auf Google ist, und bearbeiten Sie sie, wenn Sie müssen. Das ist, was Sie Yoast SEO verwenden können. Alles, was Sie hier tun, ist Snippet gerade bearbeiten, es zieht nur aus dem aktuellen Artikel, aber ich kann dies ändern, wie man installiert. Das ist lustig, Bearbeitung der Blog-Post, wie Plug-Ins auf WordPress zu installieren , während wir ein Video über Plug-Ins in WordPress tun. In dieser Situation muss ich es nicht wirklich bearbeiten, aber Sie möchten es vielleicht. Sie können auch eine Schnecke bearbeiten. Ich mochte die Schnecke, aber Sie können hier sehen, wie ich sie dort aktualisiere, ich aktualisiere sie dort. Aber vielleicht möchten Sie eine bessere Beschreibung als die erste Einführung Ihrer Inhalte. Vielleicht möchten Sie sagen, dies ist der beste Artikel überhaupt, wie Plug-Ins zu installieren. Offensichtlich ist das eine schreckliche Beschreibung, aber Sie bekommen den Punkt, Sie können hineingehen und bearbeiten, wie es auf Google aussieht. Sie können auch eingehen und bearbeiten, wie es auf Facebook und Twitter angezeigt wird. Dasselbe gilt hier, vielleicht zieht es Code oder Texte ein, die Sie in der Vorschau nicht wirklich wollen, damit Sie das hier aktualisieren können. Sie können auch ein Fokusschlüsselwort einfügen. Wenn Sie also versuchen, für ein bestimmtes Keyword zu rangieren, können Sie das dort einfügen und Yoast auswerten lassen , wo immer Sie einen guten Job machen oder nicht. Ich werde es nur mit meiner neuen Beschreibung aktualisieren , und das ist im Wesentlichen der Yoast. Ein weiteres Plug-in, das ich benutze, was wirklich wichtig ist und das wird nicht wirklich auf unserem lokalen Setup gelten , weil es nicht wirklich im Internet ist, aber es gibt eine, sorry, ich muss gehen, um neue hinzufügen hier. Es gibt einen Code, wirklich einfaches SSL. Für diejenigen unter Ihnen, die nicht wissen, dass SSL als Sicherheitszertifikat ist. Wenn ich hier rüber gehe, können Sie sehen, dass es sicher und als s nach dem HTTP sagt. Das ist eine andere SEO-Sache. Es gibt andere Gründe, warum Sie SSL haben möchten, aber einer der Hauptgründe ist für SEO und insbesondere bei meinem Host muss ich nur dieses Plugin installieren und dann auf Aktivieren klicken und solange es ein SSL-Sicherheitszertifikat gibt mit Ihrem Konto auf dem Host verbunden ist, erhalten Sie SSL. Ich habe hier wirklich einfache SSL Ich kann auf Jetzt installieren klicken. Wie Sie sehen können, können Sie, sobald die Installation abgeschlossen ist, sobald die Installation abgeschlossen ist,einfach auf Aktivieren klicken, wie wir es die ganze Zeit getan haben. Jetzt müssen Sie nur auf Einstellungen gehen, SSL und Sie können es aktivieren, wenn es erkennt, dass es SSL gibt, wir sind nur auf meinem lokalen Computer, also gibt es kein SSL und im Wesentlichen ist dieser Kurs nicht auf, wie SSL oder Yoast zu tun, , die hier über Plugins im Allgemeinen spricht. Das ist im Wesentlichen, wie Sie Plugins zu Ihrer Website hinzufügen können, um eine zusätzliche Funktionalität hinzufügen können Sie spezielle Dinge auf Ihrer Website zu tun, und eines dieser Dinge tatsächlich ist es, E-Commerce zu ermöglichen. Im nächsten Video werden wir direkt in das mit einem Plugin namens WooCommerce gehen und so werden wir sagen, zum Beispiel, wir wollten etwas hier verkaufen, vielleicht wollen wir sogar unseren Service Prepaid verkaufen wir kann in einigen E-Commerce in unsere WordPress-Website mit diesem Plugin setzen, so werde ich Sie im nächsten Video zu sehen. 16. E-Commerce mit Woocommerce hinzufügen: Im letzten Video haben wir über Plug-Ins gesprochen und wir haben zwei Plug-Ins installiert , die ich sehr regelmäßig auf allen meinen Websites verwende. Aber wenn Sie versuchen, E-Commerce auf einer WordPress-Website zu tun, gibt es ein Plug-in, das sehr, sehr beliebt ist und es heißt WooCommerce. Falls Sie E-Commerce tun wollten, werde ich nur durch die Installation von WooCommerce jetzt laufen, und es wird eine gute Lernerfahrung für uns sein zu sehen was WooCommerce mit unserer WordPress-Website macht, und wie es uns E- Commerce-Funktionalität wirklich schnell mit nicht viel Arbeit, nur Nutzung dieses Plugin. Ich suche WooCommerce und wie wir es vorher getan haben, werde ich nur jetzt installieren und aktivieren. Sobald Sie auf „Mit WooCommerce aktivieren“ klicken, werden Sie zu diesem folgenden Assistenten weitergeleitet, dem Sie Ihren Shop konfigurieren und schnell loslegen können. Sie können in setzen, wo Ihr Geschäft basiert und Ihre Währung, Ich werde nur tun, die Vereinigten Staaten $. Sie können mit dem Handel sagen, wo Sie physische oder digitale Produkte verkaufen möchten, es wird digitale Produkte auswählen. können wir behalten. Ich muss hier eine Dummy-Adresse eingeben. Hoffentlich wird es das akzeptieren. Dann werde ich zum Zahlungsbereich gebracht, wo es mir sagt, was WooCommerce akzeptieren kann. Es kann Stripe und PayPal akzeptieren, die größten. Ich bin cool mit Leuten, die mich bezahlen, wie sie wollen, aber ich habe kein Stripe-Konto, also werde ich das einfach deaktivieren und einfach PayPal akzeptieren. Wenn Sie den E-Commerce verstehen und einige Steuern einlegen müssen, können Sie dies hier aktivieren. Sie können auch einen Jetpack verbinden, aber ich glaube, Sie werden ein wordpress.com-Konto dafür benötigen, ich werde nur überspringen, dass für jetzt. Hier geht's. Sie können nach Tipps, Produkt-Updates und Inspirationen in Ihrem Postfach fragen , sonst sind Sie ziemlich bereit zu gehen. Ich werde zum Armaturenbrett zurückkehren. Sie können hier klicken, um ein Produkt zu erstellen oder Produkte aus einem anderen Geschäft zu importieren, aber ich möchte zurück zum Dashboard gehen und einfach darüber sprechen, was WooCommerce getan hat. Jetzt auf Ihrem Dashboard sollten Sie etwas Neues in Ihrem Menü sehen. Das ist die Registerkarte WooCommerce und die Registerkarte Produkte. Nun, was Produkte sind, ist nur ein anderer Post-Typ. Sie werden sehen, wir haben Beiträge und Seiten, das sind die Standard-Beitrag-Typen in WordPress. Projekte wurden von Divi hinzugefügt, und jetzt wurden Produkte von WooCommerce hinzugefügt. Jetzt können wir hier hineingehen, und wir können Produkte erstellen. Ich werde ein erstes Produkt erstellen. Sie können sehen, dass die Schnittstelle dem Erstellen eines Beitrags oder einer Seite ziemlich ähnlich ist, und das liegt daran, dass sie die gleiche Funktionalität verwendet. Wir machen nur einen anderen benutzerdefinierten Post-Typ. Ich werde sagen: „Einen Monat Web-Entwicklung“, und ich werde sagen: „Das ist für einen Monat Vollzeit meiner Dienste.“ Ich finde hier nur Zeug, Leute, nimm das nicht zu ernst. Aber wenn wir nach unten scrollen, können wir Produktdaten und Produktbeschreibung sehen, hier ist es ein bisschen anders als unsere anderen Beitrag-Typen hier. Wir können ein einfaches Produkt machen, das eine virtuelle ist, und wir können es in der Regel wert 10 Riesen, aber heute ist es zu einem Sonderpreis von nur fünf Riesen. Inventar. Sie können Ihren Lagerbestand und Lagerbestand hier verwalten, wenn es sich nicht um ein virtuelles Produkt handelt. Selbst wenn es sich um ein virtuelles Produkt handelt, können Sie den Betrag begrenzen, den Menschen kaufen, Sie können Produkte mit Upsells und Cross-Sells verknüpfen. Ehrlich gesagt habe ich keine WooCommerce-Stores, die ich verwalte, ich benutze WooCommerce tatsächlich, um auf meiner Website zu verkaufen. Ich benutze diese grundlegende Funktionalität und es funktioniert für mich. Aber im Wesentlichen, wenn Sie nur auf veröffentlichen auf, dass und dann gehen Sie zu dem Produkt, können Sie wirklich einfach kaufen es sofort. Sie können auf „Warenkorb hinzufügen“ klicken, plötzlich haben Sie jetzt einen Warenkorb, und Sie können auf „Ansicht“ klicken. Das ist das, was an WooCommerce brillant ist. Schauen Sie sich all das Zeug an, das es für uns sofort zur Verfügung gestellt wird, indem Sie ein Plugin installieren und ein Produkt einfügen. Deshalb denke ich, dass WooCommerce wirklich gut ist und es ist auch sehr beliebt, andere Leute mögen es auch. Sie können jetzt zur Kasse gehen. Sie geben in Ihre Rechnungsinformationen, und Sie können in Ihrem PayPal-Zeug setzen. Jetzt müssen Sie natürlich die Zahlung konfigurieren, ich bin aus dem Dashboard gegangen. Sie möchten hier in WooCommerce gehen, wo Sie auf Ihre Bestellungen, Ihre Einstellungen, Coupons zugreifen können , wenn Sie Coupons für Leute anbieten möchten. Ich habe meine PayPal seit einer Weile nicht eingerichtet, aber vielleicht ist es in Konten oder Check-out hier, und Sie können auf PayPal hier klicken, können Sie Ihre PayPal-E-Mail einstellen. Dies ist wahrscheinlich, wo Sie Ihr PayPal konfigurieren würden. Sie haben alle Ihre Einstellungen hier auf WooCommerce. Wenn jemand Ihr Produkt kauft, wird es hier in Ihren Bestellungen angezeigt, damit Sie sehen können, wer was gekauft hat und wie viel es war, und all das gute Zeug. Es ist wirklich erstaunlich, dass Sie einfach ein Plugin hinzufügen und all das direkt aus der Box bekommen können. Im Wesentlichen ist das wirklich wie ein Produkt einzurichten und Zahlungen einzurichten, damit Sie bezahlt werden können, ist im Wesentlichen alles, was Sie tun müssen, um ein Geschäft zu haben. Natürlich, wenn Sie digitale Produkte verkaufen, müssen Sie hier runtergehen. Ich werde „Herunterladbar“ auswählen, und dann können Sie eine Datei hinzufügen, so dass, wenn jemand bezahlt, zu einer Seite gehen kann, die die Datei hat, die sie herunterladen können, so verkaufe ich Produkte auf meiner Website. Offensichtlich, wenn es sich um ein physisches Produkt handelt, müssen Sie es erfüllen. Aber im Wesentlichen, indem Sie dieses Plugin installieren, indem Sie in Produkte, und indem Sie Zahlungsinformationen, so dass Sie bezahlt werden können, haben Sie im Wesentlichen ein Geschäft direkt in Ihrer WordPress-Website. Sie können auf diese Produkte zugreifen, hier ist die URL hier und Sie können auf ein einzelnes Produkt zugreifen. Aber was WooCommerce tut, ist in einem Link hier für einen Warenkorb gesetzt, Sie können auch direkt zum Einkaufen navigieren, indem Sie zu Ihrem Root-Domain-Schrägstrich Shop gehen, und dann wird es alles hier zeigen. Sie können Ihren Shop natürlich anpassen, dies ist eine alte Version. Sie können zurück zu hier, und Sie können Ihren Shop anpassen und erstellen Sie Kategorien hier, Sie können Tags erstellen, wie Sie mit anderen Beitragstypen in WordPress tun können. Im Wesentlichen, wenn Sie diesen Menüpunkt zu Ihrem WordPress-Menü hinzufügen möchten, können Sie hier gehen, gehen Sie in Aussehen Menüs, und fügen Sie in Shop sofort. Sie können dort Shop gehen, Menü speichern, die Seite aktualisieren. Ist das nicht wunderschön? WordPress arbeitet für uns sehr gut, und wir haben all diese dynamischen Inhalte und Funktionen sofort für uns. Außerdem können Sie hier sehen, dass wir jetzt einige Vorlagen mit WooCommerce hinzugefügt haben. Wir haben ein Archiv Dash Produkt, und wenn ich mich hier eingrabe, haben wir ein einziges Bindemittel Produkt. Dies sagt Ihnen, wenn Sie die Vorlagendateien bearbeiten mussten, können Sie das völlig tun, indem Sie diese Vorlagen finden. Lasst uns das jetzt tun, nur um das in die Perspektive zu bringen. Wir können hier in unseren PlugIns-Ordner graben, zu WooCommerce gehen, in Vorlagen schauen und boom. Wir haben alle diese Vorlagen hier, die wir eingehen und bearbeiten können, genau wie wir es getan haben, als wir in unserem Kinderthema waren, und wir ändern die Single und wir ändern die archive.php, wir können gehen und die Vorlagen hier ändern. Wieder, mit WordPress, alles ist Open Source, wir können die Benutzeroberfläche hier verwenden, um zu tun, was wir wollen in der WordPress-Dashboard, aber dann haben wir vollständige Bearbeitung Anpassung durch Graben in den Code, und das ist ein wenig über WooCommerce und wie Sie E-Commerce zu Ihrer Website hinzufügen können. Ich denke, dass fast deckt alle Grundlagen der Entwicklung einer WordPress-Website. Wir haben wieder Seiten, Projekte, Beiträge und jetzt Produkte. Ich denke, es ist jetzt an der Zeit, unsere Website in das Internet zu stellen, was wir als Deployment bezeichnen. Wenn Sie dies auf einem Staging-Server erstellt haben, können wir dies auf alle Themen migrieren, die wir in den nächsten 1, 2 oder 3 Videos behandeln werden, egal wie lange es uns dauert. Wenn Sie Ihre Website lokal oder auf einem Staging-Server gehostet haben und Sie migrieren möchten, bleiben Sie auf jeden Fall hier, um zu erfahren, wie Sie dies im nächsten Video tun. Oder selbst wenn Sie mit Ihrer Website zufrieden sind und sie gerade direkt auf Ihrem Hosting erstellt haben, bleiben Sie auf jeden Fall herum, denn wenn Sie eine neue Version Ihrer Website erstellen möchten , benötigen Sie , um zu erfahren, wie Sie migrieren. Ich hoffe, dass Sie etwas aus dieser Lektion gelernt haben und ich werde mit Ihnen im nächsten Video sprechen. 17. Aktivieren deiner Website: In diesem Video werden wir über die Bereitstellung Ihrer Website im Internet sprechen. Wenn Sie den Pfad ausgewählt haben, in dem Sie ihn nicht lokal auf Ihrem Computer oder auf einem Staging-Server erstellt haben, und Sie ihn direkt auf dem Speicherplatz erstellt haben, auf dem Sie ihn veröffentlichen möchten. Nun, es ist kein Schritt erforderlich, wenn Sie Ihre Website bereits an dem Ort erstellt haben , an dem Sie sie erscheinen möchten. Das war's also. Du kannst es einfach mit deinen Freunden teilen oder mit wem teilen. Fangen Sie an, etwas Verkehr zu dieser Website zu fahren. Dies ist die frische WordPress-Installation, die wir zuvor auf einer kleinen Demo-Domain hatten. Wenn Sie sich über eine Website bewegen möchten, die Sie lokal oder an einem anderen Ort im Internet entwickelt haben, und Sie möchten sie an dieses Ziel verschieben. Das ist es, was dieses Video Sie durchlaufen wird. Zuallererst werden wir über die lokale Migration der Website sprechen. Dieselben Prinzipien können hier neben dem Staging-Server auch für die Migration gelten. Schnell, was ich Ihnen vorher mit der himmelblauen Website gezeigt habe , ist ein Beispiel für einen Staging-Server. Im Grunde habe ich eine Sub-Domain auf meiner eigenen Domain christhedeveloper.com erstellt und die Website dort aufgebaut. Dann, als ich bereit war und sobald der Kunde damit zufrieden war, zog ich ihn in seine Domäne. Das ist im Wesentlichen das, was ein Staging-Server ist. Es ist ein Ort, den Sie online bauen und dann können Sie es an das endgültige Ziel verschieben. Ähnliche Prinzipien gelten, wenn Sie dies lokal zum Internet machen oder von einem Ort zum anderen migrieren. Wir werden einfach durchgehen, was wir hier haben, was unsere lokale Installation ist. Denken Sie daran, hier zurück, wir haben bereits eine Version von WordPress installiert. Was ich tun werde, ist einfach in den Dateimanager zu gehen und das einfach zu löschen. Ich werde voran hier, wie ich in mein cPanel gehe und tatsächlich diese Dateien lösche. Wenn ich in den Dateimanager meiner cPanel-Konten für diese Domain gehe, werde ich nur in öffentliche HTML gehen, wo die Website gespeichert ist und ich werde nur all dies zu entfernen. Bevor Sie das tun, der Grund, warum ich das auf dieser Website mache , weil es im Grunde nichts darauf gibt. Es ist eine neue WordPress-Installation. Wenn Sie eine tatsächliche Website dort hatten, gehen Sie offensichtlich nicht und löschen Sie Ihre Dateien. Weil ich eine neue Installation habe, werde ich einfach von vorne anfangen. Ich werde auf Löschen klicken und alle diese Dateien löschen. Das wird nicht die WordPress-Datenbank löschen, möchten Sie vielleicht in gehen und löschen Sie die WordPress-Datenbank als auch. Ich glaube, ich gehe da rein und lösche es. Sie können dies normalerweise in PHP meinem Administrator tun, wenn Sie es lokal speichern. Für cPanel möchten Sie hier hineingehen und wir können diese Datenbank einfach vollständig loswerden. Sie können die Datenbank löschen und sie ist jetzt weg. Wenn wir auf die Website zurückgehen, sollte es mit nichts auftauchen. Grundsätzlich erscheint es nur mit einem Verzeichnis und es gibt keine Website dort. Was wir tun können, ist daran zu erinnern, dass wir unsere Website genau hier haben. Dies sind die Dateien unserer Website. Dann haben wir auch unsere Datenbank lokal auf unserem Server gespeichert. Wenn wir hier gehen und sehen unsere WordPress-Datenbank, die wir skillshare_wordpress genannt. Die Schritte für die Migration, und wir sprachen darüber ein wenig im Verständnis von Web Development, die die erste Skillshare Klasse war, bewegt sich über die Dateien, bewegt sich über die Datenbank und stellt dann sicher, dass diese zwei verbunden sind. Was ich tun werde, ist, dass ich die Dateien in unserer Skillshare WordPress-Website über zu unserem Hosting zu verschieben . Das wird also identisch sein. Es gibt ein paar Möglichkeiten, wie wir dies tun können, aber ich denke, der sauberste Weg wäre wahrscheinlich, dies hochzuladen und dann zu entpacken . Im Grunde habe ich mit der rechten Maustaste auf diesen Ordner geklickt und auf Komprimieren geklickt. So machst du es auf Mac, aber ich bin sicher, dass es unter Windows anders ist. Sie sollten mit Ziping-Dateien vertraut sein. Ich habe diese WordPress-Seite. Ich werde das als eine einzelne Datei auf mein Hosting hochladen und sehen, dass es hochgeladen wird. Das wird ein bisschen Zeit in Anspruch nehmen. Ich werde ein bisschen warten und dich einholen, wenn es fertig ist, hochgeladen zu werden. In Ordnung. Also kam ich in ein paar Minuten zurück und das ist jetzt hochgeladen. Wir können hier klicken, um zu unserem Ordner zurückzukehren. Ich kann darauf klicken und dann auf Extrahieren klicken, ich werde es extrahieren. Jetzt warten wir nur darauf, dass es extrahiert wird. Es ist fertig, weil ich es auf einem Mac OS X gezippt. Ich werde das haben, aber das ist das Foto, das wir suchen. Wir müssen nur all dies greifen und es in den öffentlichen HTML-Ordner verschieben. Das werde ich loswerden. Klicken Sie auf Bewegung, gehen Sie zurück und wir können loswerden, dass eine jetzt leer. Wir können es loswerden und wir können das loswerden. Wir können auch die ZIP-Datei loswerden, weil es alles auf gezippt ist. Nur um zu zeigen, wie das jetzt in unserem Browser aussieht, können wir das aktualisieren und es wird mit einem Fehler kommen , der Fehler beim Herstellen einer Datenbankverbindung sagt, was natürlich keine Überraschung ist, wir haben nicht wirklich eine Datenbank auf unserer Website. Der nächste Schritt besteht darin, über diese Datenbank zu migrieren. Was ich tun werde, ist hier exportieren klicken, wählen Sie schnell, gehen. Ich habe einen SQL-Code, der in meine Datenbank eingefügt werden muss, aber leider habe ich hier keine Datenbank, weil wir sie gerade gelöscht haben. Außerdem habe ich nicht die Möglichkeit, es genau so zu benennen weil es ein Präfix für den Datenbanknamen erzwingt. Es muss skillsharecourse_ und dann etwas genannt werden. Wir müssen die Datenbank auf dem Hosting ein wenig ändern. Was ich tun werde, ist dieses WordPress zu nennen. Es wird skillsharecourse_ WordPress statt skillshare_wordpress nur wegen dieses Präfix sein. Ich werde die Datenbank erstellen. Ich gehe zurück. Wie Sie hier jemand sehen können, nicht jemand, WordPress hat bereits einen Benutzernamen für mich erstellt. Ich werde nur diesen Benutzer löschen und einen neuen erstellen. Ich gehe hierher und lösche diesen Benutzer. Also jetzt haben wir nur eine Datenbank ohne Benutzer. Ich werde einen Benutzer hinzufügen und ich werde es einfach skillsharecourse_admin nennen. Ich werde einen Benutzernamen leider ein Passwort dafür generieren. Ich werde in mein einziges Passwort gehen, wie immer greifen, dass. Stellen Sie sicher, dass Sie es auf jeden Fall aufnehmen. Dies wird mein MySQL-Benutzername/Passwort sein. Passwort ist da, der Benutzername wird skillsharecourse_admin sein. Das habe ich jetzt aufgenommen. Ich kann das kopieren und einfügen und wieder, da gehen wir. Jetzt ist es fertig. Sie haben einen Benutzer erstellt, erfolgreich erstellt. Nun ist der letzte Schritt, diesem Benutzer Zugriffsrechte zu gewähren, um auf die Datenbank zuzugreifen, die wir gerade erstellt haben. Die einzigen zwei verfügbaren Optionen sind diejenigen, die wir haben. Wir können einfach auf Hinzufügen drücken. Wir werden alle Privilegien aktivieren und auf Änderungen vornehmen drücken. Wenn Sie sich erinnern, als wir begannen, unsere WordPress-Website zu installieren , um damit zu beginnen, als wir es vor Ort machten , hatten wir das berühmte fünfminütige Installationsprogramm für WordPress und WordPress im Grunde gesagt: „Setzen Sie Ihre Daten ein und wir werden das in die WP-Konfigurationsdatei.“ Wir haben das jetzt nicht verfügbar. Was wir tun müssen, ist, diese Details direkt in unsere WP-Konfigurationsdatei zu setzen. Nun, da wir diese Informationen eingerichtet haben, was wir tun werden , ist in unsere WP-Konfigurationsdatei gehen , so dass wir sie einfach aus unserem Datei-Manager bearbeiten können. Sie können es auch per FTP mit Ihrem Code-Editor bearbeiten, wenn Sie möchten. Das erste, was wir tun werden, ist, den Datenbanknamen in SkillShareCourse_WordPress zu ändern . Im Grunde kopieren wir hier nur die Details. Dies ist der Datenbankname SkillhareCourse_WordPress. Das ist unser Benutzer. So können wir diesen Benutzernamen nehmen und wir können ihn dort platzieren. Das Passwort, denken Sie daran, dass wir in unserem Text bearbeiten gespeichert. Also werde ich das kopieren, das hineinlegen, und ich glaube, wir können die gleich lassen. Ich werde Änderungen speichern. Die letzte Sache ist, die Daten in den Tabellen in dieser Datenbank zu haben , denn wenn wir jetzt zu phpMyAdmin gehen, wird es hier eine Datenbank geben, die nichts enthält. Was wir hier tun müssen, ist, sich das zu schnappen und sicherzustellen, dass es in unsere neue Datenbank importiert wird. Eigentlich werde ich einfach hier mit der rechten Maustaste klicken und auf „Alle auswählen“ klicken. Dann werde ich Befehl C drücken, um zu kopieren, und wir müssen das nicht mehr öffnen. Wir müssen zurück zu phpMyAdmin. Stellen Sie sicher, dass Sie verstehen, welche phpMyAdmin lokal und welche phpMyAdmin auf Ihrem Hosting. Sie können sicherstellen, dass Sie das über die URL sehen können. Ich will dich nicht verwirren. Dies sind zwei verschiedene phpMyAdmins. Was wir hier tun können, ist, dass wir zu SQL gehen können, vorausgesetzt, wir haben eine SQL-Abfrage, und dies wird auf der Datenbank SkillShareCourse_WordPress laufen. Ich werde es einfügen und ich werde das Detail oben ändern. Es sagt Datenbank skillshare_wordpress. Dies ist nur ein Kommentar, aber ich möchte es trotzdem ändern. Wenn ich drücke „Go“, und alle Dinge sind gut, es sollte alle Daten aus unserer lokalen WordPress-Datenbank in unsere WordPress-Datenbank importieren , die wir gerade auf unserem Hosting eingerichtet. Es kann eine Weile dauern, nur weil es viele Zeilen gibt, die eingefügt werden können. Aber hoffentlich beendet es das Laden und wir können jetzt ein großes Häkchen sehen. Ich werde „Struktur“ drücken und Sie können sehen, dass wir alle Tabellen dort haben. Wenn wir in gehen, sagen wir Posts, wir können einige Beiträge sehen und wir können einige Devi Kurzcodes sehen. Sie müssen das nicht vollständig verstehen, aber Sie können zumindest sehen, dass unsere Datenbanktabellen und jetzt drin. Wenn wir zurück zu hier gehen und alles gut ist, sollten wir die Seite aktualisieren und die Website sollte wie erwartet funktionieren. Es taucht ziemlich gut auf, außer es gibt etwas ganz Offensichtliches, das nicht funktioniert. Das heißt, überall dort, wo wir diese Symbole hatten, tauchen sie auf, wenn wir Charaktere oder nur Boxen hätten. Ehrlich gesagt, ich bin überrascht, dass die meisten der Website kam durch okay. Weil wir einen wichtigen Schritt verpasst haben, der direkt am Ende kommt, und das ist die Aktualisierung unserer Website-URL. Im Grunde werde ich Ihnen das jetzt zeigen. Wenn wir in unsere Datenbank auf unserem Hosting gehen und wir gehen in Optionen, können wir hier sehen, dass unsere Website-URL in unserem Haus ist immer noch localhost: 8888. Aber das ist nicht mehr relevant, weil wir jetzt auf dieser Domain sind. Was ich tun werde, ist, dass ich die Domain kopieren und die Datenbank aktualisieren werde. Ich gehe hier hinein, drücke „Bearbeiten“ und ändere das in http//www.skillsharecourse.space. Ich kopiere das. Dann werde ich hier rüber gehen. Ich denke, ich kann einfach darauf doppelklicken. Da gehen wir. Drücken Sie „Enter“, und das wird es ändern. Ich denke, es gibt ein weiteres Feld in dieser Datenbank, also werden Sie sich ändern, wenn Sie vorwärts. Wir können einen anderen Ort finden, an dem wir unsere lokale URL haben. Ersetzen Sie einfach bis zu WordPress-Website mit unserer tatsächlichen URL. Wir können noch mehr Zeilen durchlaufen, die bereits aktualisiert werden. Sie können dort öffentliche HTML sehen, also muss es bereits sein. Ich gehe nur noch ein paar Reihen durch. Ich habe alle Zeilen durchlaufen und habe diese URLs aktualisiert. Jetzt, wenn ich zurückgehe, um die Seite zu aktualisieren, mal sehen, was passiert. Es dauert ein wenig länger, um zu laden, wahrscheinlich weil es die neuen Details lädt. Plötzlich haben wir die Symbole schön auftauchen. Ich bin eigentlich ein wenig überrascht, dass es die Bild-Links auch nicht gebrochen hat. Aber ja, die Website-URL zu ändern ist sehr, sehr wichtig. Denken Sie daran, gehen Sie nach der Migration Ihrer Datenbank in WP-Optionen und ändern Sie Ihre Website-URL und Homepage. Lassen Sie uns einfach überprüfen, ob der Rest der Website gut funktioniert. Ja, Dienste. Genau wie wir auf unserem eigenen Hosting oder unserem eigenen lokal aufgebaut haben. Das deckt so ziemlich den Bereitstellungsprozess ab. Nur um hier zusammenzufassen, was wir getan haben, war, dass wir die Dateien, die wir lokal in unserem Projektverzeichnis haben, genommen haben. Wir setzen sie auf unser Hosting auf eine leere Installation. Wir haben dann unsere Datenbank exportiert, eine neue Datenbank erstellt, wir haben die Tabellen aus dieser alten Datenbank in unsere Datenbank im Internet importiert, und dann haben wir diese veralteten Cite URLs und Homepages aktualisiert , weil sie referenzierten lokalen Host. Das ist im Grunde der Prozess, den wir durchgemacht haben. Es ist etwas anders, wenn Sie eine Website bereits auf haben, denken Sie daran, dass wir hier von Grund auf neu gestartet wurden. Dieses Video wird ein bisschen lang, also werde ich es dort für die Bereitstellung Ihrer Website lassen. Aber im nächsten Video werde ich Ihnen zeigen, wie Sie Änderungen, an denen Sie gearbeitet haben, entweder lokal oder auf einem Staging-Server auf Ihr endgültiges Ziel migrieren . Wenn Sie daran interessiert sind, bleiben Sie dran für das nächste Video. Wenn nicht, können Sie danach zum Video springen. Bleiben Sie definitiv bis zum Ende. Wir werden über Klassenprojekte sprechen und darüber sprechen, wie Sie Hilfe finden können, wenn Sie kämpfen. Beenden Sie also nicht Ihre Reise mit diesem Kurs dort. Wieder, wenn Sie sehen möchten, wie Sie einen Anblick zu einem Ort migrieren , wo Sie eine bestehende Website haben, bleiben Sie dran und ich werde Sie im nächsten Video fangen. 18. Änderungen auf eine Live-Site migrieren: Im letzten Video nahmen wir unsere lokal gehostete Website, die hier auf unserem lokalen Host: 8888 und wir nahmen alle Dateien und die Datenbank und wir setzten sie auf unser leeres Hosting. Aber natürlich, was ist, wenn wir bereits eine Website hier haben und wir einen neuen Build erstellen und dann migrieren wollen. Das ist es, worum es in diesem Video geht. Momentan haben wir genau das, was wir haben. Wir haben eine bestehende Website dort. Stellen wir uns kurz vor, dass dies eine Website ist, die seit einiger Zeit geöffnet ist. Es gibt bereits Traffic auf dieser Website. Sie haben bereits Personen dazu geschickt und möchten sicherstellen , dass Sie diese Website nicht im Grunde löschen, um Ihre neue hochzuladen. Was Sie hier tun werden, ist die Site über migrieren. Jetzt gibt es Dienste, die dies für Sie verwalten. Zum Beispiel, wenn Sie Managed WordPress verwenden, würden sie Systeme für diesen einer der Hosts, die dieses Schwungrad tut. Flywheel ist ein verwalteter Hosting-Provider. Sie können Staging-Server einrichten, und ich bin sicher, dass dies ein bisschen eleganter ist als die Lösung, die wir tun. Aber mit meinem Setup habe ich diese Option nicht. Ich benutze einfach einfaches Hosting und es ist eine gute, zu wissen, wie man es trotzdem macht. Im Grunde ist es ein ähnlicher Prozess wie der, den wir zuvor hatten. Wir müssen nur ein bisschen vorsichtiger sein. Was ich tun werde, ist, dass ich hier reingehe. Ich gehe zum Datei-Manager, den ich bereits geöffnet habe und das wird nur aktualisiert. Zuallererst werde ich meine Website sichern. Das ist das Wichtigste. Ich werde in öffentliches HTML gehen. Eigentlich werde ich eins zurückgehen und ich werde öffentliches HTML zippen. Keine Sorge, es wirkt sich nicht auf diesen Ordner aus. Es wird nur ein Zip-Archiv davon erstellen. Ich werde eine Zip meines öffentlichen HTML erstellen, auf dem meine Website bereitgestellt wird. Sie daran, dass dies für Sie in Ihrem Host mit diesem Dateimanager etwas anders sein könnte , öffentliches HTML ist, wo meine Website bereitgestellt wird. Jetzt habe ich meine alte Version meiner Website und ich werde das als Zip herunterladen. Ich werde hier hineingehen und eine Sicherung der alten Seite falten. Eigentlich werde ich es nicht in diesem Ordner tun, weil das der ist, den ich hochladen werde. Ich werde es hier draußen tun. Sicherung der alten Website. Sie können es im Grunde setzen, wo Sie wollen. Wenn Sie die Datenbank sichern möchten, schlage ich vor, dass Sie die Datenbank dort belassen, aber vielleicht möchten Sie sie sichern und dann löschen. Sie können exportieren, zu Benutzerdefiniert gehen und Ausgabe in Datei speichern wählen. Sie können sich das ansehen. Sie können das Feld „Datenbank erstellen“ hinzufügen, wenn Sie möchten. Grundsätzlich können Sie alles Standard lassen. Das ist kein Problem. Was es Ihnen geben wird, ist eine SQL-Datei, die ein Dump von einem Dump Ihrer Datenbankdaten ist . Ich gehe zurück in Code-Backup der alten Website und ich werde speichern. Genau hier, wenn ich einen Schritt nach oben gehe, Backup der alten Website, habe ich eine ZIP-Datei mit all meinen Dateien von unserer Website und ich habe den Datenbank-Dump direkt hier. Was ich schlage vor, Sie tun ist, dass Sie Ihre alte Website behalten, was bedeutet, dass Sie die Dateien behalten und Sie die Datenbank auf dem Hosting behalten, wenn Sie es bereits haben, und deshalb haben Sie es an zwei Orten und verschieben Sie es einfach im Grunde. In unserem Fall ist diese Datenbank genau die gleiche. Aber wenn Sie einen anderen Datenbanknamen hätten, würden Sie in Ihr cPanel gehen. Sie würden eine neue Datenbank erstellen, die mit der Datenbank übereinstimmt , die Sie lokal auf Ihrem Staging-Server haben. Sie würden Namen eingeben, den Benutzernamen eingeben und alle Details, die Sie für Ihren bestehenden haben. Wenn Sie dies ändern müssen, müssen Sie dies ändern. Grundsätzlich ist der Prozess ziemlich genau der gleiche, außer wenn Sie auf die Bühne kommen, wo Sie Dateien in ein öffentliches HTML einfügen. Sie möchten diese nicht unbedingt löschen, sondern sie in einen anderen Ordner legen und auch diese Datenbank nicht löschen, sondern einfach neben einem anderen sitzen lassen. Nur ein Haftungsausschluss, bevor wir auf diesem Kurs bewegen ist über den Aufbau WordPress-Sites die richtige Art und Weise waren. Technisch gesehen ist das, was wir tun werden, nicht der richtige Weg. Es ist nicht der perfekte Weg, Dinge zu tun. Aber um die Dinge perfekt zu machen, würde es viel mehr Setup erfordern, viel mehr Server-Konfiguration, viel mehr als das, was wir mit nur cPanel tun können. Die WordPress-Agenturen, für die ich in der Vergangenheit gearbeitet habe, hatten sie Server eingerichtet und wir haben in die Befehlszeile wie diese gegangen, öffnen ein Kommandozeilentool, gehen hinein und verbinden sich mit Servern über SSH und tun es so. Das ist technisch der richtige Weg, es zu tun, ist die sauberere Art, es zu tun. Aber mit cPanel ist die Lösung nicht so elegant und ich wollte nur darauf zuerst verweisen. Dies ist wahrscheinlich der am meisten unten und schmutzig Teil des Kurses. Aber wenn Sie es tun müssen und Sie nur cPanel verwenden, so würde ich es machen. Das ist ein bisschen ein Haftungsausschluss. Nun, lassen Sie uns tatsächlich auf die Migration gehen, was dasselbe ist wie die Bereitstellung, wie wir es im letzten Video getan haben. Was es beinhalten wird, ist, dass wir unseren neuen Build in Bezug auf die Dateien und in Bezug auf die Datenbank hochladen . Dann werden wir uns schnell mit möglichst minimalen Ausfallzeiten austauschen und wir sollten alle süß sein. Auch nach dem gleichen Prozess, den wir zuvor hatten, hat sich unsere Datenbank nicht geändert, aber sagen wir, es hat sich getan. Wir können all diesen Code nehmen, Befehl C zu kopieren. Wir werden hier eine neue Datenbank erstellen. Da dies die zweite Installation ist, werde ich es wordpress_2 oder technisch skillShareCourse_WordPress_2 nennen. Ich werde auf Datenbank erstellen klicken und ich denke, ich kann den gleichen Benutzernamen verwenden. Was ich hier tun werde, ist, diesen Benutzer zu unserer neuen Datenbank hinzuzufügen und dann auf Hinzufügen zu klicken. Ich werde alle Privilegien gewähren. Nehmen Sie Änderungen vor. Sieht so aus, als wären diese Änderungen vorgenommen worden. Ich gehe zurück und wenn ich zu aktuellen Datenbanken scrolle, haben wir die beiden Datenbanken dort und der privilegierte Benutzer ist für beide gleich. Ich werde hier hineingehen und ich werde aktualisieren, um unsere neue Datenbank zu sehen, damit ich die Seite hier oder da neu laden kann. Wir haben SkillShare_WordPress_2 für eine Neuinstallation. Genau wie zuvor können wir die SQL-Abfrage ausführen, um alle Daten zu importieren. Ich werde dort Skillsharecourse_2 machen. Das ist nur ein Kommentar. Es spielt keine Rolle. Ich lege das gerne da rein. Ich werde los drücken und es wird all diese Daten in unsere zweite Website importieren. Dies kann wiederum eine Weile dauern, abhängig Ihrer Internetgeschwindigkeit und der Geschwindigkeit aller Tools. Es wird nur ein bisschen geladen und dann werden wir hoffentlich einen grünen Haken bekommen. Da ist die grüne Zecke. Wenn wir auf Struktur klicken, haben wir alle Tabellen dort und es sollte alle unsere Daten haben. Theoretisch sollte es sich von dieser Datenbank unterscheiden, aber es ist in unserem Fall das gleiche, weil wir keine Änderungen vorgenommen haben. Okay, also der nächste Schritt, den wir tun können, ist das Hochladen der Dateien, und was ich tun werde, ist die gleiche Sache wie zuvor, laden Sie die Fähigkeit teilen WordPress-Website, und ich werde es außerhalb der öffentlichen HTML tun weil ich nicht wollen beeinflussen das Foto gerade noch. Ich werde klicken, um eine Datei hochzuladen. Ich werde diese ZIP-Datei finden, und ich werde das Video pausieren und wieder beitreten, sobald das hochgeladen ist. Wir haben 100 Prozent erreicht, und das bedeutet, dass die Dateien jetzt hochgeladen werden, und jetzt kommt der schmutzige Teil. Grundsätzlich werden wir ein wenig Tanz machen, um die Dateien und die Datenbank zu verschieben und hoffentlich zu minimalen Ausfallzeiten auf unserer Website wie möglich führen. Ich werde nur die Seite aktualisieren und sicherstellen, dass wir hier eine funktionierende Website haben, und was ich hier tun werde, ist die alten Dateien aus dem öffentlichen HTML zu verschieben, und dann werde ich die neuen Dateien in öffentliche HTML entpacken, und es wird arbeiten Sie sofort, hoffentlich für uns, weil die Datenbankdetails gleich sind, aber dann werden wir auf die neue Datenbank umstellen, und das wird die Migration abgeschlossen. Anscheinend haben wir hier bereits öffentliche HTML gezippt, wenn Sie Änderungen vorgenommen haben, seit Sie es gezippt haben, werden Sie es erneut zippen wollen oder einfach die Dateien direkt über kopieren. Anscheinend haben wir diesen Zip dort bekommen und wir haben die Zip auch auf unseren Computer heruntergeladen, ich werde tatsächlich nur alle diese Dateien löschen, und ich werde zurück gehen und dann tun Sie dies sehr schnell weil Ihre Website derzeit leer ist in der Moment, so dass sie Ausfallzeit für alle, die es beobachten. Schnell, entpacken Sie dies, Doppelklicken entpackt nicht. Klicken Sie auf „Extrahieren“, extrahieren Sie in öffentliche HTML Hoffentlich dauert das nicht zu lange. In Ordnung, Sie haben extrahiert, aber natürlich müssen Sie es ausziehen. Wir werden das in öffentliches HTML verschieben. Verschieben Sie die Dateien, gehen Sie zurück, loszuwerden, dass, indem Sie darauf klicken, und dann, Ich habe nur angeklickt Ansicht Papierkorb, gehen Sie hier und drücken Sie Löschen. Bestätigen Sie, jetzt lasst uns die Seite aktualisieren und sehen, was passiert. Wir haben jetzt einen Fehler, Fehler beim Herstellen der Datenbankverbindung, was natürlich genau der gleiche Fehler ist, den wir zuvor hatten, der Grund, warum wir diesen Fehler haben, ist, weil die Details in der WP-Konfigurationsdatei konfiguriert sind für unsere lokale Datenbank, nicht unsere neue Datenbank, die sich in der Cloud befindet. Was wir tun können, ist, dass wir in eine neue Installation gehen können. Gehen Sie nach unten zu WP-Konfiguration, Bearbeiten, und wir können diese neuen Details einfügen. Denken Sie daran, das sind die alten Details, die hier auftauchen. Dies sind die alten Details für diejenigen, die Sie vor Ort haben. Ich werde Skill Share Kurs setzen und dann zwei für die neue Datenbank unterstreichen. Denken Sie daran, dass wir denselben Benutzernamen und dasselbe Passwort für beide Datenbanken verwenden , so dass wir einfach über diese kopieren können. Ich werde das speichern, die Konfigurationsdatei wird jetzt aktualisiert. Ich gehe zurück zu hier, aktualisiere die Seite, und hoffentlich wird alles süß sein. Wieder dasselbe Problem. Wir haben die Symbole, die richtig angezeigt werden. Lassen Sie uns gehen und stellen Sie sicher, dass unsere URL korrekt ist, und es wird nicht offensichtlich sein, weil es die gleiche Datenbank ist, die wir ursprünglich hatten, und Sie können hier sehen, alles andere ist der gleiche, der gleiche Prozess. Ich gehe hierher, um das reinzuspielen, betreten Sie, gehen Sie hier rein. Ich schätze, es ist gut, eine Auffrischung zu bekommen. Nun, wenn wir zurück auf die Seite gehen, aktualisieren sie, und jetzt haben wir ein bisschen wie eine kaputte Website, muss etwas gewesen sein, das wir gerade getan haben, da gehen wir. Wenn ich hier zurück gehe, kann ich sehen, dass ich HTTP zweimal gemacht habe. Sie schreien wahrscheinlich in Ihrem Kopf, wie ich diesen Fehler mache, aber leicht zu erkennen, zumindest nachdem Sie diesen Fehler gemacht haben. Ich habe diese Zeilen geändert und dann diese Seite aktualisiert. Wir haben unsere Website zurück und die Symbole sind zurück. Hoffentlich war das nicht zu viel Wiederholung da drin. Die wichtigsten Dinge zu erinnern, wenn Sie beiseite migrieren, anstatt es nur auf ein leeres Hosting-Konto zu setzen, ist, dass Sie Ihre alte Website verschieben möchten. Zuerst möchten Sie es sichern und dann Ihre alte Site an eine andere Stelle verschieben. Ich möchte meine Datenbank dort behalten, es sei denn, ich muss sie wirklich löschen. Das Wichtigste ist natürlich immer das Sichern. Wie gesagt, das ist ein bisschen eine schmutzige Lösung. Sie möchten sicherstellen, dass Sie immer eine Sicherung durchführen, falls etwas schief geht, und wie Sie gesehen haben, gab es minimale Ausfallzeiten, aber es gab einige Ausfallzeiten, da wir darauf hinwiesen und Fehler behoben haben, aber im Wesentlichen, so würden Sie von einem lokalen hochladen, in ein vorhandenes Ziel mit einer Seite bereits einbauen. Die einzige Sache, die wir nicht behandelt haben, was wiederum ziemlich genau dasselbe ist, ist der Wechsel von einem Staging-Server auf den neuen Server, und was ich dafür empfehle, ist das Herunterladen der Datenbank und der Dateien von , dass der Staging-Server lokal ist, und laden Sie sie dann an den neuen Speicherort hoch. Sie behalten ihn immer auf dem Stagingserver, bis Sie sicher sind , dass er sich in der neuen Domäne befindet, und Sie können ihn dann vom Stagingserver entfernen. Wieder, wenn das kompliziert ist oder wenn Sie irgendwelche Fragen haben, schlagen Sie mich definitiv in der Diskussion. Ich möchte nur noch einmal erwähnen, wenn Sie für eine Agentur arbeiten, haben sie wahrscheinlich eine elegantere Lösung als diese, aber wenn Sie Kundenarbeit leisten und Sie nur eine Website schnell auf dem Client ausschalten müssen s Website, solange Sie sichern und sicherstellen, dass keine Dateien gelöscht werden, sollten Sie ziemlich süß sein. In der nächsten Lektion werden wir darüber sprechen wie Sie Ihr Lernen mit WordPress fortsetzen können, denn in diesem kurzen Kurs waren wir nicht in der Lage, absolut alles abzudecken, und sogar in einem Kurs, der 15 bis 30 Stunden lang war, Wir würden wahrscheinlich nicht in der Lage sein, auch die Hälfte von dem, was WordPress ist in der Lage, zu decken, und die Anpassungen, die Sie tun, um WordPress. Es ist wirklich, die Möglichkeiten sind wirklich unendlich mit WordPress, weil es vollständig Open Source ist, und es gibt so eine riesige Entwickler-Community, viele Plug-Ins, viele Tools, die in WordPress stecken. Wir werden darüber sprechen, wie Sie vorwärts zu bewegen, wenn Sie stecken, und wie Sie mehr über WordPress lernen, mit diesem Kurs als Grundlage, und dann springen Frogging, dass in das Lernen alles, was Sie über WordPress wissen müssen sprechen. Ich freue mich darauf, Sie im nächsten Video zu sehen. 19. Wie du weiterlernen kannst: Also in diesem Video möchte ich mit Ihnen teilen, wie Sie Ihr Lernen in WordPress fortsetzen? Wenn Sie sich an meine vorherige Klasse erinnern, „Understanding Web Development“, erinnern Sie sich vielleicht daran, dass ich über Webentwickler als Expert Googler sprach, im Grunde Experte Problemlöser. Oft gibt es ein Problem, das Sie lösen wollen und es ist eine gute Fähigkeit als Entwickler, Sie müssen nicht wirklich wissen, wie Sie das Problem sofort lösen, sondern in der Lage sein, eine Lösung zu recherchieren. In diesem Fall werde ich ein paar Beispiele machen. Offensichtlich ist Google eine großartige Ressource, aber ich möchte Ihnen zeigen, weil oft die Lösungen, die Sie von Google zurückbekommen , von der Qualität Ihrer Frage abhängen, die Sie in Google gestellt haben. Als Beispiel, ein häufiges Problem, das ich mit Divi habe, ist, wenn ich das Logo einfüge, kommt es ein wenig klein heraus. Also werde ich mit der rechten Maustaste auf „Inspect Element“ klicken und sehen, was wir hier tun können, und ich sehe hier, dass es eine feste maximale Höhe gibt. Es kann also nicht größer als 54 Prozent der Höhe seines übergeordneten div sein. Also, was ich hier tun werde, ist, das auf 100 zu erhöhen, und Sie werden jetzt sehen, dass die maximale Breite ein 100 ist. Die Bildgröße beträgt standardmäßig 800 x 800. Es erlaubt also, auf die volle Breite dieses Headers zu gehen. Idealerweise wollen wir hier etwas Polsterung und wir wollen nicht, dass es die volle Breite einnimmt. Also, was wir hier versuchen können, ist in eine benutzerdefinierte Höhe gesetzt. Wir können bei einer 100 beginnen und dann nach unten skalieren, bis wir anfangen können, eine Änderung zu sehen, und vielleicht wollen wir es über diese Größe, 70 Pixel. Aber sagen wir zum Beispiel, wir wollten, dass die Höhe dieses Bildes ein bisschen größer ist, und damit das passiert, können wir vielleicht diese maximale Höhe hier ganz loswerden. Vielleicht wollen wir, dass es so groß ist, aber offensichtlich wollen wir nicht, dass es sich überlappt und über den Header kommt. Also müssen wir die Größe des Divi-Headers erhöhen. Wenn Sie also nicht wissen, wie das geht, ist ein großartiger Ort, um direkt auf Google zu gehen. Also, was ich hier tun werde, ist? Geben Sie eine Abfrage ein: „Wie man die Kopfzeilengröße in divi erhöht.“ Jetzt ist es wichtig zu beachten, wie ich diese Abfrage erstellt habe, weil dieses Header-Element von Divi angepasst wurde und ich Divi-Theme verwende, das mit Stilen verwandt ist, habe ich darauf geachtet, Divi am Ende zu setzen. Ich hätte in WordPress setzen können, aber das Thema sitzt als eine weitere Schicht auf der Oberseite von WordPress. Also ging ich mit in Divi und das ist etwas, das Sie im Laufe der Zeit herausfinden müssen, was das relevanteste Schlüsselwort ist, dort zu setzen? Aber auch hier wirkt sich die Qualität des Suchbegriffs auf die Qualität der Hilfe aus, die Sie erhalten. Dann habe ich einen guten Deskriptor „Wie man die Header-Größe vergrößert.“ Manchmal ist es viel schwieriger zu beschreiben, wie das, was Sie versuchen zu tun und in diesem Moment ziemlich einfach, aber manchmal müssen Sie möglicherweise verschiedene Variationen der Beschreibung Ihres Problems ausprobieren, und das ist eigentlich der frustrierendste Teil manchmal ein Entwickler zu sein, beschreibt etwas, das ein wenig schwer zu beschreiben ist. Zum Glück für uns ist die Erhöhung der Kopfzeilengröße ziemlich einfach, daher dekonstruieren Sie den Suchbegriff „Wie kann ich die Kopfzeilengröße erhöhen“, also frage ich „Wie kann ich die Kopfzeilengröße erhöhen? Dann setze ich die Plattform oder die Sache, die ich suche, auch hier ein, und Sie werden sehen, wie sich das ändert, wenn wir einige andere Suchbegriffe machen. Also der erste Artikel ist der relevanteste und wir können nach unten gehen und wir können sehen: „Oh, hier geht's“. Wir können Divi so etwas CSS hinzufügen. Also werde ich das kopieren, und ich werde mich in meiner Skillshare Website anmelden, und ich werde zu „Erscheinungsbild Editor“ gehen und mein „style.css Stylesheet“ finden. Ich musste die Passwörter kopieren und einfügen, ich werde das noch einmal kopieren, nach unten scrollen, das in und „Datei aktualisieren“. Nun müssen wir vielleicht die Höhen ein wenig ändern, weil diese nur Standard sind, also hat es die Höhe nicht so geändert, wie wir es wollen. Aber wenn wir zurückgehen und Element inspizieren, sollten wir in der Lage sein, diesen Stil zu ändern. Um es ein wenig zu erklären, verwenden wir hier ein Media-Tag, das wir kurz in der letzten Skillshare Klasse besprochen haben. einem Media-Tag können Sie Stile nur bei bestimmten Bildschirmbreiten beeinflussen. Also hier, wir wenden diese Stile nur an, wenn die Fensterbreite der Seite minimal ist, 981 Pixel. In dieser Situation ist es also größer als 981 Pixel, wie Sie hier sehen können Wenn Sie dort nach oben schauen, kann ich nicht darauf zeigen und gleichzeitig auf „Ziehen“ klicken, aber wenn Sie in die obere rechte Ecke des Fensters schauen, Sie sehen können, es wird mir sagen, was die Pixelbreite ist. Also, wenn wir reingehen, werden wir den Header finden. Also, wenn wir hier schauen, Haupt-Header, was es beeinflusst. Also werde ich darauf klicken. Ich werde nach unten scrollen und ich habe Stile angewendet, um den Stil zu finden, den wir in setzen. Wie oft passiert, ist es nicht da. Also, was ich tun werde, ist, ich werde den Cache aktualisieren, um sicherzustellen, dass wir in der neuesten Version der Datei style.css ziehen. Zurück zum Haupt-Header, ich werde nach unten scrollen und ich kann hier unsere Medienabfrage sehen. Also seine minimale Höhe, 150. Es gilt nicht für, wenn wir in die mobile Ansicht gehen, die bei etwa 980 passiert, aber nach 980, können Sie sehen, die Header ist jetzt 150 Pixel. Es geht also nur darum, hier reinzugehen, vielleicht sind wir mit 150 Pixeln zufrieden. Die zweite ist, wenn der Kopf fixiert wird, wenn Sie mit dem Scrollen beginnen. Wenn Sie sehen, ist es in einer Größe und dann beginnen Sie zu scrollen, es ist eine andere Größe, so dass wir beide für diejenigen beeinflussen können, aber was ich zeigen wollte , war jetzt, dass wir einen größeren Header haben, wir können dies ein bisschen größer machen und vielleicht wir Wir wollen es nicht zu 100 Prozent , vielleicht wollen wir es ein bisschen größer 75 Prozent. Machen wir es 80, 90, und wir können etwas Spielraum oben setzen. Übrigens müssen wir diese Stile in das Stylesheet verschieben. Dies spielt herum und dann wird vielleicht der Rand oben 15 sein. Dann werde ich hier wieder hineingehen, und ich werde das Logo beeinflussen. Ich werde "#logo {margin top: 10px;}“ einfügen und was war das andere, was wir geändert haben? Die maximale Höhe beträgt 90 Prozent. Klicken Sie auf Datei aktualisieren. Außerdem werde ich die Header-Größe reduzieren, weil es nur ein bisschen zu groß ist. Ich werde hier reingehen und das auf etwa dort reduzieren. Sie können mit dieser Zeile hier sehen, wo sich der Header befindet. Ich glaube, ich werde mit 100 gehen. Ich gehe zurück und mache 100 statt 150, und hier mache ich auch 100. Aktualisieren Sie die Datei, und dann werden wir hier aktualisieren. Wir müssen den Cache löschen und erneut laden. Wie Sie sehen können, haben wir ein größeres Logo wegen der Stile, die wir hier angewendet haben, die diese Stile überschreiben und wir haben eine größere Kopfzeile. Wir können wahrscheinlich auch den Header ein bisschen mehr einbringen. Vielleicht auf etwa 85. Um das jetzt zu stoppen, klicken Sie auf Datei aktualisieren, aktualisieren. Möglicherweise müssen Sie erneut auf „Aktualisieren“ klicken. Eigentlich ist der Header ungefähr gleich, also haben wir nicht wirklich viel vom Header geändert, aber der Punkt, den ich mache, ist immer noch da. Wir haben eine Vorstellung davon gefunden, was wir tun wollten, wir gingen zu Google, wir tippten gut, genau hier, dann waren wir in der Lage, die Höhe eines Divi-Headers zu ändern. Nun, wie ich schon bei dieser Abfrage sagte, es gibt wirklich zwei Teile. Es kommt mit einer guten Direktive von dem, was Sie wissen müssen und auch in den Kontext stellen. Ich war klug, den Kontext von divi zu wählen , weil dies ein Styling-Element ist, das natürlich divi kontrollieren würde. Aber sagen wir zum Beispiel, es ist mit E-Commerce verbunden und wenn ich hier in meinen Shop gehe, ist alles noch auf WordPress, aber das Plug-in, das den gesamten E-Commerce für mich verwaltet, ist natürlich Woo Commerce. Wenn ich sagen wollte, möchte ich vielleicht einige Upsells hier hinzufügen, was ich tun würde, ist zu sagen, wie man einem Woo Commerce-Produkt einen Upsell hinzufügt. Wieder habe ich Woo Commerce als Kontext und ich habe die Direktive. Wenn ich gerade gesagt habe, wie man einem Produkt einen Upsell hinzufügt, es nicht an, ob ich auf WordPress bin, welches Plug-in ich verwende, ich könnte jede E-Commerce-Plattform verwenden. Sie müssen es immer in den Kontext der Frage stellen, die Sie stellen. Ich gehe nur einen Schritt zurück, der nächste Schritt wäre zu bewerten, was die Ergebnisse, die kommen. Dieser erste ist von Woo Commerce selbst. Wenn Sie ein Plug-in oder irgendeine Art von Software ausführen, ist der beste Ort, um nach Informationen zu suchen, die Dokumentation. Ich gebe zu, dass die Dokumentation für Software oft auf eine wirklich technische Weise geschrieben wird, die schwer zu verstehen ist . Auf jeden Fall gehen Sie zuerst zur Dokumentation und wenn Sie immer noch nicht verstehen, dann können Sie in Blog-Posts, die es auf eine einfachere Art und Weise erklären könnten , oder anfängerfreundliche Art und Weise. Wie wir hier sehen können, ist hier ein Artikel, wie wir es tun würden. Die letzte, die ich Ihnen zeigen möchte, ist eine wirklich einfache Sache, aber es geht, um die Bedeutung des Kontexts zu zeigen. Wie gesagt, mit dem Ändern etwas mit Styling zu tun, ist Styling weitgehend mit Ihrem Thema zu tun. In einem Premium-Theme wie divi, wenn ich etwas über das Styling dieses Themas ändern wollte, würde ich den Kontext als Divi verwenden, aber sagen wir einfach, ich wollte die Schriftgröße ändern und ich sagte WordPress als Kontext und nicht divi. Ich werde die Schriftgröße in WordPress ändern. Sie können hier sehen, erhalten Sie einen sehr gemeinsamen Link, den Sie in Ihrem WordPress-Forschung sehen , wenn Sie fragen beginnen, Fragen eingeben ist WP beginner.com. Diese Artikel auf dieser Website sind gut für Anfänger, aber oft haben sie einen sehr vereinfachten Ansatz. Außerdem werden Sie aufgefordert, Plug-Ins zu installieren. Ich weiß nicht, ob sie damit Geld verdienen, aber sie sagen immer, wenn Sie nicht wissen, wie man Dinge macht, benutzen Sie einfach ein Plug-in. Sie ermutigen Sie, ein Plug-in für jede einzelne Kleinigkeit herunterzuladen , die Sie tun möchten. Vielleicht wollten Sie die Schriftgröße insgesamt ändern. Möglicherweise sind Sie versucht, ein ganzes Plug-in zu installieren, um dies zu tun. Wie ich bereits erwähnt habe, müssen Sie vorsichtig sein, wenn Sie zu viele Plug-Ins installieren, besonders wenn Sie die Dinge einfacher machen können, ohne ein Plug-In. Immer bewerten, brauchen Sie wirklich ein Plug-in? Aber wieder, es bezieht sich auf den Kontext, in dem wir die Frage gestellt haben. Sie wissen nicht, dass wir Divi benutzen. Wenn wir eingetippt haben, wie man Schriftgröße und divi ändern kann, können wir hier einen eleganten Themes Artikel oben sehen. Wenn ich dann nach unten scrolle, werden sie mit Ihnen alle verschiedenen Optionen teilen, die Sie im Theme-Customizer haben , um die Inhaltsbreite, Seitenleiste Breite zu ändern. Sie können auch die Typografie ändern. Sie können sehen, dass ich die Textgröße mit diesen Zifferblättern ändern kann. Lass uns jetzt einfach reingehen und dir das live zeigen. Ich kann auf den Website-Namen und dann Thema Customizer klicken. Es wird das Thema Customizer für mich öffnen. Ich kann in Allgemeine Einstellungen gehen, Typografie, und hier geht's, ich kann die Textgröße von allem ändern. Wie zuvor können wir die Header Schriftart und Body Schriftart ändern. Sie wissen wahrscheinlich bereits, wie das geht, weil wir das bereits abgedeckt haben. Aber im Wesentlichen, wieder, Ich gehe nur zurück auf den Punkt der Qualitätsfragen in Google und die Dinge, die Sie für Forschung und Qualitätslösungen verwenden , werden herauskommen. Manchmal wird es ein wenig kompliziert und Sie müssen möglicherweise zu etwas wie Stack Overflow gehen. Lassen Sie mich nur an etwas Komplizierteres denken. Vielleicht verwenden wir das Beispiel die Position des vorgestellten Bildes ändern, wie wir es zuvor getan haben. Ich würde eingeben, wie man vorgestellte Bild in Wordpress zu bewegen. Dann haben Sie, wie Sie Featured Bilder hinzufügen, das ist nicht, was wir suchen. Wir können weiter nach unten scrollen und einige dieser Links überprüfen. Sie werden diese Forendiskussion manchmal sehen. Wie Sie hier sehen können, gibt es einen Stack Exchange Link, Stack Exchange und Stack Overflow Foren, in denen Sie sprechen und Hilfe zu Ihren Problemen von der Community in WordPress erhalten können. Aber es ist auch ein großartiger Ort, um die Probleme anderer Leute zu überprüfen und die Lösungen zu überprüfen. Sie können hier sehen, es ist vielleicht nicht genau das, was Sie suchen, aber Sie können durch Ihre Forschung, sehen Sie sich diese verschiedenen Stack Overflow, Stack Exchange Probleme und Lösungen und es kann Ihnen helfen, Ihre eigenen -Lösung. Dies geht am komplizierteren Ende, wenn Sie eine wirklich einfache Frage haben, wie ich zuvor gezeigt habe, wie man die Kopf- und Fußzeile als Kopfzeilengröße in divi erhöht und wie man die Schriftgröße vergrößert. Sie könnten eine wirklich einfache Antwort bekommen. Manchmal, wenn Sie etwas etwas etwas komplizierteres ändern möchten , müssen Sie sich möglicherweise mit diesen verschiedenen Stack-Überlauf-Fragen befassen. Diese werden alle mehr von Entwicklern geschrieben. Sie werden mehr Code-Lösungen sein und es ist eine Balance, am Ende des Tages. Darum geht es in diesem Kurs. Wir verwenden einen Seitengenerator und eine Nicht-Code-Lösung, um viele Dinge zu tun, für die wir wirklich nicht in Code graben müssen. Wenn wir dann dieser Entwickler sein müssen, wenn wir in Code graben müssen, können wir das auch tun. Manchmal müssen Sie nur die Header-Größe ändern und es erfordert nur ein bisschen CSS oder die Schriftgröße. Sie können das einfach in Optionen tun, mit Klick und Ziehen. Manchmal wird es einige Änderungen auf PHP-Code-Ebene oder CSS-Änderungen erfordern .. Hoffentlich hilft das Ihnen bei Ihrer laufenden Forschung, mehr über WordPress zu erfahren. Denken Sie daran, Qualitätsfragen in, führt zu Qualitätsfragen heraus und vergessen Sie nicht den Kontext. Wenn Sie Hilfe benötigen, um herauszufinden, wie Sie Probleme in Google oder in der Dokumentation einer der Software, die Sie verwenden, ob es WordPress oder ein bestimmtes Plug-in oder Thema in WordPress zu recherchieren der Dokumentation einer der Software, die Sie verwenden, ob , verlassen Sie auf jeden Fall Ihre Fragen in der Diskussion unten. Ich sehe dich auf dem nächsten Video. 20. Bonus: Mitglieder-Seiten: Dies ist eine Bonusstunde für alle, die daran interessiert sind, eine Mitgliederseite aufzubauen, ob jetzt oder in der Zukunft. Wenn Sie überspringen wollen, werden wir den Kurs im nächsten Video abschließen und Ihnen das Klassenprojekt übergeben. Aber wenn Sie sich für Mitgliedschaft Websites überhaupt interessiert sind, bleiben Sie dran, weil ich nur werde Ihnen zeigen, meine eigene Mitgliederseite, und wie einfach es ist, für den Fall, dass Sie Ihre eigene Mitgliedschafts-Website einrichten oder tun, dass für einen Kunden. Die Mitgliederseite, die ich habe, befindet sich in einer Sub-Domain einer meiner Websites, christhefreelancer. Wie Sie sehen können, wenn Sie dorthin gehen, heißt es, dass Sie sich anmelden müssen, um diesen Inhalt anzuzeigen. Das werde ich jetzt tun. Jetzt bin ich ein WordPress-Admin, also wenn ich mich einlogge, werde ich vollen Zugriff haben, um die Website zu bearbeiten. Ich werde in WP Admin gehen, und Sie werden hier sehen, ich habe alle die gleichen Zugriffsrechte. Aber für eine Person, die nur ein Benutzer dieser Mitgliederwebsite ist, haben sie die gleiche Menüleiste, aber sie haben nicht die Möglichkeit, die Seite zu bearbeiten. Sie haben diese aktuelle Vorlage nicht angezeigt. Sie werden nicht in der Lage sein, neue Beiträge zu erstellen. Es wird nur eine bloße WordPress-Admin-Bar hier oben sein. Dann, sobald sie hier sind, haben sie die Möglichkeit, ihre Benutzereinstellungen zu ändern, aber nichts an der Website zu ändern. Dies ist nur eine kleine Mitgliederseite, die ich als Videoguide für Chiang Mai, Thailand, eingerichtet habe, was ich ein Publikum, das daran interessiert ist. Was ich getan habe, ist, dass ich gerade Videos von Vimeo eingebettet habe. Genau hier kann dieser Bearbeitungs-Button für Personen angezeigt werden, die keine Administratoren sind, aber im Grunde hat er verschiedene Seiten. Wenn wir hier schauen, gibt es die Seitenadresse und es ist alles eingeschränkt. Was ich tun kann, um zu demonstrieren, ist eine Inkognito-Tab zu öffnen , die sicherstellt, dass ich abgemeldet bin. Ich kann diesen Link einfügen, und wie Sie sehen können, ist er völlig eingeschränkt. Es heißt, Sie müssen sich einloggen. Wenn Sie kein Mitglied sind, klicken Sie hier, um sich anzumelden. Dort gelangen Sie zur Verkaufsseite. Im Wesentlichen können Sie Ihre WordPress-Website in eine Mitgliedschaft Website leicht mit einem Plugin verwandeln . Sie können dies wahrscheinlich ohne ein Plugin tun. Aber ehrlich gesagt, ein Plugin macht es einfach so viel einfacher, vor allem, wenn Sie Zahlungen nehmen wollen. Mit dieser Mitgliederseite, wenn jemand auf die Verkaufsseite kommt, kann er den Kurs sofort kaufen, und ich muss nicht, um ihnen die Mitgliedschaftsdetails oder irgendetwas zu senden. Sie gehen buchstäblich nur zu PayPal, zahlen das Geld es kommt zurück, und sie erhalten Zugriff und erhalten ihre Login-Daten. Vollständig automatisiert, und es lohnt sich, wenn Sie eine Mitgliedschaftswebsite wünschen. In meiner besonderen Situation heißt das Plugin, das ich verwende, Restrict Content Pro. Was es tut, ist es in einem Restrict Menü hier hinzugefügt. Was ich tun kann, ist, dass ich meine Mitgliederliste hier einsehen kann. Ich kann eingehen und verschiedene Mitglieder bearbeiten. Ich kann ihre Abonnementstufe wählen, was Sie woanders einrichten. Es gibt einen Baumstamm. Ich kann die Zahlung sehen und was sie bezahlt haben, den Abonnementschlüssel für PayPal. Im zweiten Menü kann ich die Abonnementstufen einrichten. So können Sie diktieren, welche Seiten von welchen Teilnehmerstufen aufgerufen werden können. Wenn Sie dann Benutzer registrieren, legen Sie fest, auf welcher Abonnementstufe sie sich befinden. Auf der Seite davon, was wir sehen können, ist, dass wir zu einer Seite gehen können. Lassen Sie uns auf Ratschläge gehen, um Thai zu lernen. Wie Sie hier sehen, ist es nur ein Standard-WordPress-Editor. Dies ist genau das Gleiche, wie Sie eine Seite für eine Nicht-Mitgliedschafts-Website ausführen würden. Was ich getan habe, ist, dass ich die Seiten vollständig mit HTML erstellt habe, da dies auf einem benutzerdefinierten Thema basiert. Im Wesentlichen, wenn ich das noch einmal mache, würde ich es höchstwahrscheinlich mit einem Page Builder bauen. Also muss ich nicht jede Seite von Grund auf neu codieren. Das ist nur eine Lektion, die ich gelernt habe, es ist viel effizienter, Websites mit dem Page Builder zu erstellen. Aber ich bin hier abgewissen. Was ich Ihnen zeigen wollte, geht hier unten zu diesem Abschnitt , der von Restrict Content Pro hinzugefügt wird, und es heißt „Diese Inhalte beschränken“. Ich kann auswählen, wer auf diese Inhalte zugreifen kann. „ Jeder“ wird es öffentlich machen. Dann kann ich auch die Zugriffsebene definieren, die es mir erlaubt, Ebenen bis zu zehn oder mehr festzulegen . Es gibt nur eine Zahl und es macht es einfacher, dass, wenn die Zahl größer ist als die Zugriffsebene, die Sie haben, dann können Sie darauf zugreifen. Sie können es auch auf Benutzerrollen in WordPress basieren. Aber ich fand den einfachsten Weg darin, nur eine Abonnementstufe zu erstellen und sie dann Mitgliedern einer bestimmten Abonnementstufe zuzuweisen. Dann, offensichtlich, wenn ich hier in meine Einstellungen für Restrict Content Pro gehe, denke ich in den Einstellungen, kann ich wählen, wohin das Geld tatsächlich geht. Die Währung, Ich kann hier in Abonnement-Level gehen und wählen, wie viel ein Abonnement kostet, und ich kann sehen, wie viele Leute haben diese Abonnementstufe abonniert. Es gibt mir all diese Möglichkeiten. Ich muss nichts programmieren, außer wenn ich die Seiten codieren möchte. Das ist meine Lösung für Mitgliedschaften Websites. Das ist nur in einer theoretischeren Grundlage für Sie abgedeckt. Möglicherweise möchten Sie ein anderes Mitgliedschafts-Plugin verwenden. Grundsätzlich können Sie einfach eine Website bauen, wie Sie es normalerweise auf WordPress tun würden. Aber dann ist der Unterschied zwischen einer Mitgliederseite und einer regulären öffentlichen Website, offensichtlich, die Seiten sind auf Mitglieder beschränkt. In diesem Fall können Sie ein Mitgliedschafts-Plugin anschließen und Inhalte basierend auf dem Mitgliedschaftsstatus von Personen einschränken. Mit WordPress ist es standardmäßig, dass WordPress die Möglichkeit hat , Benutzer und Benutzer können sich anmelden. Aber durch ein Plugin, ermöglicht es Ihnen, leicht zu verwalten, welche Seiten auf welche Abonnementstufen sichtbar sind, und dann auch Zahlungen am Front-End akzeptieren. Ich wollte nur ein wenig über Mitgliedschaftsseiten berichten, nur für den Fall dass Sie eine Mitgliederseite veröffentlichen würden. Da es etwas ist, in dem ich ein wenig Erfahrung hatte, dachte ich, ich würde meine Erfahrung mit euch teilen. Danke, dass du diese kleine Bonusstunde gesehen hast. Im nächsten Video werden wir abschließen und Ihnen Ihr Klassenprojekt geben. Wir sehen uns im nächsten Video. 21. Aufarbeitung und Kursprojekt: Alles klar, es ist Zeit, diesen Kurs abzuschließen und Ihnen den Einstieg in Ihr Klassenprojekt zu bringen. Inzwischen sollten Sie verstehen, wie WordPress funktioniert und haben eine gute Vorstellung davon wie man eine WordPress-Website aus der Perspektive eines Entwicklers zu bauen. Idealerweise sollten Sie jetzt ein Verständnis von WordPress und was es tut, Divi als ein Thema und ein Page Builder für WordPress, wie Sie Inhalte zu Ihrer Website hinzufügen, wie Seiten zu bauen, wie Seiten zu bauen, die WordPress-Template-Hierarchie, , wie Sie Ihren Code sowohl auf Page Builder-Ebene als auch im Back-End anpassen, Plugins und wie Sie Ihre WordPress-Website bereitstellen und migrieren. Es gibt offensichtlich eine Menge mehr Details, auf die wir in diesem Kurs eingehen könnten. Aber denken Sie daran, das Wesentliche sind, was Sie für die Entwicklung von WordPress-Websites als Freiberufler oder Agentur verstehen müssen. Wie ich in meiner vorherigen Klasse erwähnt habe, sollten Sie in der Lage sein, Lösungen zu erforschen, wenn Sie stecken, und jetzt durch Ihr Kernverständnis der Entwicklung für WordPress, sollten Sie in der Lage sein zu verstehen, wo Sie Ihre Forschung beginnen, wenn müssen etwas aufbauen, das in diesem Kurs nicht genau behandelt wurde. In unserem Klassenprojekt ist es an der Zeit, all dieses neue Wissen zusammen zu bringen, um eine WordPress-Website im Internet zu erstellen und zu veröffentlichen. Ihr Klassenprojekt wird einer Sequenz folgen, die sehr ähnlich ist, was wir bereits in dieser Klasse gemacht haben, es ist nur, dass es jetzt an Ihnen liegt. Wie immer, wenn Sie zusätzliche Hilfe benötigen, hinterlassen Sie mir einfach einen Kommentar in der Diskussionsbox und stellen Sie sicher, dass Sie meiner Seite hier auf Skillshare folgen , um aktualisiert zu werden, wenn ich eine neue Klasse veröffentliche. Alles klar, Leute, das schließt den Kurs, ich möchte Ihnen so sehr danken, dass Sie zugesehen haben und ich freue mich auf Ihre fertigen Klassenprojekte zu sehen. Viel Glück, und wir sehen uns im Diskussionsbereich.