Was ist das YouTube Abonnieren-Link Tool?

Das YouTube Subscription Link Tool ist eine Innovation, speziell entwickelt, um die Interaktionen auf deinem YouTube-Kanal zu steigern. Mit diesem Tool kannst du einen speziellen Link erstellen, der ein direktes Abonnement-Popup für deinen Kanal anzeigt, sobald jemand darauf klickt. Dieses Popup fragt den Besucher mit der einfachen Nachricht: „Willst du diesen Kanal abonnieren?“ – eine direkte und effektive Methode, um deine Abonnentenzahl schnell zu erhöhen.

Wie funktioniert es?

Die Nutzung des Tools ist denkbar einfach: Du fügst den Link deines YouTube-Kanals in das Tool ein, und es generiert automatisch einen neuen Link. Wenn du diesen Link in deinen sozialen Medien, wie Instagram oder TikTok, teilst oder in deine Videos einbindest, wird jeder Klick potenziell zu einem neuen Abonnenten. Dieses Tool entfernt unnötige Umwege und macht den Abonnement-Prozess für den Nutzer so einfach wie nie zuvor.

Teste das Tool! YouTube Abonieren Link generieren

[one_youtube_subscriber]

Erklärvideo: Entwicklung und Funktion

Tipp! Kostenlos als WordPress Plugin herunterladen

Ich hab direkt ein kleines Tool daraus entwickelt, dass du mit diesem Shortcode bei dir installieren kannst:

[one_youtube_subscriber]

Hol dir hier das Tool kostenlos:

• YouTube Abonnieren Link Generator – WordPress Plugin

Für wen ist dieses Tool gedacht?

Das YouTube Subscription Link Tool ist ideal für Social Media Agenturen, Influencer, und Content-Ersteller, die ihre Reichweite und ihr Engagement auf YouTube maximieren möchten. Es ist auch eine wertvolle Ressource für Unternehmen, die aktive YouTube-Kanäle als Teil ihrer Marketingstrategie nutzen.

Zusätzliche Features und Verfügbarkeit

Das Beste an diesem Tool ist seine Flexibilität und Benutzerfreundlichkeit. Du kannst das Tool direkt online nutzen oder es als kostenloses Plugin für WordPress herunterladen. Dies ermöglicht es auch Besuchern deiner Website, Abonnement-Links für ihre eigenen Kanäle zu generieren. Die Integration in WordPress ist nahtlos und bietet eine zusätzliche Funktionalität für deine Website, die Besucher sicher zu schätzen wissen werden.

Warum solltest du das YouTube Subscription Link Tool verwenden?

In einer Zeit, in der das Engagement auf sozialen Plattformen immer wettbewerbsfähiger wird, bietet dieses Tool eine direkte und effektive Methode, um deine Zielgruppe zu vergrößern. Durch die Vereinfachung des Abonnementsprozesses und die Bereitstellung eines Werkzeugs, das leicht in bestehende Plattformen integriert werden kann, hilft es dir, schneller und effizienter zu wachsen.

Mit dem YouTube Subscription Link Tool kannst du die Art und Weise, wie du Interaktionen auf YouTube förderst, neu definieren. Probiere es aus und erlebe selbst, wie es dein Engagement und deine Abonnentenzahlen zum Besseren verändern kann.

The post YouTube Abonnieren-Link Tool: „Kanal abonnieren“ Popup und mehr Follower appeared first on Online Marketing One.

Verbesserte Verweildauer und SEO

Das Plugin trägt dazu bei, die Verweildauer deiner Besucher zu erhöhen. Durch die Bereitstellung nützlicher Tools bleiben Nutzer länger auf deiner Website, was sich positiv auf deine Google-Rankings auswirken kann. Eine längere Verweildauer signalisiert Suchmaschinen eine höhere Relevanz deiner Seite.

• Immobilien Rechner für WordPress

Mehr Interaktion und Leads

Die interaktiven Rechner animieren Besucher, sich intensiver mit deiner Website zu beschäftigen. Dies kann dazu führen, dass mehr Leads generiert werden. Ob für Makler, Hausverwaltungen oder Vermieter – die Tools bieten praktische Mehrwerte und können das Interesse der Nutzer wecken.

Mein neues Plugin, kurz vorgestellt

