Die Zeiten der Mega-Themes voller Funktionen scheinen vorbei zu sein, während schlankere Themes auf dem Vormarsch sind, die Unterstützung für Plugins von Drittanbietern bieten. Das Hinzufügen von Unterstützung für einen Seitenersteller ist eine großartige Möglichkeit, Ihren Benutzern zusätzliche Leistung zu geben Es geht darum, eine Website mit Ihren Themen zu erstellen. Wenn Sie darüber nachdenken, würden wir uns freuen, wenn Sie Beaver Builder als Ihren Seitenersteller wählen würden.

Beaver Builder funktioniert sofort nach dem Auspacken hervorragend mit fast jedem Thema. Bisher glaube ich nicht, dass wir tatsächlich von einem einzigen Thema gehört haben, mit dem es nicht funktioniert. Trotzdem gibt es noch ein paar Dinge, die Sie tun können, damit es noch besser funktioniert. Bevor ich auf die wesentlichen Details eingehe, hier einige Gründe, warum ich Beaver Builder für eine gute Wahl halte …

• Für Ihre Benutzer ist der Einstieg einfach, da auf wordpress.org eine Lite-Version verfügbar ist, mit der sie loslegen können, ohne einen einzigen Dollar auszugeben.
• Mit unserem Leitfaden für benutzerdefinierte Module können Sie benutzerdefinierte Module erstellen, die in Ihrem Theme gebündelt werden können.
• Kein Aufblähen hier. Beaver Builder lädt nur die Skripte und Stile, die es auf einer bestimmten Seite benötigt, nicht alles, was es gibt.
• Wir haben Beaver Builder so entwickelt, dass er einfach zu bedienen ist und dennoch über genügend Leistung verfügt, um die Arbeit zu erledigen. Einfachheit liegt uns immer am Herzen, Sie werden es also nicht mit den Funktionen übertreiben.
• Ihre Benutzer sind bei Problemen in guten Händen. Wir bieten wirklich erstaunliche Unterstützung.

Wenn Sie nach tollen Beispielen anderer suchen, die Beaver Builder-Unterstützung in ihren Themes bieten, sind Sie bei unseren Freunden von WebMan Design und UpThemes genau richtig. Wir fühlen uns sehr geschmeichelt, dass sie sich entschieden haben, unseren Seitenersteller zu unterstützen, und hoffen, dass andere ihrem Beispiel folgen.

Klingt gut? Hier erfahren Sie, wie Sie es schaffen.

Targeting von Elementen mit CSS nur auf Beaver Builder-Seiten

Eines der häufigsten Dinge, die in diesem Beitrag getan werden müssen, ist die gezielte Ausrichtung auf bestimmte Elemente nur auf Beaver Builder-Seiten. Ganz gleich, ob es sich um Ihren Header, den Inhaltswrapper, die Schaltflächen oder etwas anderes handelt, das ist leicht zu erreichen, da jede Beaver Builder-Seite eine Klasse im Hauptteil mit dem Namen fl-builder hat (alle unsere Inhalte haben das Präfix „fl“, weil die Muttergesellschaft von Beaver Builder benannt ist). FastLine Media). Wenn Sie wissen, dass sich diese Klasse im Hauptteil befindet, können Sie spezifisches CSS für Beaver Builder-Seiten schreiben.

Wie? Nehmen wir an, Sie möchten den Content-Wrapper Ihres Themes als Ziel verwenden und den gesamten Innenabstand auf den Beaver Builder-Seiten entfernen. Mit der FL-Builder-Karosserieklasse ist das so einfach wie ...

 .fl-builder #my-content-wrapper { padding: 0; }

Boom! Erledigt. Keine Polsterung auf Beaver Builder-Seiten. Es gibt einige spezifische Anwendungsfälle, die wir später besprechen werden. Sie können diese Technik jedoch jederzeit anwenden, wenn Sie für die individuellen Anforderungen Ihres Themas geeignet sind.

Deaktivieren der Standardseitenüberschrift

Wenn Beaver Builder aktiv ist, ist die Standardseitenüberschrift meistens nicht erforderlich. Normalerweise stört es einfach. Ihre Benutzer können dies selbst deaktivieren, indem sie zu „Extras“ > „Globale Einstellungen bearbeiten“ > „Standardseitenüberschrift“ gehen und den CSS-Selektor für die Seitenüberschriften in Ihrem Theme eingeben. Aber warum machen Sie es ihnen nicht einfacher?

