Text im footer ändern

Text im footer ändern

So schön und funktional das Divi Theme auch daher kommt. Trotz der vielen Einstellungen ermöglicht das Divi Theme von Haus aus keine einfache Änderung des Textes im untersten Bereich (Footer) der Homepage, der sogenannten Bottom Bar. Hier prangt stets der Text „Designed by Elegant Themes | Powered by WordPress“.

Divi Theme Bottom Bar im Footer

Das ist in der Regel eines der ersten Dinge, die man verändern möchte. Auch wenn es dafür keine direkte Einstellung gibt, ist eine Anpassung problemlos möglich. Es gibt mehrere Varianten, die allerdings meist voraussetzen, dass man ein Child Theme des Divi Themes erstellt hat. Falls du noch kein Child Theme erstellt hast, findest du hier eine Anleitung dazu: „Divi Child Theme anlegen„.

Wenn ein Divi Child Theme vorhanden ist, dann kannst du eine der folgenden Möglichkeiten nutzen.

Variante 1: Divi Theme Footertext per CSS verstecken

Nicht die eleganteste Variante, aber dafür eine schnelle einfache Lösung. Wenn man selbst keinen eigenen Text in dem Footerbereich anzeigen lassen will, kann man entweder den untersten Teil des Footers, die sogenannte Bottom Bar komplett ausblenden oder nur die Anzeige des Textes verstecken.

Die komplette Bottom Bar ausblenden

Dazu trägt man folgenden CSS Code in die style.css Datei seines Divi Child Themes ein:

Nur den Text in der Bottom Bar ausblenden

Dazu trägt man folgenden CSS Code in die style.css Datei seines Divi Child Themes ein:

Variante 2: Divi Theme Footertext in Divi Optionen anpassen

Falls dir das Bearbeiten des Codes in der footer.php oder style.css Datei nicht behagt, kannst du auch jQuery und die Divi Theme Optionen nutzen.

Dazu gehst du im WordPress Backend zu den Einstellungen unter …

„Divi“ > „Theme-Optionen“ und dort auf den Reiter „Integration“.

Divi Theme Optionen: Footer anpassen

Hier gibt es ein Optionsfeld mit dem langen Titel „Code dem < body > hinzufügen (hilfreich beim Verfolgen von Codes wie beispielsweise Google Analytics)“. In dieses Feld trägst du folgenden jQuery Codeschnipsel ein:

Ergebnis:

Divi Theme Footer Beispieltext #1

 

Den Satz „Deine Seite und alles was du hier noch stehen haben möchtest!“ ersetzt du mit dem von dir gewünschten Text für deinen Footer. Wie du siehst, solltest du darauf achten sogenannte HTML-Entitäten für Umlaute und Sonderzeichen zu nutzen, damit es keine Darstellungsprobleme gibt.

Du kannst auch einen Link auf deine Seite einbauen und mit einer kleinen Funktion stets die aktuelle Jahreszahl anzeigen lassen:

Ergebnis:

Divi Theme Footer Beispieltext #2

Variante 3: Divi Theme Footertext in footer.php anpassen

Das ist die „ordentliche“ Variante bei der du generell lernst wie man spezielle Bereiche anpassen kann. Für die Anzeige des Footerbereichs ist beim Divi Theme die footer.php Datei zuständig.

1 Du erstellst eine Kopie der orginalen footer.php Datei aus dem Divi Theme Ordner in deinem Divi Child Theme Ordner.

2 Du öffnest diese kopierte footer.php in einem Editor und suchst nach der zuständigen Code Zeile, die für die Ausgabe des Textes zuständig ist (zum Zeitpunkt der Erstellung dieses Textes stand der Code in Zeile 40 der footer.php):

Den gesamten Code zwischen <p id=“footer-info“> und </p> kannst du löschen und durch den von dir gewünschten Text ersetzten, wie z.B.

Wie du siehst, solltest du hier ebenfalls darauf achten sogenannte HTML-Entitäten für Umlaute und Sonderzeichen zu nutzen, damit es keine Darstellungsprobleme gibt.

Auch mit dieser Vorgehensweise lässt sich wie bei der 2. Variante automatisch die aktuelle Jahreszahl mit ausgeben:

Ergebnis:
Divi Theme Footer Beispieltext #2

 

Variante 4: Das Divi Booster Plugin nutzen

