Domain E-Mail & Office Website WordPress Hosting VPS
Zurück
.com
$ 9.99 $ 26.99 /1. Jahr
.one
$ 4.99 $ 16.99 /1. Jahr
Zurück
Einloggen
Kontrollpanel Webmail Homepage-Baukasten Webshop File Manager WordPress

WordPress für Anfänger – so benutzt man es

WordPress ist eines der beliebtesten Content Management Systeme überhaupt. Mit ihm können Sie eine Website erstellen und verwalten. Das Verwenden von WordPress erfordert jedoch einige technische Kenntnisse, um die fortgeschrittenen Funktionen nutzen zu können.

Doch keine Sorge, mit diesem Guide gelangen Sie zu soliden Grundkenntnissen in WordPress. Legen wir los!

Warum WordPress nutzen?

WordPress ist nicht das einzige CMS auf der Welt, warum sollten Sie sich also dafür entscheiden? Hier sind einige Vorteile:

  1. Benutzungsfreundlich
    Mit dem Gutenberg-Editor können Sie ganz einfach verschiedene Arten von Content zu Ihrer Website hinzufügen, beispielsweise Texte, Videos, Bilder und Buttons. Möchten Sie ein Theme anpassen? Über den sogenannten Customizer können Sie es einfach ändern.
  2. Flexibel
    Sie können eine individuelle Website entwerfen, die zu Ihrem Unternehmen passt. Dabei haben Sie die Wahl aus tausenden Themes und Plugins.
  3. Support
    Im Laufe der Jahre haben sich viele Nutzer:innen und Entwickler:innen zusammengetan, um einander bei Problemen zu helfen. Sie können über die Foren auf WordPress.org um Unterstützung bitten.
  4. Kostengünstig
    WordPress ist Open Source. Jeder kann die Software kostenlos herunterladen und sie nach seinen Wünschen anpassen. Sie müssen keine teure, maßgeschneiderte Website nutzen, sondern können Ihre Seite stattdessen selbst verwalten und Kosten sparen.
Erstellen Sie Ihre Website mit WordPress

Erstellen Sie Ihre Website mit WordPress

Starten Sie noch heute Ihre Website mit dem weltweit meist-genutzten CMS.

Paket wählen
  • Über 40 kostenlose und einzigartige one.com Themes
  • Stabiles und schnelles Hosting
  • Gratis SSL-Zertifikat
  • Optimiert für mobile Geräte
  • 1-click Installationstool
  • Täglicher Support

Wie benutzt man WordPress?

Vielleicht fragen Sie sich jetzt, wie man WordPress überhaupt nutzt. Im Folgenden erfahren Sie mehr über die Grundlagen von WordPress und gemeinsam erstellen wir in 13 Schritten eine WordPress-Website.

1. Definieren Sie Ihr(e) Ziel(e)

Definieren Sie zunächst Ihr(e) Ziel(e). Was wollen Sie mit Ihrer Website erreichen? Möglicherweise ist es mehr Sichtbarkeit online. Oder Sie wollen den Umsatz steigern, indem Sie einen Onlineshop eröffnen. Wenn Sie SMARTe Ziele definieren, werden sie greifbar und realisierbar.

Legen Sie zusätzlich zu Ihren Zielen fest, wer Ihre Zielgruppe ist. Sie können Ihre Website dadurch so gut wie möglich auf die Endnutzer:innen ausrichten. Eine Persona ist dabei sehr hilfreich.

2. WordPress-Hosting kaufen

Wenn Sie WordPress verwenden möchten, benötigen Sie Hosting. Sie können die WordPress-Software kostenlos herunterladen, brauchen aber einen Ort im Internet, um Ihre Website online zu bringen. Das ist das Hosting: Ein Platz auf einem Server mit allen Dateien Ihrer Website.

WordPress Hosting bei one.com

Bei one.com können Sie WordPress Hosting erhalten, welches speziell für das CMS gemacht ist. Wir bieten verschiedene Pakete an, bei denen Sie als Minimum aber immer von folgenden Vorteilen profitieren:

Möchten Sie sich nicht um die technische Verwaltung und Wartung Ihrer WordPress-Website kümmern? Dann ist Managed WordPress Hosting genau das Richtige für Sie.

3. Eine Domain registrieren

Wenn Sie WordPress-Hosting bei one.com bestellen, benötigen Sie auch eine Domain. Eine Domain besteht aus einem Namen sowie einer Top-Level-Domain und ist die einzigartige Adresse Ihrer Website. Eine Domain ermöglicht es Besucher:innen, Ihre Website zu erreichen.

Registrierung einer Domain bei one.com

Bei one.com können Sie aus mehr als 400 Top-Level-Domains wählen, sodass Sie garantiert eine Domain finden werden, die zu Ihrem Unternehmen passt. Außerdem können Sie unbegrenzt viele Subdomains einrichten, so hat jedes Projekt seine eigene Domain.

Setzen Sie Ihre Idee in die Realität um – mit Ihrer eigenen Domain