Verpass kein neues Plugin, folg mir auch auf YouTube x Lukinski. Und PS: Kennst du schon mein Tool für YouTube Links mit Follow Funktion?

Einfache Integration und Nutzung

Das Plugin lässt sich leicht in dein WordPress-System integrieren. Nach der Installation und Aktivierung kannst du den Shortcode [immo_rechner] an den gewünschten Stellen deiner Website einfügen. In wenigen Minuten stehen die Rechner bereit.

Marketingvorteile für deine Website

• Erhöhte Nutzerbindung: Besucher bleiben länger auf deiner Seite und kehren öfter zurück, was die Bindung stärkt.
• Verbesserte SEO: Längere Verweildauer und höhere Interaktion verbessern dein Google-Ranking.
• Mehr Leads: Interaktive Tools erhöhen die Wahrscheinlichkeit, dass Besucher zu Kunden werden.
• Professioneller Auftritt: Durch die Bereitstellung nützlicher Tools wirkst du kompetenter und professioneller.
• Mehrwert für Besucher: Die Rechner bieten sofortigen Nutzen und Mehrwert, was die Zufriedenheit erhöht.

Kostengünstig und effektiv

Für nur 49 € (einmalig) kannst du das Plugin auf OnlineMarketing.One erwerben. Dort findest du auch weitere nützliche Tools, wie automatische SEO Links, die dir helfen, deine Website zu optimieren.

Nützliches Tool für jede Immobilienwebsite

Das Immobilien Rechner Plugin ist eine wertvolle Ergänzung für alle, die im Immobilienbereich tätig sind. Ob Makler, Hausverwaltung oder Vermieter – dieses Plugin bietet dir und deinen Besuchern nützliche Funktionen und kann die Performance deiner Website verbessern.

Hol dir das Plugin und steigere die Effektivität deiner Website!

• Immobilien Rechner für WordPress

15+ Rechner im WordPress Plugin

Profitabilität einer Immobilie berechnen:

• Nettorendite Rechner
• Bruttorendite Rechner
• Rendite Check Rechner
• Cashflow Rechner
• Rendite Miethöhe Rechner
• Kaufpreisfaktor Rechner

Finanzierung und Kosten einer Immobilie:

• Eigenkapital Rechner
• Einkommen Rechner
• Kaufnebenkosten Rechner
• Grunderwerbsteuer Rechner
• Maklerkosten Rechner
• Baujahr Mängel Rechner

Baujahr und Maße vor Ort:

• Umrechnen Volumen Rechner
• Umrechnen Fläche Rechner
• Umrechnen Länge Rechner
• Netto Brutto Rechner
• Bruttogeschossfläche Rechner
• Nutzfläche Rechner
• Wohnfläche Rechner

Vorbereitung für die Vermietung:

• Besichtigung Q&A Vermieter Rechner
• Besichtigung Q&A Mieter Rechner

Hol dir hier das Plugin:

• Immobilien Rechner WordPress Plugin

The post Immobilien Rechner WordPress Plugin: Jetzt für nur 49 € appeared first on Online Marketing One.

The post Onlineshop in 55 Minuten (Extented): Zahlungsanbieter, Kontakt Formular, Menu, Theme & Co. appeared first on Online Marketing One.

The post Onlineshop in 55 Minuten (2/2): WordPress, WooCommerce & Produkte anlegen appeared first on Online Marketing One.

The post Onlineshop in 55 Minuten (1/2): Domain, Server, MySQL Datenbank & Installation appeared first on Online Marketing One.

CSS Ids und Klassen – Video

HTML sorgt für die Struktur. Es sagst also beispielsweise durch das HTML-Tag <h2>Text</h2> das dieses Element eine Überschrift ist.

CSS (Cascading Style Sheets, zu deutsch „Mehrstufige Formatvorlagen“) sorgt für die Gestaltung. Zum Beispiel Schriftgröße, Schriftart, Positionierung, Hintergrundfarbe.

Lies unbedingt die vollständige Erklärung unter dem Video!

1. IDs und Klassen erklärt
2. Praxisbeispiel: HTML und CSS

Du musst eingeloggt sein, um diesen Inhalt zu sehen!

Lukinski SEO Masterclass: Einloggen oder jetzt starten >

