[Vc_row content_placement = "middle" css = "vc_custom_1508940533685 {background-color: #f8f6f6 Wichtig;}." El_id = "themeforestpro"] [vc_column width = "3 / 4" css = „vc_custom_1502759058885 {margin-bottom: 0px. wichtig; border-bottom-width: 0px signifikant; padding-bottom: 0px signifikant;} „] [vc_column_text]!

Divi: das am einfachsten zu verwendende WordPress-Theme

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] DOWNLOAD [/vcex_button][/ vc_column][/vc_row]

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen.

Wenn Sie Software oder Programmiertipps anbieten, möchten Sie auf jeden Fall Codefragmente freigeben. Diese Art der Freigabe von Codefragmenten kann ihnen helfen, schnell eine Praxis einzurichten. Das Freigeben von Code mit allen erforderlichen Formatierungen ist jedoch standardmäßig nicht möglich. Was ich unter Formatierung verstehe, ist das Hervorheben der Syntax. Trotzdem ist es ziemlich einfach.

Wenn Sie divi verwenden, sollten Sie glücklicherweise wissen, dass es eine integrierte Methode gibt, um dies manuell zu tun, um diesen Snippets benutzerdefinierte Stile hinzuzufügen. Darüber hinaus gibt es Plugins und Ressourcen von Drittanbietern, die das Erstellen gut aussehender und funktionaler Snippets in Divi erheblich vereinfachen können.

In diesem Tutorial zeige ich Ihnen, wie Sie Codefragmente in Divi (manuell) freigeben. Außerdem zeige ich Ihnen, wie Sie mit Divi Builder Snippet-Blöcke entwerfen, die Sie auf die nächste Ebene bringen.

Übersicht

Hier ist eine Übersicht über die in diesem Tutorial möglichen Snippet-Designs.

Die Code-Snippet-Boxen mit Code-Snippets haben den manuellen Modus hinzugefügt.

Voraussetzungen für das Tutorial

Für dieses Tutorial benötigen Sie lediglich das installierte und aktive Divi-Thema. Wir werden die Code-Snippet-Beispiele mit Divi Builder auf einer neuen Seite von Grund auf neu erstellen.

Erstellen Sie zunächst eine neue Seite und stellen Sie Divi Builder auf der öffentlichen Oberfläche bereit. Wählen Sie dann die Option "Von Grund auf neu erstellen".

Jetzt können Sie loslegen!

Entwurf einer personalisierten Box für Code-Schnipsel auf Divi

Da sich unser Code-Snippet in einem Textmodul befindet, können wir den Divi Builder verwenden, um dem Textmodul (und seiner Umgebung) Designelemente hinzuzufügen. Für dieses Design verwenden wir ein Zusammenfassungsmodul, das als Beschriftung für das Snippet dient. Als nächstes formatieren und positionieren wir den Cursor links vom Textmodul. Als nächstes werden wir das Textmodul unseres Snippets formatieren.

Erstellen des Abschnitts, der Zeile und der Spalte

Wir müssen zuerst einen neuen Abschnitt mit einer Zeile einer Spalte erstellen.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie erstellen Einfach und kostenlos jedes Website- oder Blog-Design mit einem professionellen Look. Hören Sie auf, viel für eine Website zu zahlen, die Sie selbst erstellen können.

Aktualisieren Sie dann die Leitungsparameter wie folgt:

Dachrinnenbreite: 1
Benutzerdefinierte Polsterung: 0px oben und 0px unten

Fügen Sie den Textbaustein hinzu

Fügen Sie dann der Zeile einen Textbaustein hinzu.

Sie können den Standardinhalt beibehalten. Wir werden später unsere WordPress-Schnipsel hinzufügen. Lassen Sie uns zunächst das Textmodul modellieren, indem Sie die folgenden Textparameter aktualisieren:

Hintergrundfarbe: # eff0f1 Textfarbe: # 000000 Benutzerdefinierter Rand: 60px links Benutzerdefinierte Polsterung: 3% oben, 3% unten, 3% links, 3% rechts

Breite des oberen Randes: 10px Farbe des oberen Randes: # 7cda24

Erstellen des Snippet-Labels