Das Divi Booster Plugin bietet für 19$ über 50 zusätzliche Einstellmöglichkeiten zum Divi Theme. Natürlich gibt es in dem Plugin auch eine Option für die Veränderung des Textes in der Bottom Bar.

Weitere Anpassungen in der Bottom Bar

Wie du Farben, Schriftart und -größe und die Social Icons in der Bottom Bar anpassen kannst erklären wir in einem der nächsten Tutorials.

Das Divi Blog-Modul

Das Divi Blog-Modul

Grundsätzlich bietet WordPress die Wahl zwischen der Ansicht „GanzerText“ oder „Kurzfassung“. Die entsprechenden Einstellungen werden unter ==> Einstellungen ==> Lesen gemacht. (Siehe unten). pfadausschnit

Das Blog-Modul von divi enthält einige features, welche insbesondere für Blogger sehr interessant sind . Man kann nämlich das Newsfeed in Form von Textblöcken mit dem featured picture (Beitragsbild) und Kuztext (Excerpt) als auch in unereinander angeordneten Excerpten oder der Ganztextdarstellung  anordnen. Zudem können die Excerpte individuell farblich gestaltet werden. Wie das ganze genau gemacht wird werde ich in dem folgenden Tutorial zeigen.

 

 

 

Das Divi Blog-Modul

Erstellen Sie zuerst eine Seite und geben Sie ihr den Namen der Kategorie oder mehrerer Kategorien, welche dieser Seite bzw.diesem Blogbereich zugeordnet werden sollen. Die entsprechende Seite wird im Menü unter den Beiträgen im Dropdown-Bereich eingefügt.

Blog-ModulWählen Sie Standardsektion und fügen Sie das Modul-Blog ein.

Beim bearbeiten des Blog-Moduls sehen wir die unten dargestellte Ansicht. Wir haben jetzt die Möglichkeit, zu entscheiden, welche Beiträge innerhalb dieses Blog-Moduls erscheinen sollen. (siehe unten)

Blog-Modul

Durch setzen des Häkchens bei Divi erscheinen hier alle Beiträge zur Kategorie Divi. Es können natürlich auch noch weitere Kategorien angeklickt werden!

Möchte man die Beiträge in einzelnen Blöcken mit Excerpt darstellen so wählt man oben „Gitter“. Beiträge in Vollgröße sind „Volle Breite“.

Beiträge in der Normalansicht

Blog-Modul

Beiträge als Gitter

grid

Gestaltung des Mehrlesn Buttons

die Gestaltung des Mehrlese-Buttons ist in divi ein wenig zu kurz gekommen. Es ist aber nicht schwierig, dieses Problem zu lösen, wenn man die relevante css Klasse in die style.css zieht und den Bereich ein wenig bearbeitet.

a.more-link { border: 2px solid; width:150px; border-radius: 10px; display: inline-block; margin-top: 10px; padding: 3px 10px; text-transform: uppercase; /*border-radius*/

padding:8px 16px;
margin-top:10px;
color:white;
border:3px solid #d8dcdc;
font-family:Georgia,serif;
font-style:italic;
font-size:16px;
background-color:blue;}

Divi und das CSS box Modell

Divi und das CSS box Modell

Wie muss man die Elemente von Divi in Bezug zum CSS box modell interpretieren?

Divi geht vom cxx-box-Modell aus. Man immer vom Inhaltsbereich ausgehen. Der Inhaltsbereich kann mit einem Rand versehen werden und zu diesem Rand wird mit Padding eine Abstand definiert. Mit margin wiederum wir der Abstand zum nächsten Element (i.d.R. ein div-container) fesstgelegt.

 

Abb.:107_01-eca402a6

 

Mit Divi muss man sich das wie unten dargestellt vorstellen.

Bildschirmfoto vom 2016-05-30 15:18:13

Abb.:2

Wenn jetzt aber nur ein Hintergrundbild dargestellt werden soll. VGL Abbi3

Bibild

Abb.:3

Dann muss dieses in der äußeren blauen Reihe eingefügt werden. Das Bild wiederum soll Hintergrund zum Inhalt sein.

Der Inhalt ist aber eigentlich leer und somit würde das Hintergrundbild auch nicht oder nur unvollständig angezeigt.

Das Problem lässt sich dadurch lösen, dass im Inhaltbereich ein transparentes Bild (als png-format) in der Göße des Hintergrund-Bildes eingefügt wird.

