Blog

  • Was in aller Welt sind eigentlich Shortcodes?

    What-Are-Shortcodes-AnywayFalls es dir schon aufgefallen ist: Eine der Faustregeln von WordPress lautet, die Dinge für jeden immer, wirklich immer ein wenig einfacher zu machen – für Neulinge ebenso wie für erfahrene Entwickler. Eine der Möglichkeiten, dieses Ziel zu erreichen, ist die Verwendung von Shortcodes.

    Die WordPress.com-Supportseite definiert sie folgendermaßen:

    shtKlingt ziemlich einfach. Wenn du vor diesem Artikel noch nie von Shortcodes gehört hast und nicht weißt, wie sie aussehen: Es handelt sich dabei um diese archaisch anmutenden, codeähnlichen Texte in eckigen Klammern.

    Im Vergleich zu normalem Code, der typischerweise so aussieht:

    HTML5-video-tag-sample-code
    (Ähm. Was?)

    Shortcodes sehen im Allgemeinen in etwa so aus:

    embed_shortcode
    (Kinderleicht.)

    … und wenn du ein Entwickler bist (oder verdammt, auch nur jemand, der schon mindestens zweimal an einem Computer gesessen hat), wirst du wahrscheinlich zustimmen, dass allein das Tippen und Klicken, um eine einzige winzige Aufgabe zu erledigen, eine Menge Zeit fressen kann. Aus demselben Grund, aus dem wir Tastenkombinationen haben, gibt es Shortcodes, um uns allen das Leben leichter zu machen, damit wir Zeit sparen, um bessere Dinge zu tun und zu erschaffen; sie ähneln Tastenkombinationen sehr, da sie genau denselben Zweck erfüllen.

    Kommen wir nun zurück zu diesem speziellen Shortcode, genau wie oben:

    embed-shortcode Dieser spezielle wird als Embed-Shortcode bezeichnet und ist standardmäßig in WordPress integriert. Er bettet das Video von der URL in deinen Inhalt ein. Wenn du gerade in WordPress bist, kannst du den obigen Shortcode kopieren und auf deiner Website einfügen, um es einmal auszuprobieren.

    Shortcodes sind jedoch nicht die perfekte Lösung zum Zeitsparen. In unserem vorherigen Artikel gehen wir näher darauf ein, warum Shortcodes auch ihre Nachteile haben und was das Sandwich-Team austüftelt, um diese zu beheben.

    Fürs Erste kannst du jedoch gerne mit Shortcodes experimentieren und sehen, was sie für dich tun können.

    Viel Spaß beim Website-Erstellen!

  • Shortcode-Mapping: Wie PBS mehr als 800 Plugins und mehr als 2.000 Shortcodes unterstützen wird

    How-PBS-Supports-800-Plugins-2000-ShortcodesWhen I started getting further into software development and WordPress, I noticed that not a lot of page builders I come across with have that “page builder standard” I was looking for: fast, easy, convenient.

    Page Builder Sandwich, then, was created with the goal of having a builder meet these same standards.

    I wanted- and still want it– to be the best page builder out there, and the best way I could accomplish that, I figured, was to add in features in a way in which page building becomes helpful and accessible to everyone –developers and noobs alike.

    I’d like to note though, that I didn’t simply create PBS with the intent of merely bombarding it with features just for the sake of it.

    I want to add in features that people would want to work with; features that hopefully, would make the experience of page building feel a little bit more like magic.

    In den vergangenen Wochen hat das PBS-Team ein Kartenelement und auch ein Tab-Element hinzugefügt.

    Nun könnte es als ziemlich einfache und schlichte Routine erscheinen, wenn wir einfach alle paar Tage ein neues Element hinzufügen würden.

    But I think it’d be better if we take it to the next level; to take a bigger leap, do something more drastic, something drizzled with a little more awesomesauce.

    And so we came up with an idea: “How about we start supporting 800+ plugins along with their 2000+ shortcodes?!?!”

    I know what you’re thinking: “How the heck can you support that much shortcodes? Is that even possible?”

    Well, the simple answer is yes. Yes it is.

    And we’ve managed to achieve this feat through shortcode mapping.

    What is Shortcode Mapping?

    Shortcode mapping
    Shortcode mapping makes building shortcodes more friendly.

    Put more simply, shortcode mapping is like letting Page Builder Sandwich memorize all the shortcodes available on your site: their names, descriptions, their attributes, and what each of these attributes do.

    Die Vorteile eines solchen Systems sind ziemlich beachtlich:

    1.) Since PBS already knows what your shortcodes are, you get to spend less time going through the documentation of each plugin you use, and check how to use their shortcodes.

    2. ) In other words: Say goodbye to the grueling task of manually typing in your shortcodes!

    3.) With shortcode mapping, you can also say goodbye to manually checking post type ID’s. How? PBS can give you a list of all your contact forms through a drop-down list, so instead of looking for ID’s while on admin mode, you can pick from the list we made instead.

    4.) You’ll get to use dropdowns, colorpickers, image uploaders, and even number sliders when adjusting shortcode attributes.

    5.) Overall faster page building time!

    Shortcode-Mapping ist jedoch nicht neu, und etliche Page Builder verfügen bereits darüber. Was macht unseres jedoch anders?

    Wie Shortcode-Mapping in anderen Page Buildern funktioniert

    Lonely times
    Each person/site does their own shortcode mapping.

    Other page builders have a dedicated admin page for shortcode mapping. You go inside your admin page, and then their admin page. You put in your shortcode, edit a number of text fields, then hit save. Finally, when you go to your page builder editor, the shortcode is now there in element list.

    In diesem Szenario bleibt die Last des Shortcode-Mappings Ihnen als Nutzer überlassen. Wenn Sie möchten, dass alle Ihre Shortcodes vollständig mit allen Attributen (und mit den hübschen Farbwählern und anderem Schnickschnack) zugeordnet werden, müssen Sie sicherstellen, jedes einzelne Detail jedes einzelnen Shortcodes einzugeben.

    What’s more, all your mappings only reside on your site. So when the times comes that you need to work on another site, you’ll have to copy your mappings all over again. Additionally, if and when you install a new plugin that has shortcodes, then you’re going to have to map those too.

    Wie Shortcode-Mapping in Page Builder Sandwich funktioniert

    Shortcode mapping is centralized
    Shortcode mappings are shared across all users.

    Unlike the norm, shortcode mapping in Page Builder Sandwich is done on a global scale. The most used and popular plugins are gathered first, and all their shortcode mappings are created and updated in a central area. These will then spread out to all users depending on what they have installed. In other words, PBS studies and reviews all the shortcodes you have, including your activated plugins. Afterwards, it gives you the mapping of basically everything you need.

    Das bringt uns eine Menge großartiger Vorteile:

    1. Maximum coverage. Since we’ll be mapping out the shortcodes of the popular plugins, PBS will be able to support a majority of the shortcodes available on your site.
    2. Constant and frequent additions, updates and corrections. And since it’s in a central area, changes can be made quickly, and can be disseminated to all users.
    3. It basically works like magic. Let’s say you just installed a new plugin. Then you activate it, all mappings for its shortcodes will automatically get sent to you right away.
    4. Gone are the days when you have to personally map shortcodes yourself. PBS will do that for you.
    5. Your site remains lean and fast, and will only contain shortcode mappings that are relevant to you.
    6. Plugin zip size remains small. Even though PBS supports thousands of shortcodes, the plugin file size is still small. Your site and your backups remain small too!

    In case you’re interested in reading into how we made all of this possible,  we actually have a second part to this article in which things might start sounding a little more technical (if that’s your drift).

    Melden Sie sich für unseren Newsletter an!

    You can also opt to sign up to our mailing list, which will automatically notify you when we officially release this feature, (you can get future updates from us too, if you want). The shortcode mapping functionality will be out for our customers tentatively on August 12 August 15 2016. Not all shortcodes will be mapped by this time (our estimate is maybe 100 plugins), but mapping will be continuously done and customers will get them as soon as new ones roll out.

    So sign up to our newsletter to get news on shortcode mapping, when we’ll release it, and when we open shortcode mapping to the public! Until then, we hope you enjoy this new feature of ours, and that you have fun exploring it!

  • 5 einfache Tipps, damit Ihre Website gut aussieht

    5-Simple-Ways-To-Make-Your-Website-Look-GoodIn general, one thing that most people tend to overlook is today’s demand for functional design and aesthetics. While not all of us may be aware of the extent of just how much it matters, the fact remains that design is a very crucial factor towards success—any kind of success– including your website’s. Yes, your content is an important key towards reeling your audience in, but how your site looks will definitely be a determining factor as well.

    Hier sind einige grundlegende Tipps, was Sie tun können, um das Design Ihrer Website zu verbessern.

    Add high-quality images

    You want to add the best quality images on your website that reflect your brand style, but if you don’t have a high-resolution camera or the money to pay a photographer, you can get free stock photos from sources like Pexels and Pixabay. Images should pertain directly to the content of your site. Including images is always better than no images at all.

    Wählen Sie die richtigen Farben

    booneselections
    Lawrence Boone Selections uses black to add a sense of luxury and value to their website
    juicebox
    Juicebox used this zesty combination for people to get that organic and fresh that the brand represents

    Das Farbschema einer Website spielt eine große Rolle dabei, den passenden Ton und die richtige Stimmung für Ihre Marke zu schaffen. Eine schöne Farbe auszuwählen bedeutet nicht zwangsläufig, dass es die richtige ist. Jede Farbe sendet eine andere Botschaft und Reaktion aus. Farben gehören zu den ersten Dingen, die Website-Besucher bemerken, und sie können den Erfolg Ihrer Website tatsächlich beeinflussen.

    Wählen Sie höchstens zwei bis drei Basisfarben für Ihr Design. Wenn Sie das Bedürfnis haben, mehr Farbe hinzuzufügen, können Sie die Aufhellungen und Abdunkelungen Ihrer Basisfarben nutzen. In der Farblehre ist eine Aufhellung (Tint) die Mischung einer Farbe mit Weiß, was die Helligkeit erhöht, während eine Abdunkelung (Shade) die Mischung einer Farbe mit Schwarz ist, was die Helligkeit verringert.

    Additional Tip: There are great tools such as Adobe Colour CC and Coolors to make picking colors easier.

    Verwenden Sie kontrastierende Schriftarten

    Font Pairing There are more fonts other than Arial, Georgia and Times New Roman. Google Web Fonts offer a variety of typefaces you can use for free on your site. Just like with choosing colors you can easily over do fonts, so I suggest you do not use more than two typefaces on your website. Most well-designed websites use two typefaces only, one for the headlines and one for the body text.

    Zwei Schriftarten zu kombinieren, kann selbst für Designer schwierig sein. Sie können es sich einfach machen, indem Sie mit zwei verschiedenen Schriftschnitten aus einer Schriftfamilie experimentieren. Wenn eine zweite Schriftart erforderlich ist, wählen Sie etwas, das einen guten Kontrast zu Ihrer ersten Schriftart bildet. Normalerweise funktioniert die Kombination einer Serifenschrift mit einer serifenlosen Schrift gut. Ein weiterer wichtiger Tipp ist, Schriftarten zu wählen, die zum Stil Ihres Unternehmens passen. Sie könnten die schönste Schriftart der Welt haben, aber im falschen Kontext verwendet, könnte sie trotzdem schrecklich aussehen.

    Halten Sie es übersichtlich durch Weißraum

    Whitespace is one of the easiest and most effective ways to create a visually effective website. Your website should look well organized and clutter free, directing users exactly where they need to go. Make sure elements stand out and are grouped together by using whitespace properly.

    Machen Sie es mobilfreundlich

    People are probably going to visit your site at different times using different devices and screen sizes. While content is important, consistency across devices provides a better user-experience for anyone who visits your site. It makes it easier for users to share and link contents on your website to social media platforms on mobile. On top of that, Google prioritizes responsive websites on search results.

    Zusätzlicher Tipp: Die Verwendung von Page Builder Sandwich auf Ihrer Website aktiviert automatisch die mobile Ansicht und passt sie an die mobile Bildschirmgröße an.

    Fazit

    Denken Sie daran: Die Wirkung von Design zu unterschätzen, ist einer der schlimmsten Fehler, die Sie bei der Erstellung Ihrer Website machen können. Natürlich müssen Sie beim Entwerfen Ihrer Website nicht übermäßig viel Aufwand betreiben, aber wenn Sie vorerst einfach diese Tipps befolgen, können Sie sicherstellen, dass Ihre Website bei Ihrem Publikum keine ablehnenden Gefühle hervorruft.

  • 5 Gründe, warum Weißraum wichtig ist

    Reasons-Why-Whitespace-MattersIm Grunde ist Whitespace in seiner einfachsten Definition der Raum um und zwischen allen Elementen einer Komposition, der leer gelassen wird. Es ist nicht bloß eine Verschwendung von Bildschirmplatz, wie die meisten Website-Betreiber denken. Richtig eingesetzt, kann Whitespace tatsächlich Vorteile bieten, um ein Produkt besser zu bewerben. Er ist ein wichtiger Schlüssel zur Schaffung von gutem Design und macht eine Website in jeder Hinsicht besser.

    Obwohl der Name Whitespace impliziert, dass der Raum weiß ist, muss er keineswegs buchstäblich weiß sein. Whitespace kann tatsächlich jede Farbe haben – er kann sogar ein dezentes Muster oder eine Textur aufweisen. Es ist ein Bereich, auf den sich das Auge nicht fokussieren soll. Alternativ wird er als Negativraum

    Warum ist Whitespace also wichtig?

    newsfeed
    Bildquelle: News Feed

    Grund Nr. 1: Verbessert die Lesbarkeit

    Whitespace zwischen Grundlinien und Absätzen hilft den Nutzern tatsächlich dabei, alle Inhalte auf der Website angenehm zu lesen. Die Anpassung kleiner Details Ihrer Website (wie Zeilenabstand oder Zeichenabstand) kann einen gewaltigen Unterschied machen, um das Lesen zu erleichtern.

    Das Ziel ist es, Menschen zum Weiterlesen zu animieren, indem man Layouts gestaltet, die angenehm für die Augen sind.

    hpmagicwords
    Bildquelle: HP Magic Words

    Grund Nr. 2: Beschleunigt die Interaktion

    Seien wir ehrlich: Die meisten Ihrer Besucher haben beim Surfen auf Websites nicht genug Geduld, um gründlich zu suchen. Wenn eine Website überladen wirkt, lenkt sie die Nutzer davon ab, das zu finden, wonach sie suchen.

    Whitespace sollte dabei helfen, den Betrachter über die Seite zu führen. Weniger Elemente, die um Aufmerksamkeit buhlen, sowie der richtige Einsatz von Whitespace können Ablenkungen verhindern, die Besucher ausbremsen.

    google
    Bildquelle: Google

    Grund Nr. 3: Aufmerksamkeit auf die richtigen Elemente lenken

    Whitespace kann Nutzern visuelle Hinweise darauf geben, wohin sie schauen sollten. Wenn er richtig eingesetzt wird, hilft Whitespace dabei, Informationen hervorzuheben und die Aufmerksamkeit auf einen bestimmten Bereich Ihrer Website zu lenken.

    Denken Sie daran: Wenn alles hervorsticht, sticht nichts hervor.

    Bildquelle: Pocket Penguins

    Grund Nr. 4: Der erste Eindruck zählt

    Das Look-and-Feel einer Website ist der wesentliche Schlüssel für einen guten ersten Eindruck. Ein guter erster Eindruck führt oft zu einer längeren Verweildauer. Zu wenig Whitespace kann Ihre Website billig und unzuverlässig wirken lassen. Besucher werden die Website oder Marke kaum für glaubwürdig halten, wenn sie nicht ansprechend aussieht. Ein ausgewogenes Maß an Whitespace hilft, den richtigen Ton für Ihre Website zu treffen. Whitespace kann ein Mittel sein, um Einfallsreichtum, Frische und manchmal auch Eleganz zu vermitteln.

    Tipp: Hier ist eine Idee, wie Sie Ihr Webdesign einfach und vertraut.

    flockknitwear
    Bildquelle: Flock Knitwear

    Grund Nr. 5: Hilft, Freiraum und Balance zu schaffen

    Ein ausgewogenes Design bedeutet nicht zwangsläufig symmetrisch. Ein großes Designelement kann durch einige kleinere ausgeglichen werden. Das Hinzufügen von Whitespace ist eine hervorragende Möglichkeit, verschieden große Designelemente auf Ihrer Seite auszubalancieren. Schaffen Sie einen Fluss, damit die Augen der Nutzer nicht wild umherspringen. Ein gutes Design sollte in der Lage sein, den Nutzer von einem Punkt zum nächsten zu führen, ohne den Besucher zu verwirren.

    Fazit

    Wenn Sie das nächste Mal eine Website besuchen und eine Weile dort verweilen, denken Sie darüber nach, was Sie zum Bleiben und Lesen gebracht hat. Glauben Sie, dass der Zeilenabstand einen Artikel leichter lesbar macht? Macht das Erlebnis Lust darauf, immer wieder zurückzukehren? Fiel es Ihnen schwer, die Navigation zu finden?

    Achten Sie auf den gelungenen Einsatz von Whitespace auf der Website. Wenn Sie denken, dass dies auch auf Ihrer Website funktionieren kann, lernen Sie einzuschätzen, wie viel Raum Sie Ihren Elementen geben sollten, bis Sie den richtigen Ton und die gewünschte Lesbarkeit getroffen haben, ohne den „Fluss“ Ihrer Website zu beeinträchtigen.

    Das letztendliche Ziel jeder Website ist Kommunikation. Visuelle Anziehungskraft geht Hand in Hand mit dem Erfolg Ihrer Website.

  • Stilvolle Karten zu Ihrer Seite hinzuzufügen ist ein interaktives Erlebnis

    Adding-Stylish-Maps-to-your-Page-is-an-Interactive-Experience-2Mit Page Builder Sandwich können Sie jetzt Karten in Ihre Seitendesigns einbinden!

    Es mag seltsam klingen, sich über Karten zu freuen. Man nimmt die Google-Maps-URL und bettet sie ein. Oder lädt sich online ein Karten-Plugin herunter und fügt einen Shortcode ein. Oder Ihr anderer Page Builder bietet bereits eine solche Funktion, sodass Sie jederzeit eine hinzufügen können. Der Grund für unsere Begeisterung ist jedoch, dass wir das Hinzufügen von Karten auf ein völlig neues Niveau gehoben haben.

    Hier ist eine Vorschau:

    Die alte, langweilige Art, eine Karte hinzuzufügen

    So fügen Sie eine Karte mit einem typischen Page Builder hinzu:

    1. Sie ziehen ein neues Kartenelement hinein,
    2. Sie geben den Breiten- und Längengrad in die Felder ein,
    3. Sie tragen weitere Werte in die Felder ein, wie Kartenhöhe, Kartenbreite, setzen das Häkchen für den Straßenstil usw.,
    4. Sie klicken auf die Vorschau, prüfen das Aussehen und stellen fest, dass Sie etwas ändern müssen, damit es besser aussieht,
    5. Sie kehren zum Page Builder zurück, ändern die Werte und wiederholen Schritt 4 von oben.

    Die Page-Builder-Sandwich-Methode zum Hinzufügen einer Karte

    Karten auf Websites sind interaktiv – man kann sich darin bewegen, heran- und herauszoomen. Warum also nicht das Rätselraten beenden und es den Nutzern ermöglichen, direkt beim Erstellen der Seite mit der Karte zu interagieren?

    So fügen Sie eine Karte mit Page Builder Sandwich hinzu:

    1. Sie fügen ein Kartenelement hinzu,
    2. Sie geben den Breiten- und Längengrad oder die Adresse ein, auf die die Karte zentriert werden soll,
    3. Sie verschieben die Karte und zoomen heran oder heraus, um das gewünschte Erscheinungsbild zu erzielen,
    4. Fügen Sie Ihren Karten coole Farben hinzu, die zu Ihrem Stil passen,
    5. Klicken Sie auf Speichern.

    Unser Ansatz macht viel mehr Spaß und ist intuitiver. Im Grunde interagieren Sie mit der Karte genauso wie mit einer normalen Google-Karte.

    Farbige Karten oder Styling mit SnazzyMaps

    Eine großartige Funktion, die wir integriert haben, ist die Möglichkeit, Ihre Karten einzufärben und farblich anzupassen – und das ist kinderleicht. (Dies gilt nur für die Premium-Version). Wenn Sie Ihre Karte kolorieren möchten, klicken Sie einfach auf unsere Farbauswahl und wählen Sie eine Farbe – Ihre Karte passt sich sofort an.

    Hier ist eine, die wir rosa eingefärbt haben:

    Page Builder Sandwich unterstützt über SnazzyMaps auch aufwendigere Farbschemata. Dort gibt es eine riesige Auswahl an von Benutzern beigesteuerten Farbschemata, und Sie können auch eigene erstellen, wenn Sie mehr Kontrolle über die Farben wünschen.

    Suchen Sie einfach das Farbschema heraus, das Ihnen gefällt, kopieren Sie den Code und fügen Sie ihn in Page Builder Sandwich ein. Das Farbschema wird sofort auf Ihre Karte angewendet.

    Hier ist ein cooles Farbschema namens papuportal dark von SnazzyMaps:

    Platzieren Sie Karten, wo immer Sie möchten

    Es gibt noch viele weitere coole Dinge, die Sie mit Karten tun können – etwa sie für einen dramatischeren Effekt in Zeilen über die volle Breite einzufügen. Sie können sie nach Belieben auch in ein Karussell oder in Tabs einbinden (eine bevorstehende Funktion).

    Wenn Sie Page Builder Sandwich noch nicht haben, können Sie die Premium-Version ausprobieren, indem Sie oben auf den Link „Live Demo“.

  • Das ungesagte Problem von Shortcodes

    The-Unspoken-Problem-of-Shortcodes

    Shortcodes sind einer der Höhepunkte von WordPress. Shortcodes schlagen die Brücke zwischen Entwicklern und Website-Erstellern und ermöglichen es, komplexe Inhalte fast überall nach Belieben zu platzieren. Plugin-Entwickler lieben Shortcodes, da sie mehr Flexibilität dabei bieten, wie und wo ihre Nutzer Inhalte anzeigen.

    Wenn Sie nicht wissen, was Shortcodes sind und wie sie aussehen: Es handelt sich um jene archaisch anmutenden, codeähnlichen Texte in eckigen Klammern. Sie sehen etwa so aus:

    Dieser spezielle Shortcode nennt sich Embed-Shortcode und ist standardmäßig in WordPress integriert. Er bettet das Video von der URL direkt in Ihre Inhalte ein. Kopieren Sie den obigen Shortcode einfach auf Ihre Website, wenn Sie ihn einmal ausprobieren möchten.

    Hinter den Kulissen passiert Folgendes: Wenn WordPress in Ihren Inhalten auf einen Shortcode stößt, wird dieser verarbeitet und in etwas anderes umgewandelt. In unserem obigen Fall, wann immer ein

    -Shortcode erkannt wird, nimmt WordPress die URL im Shortcode und gleicht sie mit einer Reihe von Content-Providern ab, die es unterstützt. Wird ein Treffer gefunden, ruft WordPress den entsprechenden Iframe-Einbettungscode ab und zeigt stattdessen diesen an.

    Wo liegt also das Problem? Es klingt doch ganz einfach: Man gibt einfach einen kurzen Text in Klammern ein und ist fertig.

    Hier kommt die Shortcode-API ins Spiel …

    Shortcodes in Hülle und Fülle

    Die Shortcode-API eröffnet Entwicklern die Möglichkeit, eigene Shortcodes zu erstellen. Dadurch können Entwickler ihre ganz eigenen Shortcodes in ihre Plugins integrieren.

    Das ist großartig: Mit nur einem kurzen, codeähnlichen Schnipsel (daher der Name „Shortcode“) können Anfänger wie auch Fortgeschrittene praktisch jede Art von Inhalt überall dort platzieren, wo sie möchten.

    WordPress verfügt standardmäßig nur über eine Handvoll Shortcodes. Es ist leicht, sie aus dem Gedächtnis einzutippen, da es nur so wenige gibt. Doch wenn Sie ein paar Plugins installieren, steigt die Zahl der Shortcodes schnell auf ein Dutzend oder mehr – in manchen Fällen sogar auf über hundert. Jeder Shortcode hat seine eigenen Attribute und Anweisungen für die Verwendung. Höchstwahrscheinlich bietet jedes Plugin eine Art Dokumentation, die erklärt, wie all seine Shortcodes funktionieren, und alle verfügbaren Parameter auflistet. Aber man müsste verrückt sein, um zu versuchen, sich alle Shortcodes und deren Attribute zu merken.

    Das Problem ist, dass es keinen zentralen Ort gibt, an dem man alle auf der Website verfügbaren Shortcodes und deren Verwendung einsehen kann.

    Einige versuchen, das Problem zu lösen

    Einige Plugins versuchen, dieses Problem zu lösen, indem sie all ihre eigenen Shortcodes in einem leicht zugänglichen Dropdown-Menü präsentieren. Ein Klick darauf gibt dann den Shortcode aus – komplett mit allen möglichen Attributen. Man muss sie sich nicht mehr merken, was eine feine Sache ist.

    Screen-Shot-2016-06-22-at-11.27.09-AM

    Manche gehen noch weiter und fügen ein Popup-Formular für Einstellungen hinzu, das Kontrollkästchen und Farbwähler enthält, um die Attribute des Shortcodes auszufüllen.

    Screen-Shot-2016-06-22-at-11.28.54-AM

    Diese Lösung funktioniert gewissermaßen. Allerdings listet jedes Plugin nur seine eigenen Shortcodes auf. Wenn also jedes Plugin seine eigene Art von Shortcode-Auswahl erstellt, passiert es unweigerlich, dass Sie mehrere Shortcode-Auswahlelemente auf Ihrem Bildschirm haben (mir ist das schon passiert).

    Screen-Shot-2016-06-22-at-11.22.41-AM

    Mit anderen Worten: Jedes Plugin macht sein eigenes Ding und implementiert seine eigene Lösung für die eigenen Shortcodes. Einige Plugins fügen entweder einen neuen Button neben der Schaltfläche „Dateien hinzufügen“ oder einen neuen innerhalb von TinyMCE ein.

    Vielleicht denken Sie jetzt: „Warum sammelt man nicht einfach auch die Shortcodes anderer Plugins und bindet sie ebenfalls in das Dropdown bzw. die Shortcode-Auswahl ein?“ Nun, genau das habe ich auch gedacht. Aber das ist leichter gesagt als getan. Ich erkläre gleich, warum, aber schauen wir uns zuerst an, wie eine ideale Lösung aussehen würde.

    Die ideale Lösung

    Der perfekte Plan wäre es, ein Plugin zu erstellen, das alle auf Ihrer Website verfügbaren Shortcodes zusammenträgt, Ihnen die Liste präsentiert und Ihnen zudem hilft, alle Attribute auszufüllen. Und jedes Mal, wenn Sie ein neues Plugin installieren, würden Ihnen auch all diese neu hinzugekommenen Shortcodes angezeigt werden.

    Stellen Sie sich einen zentralen Ort vor, an dem alle Ihre Shortcodes für einen einfachen Zugriff abgelegt sind. Bei jedem Shortcode würde beschrieben, was er tut und zu welchem Plugin er gehört. Und stellen Sie sich vor, für jedes verfügbare Attribut gäbe es eine Beschriftung, eine passende Möglichkeit zur Auswahl eines Wertes und eine Beschreibung. Es würden Ihnen Dropdowns, Farbwähler, Optionsfelder, Schalter und alles Mögliche angezeigt.

    So etwas würde unser Leben als Website- und Content-Ersteller erleichtern. Kein Durchforsten verschiedener Dokumentationen mehr oder Durchsuchen verschiedener Bereiche des Dashboards, nur um einen generierten Shortcode für einen Slider zu kopieren, den man verwenden möchte.

    Der Haken an der Sache

    Leider ist es derzeit ziemlich schwierig, so etwas umzusetzen. Es gibt keinen verlässlichen Weg, alle Details eines Shortcodes zu ermitteln. Man kann zwar eine Liste aller Shortcodes abrufen, aber nur deren eigentliche Tags/Namen; zusätzliche Details wie eine Liste der Attribute, deren Funktion und Typen – wie eine Zeichenkette, eine Farbe oder eine Zahl – lassen sich nicht abrufen. Ebenso wenig gibt es auch nur ansatzweise eine Beschreibung für jedes Attribut.

    Hinweis für die Entwickler da draußen: Ja, es gibt ein neu hinzugefügtes drittes Argument für die Funktion shortcode_atts, aber es ist kein Pflichtargument. Solange also nicht jeder Plugin-Entwickler auf der Welt dieses implementiert, haben wir immer noch keinen sicheren Weg, alle Attribute eines Shortcodes zu bestimmen.

    Die Shortcode-API bietet keinerlei Möglichkeit zum Hinzufügen von Shortcode-Beschreibungen, Typisierungen von Attributen oder Attributbeschreibungen. Und solange WordPress selbst keinen zentralen Bereich für den Zugriff auf Shortcodes hinzufügt, bezweifle ich, dass eine solche Möglichkeit geschaffen wird.

    Fazit

    Derzeit ist die Organisation von Shortcodes jedem Entwickler selbst überlassen. Solange keine zentrale Methode innerhalb von WordPress entwickelt wird, ist damit zu rechnen, weiterhin mehrere „Shortcode hinzufügen“-Buttons im Backend zu sehen. Ob so etwas in den WordPress-Core aufgenommen werden sollte oder nicht, ist wiederum eine ganz eigene, große Diskussion.

    Eine Alternative

    Es gibt Page-Builder-Plugins, die dieses Problem anders angehen. Anstatt Shortcodes programmatisch zu erkennen, verfügen sie über Shortcode-Mapper, bei denen Nutzer jedes Detail eines Shortcodes manuell eingeben können. Sobald dies erledigt ist, steht er innerhalb des Page Builders zur Verfügung. Während  dies zwar funktioniert, sind diese nur auf Ihrer eigenen Website verfügbar.

    Wir hier bei Page Builder Sandwich arbeiten an etwas, das dieses Shortcode-Dilemma hoffentlich lösen kann. Abonnieren Sie unten unseren Newsletter, um über unsere Fortschritte auf dem Laufenden gehalten zu werden.

  • WordPress.com VS WordPress.org

    Wordpress-Com-VS-Wordpress-OrgWenn Sie relativ neu in der Erstellung von Websites sind, stehen die Chancen gut, dass Sie mit der großen Debatte „WordPress.com vs. WordPress.org“ noch nicht vertraut sind. Möglicherweise wussten Sie nicht einmal, dass beide existieren, geschweige denn von den verschiedenen Vor- und Nachteilen der beiden. Worüber also, bitte schön, geht diese große Debatte zwischen der Nutzung von WordPress.com und WordPress.org? Ist das eine bloß eine billige Kopie, die nur darauf wartet, verklagt zu werden?

    Nun, nein.

    Bei der Debatte geht es kurz gesagt darum, welcher dieser beiden WordPress-Dienste besser zu der Website passt, die Sie erstellen möchten. Keines von beiden ist eine Kopie des anderen, und beide Websites gehören zu WordPress; es ist nur so, dass das eine (.com) eine für Nicht-Entwickler freundlichere Version ist als das andere, und .org im Vergleich zu .com bei der Website-Erstellung deutlich weniger Einschränkungen aufweist.

    „Woher weiß ich aber, welches ich brauche?“

    Die Antwort auf diese Frage hängt ganz von den Anforderungen Ihrer zukünftigen Website ab. Es gibt keine WordPress-Variante, die objektiv die „bessere“ oder gar „beste“ Version für jeden ist. Beide haben ihre ganz eigenen Besonderheiten und eine gleiche Anzahl an Vor- und Nachteilen.

    WordPress.com: Warum und wann sollte ich es nutzen?

    WordPress.com kümmert sich um das Wesentliche für Sie, sodass Sie sich mehr auf die Inhalte Ihrer Website konzentrieren können. Es ist ein Website-Builder, der vollständig von einem Unternehmen namens Automattic betrieben und gehostet wird. Sie erhalten Premium-Hosting, Backups, Sicherheit und dergleichen. Das bedeutet, dass Sie sich viel einfacher auf den Inhalt Ihrer Website konzentrieren können, anstatt stundenlang alles von Grund auf neu aufbauen zu müssen.

    Beachten Sie jedoch, dass WordPress.com auch eigene Einschränkungen mit sich bringt. Auch wenn Sie sich weniger um die technischen Abläufe im Hintergrund Ihrer Website kümmern müssen, sollten Sie bedenken, dass Sie wahrscheinlich nicht so viele Freiheiten haben werden, wie Sie es sich wünschen. Während die Anpassung der Benutzeroberfläche Ihrer Website kein Problem darstellen dürfte (WordPress.com bringt beispielsweise jede Menge Themes mit), kann das Hinzufügen bestimmter Funktionen und Elemente in Form von Plugins zu einem Problem werden – insbesondere dann, wenn Ihre Website spezifische Funktionen benötigt, die auf WordPress.com nicht verfügbar sind.

    Wie man eine Website pflegt, ist eine ganz andere Geschichte. Es hängt stark davon ab, ob 1.) Sie kein WordPress-Entwickler sind, 2.) Sie nicht die Absicht haben, Programmieren zu lernen, oder 3.) Sie wenig oder gar keine Zeit dafür haben.

    WordPress.org: Wann ist es an der Zeit, darüber nachzudenken?

    Eine Faustregel bei der Überlegung für WordPress.org lautet: Wenn Sie zumindest ein wenig mit der Funktionsweise von Code vertraut sind oder bereit sind, etwas Zeit zu investieren, um es zu lernen. Da WordPress.org eine selbst gehostete Version von WordPress ist, können Sie sich die Hände so schmutzig machen, wie Sie möchten. Zudem haben Sie die Freiheit, so viel oder so wenig daran herumzubasteln, wie Sie möchten. Sie sind dafür verantwortlich, Ihren eigenen Hoster zu finden, Ihre eigenen Sicherheits-Backups einzurichten und die Website insgesamt selbst zu pflegen – und was noch wichtiger ist: nach Ihren eigenen Vorstellungen.

    „Aber Moment, warum sollte ich das wollen? Ist der Sinn von WordPress nicht, die Website-Erstellung einfacher zu machen?“

    …Nicht ganz. Betrachten Sie es einmal so: The Daily Post zieht eine hervorragende Analogie zwischen WordPress.org und WordPress.com, und zwar so, dass selbst der blutigste Anfänger (wie ich selbst) den Kern der Sache sofort versteht.

    Laut ihnen muss man sich WordPress.com wie etwas vorstellen, an dem man nicht das vollständige Eigentum besitzt. Denken Sie beispielsweise an Ihr 15-jähriges Ich, das noch bei den Eltern wohnt. Wenn Sie Ihr Schlafzimmer streichen wollten, mussten Sie zuerst Ihre Eltern um Erlaubnis bitten (die natürlich das gesamte Haus besitzen, einschließlich Ihres Zimmers). Eigentlich gehört das Zimmer Ihnen, aber am Ende des Tages… irgendwie eben doch nicht.

    Wenn Sie also drastische Änderungen vornehmen müssen oder möchten (wie etwa das Streichen der Wände oder die Erweiterung des Zimmers), müssten Sie das immer noch mit den tatsächlichen Eigentümern des Hauses – sprich Mama und Papa – absprechen und/oder einen Kompromiss finden. Ein Vorteil dabei ist jedoch: Wenn im Keller die Sicherung rausfliegt oder die Klimaanlage den Geist aufgibt, kümmern sich Ihre Eltern darum, und Sie müssen sich um nichts Sorgen machen.

    WordPress.org hingegen ist etwas, das Sie ganz nach Belieben anpassen und bearbeiten können. Dies lässt sich damit vergleichen, wenn Sie mit 18 endlich ausziehen und Ihre eigene Wohnung beziehen. Da Sie die volle Kontrolle über Ihre Wohnung haben, müssen Sie mit niemandem einen Kompromiss eingehen, um Ihre Wände in der Farbe zu streichen, vor der sich Ihre Mutter immer gefürchtet hat; Sie haben die Freiheit, die Entscheidung selbst zu treffen und/oder jemanden zu beauftragen, der Ihren Ansprüchen entspricht. Außerdem haben Sie die Freiheit, genau das Klimagerät auszuwählen, das Sie für Ihr Wohnzimmer haben möchten. Es ist nur so: Wenn es ausfällt, müssen Sie einen Handwerker rufen oder selbst herausfinden, woran es liegt und wie man es repariert (was nicht so schlimm ist, denn hey: Man lernt nie aus, und Lernen ist gut).

    Mittlerweile haben Sie hoffentlich ein klareres Bild davon, worin die wesentlichen Unterschiede zwischen WordPress.com und WordPress.org liegen. Aber kurz gesagt:

    installieren Sie so viel oder so wenig wie Sie möchten; Themes sind ausschließlich auf WordPress-Themes beschränkt, Sie müssen eine bestimmte Gebühr zahlen, um Werbung zu entfernen.Sie haben nahezu die volle Kontrolle über Ihre Website; Sie können eigene Themes hinzufügen, anpassen oder sogar selbst erstellen.

    Die Kontrolle über Inhalte ist begrenzt;

    WordPress.com WordPress.org
    Vollständig von WordPress gehostet; alle Grundlagen sind abgedeckt. Selbst gehostet; wählen Sie Ihre eigenen Grundlagen oder entscheiden Sie sich für bessere.
    Funktionen sind auf das beschränkt, was WordPress.com anbietet Tausende von Funktionen in Form von Plugins;

    Dies sind einige der Vergleiche, die beim Abwägen der Unterschiede zwischen den beiden relevant sind. Die Wahl zwischen den beiden läuft letztlich darauf hinaus, wie viel Freiheit Sie bei der Erstellung Ihrer Website wünschen und wie viele Ressourcen (Zeit, Aufwand, Geld usw.) Sie dafür aufbringen möchten. Denken Sie daran, dass dies beides sehr entscheidende Optionen sind, die Sie abwägen sollten, bevor Sie sich entscheiden, welche WordPress-Plattform am besten zu Ihnen passt. Überstürzen Sie den Entscheidungsprozess also nicht!

    Viel Spaß beim Erstellen Ihrer Website!

  • Warum WordPress?

    Why-WordpressEin wichtiger Punkt beim Erstellen deiner ersten Website – egal ob für ein Unternehmen, als Freelancer oder für private Zwecke – ist: Nicht jeder beherrscht Programmiersprachen und Softwareentwicklung. Vielleicht bist du Koch und möchtest deine Rezepte online teilen. Vielleicht studierst du Kunst und brauchst ein professionelles Portfolio, oder du hast ein Start-up und benötigst eine eigene Website. Wie auch immer der Fall liegt: Zwar kennen sich manche mit den Grundlagen des Programmierens aus, aber wir sind nicht alle hauptberufliche Entwickler. Nicht jeder, der eine Website braucht, weiß, wie man sie von Grund auf programmiert. Genau hier kommt WordPress ins Spiel. Es stellt sich also die Frage: „Warum WordPress?“

    GRUND 1

    WordPress ist ein Content-Management-System – und damit absolut benutzerfreundlich.

    Zuerst solltest du wissen: WordPress ist ein Content-Management-System (kurz CMS). Einfach ausgedrückt bedeutet das: Mit WordPress kannst du Websites erstellen, ohne Code von Grund auf neu zu schreiben. Die Oberfläche ist klar strukturiert, sodass du jederzeit den Überblick behältst, ohne ständig im Code herumbasteln zu müssen.

    Wenn du eine Website von Grund auf selbst programmierst, sieht das typischerweise so aus:

    screenshot-1 Mit einem Content-Management-System startest du hingegen so:

    WordPress
    Die Backend-Oberfläche von WordPress. Mit einem CMS wird das Verwalten und Erstellen von Websites deutlich einfacher.

    Vielleicht fragst du dich jetzt: „WordPress klingt super, aber was ist, wenn es nicht die Funktionen hat, die ich für meine Website brauche?“, oder „was, wenn ich eine Karte, einen Musikplayer, Caching oder mehr Sicherheit brauche?“

    …Technisch gesehen gibt es die gewünschte Funktion bei WordPress höchstwahrscheinlich bereits – und zwar in Form eines WordPress-Plugins.

    GRUND 2

    Plugins: Das Sahnehäubchen von WordPress

    Falls du dir Sorgen machst, dass WordPress eine bestimmte Funktion nicht mitbringt, keine Sorge: Sehr wahrscheinlich gibt es sie bereits.

    Plugins sind Erweiterungen, die den Funktionsumfang deiner WordPress-Website vergrößern. Wenn du als Unternehmer ein Kontaktformular benötigst, bringt WordPress das von Haus aus nicht mit – es gibt aber unzählige Plugins dafür. Und da WordPress Open Source ist – also praktisch jeder zur Weiterentwicklung beitragen kann –, entstehen ständig neue Plugins. Du bekommst also dein Kontaktformular und noch viel mehr: Buttons zum Teilen in sozialen Netzwerken, Karten, zusätzliche Sicherheitsmaßnahmen und unzählige weitere Funktionen und Erweiterungen. Das klingt doch hervorragend!

    Aktuell gibt es Tausende solcher Plugins – und viele davon sind kostenlos oder bieten Gratis-Versionen, darunter auch PBS.

    GRUND 3

    Open Source: Die WordPress-Community

    WordPress ist Open Source. Das bedeutet: Jeder kann zur Entwicklung beitragen und den Quellcode analysieren, um mehr über Softwareentwicklung und WordPress selbst zu lernen. Es gibt sogar Unternehmen, die sich ganz auf die Entwicklung von WordPress-Produkten wie Plugins und Themes spezialisiert haben (so wie wir!).

    Weil WordPress Open Source ist, arbeiten unzählige Benutzer, Entwickler und Designer zusammen und helfen sich gegenseitig bei Problemen. So erhältst du echte Hilfe von echten Menschen und ihr lernt voneinander. Ein typischer Kundenservice kann so etwas kaum bieten.

    GRUND 4

    WordPress ist eine feste Größe.

    CNN, das offizielle Blog von Star Wars, das Time Magazine und sogar Beyoncé setzen auf WordPress – neben vielen anderen. Aber nicht nur diese bekannten Namen belegen den Erfolg: Laut Treehouse.com laufen etwa 25 % aller Websites weltweit mit WordPress. Wenn man bedenkt, wie viele Millionen Websites es gibt, ist ein Viertel eine enorme Zahl.

    GRUND 5

    Anpassungsmöglichkeiten ohne Ende!

    WordPress bietet eine riesige Auswahl an Themes für deine Website. Du kannst frei zwischen kostenlosen und Premium-Themes wählen oder sogar ein eigenes Theme entwickeln (oder entwickeln lassen!).

    GRUND 6:

    Es ist kostenlos.

    Ja, du hast richtig gelesen. Durch lokale Entwicklung ist WordPress völlig kostenlos und du kannst es mit nur einem Klick auf deinem Computer installieren. Genauso kannst du, statt einen Entwickler zu engagieren, dein vorhandenes Programmierwissen nutzen, um mehr über die Funktionsweise von WordPress zu erfahren (und Neues zu lernen ist schließlich immer gut).

    …ganz abgesehen davon: Falls du keine Zeit hast, dich zu sehr in WordPress und die Website-Erstellung zu vertiefen, kannst du dir jederzeit ein praktisches Page-Builder-Plugin holen und unseres ausprobieren.

    Denk daran, dass die Möglichkeiten mit WordPress endlos sind und man kein Genie sein muss, um zu verstehen, wie das Ganze funktioniert!

    Die Nutzung von WordPress kann dir viel Zeit, Geld und Mühe sparen. Und in Zeiten, in denen solche Ressourcen knapp sind, solltest du bedenken, dass WordPress-Websites, Plugins (wie PBS!), Themes und ganz besonders die Community dir jederzeit unter die Arme greifen und dir alles viel, viel einfacher machen können.

    Viel Spaß beim Erstellen deiner Website!

  • 3 Dinge, die Sie beachten sollten, bevor Sie sich für Page Builder entscheiden

    3-Things-to-Consider-Before-Diving-Into-Page-BuildersEs besteht die Möglichkeit, dass Sie hier sind, weil Sie gehört haben, dass PBS sehr wahrscheinlich eine der schnellsten Abkürzungen zur Website-Erstellung ist. Während Page Builder im Allgemeinen dazu da sind, die Dinge zu vereinfachen, gibt es dennoch ein paar Dinge, die Sie berücksichtigen sollten, bevor Sie tiefer in diesen speziellen Bereich der WordPress-Entwicklung eintauchen.

    WordPress lernen: Eine entscheidende Page-Builder-Voraussetzung

    Dies ist wahrscheinlich der naheliegendste Punkt auf dieser Liste, aber dennoch der wichtigste. Page Builder sind für sich allein leider nicht direkt kaufbar. Sie kommen in Form von Plugins in WordPress, die Sie installieren und erlernen müssen, um sie zu bedienen. Seien Sie versichert, dass WordPress eine der einfachsten und legitimsten Möglichkeiten ist, eine Website zu erstellen. Sie werden es angesichts des Zeitalters, in dem wir uns gerade befinden, nicht bereuen, sich etwas technisches Wissen anzueignen. Es gibt einen Unterschied zwischen WordPress.com und WordPress.org, und zu wissen, welche Variante Ihren Anforderungen entspricht, spart ebenfalls Zeit!

    Wenn Sie jedoch von der Fülle einiger technischer Begriffe in diesem Artikel etwas eingeschüchtert sind, keine Sorge. Es gibt ein paar hilfreiche Websites, die Sie besuchen können, um den Einstieg zu finden. Dazu gehören der WordPress Codex und Treehouse. Dort finden sich WordPress-Tipps und Anleitungen zur Website-Erstellung, je nach Ihren Bedürfnissen und Ihrem Wissensstand.

    Vielleicht möchten Sie zuerst das Wasser testen, nur um sicherzugehen

    Es ist immer eine gute Idee, kostenlose Versionen und/oder Testversionen auszuprobieren, bevor Sie größere Käufe tätigen, die Sie in Zukunft möglicherweise bereuen. Glücklicherweise gibt es für die meisten Page Builder kostenlose Demoversionen. Natürlich können wir uns auch eine Menge zuverlässiger Testberichte über Page Builder ansehen, während andere Page Builder miteinander vergleichen und gegenüberstellen.  Wägen Sie Ihre Optionen sorgfältig ab!

    Abgesehen vom Lesen von Artikeln und Testberichten ist eines der Dinge, die wir an WordPress schätzen, die riesige Community dahinter. Es gibt Einzelpersonen, Teams und sogar Unternehmen, die bereit sind, anderen WordPress-Nutzern, insbesondere Neulingen wie Ihnen, unter die Arme zu greifen! Die Community funktioniert im Wesentlichen nach dem Prinzip des Weitergebens statt eines reinen Gebens und Nehmens.

    Designs machen einen gewaltigen Unterschied

    WordPress-Enthusiastin Donna Fontenot Cavalier bringt es auf den Punkt in Bezug auf Drag-and-Drop-Page-Builder und die Bedeutung von grundlegendem Design. Während Drag-and-Drop-Builder wie PBS Ihnen viel Zeit sparen können, sind grundlegendes Know-how und zumindest eine gewisse Vertrautheit mit Ästhetik ein weiterer entscheidender Faktor, den es bei der Erstellung von Websites zu berücksichtigen gilt. Stellen Sie sich ein Szenario vor – sagen wir, Sie bekommen einen raffinierten Page Builder Ihrer Wahl in die Hände: das ist großartig! Aber nehmen wir an, Sie sind eine Person, die nicht gerade das beste Auge für Kunst, Design und Funktionalität hat: oh je.

    Aber keine Sorge. Page Builder Sandwich ist nicht nur ein Page Builder; unser Team hat es sich auch zur Aufgabe gemacht, anderen WordPress-Nutzern zu helfen. Wenn Sie also Probleme mit dem Design haben, machen Sie sich keine Sorgen – wir haben hier im PBS-Blog eine Reihe von Artikeln mit vielen nützlichen Tipps, die Ihnen den Einstieg erleichtern. Auf diese Weise können Sie mehr schaffen, mehr lernen und sich weniger Sorgen machen.

    Denken Sie daran: Wenn Sie Fragen oder Bedenken bezüglich Page Buildern oder zu den oben genannten Punkten haben, hinterlassen Sie uns gerne einen Kommentar im Kommentarbereich unten. Wir freuen uns immer, unseren Kunden zu helfen.

    Viel Spaß beim Erstellen Ihrer Website!

  • So erstellen Sie einfache Hero-Header in 3 einfachen Schritten

    How-to-Create-Basic-Hero-Headers-2

    061716_PBS_Jihan_How to Create Basic Hero Headers_Done

    When your dream website finally becomes a reality, the first thing you want your audience to know is what your site’s all about. The trick to reel them in is to give them a good but quick summary of your site’s content – and the easiest way to do that is by creating a Hero Header for your page.

    Was sind Hero-Header?

    The purpose of the Hero Header is to visually communicate with your target audience in the fastest and most efficient way possible. You need to grab their attention quickly, in a way that it says: “Hey, this is my website, and here are the reasons it may be worth your time.”

    Typically, hero headers take up most of the space on the page, usually with large text and an equally large background image in order to give your readers a quick but firm-enough grasp as to what your website can offer them.

    Befolgen Sie die folgenden kurzen Schritte, um mit Ihrem allerersten PBS-Hero-Header zu beginnen:

    Schritt 1: Spalte einfügen und Zeilenbreite anpassen

    061716_PBS_Jihan_How-to-Create-Basic-Hero-HeadersClick 1 Column below the Insert Content tab on the inspector (that thing on the left/sidebar). Make sure your caret (the blinking cursor on the text box) is inside the text box.

    061716_PBS_Jihan_How to Create Basic Hero Headers_Step-1-b_Revised-1Under the Row Properties tab, you may change the background color in order to use it as a guide for the next steps. Change Row Width from Normal to Full-Width: Retained Content Width using the toggle button shown above.

    What’s the difference between Normal, Full-Width and Full-Width: Retained Content Width?

    Row Width-Normal

    Normal – Background, text and other elements are contained within the bounds of your current theme’s row width

    Row Width-Full-Width

    Full-Width – Background, text and other elements fill the entire width of your browser window

    Row Width-Full-Width Retain

    Full Width: Retained Content Width – Only the background fills the entire width of your browser window. Text and other elements are contained within the bounds of your current theme’s row width

    In this layout, Full Width: Retained Content Width is used because the text that will be applied is centered; not full-width.

    Schritt 2: Außenabstand anpassen, um Freiraum zu schaffen

    061716_PBS_Jihan_How to Create Basic Hero Headers_Step-2-revisedIncrease the top and bottom margin by hovering the cursor on the arrow pointing to the margin you want to adjust. When the cursor turns into a double-headed arrow, click and drag down to your desired margin height. Its important to put Whitespace (also called Negative Space) between elements in a composition to create flow and help draw focus to the content on the page.

    Schritt 3: Hintergrund mit Text- und Element-Overlays hinzufügen

    061716_PBS_Jihan_How to Create Basic Hero Headers_Step-3-aTo add a background image with text and element overlays, simply click the Background Image icon under the Row Properties tab, upload your desired background image, and select to apply.

    061716_PBS_Jihan_How to Create Basic Hero HeadersTip #1: For Premium users, using the Background Image Tint option, helps to provide more contrast for text, buttons or other elements. You can select a tint color and adjust its value by clicking on the Background Color icon. Both icons can be found under Background on the Row Properties tab.

    061716_PBS_Jihan_How-to-Create-Basic-Hero-Headers_Step-3-cType in the message for your header. See Text Formatting tab to adjust the style. Choose typefaces that are easy to read and goes well with the background image. Remember to show contrast from the background image.

    Tipp Nr. 2: Ziehen Sie für Branding-Elemente ein weißes oder schwarzes Logo in Betracht, damit es sich nicht mit einem farbigen Hintergrundbild beißt.

    061716_PBS_Jihan_How to Create Basic Hero Headers_Step-3-dYou can also add buttons by clicking on Button below the Insert Content tab.

    Vergessen Sie nicht, Ihre Arbeit zu speichern, und schon kann es losgehen!

    Herzlichen Glückwunsch zur Erstellung Ihres ersten Hero-Headers mit PBS! Falls es nicht geklappt hat, kein Grund zur Sorge; mit PBS ganz von vorne anzufangen ist wohl einfacher, daher sollte es keine großen Umstände machen.

    Viel Spaß beim Erstellen Ihrer Website!