Setzen Sie Ihre Idee in die Realität um – mit Ihrer eigenen Domain

Zeigen Sie, wer Sie sind. Finden Sie die perfekte Domain für Ihr Unternehmen oder Ihre Idee.

Finden Sie Ihre Domain
  • Wählen Sie zwischen Hunderten Domainendungen
  • Einfache Verwaltung Ihrer Domain-Einstellungen
  • Unbegrenzte Subdomains
  • Sichere Administration
  • Erschwingliche Preise
  • Täglicher Support

Einen Domainnamen ausdenken

Bevor Sie eine Domain registrieren, müssen Sie sich genau überlegen, welchen Namen Sie verwenden wollen. Er sollte kurz und leicht zu merken sein sowie einen gewissen Wiedererkennungswert besitzen.

Zudem sollte die Domain zu Ihrem Unternehmen passen. Wählen Sie etwa Ihren Firmennamen oder ein Wort, das zu Ihrem Unternehmen passt. Weitere Ideen finden Sie in unserem Artikel über Tipps für die Wahl des richtigen Domainnamens.

4. WordPress installieren

Haben Sie Hosting und eine Domain gekauft? Jetzt ist es an der Zeit, WordPress zu installieren. Sie können dies auf zwei Arten tun, indem Sie die folgenden Anleitungen verwenden:

  1. WordPress mit 1-Click installieren
  2. WordPress manuell installieren

5. Lernen Sie WordPress kennen

Herzlichen Glückwunsch, Sie haben WordPress erfolgreich installiert! Wenn Sie sich zum ersten Mal bei WordPress anmelden, werden Sie zum Dashboard weitergeleitet. Dies ist das Cockpit Ihrer Website. Von hier aus navigieren Sie zu den anderen Teilen der Adminumgebung. Auf der linken Seite sehen Sie ein Menü mit den folgenden Shortcuts:

  1. Beiträge
    Unter Beiträge erstellen und verwalten Sie die Artikel auf Ihrer Website.
  2. Medien
    Unter Medien verwalten Sie alle Medien auf Ihrer Website, wie Bilder und Videos. Es ist eine hilfreiche Übersicht über alle Medien, aber Sie können Medien auch direkt in Beiträgen und auf Seiten hinzufügen und verwalten
  3. Seiten
    In Seiten erstellen und verwalten Sie die Seiten auf Ihrer Website.
  4. Kommentare
    In den Kommentaren finden Sie alle Reaktionen, die Besucher:innen, Sie selbst und eventuell andere Nutzer:innen auf Ihrer Website hinterlassen haben. Hier können Sie auch die Kommentare verwalten.
  5. Design
    Unter Design finden Sie das von Ihnen verwendete Theme. Sie können das Theme über den Customizer anpassen.
  6. Plugins
    Unter Plugins finden Sie eine Übersicht über alle zusätzlichen Funktionen Ihrer Website. Sie können neue Plugins hinzufügen und (ungenutzte) entfernen. Weiter unten behandeln wir Plugins im Detail.
  7. Benutzer
    Unter Benutzer verwalten Sie alle Benutzer:innen Ihrer Website. Diese können verschiedene Rollen haben, unter anderem Redakteur oder Autor.
  8. Einstellungen
    Unter Einstellungen legen Sie alle Einstellungen Ihrer Website fest.

Das one.com Plugin

Neben den oben genannten Punkten können Sie weitere Shortcuts im Menü sehen. Zum Beispiel das one.com Plugin. Dank dieses Plugins erhalten Sie Zugang zu den folgenden Punkten:

  • Die one.com Themes
  • Alle one.com Plugins
  • Eine Liste der empfohlenen Plugins

6. Versetzen Sie Ihre Seite in den Wartungsmodus

Bevor Sie mit der Arbeit an Ihrer Website beginnen, sollten Sie sicherstellen, dass sie für Besucher:innen nicht sichtbar ist. Schließlich bauen Sie sie ja gerade erst auf.

Am besten versetzen Sie Ihre Website mit einem WordPress-Plugin in den Wartungsmodus, damit Sie sie in aller Ruhe hinter den Kulissen bauen können, während die Besucher:innen eine Standardseite sehen.

Plugins, um Ihre Website in den Wartungsmodus zu versetzen:

7. Einstellungen festlegen

Wenn Sie WordPress zum ersten Mal verwenden, sind die Standardeinstellungen aktiv. Sie können die Einstellungen jedoch nach Ihren Wünschen anpassen. Gehen Sie wie folgt vor, um zu den Einstellungen zu gelangen:

  1. Loggen Sie sich in Ihrer WordPress-Website ein
  2. Gehen Sie im Dashboard auf der linken Seite zu „Einstellungen“

Allgemein

Unter Allgemein geben Sie den Titel und Slogan Ihrer Website an. Vergewissern Sie sich, dass die WordPress- und Website-Adresse Ihrer Domain entsprechen. In diesem Abschnitt können Sie auch die Sprache der Website, die Zeitzone, das Datums- und Zeitformat sowie die Woche einstellen.