CSS und HTML im Detail

Nehmen wir an, du willst das Design deiner Überschriften global (auf allen Seiten) ändern. Wenn du dein Styling direkt im HTML machst (also in jeder einzelnen Seite), müsstest du alle Überschriften, in allen einzelnen Seiten abändern, damit das neue Design auf allen Seiten übernommen wird. Das ist extrem viel Aufwand.

Damit Änderungen an der Gestaltung sofort, überall (also global) übernommen werden, legt man als Webmaster eine CSS Datei an. In dieser (einzelnen) Datei wird die gesamte Gestaltung der Internetseite festgelegt. Die einzelnen HTML Element übernehmen diesen Style, indem sie eine bestimmte Klasse oder ID bekommen (also einen individuellen Namen).

Damit du CSS und HTML verknüpfst bekommen die HTML Tags zusätzlich den Parameter:

• class=””
• oder id=””

So wird aus deiner Überschrift <h2>Text</h2>

• <h2 class=”blaue-ueberschrift”>Text</h2>

Beides (IDs und Klassen) erfüllen für dich denselben Zweck, es verbindet HTML und CSS. Für Textelemente nutzt du immer class=”” als Parameter. Durch diese Klassen kannst du bestimmte Elemente genau identifizieren und stylen.

Du kannst zum Beispiel Links erstellen, die eine besondere Farbe haben, anders als alle anderen Links.

Praxisbeispiel: HTML und CSS verknüpfen

In diesem Beispiel schauen wir uns an, wie du aus einem Standard-Link, eine extra Klasse machst. Diese wird in der CSS Datei hinterlegt.

Immer wenn Links diese Klasse besitzen, werden sie rot und dick.

Einfacher Link:

<a href=“https://website.com“>Linktext</a>

Ergebnis:

Linktext

Schritt 1: CSS Klasse im HTML Element hinzufügen

Schritt 1 – Diesen Link wollen wir nun für besondere Angebot anpassen. Er soll rot und dick geschrieben sein. Dafür fügen wir die von uns benannte Klasse class=“roter-link“ hinzu.

Einfacher Link mit extra CSS Klasse:

<a href=“https://website.com“ class=“roter-link“>Linktext</a>

Schritt 2: CSS stylen

Schritt 2 – In der CSS Datei wird nun die Gestaltung der Klasse hinterlegt. Vor einer Klasse steht ein Punkt. Hier definierst du also einen Link a mit der Klasse .roter-link , daraus entsteht a.roter-link .

Die Einstellungen stehen dann innerhalb der geschweiften Klammern { … } .

Im CSS steht dann:

a.roter-link {
color: #f90303;
font-weight: 900;
}

Ergebnis:

Linktext

The post HTML lernen (5/5): CSS Ids und Klassen appeared first on Online Marketing One.

HTML Tabellen erstellen – Video

1. HTML Aufbau
2. Praxisbeispiel: Tabelle

Du musst eingeloggt sein, um diesen Inhalt zu sehen!

Lukinski SEO Masterclass: Einloggen oder jetzt starten >

Aufbau HTML einer Tabelle

So baust du eine einfache HTML Tabelle auf. Achte darauf, dass sie nicht zu viele Spalten enthält und einfach bleibt. Hier siehst du einen aufbau von 3×3 (also 3 Spalten und 3 Zeilen).

<table>

<tr>

<th>Zeile 1</th>

<th>Zeile 1</th>

<th>Zeile 1</th>

</tr>

<tr>

<td>Zeile 2</td>

<td>Zeile 2</td>

<td>Zeile 2</td>

</tr>

<tr>

<td>Zeile 3</td>

<td>Zeile 3</td>

<td>Zeile 3</td>

</tr>

</table>

Weiterführend

Tabellen kannst du auch (ähnlich wie eine Website) in 3 Teile gliedern: Header, Body und Footer. Außerdem siehst du hier im Beispiel, wie du zwei Zellen miteinander verbinden kannst durch den Parameter colspan=”2” .

<table>

<thead>

<tr>

<th>Produkt Name</th>

<th>Produkt Nummer</th>

</tr>

</thead>

<tbody>

<tr>

<td>Smartphone</td>

<td>123</td>

</tr>