Mit ein wenig Magie können Sie diesen CSS-Selektor standardmäßig auf den für Ihr Theme statt auf unseren festlegen, indem Sie diesen Code zu Ihrer Funktionsdatei hinzufügen.

 function my_form_defaults( $defaults, $form_type ) { if ( 'global' == $form_type ) { $defaults->default_heading_selector = '.my-heading-selector'; } return $defaults; // Must be returned! } add_filter( 'fl_builder_settings_form_defaults', 'my_form_defaults', 10, 2 );

Diese Technik eignet sich hervorragend zum visuellen Ausblenden der Seitenüberschrift, entfernt sie jedoch nicht aus dem Markup. Wenn Sie sich darüber Sorgen machen, müssen Sie etwas mehr Code hinzufügen, um die Seitenüberschrift auf Beaver Builder-Seiten vollständig zu entfernen. Fügen Sie zunächst diese Hilfsfunktion zu Ihrer Funktionsdatei hinzu ...

 static public function my_theme_show_page_header() { if ( class_exists( 'FLBuilderModel' ) && FLBuilderModel::is_builder_enabled() ) { $global_settings = FLBuilderModel::get_global_settings(); if ( ! $global_settings->show_default_heading ) { return false; } } return true; }

Als nächstes packen Sie in der Datei, die Ihre Seitenüberschrift enthält (möglicherweise page.php), Ihre Seitenüberschrift wie folgt in diesen Code ein ...

 <?php if ( my_theme_show_page_header() ) : ?> <h1><?php the_title(); ?></h1> <?php endif; ?>

Mit diesem Code gibt es keine einzige Spur der Seitenüberschrift im Markup, wenn Beaver Builder zum Erstellen einer Seite verwendet wird.

Entfernen oder Anpassen von Rändern und Polsterungen

Es gibt viele stilistische Dinge, die Beaver Builder dem Thema überlässt, während andere Dinge von selbst erledigt werden müssen. Eines dieser Dinge ist der Abstand und die Ränder von Zeilen und Modulen. Da Beaver Builder dies übernimmt, sind keine Abstände oder Ränder im Inhalts-Wrapper Ihres Themes erforderlich und können sogar bestimmte Dinge, wie z. B. randlose Zeilenhintergründe, behindern.

Wenn Sie beispielsweise das Thema „Twenty Twelve“ verwenden, können Sie sehen, dass rund um das Builder-Layout zusätzlicher Platz vorhanden ist, der verhindert, dass das Hintergrundfoto von Kante zu Kante geht …

Mit ein paar CSS-Änderungen unter Verwendung der oben erwähnten fl-builder -Klasse konnte ich es so hinbekommen …

Leider geht jedes Theme anders mit den Rändern und dem Innenabstand um. Ich kann Ihnen hier keine Lösung anbieten, die in jeder Situation funktioniert, aber wenn Sie gute CSS-Kenntnisse haben, entspricht der folgende Code dem, was Sie implementieren möchten …

 .fl-builder #my-content-wrapper { margin: 0; padding: 0; }

Zeilen in voller Breite

Eine weitere beliebte Funktion von Beaver Builder, die Sie möglicherweise in Ihren Themes unterstützen möchten, sind Zeilen in voller Breite. Zeilen voller Breite reichen nicht nur bis zum Rand Ihres Content-Wrappers, sondern auch bis zum Rand des Browsers. Wowzer!

Standardmäßig haben alle Zeilen im Beaver Builder eine maximale Breite, die in den globalen Einstellungen angepasst werden kann und für kleinere Geräte entsprechend skaliert. Selbst wenn Ihr Inhaltswrapper die volle Breite hat, sind Zeilen und ihr Inhalt immer noch in einem Box-Layout enthalten, wie im Screenshot unten.

Wenn ein Benutzer in den Zeileneinstellungen eine Zeile mit voller Breite festlegen möchte, wird die maximale Breite entfernt und diese Zeile füllt den gesamten Raum von Kante zu Kante wie folgt aus ...

Dies ist eine großartige Technik, funktioniert aber nur, wenn der Content-Wrapper Ihres Themes auch an den Rand des Browsers verschoben wird.

Genau wie Ränder und Abstände wird jedes Thema die Breite seines Inhaltswrappers anders handhaben. Auch hier kann ich Ihnen keine Lösung anbieten, die in jeder Situation funktioniert, aber wenn Sie gute CSS-Kenntnisse haben, entspricht der folgende Code dem, was Sie implementieren möchten …

 .fl-builder #my-content-wrapper { max-width: none; width: auto; }

Standardfarben für Schaltflächen

Beaver Builder bietet großartige Unterstützung für eine Vielzahl von Schaltflächenstilen, aber die Standardeinstellung ist ziemlich langweilig. Wenn Sie Ihrem Design das folgende CSS hinzufügen und es an Ihr Design anpassen, erhalten die Beaver Builder-Schaltflächen ein Standardaussehen, das besser zu Ihrem Stil passt.

 a.fl-button, a.fl-button:visited, .fl-builder-content a.fl-button, .fl-builder-content a.fl-button:visited { background: #fafafa; color: #333; border: 1px solid #ccc; } a.fl-button *, a.fl-button:visited *, .fl-builder-content a.fl-button *, .fl-builder-content a.fl-button:visited * { color: #333; }

Achten Sie nur darauf, nicht zu viele der Standardstile der Schaltfläche zu überschreiben, da sonst die Gefahr besteht, dass die Einstellungen des Schaltflächenmoduls beschädigt werden.

Seien Sie vorsichtig mit Z-Indizes

Wenn Sie in Ihrem Leben CSS geschrieben haben, ist die Wahrscheinlichkeit groß, dass Sie auf Z-Index-Probleme gestoßen sind. Wovon rede ich konkret? Dinge über anderen Dingen, die manche Dinge unzugänglich machen. Waaaaat?

Die Benutzeroberfläche von Beaver Builder sollte sich über der gesamten Seite befinden, nichts sollte sich darüber befinden. Daher haben wir den Z-Index lächerlich hoch eingestellt, aber gleichzeitig nicht zu hoch. Nach jahrelanger Erfahrung empfehle ich Ihnen, Ihre Z-Indizes so niedrig wie möglich zu halten. Ich weiß, dass das nicht immer machbar ist. Wenn Sie also versuchen, sie mindestens unter 100.000 zu halten, sollte alles in Ordnung sein.

Mit dem TGM-Plugin empfehlen

In der Vergangenheit mussten Theme-Entwickler Plugins von Drittanbietern direkt in ihre Themes bündeln, um sie für ihre Benutzer einzubinden. Ich bin mir sicher, dass das damals eine großartige Lösung zu sein schien, und viele tun es immer noch, aber heutzutage wissen wir alle, warum es keine gute Idee ist. Sicherheit und Updates!

Was passiert, wenn Sie ein Drittanbieter-Plugin mit Ihrem Theme bündeln und eine Sicherheitslücke aufgedeckt wird? Erraten Sie, was? Es liegt in Ihrer Verantwortung, ein Update auf die Websites Ihrer Benutzer zu übertragen. Der Plugin-Entwickler wäre dazu nicht in der Lage, da sich das Plugin in Ihrem Theme-Verzeichnis befindet. Das ist schon einmal passiert und ich schätze, dass es wieder passieren wird, bis die Theme-Entwickler mit dieser Praxis aufhören.

Darüber hinaus sind Sie auch dafür verantwortlich, Ihren Benutzern die neuesten Updates bereitzustellen. Nur noch eine Sache, an die Sie in Ihrem geschäftigen Leben denken müssen. Beaver Builder hat im ersten Jahr 50 Updates veröffentlicht und wir haben nicht vor, damit aufzuhören. Wollen Sie wirklich dafür verantwortlich sein?

Nachdem ich Ihnen nun Angst vor Gott eingejagt habe, was die Einbettung von Drittanbieter-Plugins in Ihre Themes angeht, möchte ich Ihnen von einer Alternative erzählen, die sich immer größerer Beliebtheit erfreut.

TGM-Plugin-Aktivierung: Der beste Weg, Plugins für WordPress-Themes (und andere Plugins) anzufordern und zu empfehlen. Von ihrer Website…

TGM Plugin Activation ist eine PHP-Bibliothek, mit der Sie ganz einfach Plugins für Ihre WordPress-Themes (und Plugins) anfordern oder empfehlen können. Es ermöglicht Ihren Benutzern, Plugins einzeln oder in großen Mengen mithilfe nativer WordPress-Klassen, -Funktionen und -Schnittstellen zu installieren und sogar automatisch zu aktivieren. Sie können auf vorgefertigte Plugins, Plugins aus dem WordPress Plugin Repository oder sogar an anderer Stelle im Internet gehostete Plugins verweisen.

Kurz gesagt: Sie sollten Ihren Benutzern die Möglichkeit geben, Plugins von Drittanbietern zu installieren. Wenn sie sich dazu entschließen, können Sie die Aktualisierung dem WordPress-Kern und dem Plugin-Autor überlassen, nicht Ihnen.

Verdienen Sie etwas Geld

Wir fühlen uns sehr geschmeichelt, dass andere Entwickler unsere Arbeit gelobt haben und sogar so weit gegangen sind, sie in ihren eigenen Produkten zu unterstützen. Darüber freuen wir uns so sehr, dass wir ein Dankeschön für diejenigen eingebaut haben, die Beaver Builder-Unterstützung für ihre Themes bieten.

Dieses kleine Dankeschön ist ein Filter, der es Ihnen ermöglicht, unsere Upgrade-Links in der Lite-Version durch Ihren Affiliate-Link zu ersetzen. So verdienen Sie im Grunde immer dann Geld, wenn sich jemand, der Ihr Theme verwendet, für ein Upgrade auf die kostenpflichtige Version von Beaver Builder entscheidet.

Wie funktioniert es? Fügen Sie einfach den folgenden Code zu Ihrer Funktionsdatei hinzu, während Sie den Text YOUR_LINK_HERE durch Ihren Affiliate-Link ersetzen und fertig! Sie sind im Geschäft.

 function my_bb_upgrade_link() { return 'YOUR_LINK_HERE'; } add_filter( 'fl_builder_upgrade_url', 'my_bb_upgrade_link' );

Zusammenfassung

Mit ein paar Optimierungen hier und da können Sie Ihr Theme mit erweiterter Unterstützung für Beaver Builder im Handumdrehen zum Laufen bringen. Zögern Sie nicht, uns Ihre Fragen mitzuteilen, und teilen Sie uns diese gerne mit, wenn Sie Ihr Theme für Beaver Builder optimieren möchten oder das Gefühl haben, dass in diesem Beitrag etwas fehlt. Wir würden uns freuen, Sie an Bord zu haben!