Schreiben

In diesem Abschnitt legen Sie die Standardkategorie für Beiträge und das Format fest. Sie können auch auswählen, wie Sie Beiträge per E-Mail hinzufügen und welche Dienste benachrichtigt werden sollen, wenn Sie einen neuen Artikel veröffentlichen.

Lesen

Unter Lesen wählen Sie aus, ob auf der Startseite Ihre neuesten Beiträge oder eine statische Seite angezeigt werden soll. Sie können auch festlegen, ob Sie den vollständigen Text oder eine Zusammenfassung Ihrer Beiträge auf der Startseite zeigen möchten. Zu guter Letzt können Sie hier einstellen, ob Ihre Website für Suchmaschinen sichtbar sein soll.

Diskussion

Unter Diskussion aktivieren oder deaktivieren Sie Trackbacks und Pingbacks. Außerdem legen Sie die Reaktionsmöglichkeiten für Benutzer:innen fest und können Avatare auswählen. Ein Avatar ist ein Bild der Besucher:innen, die einen Kommentar hinterlassen.

Medien

In diesem Abschnitt legen Sie die Bildgrößen für Thumbnails sowie mittlere und große Bilder fest. Oft können Sie diese Einstellungen so belassen, wie sie sind.

Permalinks

Permalinks definieren die URL-Struktur Ihrer Website. In WordPress stehen Ihnen mehrere Optionen zur Verfügung. Wir empfehlen die Wahl von „Beitragsname“. Sie können aber auch die anderen Optionen wählen, aber diese sind nicht optimal für SEO.

Datenschutz

Unter Datenschutz können Sie eine Datenschutzerklärung erstellen. Dies ist unerlässlich, um die (inter)nationale Gesetzgebung einzuhalten. WordPress stellt eine Datenschutzerklärung zur Verfügung, aber Sie müssen sie richtig verwenden.

8. Ein WordPress-Theme wählen

Da Sie die Einstellungen jetzt vorgenommen haben, können wir das Aussehen Ihrer Website mit einem Theme festlegen. Ein WordPress-Theme ist ein Design, das das Aussehen Ihrer Website bestimmt. Jedes Theme hat seinen eigenen Stil und eigene Funktionen.

Im Theme-Verzeichnis von WordPress finden Sie Tausende von kostenlosen Themes, mit denen Sie eine professionelle Website erstellen können. Diese Themes sind geeignet, wenn Sie eine einfache Website aufsetzen möchten. Auf der Seite können Sie nach bestimmten Merkmalen filtern, zum Beispiel zweispaltigen Layouts oder Themes, die speziell für Blogs entwickelt wurden.

Sind Sie auf der Suche nach einem flexiblen Theme mit mehreren WordPress Templates, persönlichem Support und regelmäßigen Updates? Dann wählen Sie ein kostenpflichtiges Theme. Diese finden Sie beispielsweise auf ThemeForest.

Beliebte WordPress-Themes:

Tipp: Entdecken Sie weitere gute WordPress-Themes für Ihre Website.

Installation eines WordPress-Themes

Sie können ein WordPress-Theme auf Ihrer WordPress-Seite mit den folgenden Schritten installieren:

  1. Melden Sie sich bei Ihrer WordPress-Website an
  2. Gehen Sie im Dashboard auf der linken Seite zu „Design“
  3. Klicken Sie auf „Themes“
  4. Anschließend auf „Neu hinzufügen“
  5. Wählen Sie ein Theme Ihrer Wahl und klicken Sie auf „Installieren“
  6. Nun noch auf „Aktivieren“, um das Theme zu verwenden

Möchten Sie ein extern heruntergeladenes Theme installieren? Klicken Sie auf „Theme hochladen“ auf der Übersichtsseite der Themes.

Anpassen des WordPress-Themes

Nachdem Sie das WordPress-Theme installiert haben, können Sie es nach Ihrem Geschmack anpassen. Dies tun Sie über „Design“ > „Anpassen“. Welche Möglichkeiten Sie haben, hängt von dem jeweiligen Theme ab.

Wenn Sie es vorziehen, die Website komplett selbst zu gestalten, können Sie sich für einen Drag-and-Drop-Website-Builder wie den Elementor Website Builder oder Beaver Builder entscheiden. Ein Website-Builder lässt sich als WordPress-Plugin zu Ihrer Website hinzufügen.

9. WordPress-Plugins installieren

WordPress verfügt standardmäßig über viele Funktionen. Manchmal möchten Sie jedoch vielleicht zusätzliche Funktionen zu Ihrer Website hinzufügen, etwa ein Kontaktformular, Buttons für soziale Medien und gute Sicherheitsfeatures. An dieser Stelle kommen Plugins ins Spiel.

WordPress-Plugins sind Softwarekomponenten, mit denen Sie Ihrer Website praktische Funktionen hinzufügen können. Über das Plugin-Verzeichnis können Sie tausende Plugins mit ihren jeweiligen Features finden. Für kostenpflichtige Plugins können Sie auch einen Blick auf CodeCanyon werfen.