</tbody>

<tfoot>

<tr>

<th colspan=“2″>Produktliste</th>

</tr>

</tfoot>

</table>

The post HTML lernen (4/5): Tabellen appeared first on Online Marketing One.

HTML für Content Manager – Video

In meinen Unternehmen gehören diesen 5 HTML Grundlagen zum absoluten Standard und sie werden bereits in der ersten Woche vermittelt. Schau dir dieses Video genau an, es macht dich besser, effizienter und schlauer. Wenn du die Inhalte im Video verstehst, kannst du schon 90% aller HTML Aufgaben!

In der Content Creation geht es nicht darum HTML komplett zu lernen, du musst nur den Aufbau verstehen und die wichtigsten 5 Tags können.

Das sind deine 5 HTML Grundkenntnisse für Content Marketing:

1. Überschriften
2. Links (intern und extern)
3. Listen (geordnet und ungeordnet)
4. Bilder
5. iFrame anpassen (Breite), Beispiel Google Maps

Tipp! Schau dir unbedingt die schriftliche Ausführung und die Beispiele unter dem Video an.

Du musst eingeloggt sein, um diesen Inhalt zu sehen!

Lukinski SEO Masterclass: Einloggen oder jetzt starten >

So funktioniert HTML

Hier noch einmal dein HTML 1×1 für Content Creation in WordPress:

1. Überschriften
2. Links (intern und extern)
3. Listen (geordnet und ungeordnet)
4. Bilder
5. iFrame anpassen (Breite), Beispiel Google Maps

HTML Tag: Aufbau

Der typische Aufbau ist schnell verstanden. Du hast immer ein öffnendes Tag und ein schließendes Tag. Diese bestimmen, was mit dem Inhalt passiert. Diese Tags sind fest definiert.

So heißen HTML Tags (aus dem Englischen)

• Überschriften (Headline) – h1, h2, h3, h4, h5, h6
• Text-Absatz (Paragraph) – p
• Link (Anker) – a
• Dicke Schrift (bold) – b
• …

Die HTML Tags (öffnend wie <b> und schließend wie </b> ) legst du dann jeweils vor und nach den Teil, den du in diesem Format (im Beispiel dick geschrieben [bold]) haben willst. Dafür verwendest du eckige, spitze Klammern < und >. Wichtig ist, die schließende Klammer enthält ein zusätzlichen Schrägstrich / .

Beispiel – Um einen Text zur Überschrift zu machen, setzt du vor und nach dem Text dein öffnendes und schließendes HTML-Tag.

<h2>Eine Überschrift</h2>

Wenn du Schrift dick machen willst, nutzt folgendes Tag:

<b>Dieser Satz ist jetzt dick geschrieben.</b>

So funktioniert HTML in der Grundlage.

Zusätzliche Parameter

Die einzelnen HTML-Tags kannst du durch zusätzliche Parameter erweitern. Für dieses Beispiel schauen wir uns das HTML für einen Link an.

<a href=”https://website.com/seite/”>Linktext</a>

Parameter setzt du in der öffnenden Klammer. Sie enthalten zusätzliche Informationen. Hier im Beispiel eines Links enthält der Parameter href (Englisch “horizontal referral”) das Linkziel:

<a href=”https://website.com/seite/”>Linktext</a>

Die Parameter lernst du schnell! Den besten Erfolg hast du, indem du bei Gelegenheit immer wieder einen Blick auf das HTML deines WordPress Posts wirfst. Schreibe auch gelegentlich selbst einen Link.

Es können auch mehrere Parameter in der öffnenden HTML Klammer stehen.

<a href=”https://website.com/seite/” target=”_blank” title=”Text”>Linktext</a>

Dein Link enthält jetzt insgesamt drei Parameter, die du gleich im Teil “Die 5 HTML-Tags für Content Marketing Manager” noch genauer kennenlernst. Diese bewirken folgendes:

Linkziel: href=”https://website.com/seite/”
Öffnen im neuen Tab: target=”_blank”
Text bei mouseover: title=”Text”

Herzlichen Glückwunsch, du kennst jetzt das Prinzip von HTML! Daraus kannst du dir nun ganz einfach die 5 wichtigen HTML Tags für Content Marketing Manager erschließen.

