Startseite » WordPress » Über mich -Seitenleisten-Widget mit Post Editor erstellen [WordPress-Tutorial]

    Über mich -Seitenleisten-Widget mit Post Editor erstellen [WordPress-Tutorial]

    Große Blogs nutzen die "Über mich" -Seiten hervorragend. Um Benutzer dorthin zu bringen, fügen sie in 99% der Fälle ein kurzes, faszinierendes "About Me Section" in ihre Blog-Sidebar ein. In diesem Beitrag zeige ich Ihnen, wie Sie diesen Abschnitt erstellen. Es ist so einfach wie einen neuen Beitrag zu schreiben. Tatsächlich verwenden wir den neuen Post-Editor in WordPress, um dies zu erstellen.

    Der Post-Editor ist eines der vielseitigsten Werkzeuge in WordPress und kaum jemand weiß es. Was ich Ihnen jetzt zeigen möchte, ist ein cleverer kleiner Design-Hack. Ein Trick, der so übersehen wurde, dass er nicht einmal in der Liste der 40 WordPress-Hacks von Hongkiat.com enthalten war.

    Dieser Trick eignet sich auch gut für das Erlernen von grundlegendem HTML und CSS, wenn Sie gerade erst anfangen.

    Erstellen Sie Ihre Nachricht

    Alles, was Sie für dieses Tutorial benötigen, ist Ihre "Über mich" -Seite, ein Foto von sich und etwas Text. Ihre "Über mich" -Seite sollte sich auf Ihre Erfolge beim Bloggen konzentrieren, den Leser mit einigen Fragen beschäftigen und Bilder von Ihrem Bloggen enthalten. Hast du diese Seite schon gemacht? Perfekt.

    Jetzt bringen wir das alles auf die WordPress neuer Post-Editor. Öffne es und lade dein Bild hoch. Wir werden viel davon aus machen HTML-Registerkarte. Wenn Sie ein Bild hochladen, generiert WordPress automatisch den HTML-Code dafür. Gehen Sie zur Registerkarte HTML und erstellen Sie ein Leerzeichen (Enter) über Ihrem Bild. Dann schreiben Sie hier eine kleine Hook-Nachricht, etwa "Wer steht hinter dieser Site?" oder auch nur "Über mich". Seien Sie kreativ.

    Fügen Sie eine kurze Beschreibung von 3-4 Sätzen hinzu, die den Leser faszinieren soll. Schreiben Sie am Ende dieses Textblocks einen Satz wie "Erfahren Sie hier mehr" und führen Sie einen Link zu Ihrer aktuellen About-Seite.

    Gestalten Sie Ihre Nachricht

    Jetzt geh das Visual Tab. Zentrieren Sie Ihren Text. Wenn Sie zu HTML zurückkehren, werden Sie feststellen, dass WordPress Code in Form eines "p-Stils" für Sie geschrieben hat. Das ist die Schönheit der Erstellung von Widgets im neuen Post-Editor. WordPress-Autowrite-Codes für Sie! Dann fügen Sie einfach ein paar grundlegende CSS hinzu!

    Erstellen Sie so etwas wie:

    DEINE NACHRICHT

    Schließen Sie den p-Stil unbedingt mit a

    .

    Und fügen Sie jedes andere CSS hinzu, das Sie sich vorstellen können oder benötigen. Sie kennen kein CSS? Nur die Google-Suche "CSS-Code für ____" und das Leerzeichen, was Sie versuchen zu tun. Kopieren Sie dann den p-Stil und fügen Sie ihn ein. Platzieren Sie es um Ihre Textblocknachricht unter dem Bild. Gestalten Sie es wie gewünscht, und schließen Sie es ab. Wenn Sie vergessen, einen p-Stil zu schließen, ist das keine große Sache. Das Styling gilt für mehr Text, den Sie möchten, aber alle machen diesen Fehler mindestens einmal.

    Verwenden Sie Codes kursiv machen und um den Text fett hervorzuheben, und vergessen Sie nicht, auch den Text zu schließen.

    Für den Moment sind wir mit dem Erstellen fertig, und es ist Zeit, dass der Spaß beginnt.

    Platzieren Sie Ihre Arbeit in der Seitenleiste

    Kopieren Sie auf der Registerkarte "HTML" alles, was Sie erstellt haben. Gehe zum Darstellung, Registerkarte Widgets, und ziehen Sie ein leeres Text-Widget in deine Sidebar. Fügen Sie Ihren Code ein. Klicken Sie dann auf Speichern und klicken Sie auf die Startseite Ihres Blogs. Wie sieht es aus?

    Sie werden fast sicher hier Änderungen vornehmen wollen. Das Bild ist möglicherweise nicht in der Größe, oder die Schriftarten werden möglicherweise nicht so angezeigt, wie Sie es sich vorstellten, aber Sie müssen sich keine Sorgen machen. Sie können dies alles direkt im Text-Widget oder noch besser in Ihrem neuen Post-Editor bearbeiten, wo Sie eine Vorschau der Änderungen anzeigen können noch einfacher.

    Fun Styling-Funktionen und andere Ergänzungen

    CSS ist wirklich ein lustiges Spiel. Im Folgenden finden Sie einige Möglichkeiten, um den Abschnitt "Über mich" richtig zu gestalten.

    1. Verwenden Sie exotische Farben.
    2. Verwenden Sie einen gepunkteten oder farbigen Rand.
    3. Platzieren Sie ein "Opt In" -Formular direkt unter Ihrem Text. Ich benutze Aweber für diese.
    4. Fügen Sie Links zu Orten hinzu, an denen Ihre Arbeit gezeigt wurde.
    5. Werfen Sie einen Witz, oder seien Sie geheimnisvoll.

    Videoanleitung

    Sie können das Video-Tutorial für diesen Beitrag auch unter oder auf YouTube ansehen.

    Was kommt als nächstes?

    Nachdem Sie einen grundlegenden Abschnitt "Über mich" und die Seite "Über mich" erstellt haben, können Sie in anderen Blogs nach Strategien und Designs suchen, die für sie geeignet sind. Machen Sie sich ein paar Notizen. Dann recherchieren Sie mehr über Ihre eigenen Leser.

    Passen Sie Your About Me genau an das an, was Ihre Leser wollen, und Sie werden eventuell mehr Leser, Kommentatoren und treue Abonnenten sehen. Versetze dich in die Sidebar und es lohnt sich am Ende.

    Anmerkung des Herausgebers: Dieser Beitrag wird von geschrieben Greg Narayan für Hongkiat.com. Greg ist ein 25-jähriger Junge aus New York, der vor dem Frühstück etwa 150 Blogfragen beantwortet.

    © Savtec
    Nützliche Informationen und Tipps zur Webentwicklung. Programmierung, Webdesign, CSS, HTML, JAVASCRIPT. Konfigurieren und installieren Sie WINDOWS neu. Erstellung von Websites und Anwendungen von Grund auf neu.