Beliebte WordPress-Plugins

Tipp: Sehen Sie sich weitere gute WordPress-Plugins für Ihre Website an.

Installation eines WordPress-Plugins

Möchten Sie WordPress-Plugins auf Ihrer Website verwenden? Hier erfahren Sie, wie Sie sie installieren:

  1. Melden Sie sich bei Ihrer WordPress-Seite an
  2. Gehen Sie im Dashboard links im Menü zu „Plugins“
  3. Klicken Sie auf „Neu hinzufügen“
  4. Wählen Sie ein Plugin Ihrer Wahl und klicken Sie auf „Jetzt installieren“
  5. Anschließend auf „Aktivieren“, um das Plugin zu verwenden

10. Seiten erstellen

Mit den Basics aus dem Weg können Sie nun Seiten erstellen. Jede Website hat einige grundlegende Seiten mit Informationen über Ihr Unternehmen. Da wären:

  • Startseite / Homepage
  • Kontaktseite
  • „Über uns“-Seite
  • Datenschutzerklärung
  • Allgemeine Geschäftsbedingungen

Eine Seite erstellen

Mit den folgenden Schritten können Sie ganz einfach eine oder mehrere Seiten in WordPress erstellen.

  1. Loggen Sie sich bei Ihrer WordPress-Seite ein
  2. Klicken Sie im Dashboard-Menü links auf „Seiten“
  3. Hier auf „Neu hinzufügen“
  4. Nun fügen Sie den gewünschten Inhalte der Seite ein
  5. Klicken Sie auf „Veröffentlichen“, um die Seite zu veröffentlichen, oder wählen Sie „Entwurf speichern“, um die Seite später zu veröffentlichen

WordPress-Patterns

WordPress arbeitet mit einem Block-Editor namens Gutenberg. Gutenberg ermöglicht es Ihnen, Blöcke zu verwenden, um einen Beitrag oder eine Seite zu erstellen. Um Ihnen bei der Gestaltung dieser Blöcke behilflich zu sein, wurden Patterns (dt. Muster) eingeführt. Patterns sind vorgefertigte Blöcke, die Sie kopieren und an der gewünschten Stelle einfügen. So müssen Sie sie nicht selbst entwerfen.

11. Widgets und Menüs hinzufügen

Sie können Widgets und Menüs im Header (dem oberen Teil Ihrer Website), im Footer (dem unteren Teil Ihrer Website) und in der Seitenleiste (dem Teil links oder rechts auf Ihrer Website) einfügen.

Ein Widget ist eine Software mit einer bestimmten Funktion. In WordPress sind Standard-Widgets verfügbar, aber ein Theme oder Plugin kann zusätzliche Widgets anbieten. Widgets können zum Beispiel einen Kalender, ein Archiv, ein Bild oder ein Menü anzeigen.

Hinzufügen von Widgets

Hier eine Anleitung, um Widgets im Header, Footer oder der Seitenleiste Ihrer Website einzufügen:

  1. Melden Sie sich bei Ihrer WordPress-Website an
  2. Gehen Sie im Dashboard zu dem Menüpunkt „Design“
  3. Klicken Sie auf „Widgets“
  4. Wählen Sie die Widgets aus, die Sie hinzufügen möchten und passen Sie sie nach Ihren Wünschen an
  5. Klicken Sie auf „Aktualisieren“, um die Widgets auf die Live-Seite zu übernehmen

Hinzufügen eines oder mehrerer Menüs

Ein Menü ermöglicht es den Besucher:innen, schnell zu den wichtigsten Seiten Ihrer Website zu navigieren. Sie fügen ein Menü im Header und oft auch im Footer Ihrer Website ein. So erstellen Sie ein Menü:

  1. Loggen Sie sich in Ihrer WordPress-Seite ein
  2. Klicken Sie im Dashboard-Menü links auf „Design“
  3. Anschließend auf „Menüs“
  4. Geben Sie Ihrem Menü einen Namen
  5. Klicken Sie auf „Menü erstellen“
  6. Fügen Sie die wichtigsten Seiten in das Menü ein
  7. Wählen Sie den Speicherort und klicken Sie auf „Menü speichern“

12. Beiträge erstellen

Planen Sie, neben Ihrer Website einen WordPress-Blog aufzusetzen? Dafür können Sie Beiträge nutzen.

Beiträge sind von Seiten getrennt und geben Ihnen einen besseren Überblick über den Inhalt. Sie helfen außerdem, eine gute Position in Suchmaschinen wie Google zu erreichen, damit Ihre Zielgruppe Sie besser finden kann.

Bevor Sie mit dem Schreiben beginnen, ist es ratsam, eine Keyword Recherche durchzuführen. So wissen Sie, wonach Ihre Zielgruppe sucht und können Inhalte für dieses Publikum erstellen.