Die 5 HTML-Tags für Content Marketing Manager

Dies sind deine zentralen 5 HTML-Tags für SEO Texte in WordPress:

Überschriften: Struktur, Keywords und SEO

Überschriften verdeutlichen dem Leser (und dem Algorithmus) die grundlegende Struktur deiner Seite. Hier müssen deine Keywords platziert sein, gleichzeitig dürfen sie nicht zu statisch geschrieben sein.

Inhalt – Gute Überschriften beinhalten Keyword(s) und (manchmal eine kleine) Story. Eine schlechte Überschrift wäre z.b. “So funktioniert es”, „Mehr dazu”, etc. Eine gute Überschrift vereint Keyword und Story: “Suchmaschinenoptimierung (SEO): Seite 1 Platzierung für deine Website“.

• Schlechte Überschrift (ohne Keyword): “So funktioniert es”
• Überschrift (nur Keyword): “Haus bauen”
• Gute Überschrift (Keyword und Story): “Haus bauen: Schritt für Schritt”

Hierarchie – Deine Überschriften müssen immer eine bestimmte Hierarchie aufweisen. So, wie jede Kurzgeschichte, jede Hausarbeit, jedes Buch. Das bedeutet, arbeiten in Ebenen.

Deine H1-Überschriften ist der Seitentitel, du verwendest sie nicht im Text-Editor. So erkennt die Suchmaschine den Fokus deines Artikels. Innerhalb des Artikels verwendest du dann alle Überschriften ab H2.

Deine H2-Überschriften sind die zentralen Themen (Keywords). Diese haben wiederum Unterüberschriften, sogenannte H3-Überschriften. Sollte deine Seite sehr lang sein, z.b. über 2.000 Wörter, lohnt es sich mitunter H3-Überschriften weiter zu  segmentieren, in H4-Überschriften. Im Normalfall verwendest du aber nur H2/H3-Überschriften für deine SEO Texte.

Überschrift HTML

Ein guter Artikel bis 2.000 Wörter ist dann ungefähr im Folgenden Schema strukturiert:

Merke: H1 wird nicht im Editor verwendet, sie ist der Beitragstitel deines Posts.

• H1
  • H2
    • H3
    • H3
    • H3
  • H2
    • H3
    • H3
    • H3
  • H2
    • H3
    • H3
    • H3
  • H3
    • H3
    • H3
    • H3

Das einzelne HTML-Tag dazu ist wirklich einfach.

Überschrift HTML Tag:

<h1>Titel der Seite</h1>

<h2>Überschrift 2</h2>

<h3>Überschrift 3</h3>

<h4>Überschrift 4</h4>

<h5>Überschrift 5</h5>

<h6>Überschrift 6</h6>

Merke dir also:

1. Keywords verwenden
2. Kleine Story, statt nur Keywords
3. Hierarchie beachten

Links – Internet und externe Verlinkung

Definition – Links verweisen auf Inhalte im Internet (Webseiten und einzelne Dateien). Es gibt es in zweierlei Formen, die interne Verlinkung und die externe Verlinkungen.

Interne Links sorgen dafür, dass deine Besucher weiterführende Informationen bekommen und dementsprechend länger auf deiner Website bleiben. Das erhöht die Verweildauer und dementsprechend auch die Positionierung in den Suchergebnissen, durch eine bessere Bewertung. Wichtige Kennzahlen sind:

• Durchschnittliche Verweildauer
• Durchschnittlicher Seitenanzahl

Externe Links verweisen auf andere Websites. Externe Links müssen immer im neuen Tab geöffnet werden! Merke dir dies ab sofort, für deine gesamte Arbeit. Dadurch, dass sich die externe Website in einem neuen Tab öffnet, bleibt der Besucher auf deiner Seite.

Verweise auf Dateien sind wie externe Links.

Beachte: Wenn du auf eine interne Datei verweist, beispielsweise eine PDF, ist diese gleich zu behandeln wie ein externer Link. Der Besucher soll auf deine Website bleiben. Deshalb öffnest du eine PDF, wie einen externen Link, in einem neuen Tab.

Link HTML

Links sind sehr einfache HTML Tags, im Prinzip brauchst du nur drei Teile. Die URL, den Titel und die Entscheidung, ob sich das Fenster im selben Tab oder in einem neuen Tab öffnet (externe Links).