Also das Bild öffnen mit gimp –> neue Ebene –> Bild löschen –> speichern im png-Format

 

In den Seitenkopf unterhalb der Menüleiste ein Bild einfügen

In den Seitenkopf unterhalb der Menüleiste ein Bild einfügen

Hintergrundbild im Seitenkopf

Unter dem Menü Bild einfügen

Unter dem Menü Bild einfügen ist ganz einfach, wenn man ein wenig css versteht. Geht man nämlich mit der F12-Taste auf die html-Seite und sucht nach dem div Kontainer im header wird man rDas Divi-theme bietet elativ schnell auf  <div id = main header > stossen. In diesen container müssen wir das Bild als Hintergrundbild einfügen. Hierzu in der Style.css folgendes eingeben:

background-image: url(link zum Bild); eingeben. Den „;“ nicht vergessen.

Wie gelangt man aber auf die Style-css. Hierzu gibt es verschiedene Möglichkeiten.

  1. Man geht mit einem ftp-Programm wie z.B. „file-Zilla“ auf den Server und bearbeitet dort die style.css.
  2. Man hat ein Child-Theme angelgt und kann nun direkt auf die style.css im editor gelangen. 
  3. Das Divi theme bietet verschiedene Möglicheiten die style.css zu bearbeiten.

 

 

Mit Extra-Beiträge gestalten

Mit Extra-Beiträge gestalten

Divi bietet sehr viele Möglichkeiten, die Blogbeiträge adäquat zu präsentieren

Beiträge gestalten mit Extra

Beiträge gestalten mit Extra. Ich muss allerdings zugeben, dass ich einige Zeit benötigt habe, bis ich herausbekam wie es geht. Denn leider gibt es zu den recht ausführlichen Dokumentationen und Videotutorials keine deutsche Übersetzung.

Nun folgt eine Darstellung, wie grundsätzlich vorzugehen ist:

divi_excerpt

Sobald man sich in der Ansicht der Blogexcerpte befindet erscheint in der Menüleiste der Eintrag Edit Layout.

Klickt man hier so gelangt man in einen neuen Bereich, welcher die unteschiedlichsten Möglichkeiten für die Darstellung der Excerpte der  Blockbeiträge ermöglicht.

 

 

 

Unten das Bild zu dem feature. Ich habe hier blog feed masnory verwendet. Hiermit können Blockelemente wie zum

layout

der „read more button“ manipuliert werden.

Der „featured post slider“ bedingt, dass die Beitragsbilder (features)  in einem slider dargestellt werden.

 

Was noch fehlt wäre die individuelle Gestaltung des „read more buttons“ in weiterlesen. Das kann zwar über die functions.php erreicht werden. Ich möchte aber auf der Oberfläche von Divi bleiben. Auch die Anpassung der Excerpt-Texte bezüglich ihrer länge sollte eine individuelle Handhabung möglich machen, so dass man „Weiterlesen“ einstellt, wenn der Excerpt-Text eine bestimmte individuelle Reichweite erreicht hat.iese 

Die angesprochenen Möglichkeiten bietet aber nur das Extra-Theme von elegant Themes. Mit Divi ist dies zumindest bist jetzt noch nicht möglich. Allerdings bereitet mir das Extra Theme Probleme, wenn ich ein Child theme erstellen möchte. Deshalb bin ich vorerst mal vom Extra theme abgekommen.

Fotos mit WordPress verwalten

Fotos mit WordPress verwalten

Fotos mit WordPress ablegen und übersichtlich machen

Fotos mit WordPress verwalten

Fotos mit WordPress verwalten. Geht es Ihnen nicht auch so. Da hat man Urlaubsfotos ohne Ende und man lässt diese schliesslich auf irgendeiner Festplatte des Computers verkommen. Nach ein paar Jahren ist der Überblick total weg. Dabei gäbe es immer wieder mal Gelegenheit, bestimmt Fotos gemeinsam mit den Kindern, Verwandten oder Freunden anzuschauen! Wenn man Pech hat geht auch noch die Festplatte kaputt und man hat vergessen zu sichern.

Die Lösung all dieser Probleme heißt wordpress!

Fotos mit WordPress verwalten

(mehr …)

Zum Newsletter anmelden

Zum Newsletter anmelden

Melden sie sich zum meinem Newsletter an und Sie erhalten ein Geschenk

Sie haben sich erfolgreich angemeldet