Brauchen Sie Hilfe? Dann ist ein SEO-Tool wie Marketgoo die passende Lösung. Sie können das Tool ganz einfach über Ihr Kontrollpanel installieren, wenn Sie Kund:in von one.com sind.

Einen Beitrag erstellen

Möchten Sie eigene Beiträge erstellen? Dann folgen Sie der folgenden Anleitung:

  1. Melden Sie sich bei Ihrer WordPress-Seite an
  2. Gehen Sie im Dashboard auf den Menüpunkt „Beiträge“
  3. Klicken Sie auf „Neu hinzufügen“
  4. Fügen Sie den gewünschten Inhalt in den Beitrag ein
  5. Klicken Sie auf „Veröffentlichen“, um den Beitrag zu veröffentlichen oder wählen Sie „Entwurf speichern“, wenn Sie ihn später veröffentlichen möchten

Kategorien und Tags

Sie können WordPress Kategorien und WordPress Tags verwenden, um Ihre Beiträge in WordPress zu organisieren. Beide Funktionen erleichtern es den Besucher:innen, Informationen zum gleichen Thema auf Ihrer Website zu finden.

Wenn Sie beispielsweise Rezepte auf Ihrer Website veröffentlichen, dann können Sie die Rezepte in Kategorien wie „Frühstück“, „Mittagessen“ usw. einteilen. Mithilfe von Tags können Sie Rezepte zusammenfassen, die dieselbe Zutat enthalten, etwa „Eier“ oder „Weizenmehl“.

13. Veröffentlichen Sie Ihre WordPress-Website

Sind Sie mit Ihrer WordPress-Website zufrieden? Dann können Sie das Wartungsmodus-Plugin deinstallieren und Ihre Website den Besucher:innen zeigen.

Heißt das, dass Sie jetzt mit Ihrer Website fertig sind? Nein. Das Erstellen und die Pflege einer Website sind ein kontinuierlicher Prozess, der mit Anpassungen und Verbesserungen verbunden ist. So sollten Sie unter anderem regelmäßig Ihre WordPress-Website aktualisieren. Dadurch können Sie von neuen Funktionen profitieren und die Sicherheit der Seite erhöhen.

So aktualisieren Sie Ihre WordPress-Website:

  1. Melden Sie sich bei Ihrer WordPress-Seite an
  2. Gehen Sie im Dashboard auf den Menüpunkt „Dashboard“
  3. Klicken Sie auf „Updates“
  4. Prüfen Sie, ob Sie die WordPress-Version, ein Theme oder Plugin aktualisieren müssen
  5. Klicken Sie auf den jeweiligen Button, um die Komponente zu aktualisieren

Hinweis: Erstellen Sie ein Backup Ihrer Seite, bevor Sie etwas updaten. So können Sie jederzeit die letzte Version wiederherstellen, falls etwas schiefgeht.

Optimieren Sie Ihre WordPress-Website

Neben der regelmäßigen Aktualisierung Ihrer WordPress-Website müssen Sie auch Maßnahmen ergreifen, um Ihre Website auf dem neuesten Stand, sicher und SEO-gerecht zu halten. WordPress-Plugins wie Wordfence Security, Rank Math SEO und WP Optimize helfen Ihnen bei der Optimierung Ihrer Website.

Tipp: Lesen Sie unseren Artikel, um Ihre WordPress-Website schneller zu machen.

Fazit

Herzlichen Glückwunsch, Sie sind nun mit den Grundlagen von WordPress vertraut. WordPress zu verstehen ist ein anhaltender Lernprozess, aber dank dieses Artikels sind Sie bereits auf dem richtigen Weg und der Anfang ist getan.

Möchten Sie mehr über das CMS wissen? In unserer Academy finden Sie hilfreiche Artikel zu WordPress, um eine erfolgreiche WordPress-Website zu erstellen. Viel Erfolg!

Erstellen Sie Ihre Website mit WordPress

Erstellen Sie Ihre Website mit WordPress

Starten Sie noch heute Ihre Website mit dem weltweit meist-genutzten CMS.

Paket wählen
  • Über 40 kostenlose und einzigartige one.com Themes
  • Stabiles und schnelles Hosting
  • Gratis SSL-Zertifikat
  • Optimiert für mobile Geräte
  • 1-click Installationstool
  • Täglicher Support