Link HTML:

<a href=”https://website.com/” title=”Ferrari Spider” target=”_blank” />Ferrari Spider</a>

Parameter sind:

href=”https://website.com/” – Verlinkte Internetseite
title=”Ferrari Spider” – Bildbeschreibung bei Mouseover

target=”_blank” – öffnet den Link in einem neuen Tab

Link Beispie:

Ferrari Spider

Sobald du tiefer in der Verlinkung bist, nutzt du gelegentlich einen weiteren Parameter. Backlinks sind die “Währung im Internet”. Wie im realen Leben ist es so, je mehr Leute über dich sprechen (auf dich verweisen), desto mehr Menschen werden auf die Aufmerksam. Auch der Algorithmus der Suchmaschinen wertet Backlinks stark. Je mehr qualitative Seiten auf dich verweisen (also über dich sprechen), desto stärker wird deine Seite bzw. Domain. Manchen Seiten willst du keine “extra Stärke” verleihen, zum Beispiel bei Linklisten mit zehn, zwanzig oder fünfzig Links zu externen Seiten. In diesem Fall verwendest du folgenden zusätzlichen Parameter im Link HTML Tag.

Alle Links sind automatisch “dofollow”, das heißt, soviel wie “ja, ich will meine Leser aktiv auf diese Domain verweisen”. Solltest du keinen Seitenwert geben wollen, wie in besagten großen Linklisten, setzt du ein “nofollow” Parameter in dein HTML Tag.

rel=”nofollow”

Dein Link sieht jetzt so aus:

<a href=”https://website.com/” title=”Ferrari Spider” target=”_blank” rel=”nofollow”>Ferrari Spider</a>

Listen: Fakten zusammengefasst

Definition – Listen fassen die wichtigsten Erkenntnisse deines Artikel, bzw. einzelner, größerer und Fakten-reicher Absätze in kurzen Stichpunkten zusammen.

Wenn du gute SEO Texte schreiben willst, dann startet jeder deiner Artikel mit einer Liste, dem Inhaltsverzeichnis. Viele Webmaster nutzen dafür ein Plugin, welches die Inhaltsverzeichnisse der einzelnen Artikel automatisch generiert. Ohne eine solche Erweiterung, solltest du am Anfang, nach dem ersten Absatz, immer eine Gliederung für deinen Leser zusammenstellen: Worum geht es in diesem Artikel?

Von hier aus kann jeder Nutzer direkt an eine, für ihn relevanten, Stelle im Text springen. Listen eignen aber vor allem hervorragend, um lange Absätze für den Leser zusammenzufassen. Das hilft Besucher, die nur eine schnelle Information suchen aber auch den Besuchern, die sich intensiv mit deinem Artikel und den Inhalten befassen.

• Schneller Überblick für den Besucher
• Alle Fakten des Abschnitts
• Steigert die User Experience

Listen HTML

Grundsätzlich gibt es zwei Typen von Listen. Ungeordnete Listen bestehen einfach nur aus Stichpunkten. Geordnete Listen besteht aus einer Nummerierungen von 1 bis X.

Geordnete Liste, HTML:

<ol>

<li>Stichpunkt 1</li>

<li>Stichpunkt 2</li>

<li>Stichpunkt 3</li>

</ol>

Geordnete Liste, Beispiel:

1. Stichpunkt 1
2. Stichpunkt 2
3. Stichpunkt 3

Ungeordnete Liste, HTML:

<ul>

<li>Stichpunkt 1</li>

<li>Stichpunkt 2</li>

<li>Stichpunkt 3</li>

</ul>

Ungeordnete Liste, Beispiel:

• Stichpunkt 1
• Stichpunkt 2
• Stichpunkt 3

Bilder

Definition – Die Verwendung von Bildern und Grafiken rentiert sich aus zwei Aspekten, zum einen hast du schöne visuelle Inhalte, zum anderen kannst du mit Bild SEO arbeiten. Beides fördert deine Platzierung in den Suchergebnissen. Das HTML Tag eines Bildes ist sehr einfach.

Bild HTML

Das HTML Tag enthält die URL zur Bilddatei, den Bildtitel und optimal die Abmessung des Bildes (für WordPress nicht nötig, du kannst direkt im Editor mit der Maus skalieren).