Zum Erstellen des Snippet-Labels verwenden wir ein Klappentextmodul. Auf diese Weise können Sie neben der angezeigten Codesprache ein Klappentext-Symbol (oder ein benutzerdefiniertes Bildsymbol) hinzufügen.

Sie möchten Ihre Produkte im Internet verkaufen?

Laden Sie WooCommerce kostenlos herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen und ganz einfach Ihren Online-Shop zu erstellen. Perfekt für Anfänger.

Erstellen Sie ein Präsentationsmodul und ziehen Sie es über das Textmodul. Aktualisieren Sie anschließend die folgenden Präsentationseinstellungen:

Titel: css Inhalt: [fiktiven Inhalt entfernen] Symbol verwenden: JA Symbol: siehe Screenshot

Aktualisieren Sie dann die Entwurfsparameter wie folgt:

Hintergrundfarbe: # 1b2426 Symbolfarbe: # 7cda24 Bild- / Symbolposition: links Schriftgröße: 20px Texttitel Farbe: #ffffff Textgröße Titel: 16px

Titelzeilenhöhe: 1.3em Breite: 100px Benutzerdefinierter Rand: -44px unten, -50px links Benutzerdefinierte Polsterung: 10px oben, 2px unten, 15px links, 15px rechts

Duplizieren Sie den Abschnitt, um weitere Snippet-Box-Designs zu erstellen

Dies unterstützt unser erstes Code-Box-Design. Jetzt müssen wir nur noch den Abschnitt mit dem Codeblockdesign duplizieren und die Beschriftung und die Farben aktualisieren, um einen neuen Codeblock für eine andere Codierungssprache zu erstellen. Dies ist natürlich optional, aber wenn Sie einer Seite verschiedene Snippets hinzufügen möchten, ist es hilfreich, für jede Seite ein anderes Farbschema zu haben.

Duplizieren Sie beispielsweise den Abschnitt und öffnen Sie die Einstellungen des Blurb-Moduls.

Aktualisieren Sie den Titel auf "js" für Javascript.

Klicken Sie dann mit der rechten Maustaste auf Bild- / Symbolfarbe und wählen Sie Suchen und Ersetzen.

Aktualisierte Such- und Ersetzungsoptionen:

In: diesem Abschnitt Ersetzen durch: [neue Farbe] Alle ersetzen: Aktivieren Sie alle gefundenen Werte ersetzen

Sie haben jetzt einen neuen Snippets-Block für JS-Snippets.

Hier ist ein Beispiel für Snippet-Boxen für beliebte Codetypen für WordPress.

Verwenden des Prettify Code-Plugins, um manuelle Codeausschnitte mit Syntaxhervorhebungen zu versehen

Nun, es ist wahr, dass Sie mit der manuellen Methode sofort Text einfügen und übergeben können. die Prettify Code Plugin fügt sofort hervorgehobenen Code zu allen "Pre" -Tags hinzu. Das Schöne an diesem Plugin ist, dass absolut keine Anpassung erforderlich ist. Sie müssen lediglich das Plugin herunterladen und aktivieren.

Hier ist ein Beispiel, wie der Code mit Active Prettify Code aussehen wird.

Code Prettify kommt Google und wird auch verwendet, um all diese wunderbaren Schnipsel zu stilisieren stackoverflow.com.

Um zu beenden

Das Anzeigen von Codefragmenten auf Divi muss nicht schwierig sein. Das manuelle Hinzufügen der Snippets mithilfe der von WordPress bereitgestellten Pre- und Word-Code-Tags erledigt die Aufgabe für die meisten Nicht-HTML-Snippets. Sie müssen das Snippet jedoch zuerst über einen Encoder ausführen. HTML, um sicher zu sein. Darüber hinaus können Sie den Snippet-Textstil mithilfe der Einstellungen des Textmoduls weiter anpassen. Und vergessen Sie nicht, Code Prettify zu verwenden, um Ihren manuellen Snippets eine Hervorhebung hinzuzufügen.

Für diejenigen unter Ihnen, die regelmäßig Snippets teilen, ist die Verwendung des SyntaxHighlighter-Plugins wahrscheinlich die beste Wahl. In beiden Fällen haben Sie immer die Möglichkeit, Ihren Snippets mit Divi Builder kreativere Designs hinzuzufügen.

Bonne Chance.

2 Aktien
Aktie2
tweet
Registrieren