' html += '
' html += '' + ocKeys[locale].allPlans + '' html += '
' return html; } function ocGetLocale() { var localString = document.getElementsByTagName('html')[0].getAttribute("lang"); if (!localString) { return "en"; } if (localString.indexOf('-') === -1) { return localString; } return localString.split("-")[0] } function isInViewport(element) { var rect = element.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.top <= (window.innerHeight || osShadowElement.documentElement.clientHeight) && rect.right <= (window.innerWidth || osShadowElement.documentElement.clientWidth) ); } function ocLogBuyClick(e) { if (!e.target.classList.contains("onecom_plans_cta_main")) { return; } var parent = e.target.parentNode.parentNode.parentNode.parentNode.parentNode; window.dataLayer.push({ event: "addToCart", ecommerce: { currencyCode: parent.getAttribute("data-currency"), add: { actionField: { list: document.getElementsByTagName('h1')[0].textContent }, products: [ { id: parent.getAttribute("data-title"), name: parent.getAttribute("data-title"), brand: "one.com", category: "pps", variant: parent.getAttribute("data-plan"), location: document.getElementsByTagName('h1')[0].textContent, price: parent.getAttribute("data-price"), quantity: 1 } ] } } }); } function ocLogTrackingInfo(e) { if ((e.getAttribute("data-marked") !== "1") || (!dataLayer)) { return; } e.removeAttribute("data-marked"); if (!e.getAttribute("data-title") || e.getAttribute("data-fresh") !== "1") { return; } console.info("push initiated") window.dataLayer.push({ id: e.getAttribute("data-title"), name: e.getAttribute("data-title"), brand: "one.com", category: "pps", variant: e.getAttribute("data-plan"), list: "/" + ocGetLocale() + "/", location: document.getElementsByTagName('h1')[0].textContent, price: e.getAttribute("data-price"), position: e.getAttribute("data-position") } ); e.setAttribute("data-fresh", "0"); } function ocSetImpression() { var plans = document.getElementsByClassName('oc-plan-container'); for (var i = 0; i < plans.length; i++) { if (isInViewport(plans[i])) { ocLogTrackingInfo(plans[i]); } } } function ocProductImpression(e) { var plans = document.getElementsByClassName('oc-plan-container'); for (var i = 0; i < plans.length; i++) { if (isInViewport(plans[i])) { plans[i].setAttribute("data-marked", "1"); ocTimeout = setTimeout(ocSetImpression, 2000) } } } /* var headingTag = window.location.hash.substr(1); if(headingTag.length > 0){ console.log(headingTag); osShadowElement.querySelector('#'+headingTag).scrollIntoView(); } */ //frontpage function scrollSmooth() { var elmntToView = osShadowElement.querySelector("#oc-plansandprices"); elmntToView.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" }); } const rightBtn = osShadowElement.querySelector('#right-button'); const leftBtn = osShadowElement.querySelector('#left-button'); if (rightBtn && leftBtn) { rightBtn.addEventListener("click", function (event) { const conent = osShadowElement.querySelector('#content'); conent.scrollLeft += 100; event.preventDefault(); let activeElement = osShadowElement.querySelector(".banner-thumb.active"); if (osShadowElement.querySelector(".banner-menu li:last-child").classList.contains('active')) { osShadowElement.querySelector(".banner-menu li:first-child").click(); } else { if (activeElement.nextElementSibling) { activeElement.nextElementSibling.click(); } } }); leftBtn.addEventListener("click", function (event) { const conent = osShadowElement.querySelector('#content'); conent.scrollLeft -= 100; event.preventDefault(); let activeElement = osShadowElement.querySelector(".banner-thumb.active"); if (osShadowElement.querySelector(".banner-menu li:first-child").classList.contains('active')) { osShadowElement.querySelector(".banner-menu li:last-child").click(); } else { if (activeElement.previousElementSibling) { activeElement.previousElementSibling.click(); } } }); } function nextSlide(thumbClass) { if (thumbClass.length > 0) { var elements = osShadowElement.querySelectorAll(".banner-section"); for (var i = 0, len = elements.length; i < len; i++) { elements[i].style.display = "none"; } var elements = osShadowElement.querySelectorAll(".banner-thumb"); for (var i = 0, len = elements.length; i < len; i++) { elements[i].classList.remove("active"); } var elmntToView = osShadowElement.querySelector('.banner-section-' + thumbClass); elmntToView.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" }); var menuClicked = osShadowElement.querySelector('.banner-thumb-' + thumbClass); menuClicked.classList.add("active"); menuClicked.scrollIntoView(); osShadowElement.querySelector('.banner-section-' + thumbClass).style.display = "block"; } } const accordionTitlesSuccess = osShadowElement.querySelectorAll(".success-steps-col"); accordionTitlesSuccess.forEach((accordionTitle) => { accordionTitle.addEventListener("click", () => { if (accordionTitle.classList.contains("active")) { accordionTitle.classList.remove("active"); } else { const accordionTitlesWithIsOpen = document.querySelectorAll(".success-steps-col"); accordionTitlesWithIsOpen.forEach((accordionTitleWithIsOpen) => { accordionTitleWithIsOpen.classList.remove("active"); }); accordionTitle.classList.add("active"); } }); }); const accordionTitlesFaq = osShadowElement.querySelectorAll(".faq-col"); accordionTitlesFaq.forEach((accordionTitle) => { accordionTitle.addEventListener("click", () => { if (accordionTitle.classList.contains("active")) { accordionTitle.classList.remove("active"); } else { const accordionTitlesWithIsOpen = document.querySelectorAll(".faq-col"); accordionTitlesWithIsOpen.forEach((accordionTitleWithIsOpen) => { accordionTitleWithIsOpen.classList.remove("active"); }); accordionTitle.classList.add("active"); } }); }); (function () { slide('right'); })(); /***script to call APIs starts here**/ function checkStatus(response) { if (response.status >= 200 && response.status < 300) { return Promise.resolve(response); } else { return Promise.reject(new Error(response.statusText)); } } function parseJson(response) { return response.json(); } function niceRounding(stringDigit) { var lastDigit = stringDigit.at(-1); if (lastDigit == 8) { stringDigit = stringDigit.replace(/.$/, "9"); } return stringDigit; } /***script to call APIs ends here**/ /**Glosssary page***/ function scrollSmoothGlossary(alphabet) { var alphaList = osShadowElement.querySelectorAll(".alphabet-list"); for (let i = 0; i < alphaList.length; i++) { alphaList[i].classList.remove("active"); } var activeAlpha = osShadowElement.querySelector(".alpha-" + alphabet); activeAlpha.classList.add("active"); var elmntToView = osShadowElement.querySelector("#div-" + alphabet); //elmntToView.scrollTop = elmntToView.scrollHeight; elmntToView.scrollIntoView({ behavior: "smooth" }); //elmntToView.scrollTop(elmntToView.scrollHeight); } /**searching**/ const $search = osShadowElement.getElementById('search-glossary'); if ($search) { $search.addEventListener('input', (event) => { const searchText = event.target.value; const regex = new RegExp(searchText, 'gi'); const noSearchDiv = osShadowElement.querySelector(".no-glossary-search-found"); const itemList = osShadowElement.querySelectorAll(".oc-glossary-item-articles"); //const articleList = osShadowElement.querySelectorAll(".item-article"); var mainCount = 0; for (let j = 0; j < itemList.length; j++) { var articleList = itemList[j].querySelectorAll(".item-article"); var countDisplayBlock = 0; for (let i = 0; i < articleList.length; i++) { var h3 = articleList[i].getElementsByTagName("a")[0]; var text = h3.innerHTML; text = text.replace(/(|<\/mark>)/gim, ''); const newText = text.replace(regex, '$&'); h3.innerHTML = newText; if (text !== newText) { articleList[i].style.display = "flex"; countDisplayBlock++; } else { articleList[i].style.display = "none"; } } if (countDisplayBlock === 0) { itemList[j].parentNode.parentNode.style.display = "none"; } else { itemList[j].parentNode.parentNode.style.display = "flex"; mainCount++; } } if (mainCount === 0) { noSearchDiv.classList.remove("hidden"); } else { noSearchDiv.classList.add("hidden"); } }); } var select = osShadowElement.getElementById('alphabet-mobile-select'); if (select) { select.onchange = function () { var alphabet = this.options[this.selectedIndex].value; this.options[this.selectedIndex].classList.add('active'); scrollSmoothGlossary(alphabet); //var elmntToView = osShadowElement.querySelector("#" + alphabet); //elmntToView.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"}); }; } var glossaryHeader = osShadowElement.getElementById("glossary-header"); var glossaryStickyHeader = osShadowElement.getElementById( "glossary-header-sticky" ); // Get the offset position of the navbar if (glossaryHeader) { var sticky = glossaryHeader.offsetTop; } var glossarySearch = osShadowElement.querySelector(".oc-glossary-search"); // Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position function stickyAlphabets() { if (window.pageYOffset > sticky) { glossaryHeader.classList.add("hidden"); glossaryStickyHeader.classList.remove("hidden"); glossaryStickyHeader.style.zIndex = "99999"; glossarySearch.classList.add("hidden"); } else { glossaryHeader.classList.remove("hidden"); glossaryStickyHeader.classList.add("hidden"); glossarySearch.classList.remove("hidden"); } } /** HIGHLIGHT ALPHABET NAVIGATION LINKS WHILE SCROLLING */ // cache the navigation list-items containing links var navigationLinks = osShadowElement.querySelectorAll('#glossary-header-sticky > .glossary-header-alphabets > ul > li'); // cache the alphabet sections var sections = osShadowElement.querySelectorAll('.oc-glossary-item > div > span.item-head'); // map each target section ID to the corresponding navigation list-items var sectionIdToNavigationLink = {}; for (var i = 0; i < sections.length; i++) { var id = sections[i].id; sectionIdToNavigationLink[id] = osShadowElement.querySelectorAll('#glossary-header-sticky > .glossary-header-alphabets > ul > li.alpha-' + id); } function getOffset(el) { var _x = 0; var _y = 0; while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) { _x += el.offsetLeft - el.scrollLeft; _y += el.offsetTop - el.scrollTop; el = el.offsetParent; } return { top: _y, left: _x }; } function highlightNavigation() { // get the current vertical position of the scroll bar var scrollPosition = window.pageYOffset || document.documentElement.scrollTop; // iterate the sections for (var i = sections.length - 1; i >= 0; i--) { var currentSection = sections[i]; // get the position of the section var sectionTop = getOffset(currentSection).top; // if the user has scrolled over the top of the section if (scrollPosition >= sectionTop - 250) { // get the section id var id = currentSection.id; // get the corresponding navigation link var navigationLink = sectionIdToNavigationLink[id]; // if the link is not active if (typeof navigationLink[0] !== 'undefined') { if (!navigationLink[0].classList.contains('active')) { // remove .active class from all the links for (i = 0; i < navigationLinks.length; i++) { navigationLinks[i].className = navigationLinks[i].className.replace(/ active/, ''); } // add .active class to the current link navigationLink[0].className += (' active'); } } else { // remove .active class from all the links for (i = 0; i < navigationLinks.length; i++) { navigationLinks[i].className = navigationLinks[i].className.replace(/ active/, ''); } } // we have found our section, so we return false to exit the each loop return false; } } } if (glossaryHeader) { window.addEventListener('scroll', highlightNavigation); } /** Glossary page ends here**/ /** NL frontpage modification - version 2.0 **/ // Get the HTML element you need. const imageOverlay = osShadowElement.getElementById('testimonial-video-section-block-image-overlay'); const playButton = osShadowElement.getElementById('testimonial-video-section-block-play'); if (playButton) { var vidId = playButton.getAttribute("data"); // Add the event listener for the play button. playButton.addEventListener('click', play) } // The function that is called when the button is clicked. function play(e) { e.preventDefault(); let iframe_tag = osShadowElement.getElementById('ytplayer'); iframe_tag.setAttribute('src', 'https://www.youtube.com/embed/' + vidId + '?autoplay=1&enablejsapi=1&origin=http%3A%2F%2Flocalhost&widgetid=1'); imageOverlay.style.opacity = '0'; playButton.style.opacity = '0'; window.setTimeout(function () { playButton.style.display = 'none'; imageOverlay.style.display = 'none'; }, 800); // timed to match animation-duration } // Glossary page navigationbar issue fix Start let elemWebTopMenu = document.querySelector(".WebTop-Nav"); let elemWebTopSearch = document.querySelector(".MegaMenuAndSearchWrapper"); let elem = document.querySelector("#glossary-header-sticky"); if (elem && ( elemWebTopMenu || elemWebTopSearch ) ) { let rect = elem.getBoundingClientRect(); let elemTop = rect.top; let elemBottom = rect.bottom; let rectWebTop = elemWebTopMenu.getBoundingClientRect(); let elemTopWebTop = rectWebTop.top; let elemBottomWebTop = rectWebTop.bottom; let rectWebTopSearch = elemWebTopSearch.getBoundingClientRect(); let elemTopWebTopSearch = rectWebTopSearch.top; let elemBottomWebTopSearch = rectWebTopSearch.bottom; if ( ( elemBottomWebTopSearch >= elemTop ) || ( elemBottomWebTop >= elemTop ) ) { elem.style.zIndex = 200; } else { elem.style.zIndex = 0; } document.addEventListener('scroll', function() { let rect = elem.getBoundingClientRect(); let elemTop = rect.top; let elemBottom = rect.bottom; let rectWebTop = elemWebTopMenu.getBoundingClientRect(); let elemTopWebTop = rectWebTop.top; let elemBottomWebTop = rectWebTop.bottom; let rectWebTopSearch = elemWebTopSearch.getBoundingClientRect(); let elemTopWebTopSearch = rectWebTopSearch.top; let elemBottomWebTopSearch = rectWebTopSearch.bottom; if ( ( elemBottomWebTopSearch >= elemTop ) || ( elemBottomWebTop >= elemTop ) ) { elem.style.zIndex = 200; } else { elem.style.zIndex = 0; } }); } let glossaryNav = document.querySelector("#glossary-header-sticky"); let topSearchBarGloss = document.querySelector(".MegaMenuAndSearchWrapper"); let navSpacer = document.querySelector(".NavSpacer"); if ( glossaryNav && topSearchBarGloss) { topSearchBarGloss.style.position = 'static'; navSpacer.style.display = 'none'; } // Glossary page navigationbar issue fix End /******* Custom YouTube video embed js start *******/ let yt_thumb_wraps = document.querySelectorAll('.yt-video-wrapper.yt-play-icon'); if (yt_thumb_wraps) { yt_thumb_wraps.forEach(yt_thumb_wrap => { yt_thumb_wrap.addEventListener("click", function(event) { event.preventDefault(); let vid = event.target.dataset.vid; let yt_thumb = event.target; let vtitle = yt_thumb.getAttribute("title"); if(!vid){ yt_thumb = yt_thumb.querySelector('.yt-thumb-image'); vid = yt_thumb.dataset.vid; vtitle = yt_thumb.getAttribute("title"); } if(vid && yt_thumb){ let ytvideo = ''; let yt_thumb_wrap = yt_thumb.closest('.yt-video-wrapper.yt-play-icon'); yt_thumb_wrap.innerHTML = ytvideo; yt_thumb_wrap.classList.remove("yt-play-icon"); } }); }); } /******* Custom YouTube video embed js end *******/