Standardaufbau von Bildern:

<img src=”https://website.com/bild.jpg” title=”Roter Ferrari Spider” />

Parameter sind:

src=”https://website.com/bild.jpg” – Bildquelle
title=”Roter Ferrari Spider” – Bildbeschreibung bei Mouseover

Beispiel für zusätzliche Parameter der Bildgröße:

<img src=”https://website.com/bild.jpg” title=”Roter Ferrari Spider” width=”800” height=”400”/>

Parameter sind:

src=”https://website.com/bild.jpg” – Bildquelle
title=”Roter Ferrari Spider” – Bildbeschreibung bei Mouseover
width=”800”

height=”400”

Damit ist das Bild 800 Pixel breit und 400 Pixel hoch.

iFrame anpassen (Breite), Beispiel Google Maps

Definition – Iframes verwendest du für die Einbettung von Inhalten anderer Websites.

Ein einfaches Beispiel sind hier Google Maps. Iframes verwendest du aber auch für Aktienkurse, Wetterdaten und manchen Social Media Angebote. Diese HTML Codes bekommst du immer fertig vom jeweiligen Anbieter.

In der Regel passt du nur einen Parameter an.

Wenn du die standardmäßige Breite und Höhe nimmst, ist die Einbettung häufig zu schmal. Stichwort: Responsive Design. Deine Website sollte sich so gut wie möglich an alle verfügbaren Endgeräte anpassen. Vom Smartphone über Tablet und Notebook bis zum 4K Smart TV.

Beispiel – Standardmäßig hat eine Karte von Google Maps eine Breite von 600 Pixeln. Dein Blog hat aber in der Regel eine Breite von bis zu 1.200 Pixeln (je nach Einstellung)t. Dementsprechend wäre es praktisch, wenn deine Map immer auf 100% skalieren würde.

Dadurch sind die Abstände aber auch die Größenverhältnisse der einzelnen Elemente gleich. Dies wirkt sich wiederum positiv auf die User Experience aus, durch einheitliches Layout und Responsiveness.

Hier siehst du ein Beispiel für den Standard Tag von Google Maps:

<iframe src=“https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387193.305935303!2d-74.25986548248684!3d40.69714941932609!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%20City%2C%20New%20York%2C%20USA!5e0!3m2!1sde!2sde!4v1587836247877!5m2!1sde!2sde“ width=“600″ height=“450″ frameborder=“0″ style=“border:0;“ allowfullscreen=““ aria-hidden=“false“ tabindex=“0″></iframe>

Dessen Parameter „width“ (Breite) veränderst du. Durch die Abwandlung passt Google Maps sich perfekt auf alle Seitenverhältnisse an, von Smartphone bis Fullscreen.

width=”100%”

Google Maps vorher:

Google Maps nach der Änderung des width-Parameters:



Dieses Prinzip brauchst du bei fast allen Iframes, nicht nur bei der Karten Einbindung von Google. selbes Prinzip verwendest du beispielsweise auch bei Wetterkarten Einbindung oder früher bei YouTube Videos (mittlerweile wandelt WordPress YouTube URLs automatisch in Videos um). Einige haben diesen Paramter schon von Haus aus, beispielsweise Giphy. Du kannst jetzt ganz einfach erkennen, ob die Karte responsive ist (100%) oder nicht (Pixel [wie oben 600]).

Du verstehst jetzt die HTML Systematik

Herzlichen Glückwunsch!  Du verstehst jetzt noch mehr von der HTML Systematik. Du kennst alle wichtigen Grundlagen für deine Arbeit in WordPress. Mit diesem neuen Wissen kannst du schon 90% aller Inhalte, die du kreieren wirst, abdecken.

Dir wird es mit zunehmender Übung auch leicht fallen neue HTML Tags zu verstehen.

Vieles im HTML erklärt sich schnell, wenn du an die englische Übersetzung denkst. Alle Begriffe sind feststehend. Kursiv heißt im Englischen “italic”, dessen Tag ist <i>Text</i> . Unterstrichen (Engl. “underline”) kreierst du mit einem <u>Text</u> . Zitate (Engl. “blockquote”) in WordPress heben Textstellen hervor, dafür nutzt du <blockquote>Text</blockquote>.

Weitere Folgen: Tabellen, CSS & Co.

Alle weiteren Folgen dieser Serie sind für dich weiterführenden Inhalte, so wie Tabellen erstellen und das Verständnis von CSS (Design [wie sieht Überschrift, etc. aus von Schriftgröße bis Farbe]).

The post HTML lernen (3/5): Grundlagen lernen für Content Manager appeared first on Online Marketing One.

Medien einbetten, Standard-URL und IDs – Video

Wie oben beschrieben wandelt WordPress einige Social Links bzw. deren URL automatisch in kleine Beiträge um, innerhalb deines Posts.

Dies funktioniert z. B. bei YouTube, Facebook, Instagram aber auch Twitter. Andere Inhalte, z. B. Google Maps, musst du mit HTML einbetten (Iframe). Wie solche Iframes funktionieren, lernst du im nächsten Video. Starten wir mit den Grundlagen, dem erkennen von URLs für das perfekte einbetten.

1. URLs verstehen / lesen lernen
2. Standards kennen (YouTube, Instagram, etc.)

Du musst eingeloggt sein, um diesen Inhalt zu sehen!

Lukinski SEO Masterclass: Einloggen oder jetzt starten >

Parameter: YouTube, Facebook, Instagram & Co.

Dabei gibt es ein paar Feinheiten, die man direkt zu Beginn verstehen sollte, z. B. die Zusammensetzung aus Domain, ID und weitere Parameter.

• YouTube Video URL: https://youtube.com/watch?v=_FfS39LPMBc
• Besteht aus:
  1) Domain: https://youtube.com/

2) Parameter: watch?v=

3) ID: _FfS39LPMBc

Beispiel Fehler: Zusätzlicher Zeit Parameter in der URL

Du musst eingeloggt sein, um diesen Inhalt zu sehen!

Lukinski SEO Masterclass: Einloggen oder jetzt starten >

Für diesen Artikel brauchst du ein Upgrade! Jetzt Paket hinzufügen >

Hey Gringo! Kauf, tu es. Kauf das Paket! Jetzt sogar günstiger, wirklich, super günstig. Viel lernen, viel Erfolg, tu es, kauf es.

Für diesen Artikel brauchst du ein Upgrade! Jetzt Paket hinzufügen >

The post HTML lernen (2/5): Medien einbetten, Standard-URL und IDs appeared first on Online Marketing One.

WordPress Shortcuts: Effizient arbeiten – Video

Shortcut machen deine Arbeit effizienter und gleichzeitig auch wesentlich professioneller, z. B. wenn du in Kundenmeetings bist und schnell am Notebook agierst. Tipp, Tipp, alles erledigt. Du kannst auch flexibler im ICE und im Flugzeug arbeiten, da du für 98% der Arbeit keine zusätzliche Maus mehr brauchst.

Ein weiterer Vorteil: Shortcuts sind zum Großteil global und nicht nur auf eine Software beschränkt. Das heißt, wenn du dir eine Tastenkombination beibringst, kannst du sie höchstwahrscheinlich in vielen anderen Tools wieder verwenden. Insbesondere die Basics wie “kopieren”, “einfügen”, “ausschneiden”, “unformatiertes einfügen” und viele andere.

Das macht dich schnell, effizient und letztendlich beruflich erfolgreicher.

1. Alle wichtigen WordPress Shortcuts
2. Text-Editor – Schnelles arbeiten
3. Sauberes HTML – Codeschnipsel vermeiden
4. Browser – Richtig kopieren

Du musst eingeloggt sein, um diesen Inhalt zu sehen!

Lukinski SEO Masterclass: Einloggen oder jetzt starten >

Für diesen Artikel brauchst du ein Upgrade! Jetzt Paket hinzufügen >

Hey Gringo! Kauf, tu es. Kauf das Paket! Jetzt sogar günstiger, wirklich, super günstig. Viel lernen, viel Erfolg, tu es, kauf es.

Für diesen Artikel brauchst du ein Upgrade! Jetzt Paket hinzufügen >

The post HTML lernen (1/5): WordPress Shortcuts für effiziente Arbeit, sauberes HTML appeared first on Online Marketing One.