{"id":9919,"date":"2017-08-17T08:55:00","date_gmt":"2017-08-17T08:55:00","guid":{"rendered":"https:\/\/www.templatemonster.com\/de\/blog\/?p=9919"},"modified":"2020-04-02T13:44:21","modified_gmt":"2020-04-02T13:44:21","slug":"wie-baue-ich-eine-umhauende-landingpage-fuer-ein-webinar","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/de\/wie-baue-ich-eine-umhauende-landingpage-fuer-ein-webinar\/","title":{"rendered":"Wie baue ich eine Webinar-Landingpage in 1 Stunde?"},"content":{"rendered":"<p style=\"text-align: justify\">Habt Ihr jemals daran gedacht, ein Webinar zu veranstalten? Ich veranstaltete mein erstes Webinar vor einigen Monaten und in diesem Moment wusste ich fast gar nichts \u00fcber Webinare und wie man sie hostet. Das war eine tolle Erfahrung. Vor allem kann ich Euch jetzt mit Sicherheit sagen - der ganze Prozess hatte sich gar nicht so be\u00e4ngstigend oder teuer entpuppt, wie ich zuerst erwartet habe. Wenn Ihr wirklich liebt, was Ihr macht und m\u00f6chtet, dass andere Leute davon erfahren und Euren Standpunkt teilen, werdet Ihr sicherlich erfolgreich sein.<\/p>\n<p style=\"text-align: justify\">Als alles anfing, hatte ich ein paar Tage, um mich vorzubereiten und hatte fast keine Ahnung von dem, was passieren w\u00fcrde. Das einzige, was vorher war, war der Werbeprozess. Viele E-Mails wurden verschickt, mehrere Arten von Bannern wurden\u00a0entworfen und in den sozialen Netzwerken\u00a0 ver\u00f6ffentlicht, eine Video-Einladung wurde auf den YouTube-Kanal hochgeladen und auch geteilt... Es wurde viel Vorbereitungsarbeit unternommen, aber es war wirklich wert! Allerdings gab es eine Sache, die mir am meisten geholfen hatte: Eine Landingpage, die das Webinar promotete.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-9877\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/2017\/08\/bg-image-8.jpg\" alt=\"Webinar Landing Page\" width=\"900\" height=\"680\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/bg-image-8.jpg 900w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/bg-image-8-300x227.jpg 300w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/bg-image-8-768x580.jpg 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/p>\n<h3><\/h3>\n<hr \/>\n<h3 style=\"text-align: center\"><strong>Kurz zum Thema Webinare<\/strong><\/h3>\n<p style=\"text-align: justify\">Welchen Grund gibt es denn \u00fcberhaupt, ein Webinar zu veranstalten? Zuerst einmal besprechen wir einige Vorteile. Die wichtigsten sind: Webinare sind immer zug\u00e4nglich. Sobald das Webinar aufgezeichnet ist, k\u00f6nnen die Besucher sich es sp\u00e4ter ansehen oder die Abschrift herunterladen, wenn sie sie brauchen. Es ist eine gro\u00dfartige M\u00f6glichkeit, Euer Fachwissen und hilfreiche Informationen mit anderen zu teilen oder Menschen zu helfen, ihre Probleme zu l\u00f6sen und\u00a0 dabei qualitativ hochwertige Leads anzulocken.<\/p>\n<p style=\"text-align: justify\">Es ist eine kosteng\u00fcnstige M\u00f6glichkeit, f\u00fcr Eure Produkte zu werben. Es bedarf kein umfangreiches Netzwerk; es gibt keine Notwendigkeit, irgendwo zu reisen oder sogar das Haus zu verlassen, um ein Webinar zu veranstalten. Ihr k\u00f6nnt Eure Markenbekanntheit steigern und Interesse zu Euren Produkten wecken, indem Ihr Menschen einl\u00e4dt, an einer Diskussion teilzunehmen und ihnen die M\u00f6glichkeit gebt, Fragen zu stellen. \u00dcber 60% der Vermarkter nutzen Webinare als Teil ihrer Content-Marketing-Strategie. (Quelle: <a href=\"http:\/\/contentmarketinginstitute.com\/2014\/10\/2015-b2b-content-marketing-research\/\" target=\"_blank\" rel=\"nofollow\">Content Marketing Institute<\/a>).<\/p>\n<p style=\"text-align: justify\">Also, wenn Ihr etwas zu sagen habt, wenn Ihr \u00fcber Euer Unternehmen so vielen Menschen wie m\u00f6glich erz\u00e4hlen m\u00f6chtet, wenn Ihr gerne Menschen hilft oder wenn Ihr einfach nur gern \u00f6ffentlich spricht, dann ist ein Webinar definitiv eine perfekte L\u00f6sung f\u00fcr Euch. Allerdings bleibt nur noch die letzte Frage: <strong>wie erfahren die Leute von Eurem Webinar?<br \/>\n<\/strong><br \/>\n<img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-9896\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/2017\/08\/webinar2-1.jpg\" alt=\"Webinar\" width=\"900\" height=\"600\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/webinar2-1.jpg 900w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/webinar2-1-300x200.jpg 300w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/webinar2-1-768x512.jpg 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/p>\n<p style=\"text-align: justify\"><span style=\"color: #000000\">Wenn Ihr nicht die einzigen Personen sein m\u00f6chtet, die an dieser Veranstaltung teilnehmt, m\u00fcsst Ihr eine Anzeige erstellen. Vergesst nicht, wenn Ihr gut f\u00fcr Euer Webinar wirbt - wird es gut f\u00fcr Euch und Eure Ideen werben! Auch wenn Ihr ein kleines Budget habt, gibt es einige effiziente M\u00f6glichkeiten, es zu ver\u00f6ffentlichen:<\/span><\/p>\n<p>1. Sendet <em>E-Mails<\/em> an potenzielle Besucher.<br \/>\n2. Nehmt eine <em>Video-Einladung<\/em> auf.<br \/>\n3. Verwendet <em>Facebook Ads Manager<\/em> als eine der effektivsten Werbem\u00f6glichkeiten.<br \/>\n4. Erstellt eine <em>Landingpage<\/em>, die Euer Webinar beschreibt, und teilt den Link mit allen \u00fcber soziale Netzwerke oder E-Mail.<\/p>\n<hr \/>\n<h3 style=\"text-align: center\"><strong><span class=\"\" lang=\"de\">Eine Fallstudie<\/span><\/strong><\/h3>\n<p style=\"text-align: justify\">Lassen Sie uns das Webinar <a href=\"http:\/\/www.youtube.com\/watch?v=33R61zZk-9A\" target=\"_blank\" rel=\"nofollow\">\u201cAdvanced SEO in 60 Minutes with Mad Lemmings\u201d<\/a>\u00a0 <span id=\"result_box\" class=\"\" lang=\"de\">als Fallstudie betrachten. <\/span><span class=\"\">Dazu gibt es einen Artikel <a href=\"http:\/\/www.youtube.com\/watch?v=33R61zZk-9A\" target=\"_blank\" rel=\"nofollow\">\u201c<\/a><a href=\"https:\/\/www.templatemonster.com\/blog\/advanced-seo-video-tutorials-with-mad-lemmings-ashley-faulkes\/\" target=\"_blank\" class=\"broken_link\">Advanced SEO in 10 Short Videos [Ashley Faulkes from Mad Lemmings speaking]<\/a><a href=\"http:\/\/www.youtube.com\/watch?v=33R61zZk-9A\" target=\"_blank\" rel=\"nofollow\">\u201d<\/a>, wo Ihr die wichtigsten Infos in Form von kurzen Videos finden k\u00f6nnt. Stellen wir uns vor, wir werden dieses Webinar veranstalten und m\u00fcssen daf\u00fcr werben. Nehmen wir an, wir haben eine Website Vorlage heruntergeladen, aber wissen nicht, wie man sie anpasst.<\/span> Diese <a href=\"https:\/\/www.templatemonster.com\/de\/website-vorlagen-tipo-62130.html\" target=\"_blank\">Kaffeehaus-Vorlage<\/a> wird uns dabei helfen. Nach der Installation fangen wir mit der Anpassung an.<\/p>\n<hr \/>\n<h3 style=\"text-align: center\"><strong><span id=\"result_box\" class=\"\" lang=\"de\"><span class=\"\">Was genau werden wir \u00e4ndern?<\/span><\/span><\/strong><span id=\"result_box\" class=\"\" lang=\"de\"><\/span><br \/>\n<span id=\"result_box\" class=\"\" lang=\"de\"><\/span><\/h3>\n<p style=\"text-align: justify\"><span id=\"result_box\" class=\"\" lang=\"de\"><span class=\"\">In Bezug auf den Inhalt: Wir werden alle Texte <em>(Men\u00fc, \u00dcberschriften, Abs\u00e4tze, Schaltfl\u00e4chentexte, Werbetexte)<\/em> und Bilder <em>(Favicon, Logo, Hintergrundbilder und Icons)<\/em> \u00e4ndern.<\/span> <span class=\"\">Was die Stile angeht, bearbeiten wir die Prim\u00e4rfarbe, die f\u00fcr Buttons <\/span><\/span><span id=\"result_box\" class=\"\" lang=\"de\"><span class=\"\">verwendet wird<\/span><\/span><span id=\"result_box\" class=\"\" lang=\"de\"><span class=\"\">, Links und Hintergrundfarben.<\/span><\/span><\/p>\n<hr \/>\n<h3 style=\"text-align: center\">\u00a0<strong>Was brauchen wir daf\u00fcr?<\/strong><\/h3>\n<ol>\n<li>\u00a0<em>HTML\/CSS-Edito<\/em>r oder irgendein <em>IDE-Tool<\/em>, das Ihr kennt <em>(Notepad ++, Sublime, JetBrains WebStorm\/PhpStorm).<\/em><\/li>\n<li>Der Inhalt - <em>Texte, Bilder, Logo und Favicon.<\/em><\/li>\n<li>\u00a0Ein starker Wunsch, eine coole Landingpage zu bauen!<\/li>\n<\/ol>\n<hr \/>\n<h3 style=\"text-align: center\"><strong>Wie lange wird es dauern?<\/strong><\/h3>\n<p style=\"text-align: justify\">Ihr werdet es nicht glauben, aber wenn Ihr bereits alle notwendigen Inhalte vorbereitet habt, wird es weniger als eine Stunde dauern, um die restlichen Sachen zu tun. Lasst uns unsere Vorlage in Abschnitte teilen - so k\u00f6nnen wir sehen, welche Abschnitte wir auslassen* k\u00f6nnen und entscheiden, wie man die, die noch \u00fcbrig bleiben, anpassen kann.<\/p>\n<h3><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-9880 aligncenter\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/2017\/08\/demo1_20170719_182013.jpg\" alt=\"Demo-Webinar-Landingpage\" width=\"598\" height=\"2048\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/demo1_20170719_182013.jpg 598w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/demo1_20170719_182013-88x300.jpg 88w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/demo1_20170719_182013-299x1024.jpg 299w\" sizes=\"(max-width: 598px) 100vw, 598px\" \/><\/h3>\n<p style=\"text-align: center\">* Nat\u00fcrlich k\u00f6nnt Ihr auch alle anderen Abschnitte anpassen, wenn Ihr gen\u00fcgend Inhalt habt.<\/p>\n<hr \/>\n<h3 style=\"text-align: center\"><strong><span style=\"color: #000000\">Die Anpassung unserer Vorlage<\/span><\/strong><\/h3>\n<p style=\"text-align: justify\"><span style=\"color: #000000\">Jetzt m\u00fcssen wir die Datei <strong>index.html<\/strong> im \/<strong>site<\/strong>\/ Ordner \u00f6ffnen und sie Abschnitt f\u00fcr Abschnitt bearbeiten - alle \u00c4nderungen, die den Inhalt betreffen, werden hier gemacht. Alles, was mit Stilen zu tun hat, \u00e4ndern wir in der <strong>style.css<\/strong> Datei, also \u00f6ffnet bitte sie auch.<br \/>\n<\/span><\/p>\n<h3 style=\"text-align: center\"><strong>Abschnitt 1<\/strong><\/h3>\n<ol>\n<li><strong>Favicon<\/strong>.\n<p style=\"text-align: justify\"><span style=\"color: #000000\">Um es zu \u00e4ndern, kopiert einfach deine neue <strong>favicon.ico<\/strong> Datei in\u00a0 den \/ <strong>images<\/strong> \/ Ordner und ersetzt die vorhandene. Wenn sie einen anderen Namen oder eine Erweiterung hat, m\u00fcsst Ihr sie auch im Code umbenennen. Auf dem n\u00e4chsten Bildschirm habe ich die Inhaltselemente hervorgehoben, die editiert werden m\u00fcssen.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-9885\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/2017\/08\/section1-structure900.jpg\" alt=\"Bereich-1-Struktur\" width=\"900\" height=\"375\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/section1-structure900.jpg 900w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/section1-structure900-300x125.jpg 300w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/section1-structure900-768x320.jpg 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/li>\n<li><strong>Logo-\u00c4nderung<\/strong>.\n<p>Lasst uns es erstmal im Code finden.<\/p>\n<div>\n<pre>&lt;div class=\"rd-navbar-panel\"&gt;\r\n    &lt;button data-rd-navbar-toggle=\".rd-navbar-nav-wrap\" class=\"rd-navbar-toggle\"&gt;&lt;span&gt;&lt;\/span&gt;&lt;\/button&gt;\r\n    &lt;div class=\"rd-navbar-brand\"&gt;&lt;a href=\"index.html\" class=\"brand-name\"&gt;&lt;img src=\"images\/<span style=\"color: #ff00ff\">logo-default-185x41.png<span style=\"color: #000000\">\"<\/span><\/span> alt=\"\" width=\"185\" height=\"41\"\/&gt;&lt;\/a&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<\/div>\n<p style=\"text-align: justify\">Jetzt m\u00fcssen wir das neue Logo in \/<strong>images<\/strong>\/ Ordner kopieren und den Dateinamen in der hervorgehobenen Zeile ersetzen. Beachtet, dass Ihr die Breite und H\u00f6he Ihres neuen Logos bearbeiten m\u00fcsst.<\/p>\n<\/li>\n<li><strong>Men\u00fc-Anpassung.<\/strong>\n<p style=\"text-align: justify\">Da wir keine solchen Men\u00fcpunkte wie z.B. 'Services' und 'Shop' auf unserer Landingpage brauchen, k\u00f6nnen wir sie aus der Seitenstruktur entfernen.<\/p>\n<p>Findet sie im Code und l\u00f6scht alle unn\u00f6tigen Elemente aus der Men\u00fcliste:<\/p>\n<div>\n<pre>&lt;li&gt;&lt;a href=\"about.html\"&gt;About&lt;\/a&gt;\r\n    &lt;ul class=\"rd-navbar-dropdown\"&gt;\r\n        &lt;li&gt;&lt;a href=\"team.html\"&gt;Our team&lt;\/a&gt;\r\n        &lt;\/li&gt;\r\n        &lt;li&gt;&lt;a href=\"testimonials.html\"&gt;Testimonials&lt;\/a&gt;\r\n        &lt;\/li&gt;\r\n        &lt;li&gt;&lt;a href=\"faq.html\"&gt;FAQ&lt;\/a&gt;\r\n        &lt;\/li&gt;\r\n    &lt;\/ul&gt;\r\n&lt;\/li&gt;\r\n<span style=\"color: #ff00ff\">&lt;li&gt;&lt;a href=\"services.html\"&gt;Services&lt;\/a&gt;\r\n&lt;\/li&gt;<\/span>\r\n&lt;li&gt;&lt;a href=\"blog.html\"&gt;Blog&lt;\/a&gt;\r\n    &lt;ul class=\"rd-navbar-dropdown\"&gt;\r\n        &lt;li&gt;&lt;a href=\"single-post.html\"&gt;Single post&lt;\/a&gt;\r\n        &lt;\/li&gt;\r\n    &lt;\/ul&gt;\r\n&lt;\/li&gt;\r\n<span style=\"color: #ff00ff\">&lt;li&gt;&lt;a href=\"shop.html\"&gt;Shop&lt;\/a&gt;\r\n    &lt;ul class=\"rd-navbar-dropdown\"&gt;\r\n        &lt;li&gt;&lt;a href=\"single-product.html\"&gt;Single product&lt;\/a&gt;\r\n        &lt;\/li&gt;\r\n        &lt;li&gt;&lt;a href=\"cart.html\"&gt;Cart&lt;\/a&gt;\r\n        &lt;\/li&gt;\r\n        &lt;li&gt;&lt;a href=\"checkout.html\"&gt;Checkout&lt;\/a&gt;\r\n        &lt;\/li&gt;<\/span>\r\n    &lt;\/ul&gt;\r\n&lt;\/li&gt;\r\n&lt;li&gt;&lt;a href=\"#\"&gt;Contacts&lt;\/a&gt;\r\n    &lt;ul class=\"rd-navbar-dropdown\"&gt;\r\n        &lt;li&gt;&lt;a href=\"contacts-1.html\"&gt;Contacts 1&lt;\/a&gt;\r\n        &lt;\/li&gt;\r\n        &lt;li&gt;&lt;a href=\"contacts-2.html\"&gt;Contacts 2&lt;\/a&gt;\r\n        &lt;\/li&gt;\r\n    &lt;\/ul&gt;\r\n&lt;\/li&gt;\r\n<\/pre>\n<\/div>\n<\/li>\n<li>\u00a0<strong><strong><strong>Hintergrundbild.<\/strong><\/strong><\/strong>Kopiert das neue Hintergrundbild in \/<strong>images<\/strong>\/ Ordner (so, wie Ihr es mit dem Logo gemacht habt) und benennt den ausgew\u00e4hlten Bildtitel um. Es ist nicht schwer, den ersten Abschnitt dank der \u00dcberschrift (h1-Tag) zu finden.\n<div>\n<pre>&lt;section style=\"background-image: url(images\/bg-image-4.jpg);\" class=\"jumbotron-custom jumbotron-custom-2 bg-gray-base bg-image\"&gt;\r\n    &lt;div class=\"jumbotron-custom-content\"&gt;\r\n        &lt;div class=\"shell\"&gt;\r\n            &lt;div class=\"range\"&gt;\r\n                &lt;div class=\"cell-sm-10 cell-md-9 cell-lg-7\"&gt;\r\n                   <span style=\"color: #ff00ff\"> &lt;h1&gt;Elite Coffee Brands&lt;\/h1&gt;<\/span>\r\n                    &lt;p class=\"large\"&gt;Coffee Shop is the place where you can get flavorful coffee strains from global elite brands and roasters at very affordable price.&lt;\/p&gt;\r\n                    &lt;a href=\"about.html\" class=\"btn btn-style-1 btn-primary\"&gt;read more&lt;\/a&gt;\r\n                &lt;\/div&gt;\r\n            &lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/section&gt;\r\n<\/pre>\n<\/div>\n<\/li>\n<li style=\"text-align: justify\">\u00dcbrigens kann die <strong>h1 \u00dcberschrift<\/strong>, der <strong>Absatz<\/strong>, der darauf folgt, und der <strong>Button<\/strong> - auch hier ge\u00e4ndert werden.\n<div>\n<pre>&lt;section style=\"background-image: url(images\/bg-image-4.jpg);\" class=\"jumbotron-custom jumbotron-custom-2 bg-gray-base bg-image\"&gt;\r\n    &lt;div class=\"jumbotron-custom-content\"&gt;\r\n        &lt;div class=\"shell\"&gt;\r\n            &lt;div class=\"range\"&gt;\r\n                &lt;div class=\"cell-sm-10 cell-md-9 cell-lg-7\"&gt;\r\n                    <span style=\"color: #ff00ff\">&lt;h1&gt;Elite Coffee Brands&lt;\/h1&gt;\r\n                    &lt;p class=\"large\"&gt;Coffee Shop is the place where you can get flavorful coffee strains from global elite brands and roasters at very affordable price.&lt;\/p&gt;\r\n                    &lt;a href=\"about.html\" class=\"btn btn-style-1 btn-primary\"&gt;read more&lt;\/a&gt;<\/span>\r\n                &lt;\/div&gt;\r\n            &lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/section&gt;\r\n<\/pre>\n<\/div>\n<\/li>\n<li style=\"text-align: justify\">Jetzt \u00e4ndern wir die Farbe, die f\u00fcr Buttons, Links, Icons und <b class=\"b4\">Formularbeschriftungen<\/b> verwendet wird - die<strong><strong> prim\u00e4re Farbe. <\/strong><\/strong>\u00d6ffnet \/<strong>css<\/strong>\/ folder und die Datei <strong>\u2018style.css<\/strong>\u2019 . Sucht nach \u2018<strong>.text-primary<\/strong>\u2019 Klasse und kopiert den <span class=\"st\">Hex-Code der Farbe<\/span>, die ihr zugeordnet ist. Mit der automatischer Text-Ersatzfunktion Eures Editors ersetzt sie mit dem <span style=\"color: #000000\">Hex-Wert der Farbe<\/span>, die Ihr als prim\u00e4r f\u00fcr Eure Zielseite gew\u00e4hlt habt. Wenn alle 129<span style=\"color: #ff0000\">\u00a0<\/span>alle Vorkommen ersetzt werden, \u00e4ndert die Hover-Farbe (die zweite markierte Farbe auf dem Screenshot) - sie sollte sich leicht von der Prim\u00e4rfarbe unterscheiden (dunkler oder heller sein).\n<div>\n<pre>.text-capitalize {\r\n  text-transform: capitalize;\r\n}\r\n.text-muted {\r\n  color: #999;\r\n}\r\n.text-primary {\r\n  color: <span style=\"color: #ff00ff\">#ce6d06;<\/span>\r\n}\r\na.text-primary:hover,\r\na.text-primary:focus {\r\n  color: <span style=\"color: #ff00ff\">#9c5305;<\/span>\r\n}\r\n<\/pre>\n<\/div>\n<\/li>\n<\/ol>\n<p style=\"text-align: justify\">Nachdem diese \u00c4nderungen vorgenommen wurden, k\u00f6nnen wir das Ergebnis der Anpassung des ersten Abschnitts sehen:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-9884\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/2017\/08\/section1-changes900.jpg\" alt=\"Bereich-1-\u00c4nderungen\" width=\"900\" height=\"410\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/section1-changes900.jpg 900w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/section1-changes900-300x137.jpg 300w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/section1-changes900-768x350.jpg 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/p>\n<h3><\/h3>\n<hr \/>\n<h3 style=\"text-align: center\"><strong>Abschnitt 2<\/strong><\/h3>\n<p>Das sind die Elemente, die wir \u00e4ndern werden:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-9887\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/2017\/08\/section2-structure900.jpg\" alt=\"Bereich-2-Struktur\" width=\"900\" height=\"345\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/section2-structure900.jpg 900w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/section2-structure900-300x115.jpg 300w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/section2-structure900-768x294.jpg 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/p>\n<ol>\n<li style=\"text-align: justify\"><strong>Texte<\/strong>.\n<p>Findet diesen Abschnitt im Code dank der \u00dcberschrift und ersetzt den auf dem Screenshot ausgew\u00e4hlten Text mit den neuen (wie im vorherigen Abschnitt).<\/p>\n<div>\n<pre>&lt;section class=\"section-xl bg-periglacial-blue text-center text-md-left\"&gt;\r\n    &lt;div class=\"shell-fluid shell-condensed\"&gt;\r\n        &lt;div class=\"range range-md-reverse range-xs-middle range-md-right range-50\"&gt;\r\n            &lt;div class=\"cell-md-5 cell-lg-4\"&gt;\r\n                &lt;div class=\"inset-1\"&gt;\r\n                    &lt;h2&gt;<span style=\"color: #ff00ff\">WHO WE ARE<\/span>&lt;\/h2&gt;\r\n                    &lt;div class=\"p text-width-smallest\"&gt;\r\n                        &lt;p class=\"big\"&gt;<span style=\"color: #ff00ff\">We are a team of dedicated coffee fans who celebrate exceptional coffee brands and roasters by providing our guests the unique opportunity to try coffee drinks of the highest quality.<\/span>&lt;\/p&gt;\r\n                    &lt;\/div&gt;\r\n                    &lt;a href=\"about.html\" class=\"btn btn-sm btn-style-1 btn-primary\"&gt;learn more&lt;\/a&gt;\r\n                &lt;\/div&gt;\r\n            &lt;\/div&gt;\r\n            &lt;div class=\"cell-md-7 cell-lg-6\"&gt;\r\n                &lt;div class=\"row row-gutter-custom range-15\"&gt;\r\n                    &lt;div class=\"col-xs-4\"&gt;\r\n                        &lt;figure class=\"figure-fullwidth\"&gt;&lt;img src=\"images\/about-1-300x460.jpg\" alt=\"\" width=\"300\" height=\"460\"\/&gt;&lt;\/figure&gt;\r\n                    &lt;\/div&gt;\r\n                    &lt;div class=\"col-xs-4\"&gt;\r\n                        &lt;figure class=\"figure-fullwidth\"&gt;&lt;img src=\"images\/about-2-300x460.jpg\" alt=\"\" width=\"300\" height=\"460\"\/&gt;&lt;\/figure&gt;\r\n                    &lt;\/div&gt;\r\n                    &lt;div class=\"col-xs-4\"&gt;\r\n                        &lt;figure class=\"figure-fullwidth\"&gt;&lt;img src=\"images\/about-3-300x460.jpg\" alt=\"\" width=\"300\" height=\"460\"\/&gt;&lt;\/figure&gt;\r\n                    &lt;\/div&gt;\r\n                &lt;\/div&gt;\r\n            &lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/section&gt;\r\n<\/pre>\n<\/div>\n<\/li>\n<li><strong>Bilder.<\/strong>\n<p style=\"text-align: justify\">Mal sehen, wie wir zwei von ihnen statt drei machen k\u00f6nnen. W\u00e4hlt ein &lt;div&gt;-Element mit der Klasse<strong> .col-xs-4<\/strong> und l\u00f6scht es. Vorherige Bl\u00f6cke, die Bilder enthalten, sollten nun die Klasse<strong> .col-xs-6<\/strong> haben (da nur zwei von ihnen \u00fcbrig geblieben sind).<\/p>\n<div>\n<pre>&lt;div class=\"cell-md-7 cell-lg-6\"&gt;\r\n    &lt;div class=\"row row-gutter-custom range-15\"&gt;\r\n        &lt;div class=\"col-xs-4\"&gt;\r\n            &lt;figure class=\"figure-fullwidth\"&gt;&lt;img src=\"images\/about-1-300x460.jpg\" alt=\"\" width=\"300\" height=\"460\"\/&gt;&lt;\/figure&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div class=\"col-xs-4\"&gt;\r\n            &lt;figure class=\"figure-fullwidth\"&gt;&lt;img src=\"images\/about-2-300x460.jpg\" alt=\"\" width=\"300\" height=\"460\"\/&gt;&lt;\/figure&gt;\r\n        &lt;\/div&gt;\r\n       <span style=\"color: #ff00ff\"> &lt;div class=\"col-xs-4\"&gt;\r\n            &lt;figure class=\"figure-fullwidth\"&gt;&lt;img src=\"images\/about-3-300x460.jpg\" alt=\"\" width=\"300\" height=\"460\"\/&gt;&lt;\/figure&gt;\r\n        &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<\/div>\n<p style=\"text-align: justify\">Als n\u00e4chstes ersetzen wir die Bilder. Wir werden die Portr\u00e4ts der Teilnehmer unseres Webinars verwenden - Ashley Faulkes und Jeff Bell. Benennt bitte die im Code verwendeten Bilddateien um und vergesst nicht, neue Dateien in \/<strong>images<\/strong>\/ Ordner zu kopieren.<\/p>\n<div>\n<pre>&lt;div class=\"cell-md-7 cell-lg-6\"&gt;\r\n    &lt;div class=\"row row-gutter-custom range-15\"&gt;\r\n        &lt;div class=\"col-xs-6\"&gt;\r\n            &lt;figure class=\"figure-fullwidth\"&gt;&lt;img src=\"images\/<span style=\"color: #ff00ff\">about-1-300x460.jpg<\/span>\" alt=\"\" width=\"300\" height=\"460\"\/&gt;&lt;\/figure&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div class=\"col-xs-6\"&gt;\r\n            &lt;figure class=\"figure-fullwidth\"&gt;&lt;img src=\"images\/<span style=\"color: #ff00ff\">about-2-300x460.jpg<\/span>\" alt=\"\" width=\"300\" height=\"460\"\/&gt;&lt;\/figure&gt;\r\n        &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<\/div>\n<\/li>\n<li><strong>Hintergrundfarbe.<\/strong><br \/>\n<strong><br \/>\n<\/strong>Es kann auch mit einer etwas leichteren T\u00f6nung angepasst werden. Die Klasse, die diese Farbe bestimmt, wird im folgenden Screenshot hervorgehoben.<\/p>\n<div>\n<pre>&lt;section class=\"section-xl <span style=\"color: #ff00ff\">bg-periglacial-blue<\/span> text-center text-md-left\"&gt;\r\n<\/pre>\n<\/div>\n<p style=\"text-align: justify\">Wir sollten es in der '<strong>style.css<\/strong>'-Datei finden, den Hex-Wert der Farbe kopieren, die ihr zugeordnet ist, und wieder mit der automatischer Ersatzfunktion <span style=\"color: #000000\">4 Vorkommen<\/span> mit der neuen Farbe ersetzen. Und so wird dieser Abschnitt aussehen, nachdem wie ihn anpassen!<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-9886\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/2017\/08\/section2-changes900.jpg\" alt=\"Bereich-2-\u00c4nderungen\" width=\"900\" height=\"345\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/section2-changes900.jpg 900w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/section2-changes900-300x115.jpg 300w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/section2-changes900-768x294.jpg 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/li>\n<\/ol>\n<hr \/>\n<h3 style=\"text-align: center\"><strong>Abschnitt 3<\/strong><\/h3>\n<p style=\"text-align: justify\">Diesen Abschnitt k\u00f6nnen wir in \"<strong>Sie werden lernen<\/strong>\" oder \u00e4hnliches umbenennen, wo wir die detaillierten Informationen \u00fcber das Wissen, das die Menschen w\u00e4hrend des Webinars erhalten werden, zur Verf\u00fcgung stellen. Die Elemente, die wir \u00e4ndern werden, sind umrahmt und warten darauf, ver\u00e4ndert zu werden.<\/p>\n<h3><a href=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2017\/07\/section3-structure900.jpg?x47994\" target=\"_blank\" rel=\"nofollow\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-107084 aligncenter\" src=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2017\/07\/section3-structure900.jpg?x47994\" alt=\"\" width=\"900\" height=\"377\" data-lazy-loaded=\"true\" \/><\/a><\/h3>\n<ol>\n<li><strong>Texte<\/strong>.\n<p>Die Anpassung ist immer noch die gleiche - findet den Abschnitt im Code und bearbeitet ihn. Die Texte, die in diesem Abschnitt ersetzt werden sollen, werden in der folgenden Codebox hervorgehoben:<\/p>\n<div>\n<pre>&lt;section class=\"bg-gray-dark\"&gt;\r\n    &lt;div class=\"shell-fluid shell-condensed\"&gt;\r\n        &lt;div class=\"range range-condensed\"&gt;\r\n            &lt;div class=\"cell-md-6 cell-md-6-mod-1 image-wrap-left bg-gray-dark\"&gt;\r\n                &lt;div class=\"image-wrap-inner\"&gt;\r\n                    &lt;h2&gt;<span style=\"color: #ff00ff\">OUR&lt;br&gt;SERVICES<\/span>&lt;\/h2&gt;\r\n                    &lt;p class=\"big\"&gt;<span style=\"color: #ff00ff\">We provide a variety of services both to our new and regular customers. If you can think of anything connected with coffee, then we can offer it at our Coffee Shop.<\/span>&lt;\/p&gt;\r\n                    &lt;a href=\"services.html\" class=\"btn btn-style-1 btn-primary\"&gt;read more&lt;\/a&gt;\r\n                &lt;\/div&gt;\r\n            &lt;\/div&gt;\r\n            &lt;div style=\"background-image: url(images\/home-three-3-1011x800.jpg)\" class=\"cell-md-6 cell-md-6-mod-2 image-wrap-right bg-gray-dark bg-image\"&gt;\r\n                &lt;div class=\"image-wrap-inner\"&gt;\r\n                    &lt;div class=\"range range-condensed range-inner-bordered\"&gt;\r\n                        &lt;div class=\"cell-xs-6\"&gt;\r\n                            &lt;article class=\"box-icon\"&gt;\r\n                                &lt;figure class=\"box-icon-image\"&gt;&lt;img src=\"images\/icon-service-3-84x84.png\" alt=\"\" width=\"84\" height=\"84\"\/&gt;&lt;\/figure&gt;\r\n                                &lt;p class=\"box-icon-header\"&gt;&lt;a href=\"services.html\"&gt;<span style=\"color: #ff00ff\">SELECTED coffee beans<\/span>&lt;\/a&gt;&lt;\/p&gt;\r\n                                &lt;p class=\"box-icon-text\"&gt;<span style=\"color: #ff00ff\">Enjoy the aroma of selected coffee beans available at our shop.<\/span>&lt;\/p&gt;\r\n                            &lt;\/article&gt;\r\n                        &lt;\/div&gt;\r\n                        &lt;div class=\"cell-xs-6\"&gt;\r\n                            &lt;article class=\"box-icon\"&gt;\r\n                                &lt;figure class=\"box-icon-image\"&gt;&lt;img src=\"images\/icon-service-4-84x84.png\" alt=\"\" width=\"84\" height=\"84\"\/&gt;&lt;\/figure&gt;\r\n                                &lt;p class=\"box-icon-header\"&gt;&lt;a href=\"services.html\"&gt;<span style=\"color: #ff00ff\">elite coffee<\/span>&lt;\/a&gt;&lt;\/p&gt;\r\n                                &lt;p class=\"box-icon-text\"&gt;<span style=\"color: #ff00ff\">Take a sip of Elite Coffee, and  revel in the different tastes.<\/span>&lt;\/p&gt;\r\n                            &lt;\/article&gt;\r\n                        &lt;\/div&gt;\r\n                        &lt;div class=\"cell-xs-6\"&gt;\r\n                            &lt;article class=\"box-icon\"&gt;\r\n                                &lt;figure class=\"box-icon-image\"&gt;&lt;img src=\"images\/icon-service-1-84x84.png\" alt=\"\" width=\"84\" height=\"84\"\/&gt;&lt;\/figure&gt;\r\n                                &lt;p class=\"box-icon-header\"&gt;&lt;a href=\"services.html\"&gt;<span style=\"color: #ff00ff\">Tasty coffee<\/span>&lt;\/a&gt;&lt;\/p&gt;\r\n                                &lt;p class=\"box-icon-text\"&gt;<span style=\"color: #ff00ff\">At Coffee Shop you can find lots of tasty coffee flavors.<\/span>&lt;\/p&gt;\r\n                            &lt;\/article&gt;\r\n                        &lt;\/div&gt;\r\n                        &lt;div class=\"cell-xs-6\"&gt;\r\n                            &lt;article class=\"box-icon\"&gt;\r\n                                &lt;figure class=\"box-icon-image\"&gt;&lt;img src=\"images\/icon-service-2-84x84.png\" alt=\"\" width=\"84\" height=\"84\"\/&gt;&lt;\/figure&gt;\r\n                                &lt;p class=\"box-icon-header\"&gt;&lt;a href=\"services.html\"&gt;<span style=\"color: #ff00ff\">cooking coffee<\/span>&lt;\/a&gt;&lt;\/p&gt;\r\n                                &lt;p class=\"box-icon-text\"&gt;<span style=\"color: #ff00ff\">If you prefer to cook coffee, we have something special for you.<\/span>&lt;\/p&gt;\r\n                            &lt;\/article&gt;\r\n                        &lt;\/div&gt;\r\n                    &lt;\/div&gt;\r\n                &lt;\/div&gt;\r\n            &lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/section&gt;\r\n<\/pre>\n<\/div>\n<\/li>\n<li><strong>Blurb-Icons\/Bilder<\/strong>.\n<p>Um das Bild zu \u00e4ndern, kopiert einfach das neue Bild in Ordner \/<strong>images<\/strong>\/ und \u00e4ndert seinen Dateinamen im Code.<\/p>\n<div>\n<pre>&lt;div class=\"cell-xs-6\"&gt;\r\n    &lt;article class=\"box-icon\"&gt;\r\n        &lt;figure class=\"box-icon-image\"&gt;&lt;img src=\"images\/<span style=\"color: #ff00ff\">icon-service-3-84x84.png<\/span>\" alt=\"\" width=\"84\" height=\"84\"\/&gt;&lt;\/figure&gt;\r\n        &lt;p class=\"box-icon-header\"&gt;&lt;a href=\"services.html\"&gt;SELECTED coffee beans&lt;\/a&gt;&lt;\/p&gt;\r\n        &lt;p class=\"box-icon-text\"&gt;Enjoy the aroma of selected coffee beans available at our shop.&lt;\/p&gt;\r\n    &lt;\/article&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<\/div>\n<p style=\"text-align: justify\">Wenn Ihr es vorzieht, k\u00f6nnt Ihr hier nicht nur Bilder verwenden, sondern auch Icon Fonts. In diesem Fall solltet Ihr sie ordnungsgem\u00e4\u00df implementieren, indem Ihr <em>&lt;i&gt;<\/em> oder <em>&lt;span&gt;<\/em> Tags anstelle des <em>&lt;img&gt;<\/em> Tags verwendet und die erforderlichen Styles in die <strong>style.css<\/strong> Datei hinzuf\u00fcgt.<\/p>\n<\/li>\n<li><strong>Hintergrundbild.<\/strong>\n<p style=\"text-align: justify\">Das Hintergrundbild wird wie alle vorherigen Bilder bearbeitet - indem man das neue Bild in \/<strong>images<\/strong>\/ Ordner kopiert und seinen Namen \u00e4ndert.<\/p>\n<div>\n<pre>&lt;div style=\"background-image: url(images\/<span style=\"color: #ff00ff\">home-three-3-1011x800.jpg<\/span>)\" class=\"cell-md-6 cell-md-6-mod-2 image-wrap-right bg-gray-dark bg-image\"&gt;\r\n    &lt;div class=\"image-wrap-inner\"&gt;...&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<\/div>\n<\/li>\n<li><strong>Hintergrundfarbe<\/strong>.\n<p>Im Code finden wir die Klasse, die die Hintergrundfarbe f\u00fcr diesen Abschnitt festlegt:<\/p>\n<div>\n<pre>&lt;section class=\"<span style=\"color: #ff00ff\">bg-gray-dark<\/span>\"&gt;\r\n    &lt;div class=\"shell-fluid shell-condensed\"&gt;\r\n        &lt;div class=\"range range-condensed\"&gt;\r\n            &lt;div class=\"cell-md-6 cell-md-6-mod-1 image-wrap-left bg-gray-dark\"&gt;...&lt;\/div&gt;&gt;\r\n            &lt;div style=\"background-image: url(images\/home-three-3-1011x800.jpg)\" class=\"cell-md-6 cell-md-6-mod-2 image-wrap-right bg-gray-dark bg-image\"&gt;...&lt;\/div&gt;&gt;\r\n        &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/section&gt;\r\n<\/pre>\n<\/div>\n<p>In der '<strong>style.css<\/strong>'-Datei suchen wir nach \u2018.<strong>bg-gray-dark<\/strong>\u2019 Klasse und \u00e4ndern die Hintergrundfarbe-Eigenschaft, damit sie zu unserem Stil passt.<\/li>\n<\/ol>\n<p>Und das ist das Ergebnis der Anpassung des dritten Abschnittes:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-9888\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/2017\/08\/section3-changes900.jpg\" alt=\"Bereich-3-\u00c4nderungen\" width=\"900\" height=\"316\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/section3-changes900.jpg 900w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/section3-changes900-300x105.jpg 300w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/section3-changes900-768x270.jpg 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/p>\n<h3><\/h3>\n<hr \/>\n<h3 style=\"text-align: center\"><strong>Abschnitt 4<\/strong><\/h3>\n<p>Diese Elemente m\u00fcssen ge\u00e4ndert werden:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-9891\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/2017\/08\/section4-structure900.jpg\" alt=\"Bereich-4-Struktur\" width=\"900\" height=\"509\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/section4-structure900.jpg 900w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/section4-structure900-300x170.jpg 300w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/section4-structure900-768x434.jpg 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/p>\n<ol>\n<li><strong>Titel<\/strong> und <strong>Beschreibung<\/strong>.\n<p>Der Prozess ist immer noch der gleiche - der hervorgehobene Text wird ersetzt.<\/p>\n<div>\n<pre>&lt;section class=\"section-lg bg-periglacial-blue text-center\"&gt;\r\n    &lt;div class=\"shell\"&gt;\r\n        &lt;div class=\"range range-sm-center range-75\"&gt;\r\n            &lt;div class=\"cell-xs-12\"&gt;\r\n                &lt;h2&gt;<span style=\"color: #ff00ff\">latest blog posts<\/span>&lt;\/h2&gt;\r\n                &lt;div class=\"p text-width-medium\"&gt;\r\n                    &lt;p class=\"big\"&gt;<span style=\"color: #ff00ff\">Coffee Shop is not only a place where you can get a hot and tasty coffee. Our team members also write interesting articles on everything concerning coffee.<\/span>&lt;\/p&gt;\r\n                &lt;\/div&gt;\r\n            &lt;\/div&gt;\r\n            &lt;div class=\"cell-xs-12\"&gt;...&lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/section&gt;\r\n<\/pre>\n<\/div>\n<\/li>\n<li><strong>Post-Content<\/strong>.\n<p>Und so kann jeder Beitrag bearbeitet werden - das Beitragbild sollte ge\u00e4ndert werden (und die Datei in \/<strong>images<\/strong>\/ Ordner kopiert). Sein Titel, Beschreibung, Button-Text und Meta-Informationen - die Anzahl der Likes, Ansichten und das Datum der Ver\u00f6ffentlichung werden auch ersetzt.<\/p>\n<div>\n<pre>&lt;div class=\"item\"&gt;\r\n    &lt;div class=\"slick-slide-inner\"&gt;\r\n        &lt;article class=\"post-classic\"&gt;&lt;img src=\"images\/<span style=\"color: #ff00ff\">blog-2-770x330.jpg<\/span>\" alt=\"\" width=\"770\" height=\"330\" class=\"post-classic-image\"\/&gt;\r\n            &lt;div class=\"post-classic-body\"&gt;\r\n                &lt;p class=\"post-classic-title\"&gt;&lt;a href=\"single-post.html\"&gt;<span style=\"color: #ff00ff\">Advantages and Disadvantages of Coffee<\/span>&lt;\/a&gt;&lt;\/p&gt;\r\n                &lt;div class=\"post-classic-text\"&gt;\r\n                    &lt;p&gt;<span style=\"color: #ff00ff\">It seems that one minute drinking coffee is bad for you, the next minute coffee is good for you. Still now with all the evidence coming to light that it\u2019s good for your health, it doesn\u2019t take...<\/span>&lt;\/p&gt;\r\n                &lt;\/div&gt;\r\n                &lt;div class=\"post-classic-footer\"&gt;\r\n                    &lt;div class=\"post-classic-footer-left\"&gt;&lt;a href=\"single-post.html\" class=\"btn btn-xs btn-primary btn-circle\"&gt;<span style=\"color: #ff00ff\">READ MORE<\/span>&lt;\/a&gt;&lt;\/div&gt;\r\n                    &lt;div class=\"post-classic-footer-right\"&gt;\r\n                        &lt;ul class=\"post-classic-meta\"&gt;\r\n                            &lt;li&gt;&lt;span class=\"icon icon-xxs icon-primary fa fa-heart\"&gt;&lt;\/span&gt;&lt;span&gt;<span style=\"color: #ff00ff\">24<\/span>&lt;\/span&gt;&lt;\/li&gt;\r\n                            &lt;li&gt;&lt;span class=\"icon icon-xxs icon-primary fa fa-eye\"&gt;&lt;\/span&gt;&lt;span&gt;<span style=\"color: #ff00ff\">132<\/span>&lt;\/span&gt;&lt;\/li&gt;\r\n                            &lt;li&gt;&lt;span class=\"icon icon-xxs icon-primary fa fa-calendar-plus-o\"&gt;&lt;\/span&gt;\r\n                                &lt;time datetime=\"<span style=\"color: #ff00ff\">2016-08-26<\/span>\"&gt;<span style=\"color: #ff00ff\">26.08.2016<\/span>&lt;\/time&gt;\r\n                            &lt;\/li&gt;\r\n                        &lt;\/ul&gt;\r\n                    &lt;\/div&gt;\r\n                &lt;\/div&gt;\r\n            &lt;\/div&gt;\r\n        &lt;\/article&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<\/div>\n<p>Bitte beachtet, dass, damit die Beitr\u00e4ge korrekt (wie in der Originalvorlage) wiedergegeben werden, muss es mindestens vier davon in der HTML-Struktur geben. Um noch mehr Beitr\u00e4ge hinzuzuf\u00fcgen, dupliziert das Element nur mit '<strong>.item<\/strong>' Klasse und modifiziert es nach Euren Bed\u00fcrfnissen.<\/li>\n<\/ol>\n<p>Der modifizierte Abschnitt sieht so aus:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-9890\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/2017\/08\/section4-changes900.jpg\" alt=\"Bereich-4-\u00c4nderungen\" width=\"900\" height=\"486\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/section4-changes900.jpg 900w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/section4-changes900-300x162.jpg 300w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/section4-changes900-768x415.jpg 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/p>\n<hr \/>\n<h3 style=\"text-align: center\"><strong>Abschnitt 5<\/strong><\/h3>\n<p>In diesem Abschnitt werden wir den Formularinhalt \u00e4ndern, die Felder \"Adresse\" und \"\u00d6ffnungszeiten\" entfernen - da wir sie nicht brauchen und einige Karteneigenschaften ver\u00e4ndern.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-9893\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/2017\/08\/section5-structure900.jpg\" alt=\"Bereich-5-Struktur\" width=\"900\" height=\"287\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/section5-structure900.jpg 900w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/section5-structure900-300x96.jpg 300w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/section5-structure900-768x245.jpg 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/p>\n<ol>\n<li style=\"text-align: justify\"><strong><strong><strong><strong>Bl\u00f6cke entfernen.<\/strong><\/strong><\/strong><\/strong>Wir l\u00f6schen sie einfach aus der Struktur:\n<div>\n<pre>&lt;section class=\"box-wrap box-wrap-md bg-white\"&gt;\r\n    &lt;div class=\"box-wrap-map\"&gt;\r\n        &lt;div data-zoom=\"14\" data-styles=\"[{&amp;quot;featureType&amp;quot;:&amp;quot;administrative&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;all&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;saturation&amp;quot;:&amp;quot;-100&amp;quot;}]},{&amp;quot;featureType&amp;quot;:&amp;quot;administrative.province&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;all&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;visibility&amp;quot;:&amp;quot;off&amp;quot;}]},{&amp;quot;featureType&amp;quot;:&amp;quot;landscape&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;all&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;saturation&amp;quot;:-100},{&amp;quot;lightness&amp;quot;:65},{&amp;quot;visibility&amp;quot;:&amp;quot;on&amp;quot;}]},{&amp;quot;featureType&amp;quot;:&amp;quot;poi&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;all&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;saturation&amp;quot;:-100},{&amp;quot;lightness&amp;quot;:&amp;quot;50&amp;quot;},{&amp;quot;visibility&amp;quot;:&amp;quot;simplified&amp;quot;}]},{&amp;quot;featureType&amp;quot;:&amp;quot;road&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;all&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;saturation&amp;quot;:&amp;quot;-100&amp;quot;}]},{&amp;quot;featureType&amp;quot;:&amp;quot;road.highway&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;all&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;visibility&amp;quot;:&amp;quot;simplified&amp;quot;}]},{&amp;quot;featureType&amp;quot;:&amp;quot;road.arterial&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;all&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;lightness&amp;quot;:&amp;quot;30&amp;quot;}]},{&amp;quot;featureType&amp;quot;:&amp;quot;road.local&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;all&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;lightness&amp;quot;:&amp;quot;40&amp;quot;}]},{&amp;quot;featureType&amp;quot;:&amp;quot;transit&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;all&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;saturation&amp;quot;:-100},{&amp;quot;visibility&amp;quot;:&amp;quot;simplified&amp;quot;}]},{&amp;quot;featureType&amp;quot;:&amp;quot;water&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;geometry&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;hue&amp;quot;:&amp;quot;#ffff00&amp;quot;},{&amp;quot;lightness&amp;quot;:-25},{&amp;quot;saturation&amp;quot;:-97}]},{&amp;quot;featureType&amp;quot;:&amp;quot;water&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;labels&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;lightness&amp;quot;:-25},{&amp;quot;saturation&amp;quot;:-100}]}]\" class=\"rd-google-map rd-google-map__model\"&gt;\r\n            &lt;ul class=\"map_locations\"&gt;&lt;\/ul&gt;\r\n        &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"box-wrap-content\"&gt;\r\n        &lt;div class=\"shell\"&gt;\r\n            &lt;div class=\"range\"&gt;\r\n                &lt;div class=\"cell-xs-12\"&gt;\r\n                    &lt;div class=\"box-contacts box-contacts-horizontal box-wrap-content-interactive block-right\"&gt;\r\n                        <span style=\"color: #ff00ff\">&lt;div class=\"box-contacts-col\"&gt;\r\n                            &lt;div class=\"box-contacts-block\"&gt;\r\n                                &lt;h3&gt;Address&lt;\/h3&gt;\r\n                                &lt;address&gt;123 Street W, Seattle WA 99999 United States&lt;\/address&gt;\r\n                            &lt;\/div&gt;\r\n                            &lt;div class=\"divider divider-nebula\"&gt;&lt;\/div&gt;\r\n                            &lt;div class=\"box-contacts-block\"&gt;\r\n                                &lt;h3&gt;Opening Hours&lt;\/h3&gt;\r\n                                &lt;dl class=\"box-contacts-terms-list\"&gt;\r\n                                    &lt;dt&gt;Monday \u2013 Friday&lt;\/dt&gt;\r\n                                    &lt;dd&gt;9am - 6pm&lt;\/dd&gt;\r\n                                    &lt;dt&gt;Saturday and Sunday&lt;\/dt&gt;\r\n                                    &lt;dd&gt;10am - 4pm&lt;\/dd&gt;\r\n                                &lt;\/dl&gt;\r\n                            &lt;\/div&gt;\r\n                        &lt;\/div&gt;<\/span>\r\n                        &lt;div class=\"box-contacts-col box-contacts-right\"&gt;\r\n                            &lt;div class=\"box-contacts-block\"&gt;\r\n                                &lt;h3&gt;Get In Touch&lt;\/h3&gt;\r\n                                &lt;p&gt;Leave your name and phone number, and we\u2019ll contact you.&lt;\/p&gt;\r\n                                &lt;form data-form-output=\"form-output-global\" data-form-type=\"contact\" method=\"post\" action=\"bat\/rd-mailform.php\" class=\"rd-mailform\"&gt;\r\n                                    &lt;div class=\"form-group\"&gt;\r\n                                        &lt;label for=\"contact-full-name\" class=\"form-label-outside\"&gt;Full Name&lt;\/label&gt;\r\n                                        &lt;input id=\"contact-full-name\" type=\"text\" name=\"name\" data-constraints=\"@Required\" class=\"form-control\"&gt;\r\n                                    &lt;\/div&gt;\r\n                                    &lt;div class=\"form-group\"&gt;\r\n                                        &lt;label for=\"contact-phone\" class=\"form-label-outside\"&gt;Telephone&lt;\/label&gt;\r\n                                        &lt;input id=\"contact-phone\" type=\"text\" name=\"phone\" data-constraints=\"@Required @Numeric\" class=\"form-control\"&gt;\r\n                                    &lt;\/div&gt;\r\n                                    &lt;button type=\"submit\" class=\"btn btn-sm btn-primary btn-block btn-circle\"&gt;SEND REQUEST&lt;\/button&gt;\r\n                                &lt;\/form&gt;\r\n                            &lt;\/div&gt;\r\n                        &lt;\/div&gt;\r\n                    &lt;\/div&gt;\r\n                &lt;\/div&gt;\r\n            &lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/section&gt;\r\n<\/pre>\n<\/div>\n<p>Jetzt m\u00fcssen wir diesen Block schmaler machen. Wir suchen nach der Klasse .<strong>box-contacts<\/strong> und \u00e4ndern den Parameter <strong>\"max-width\"<\/strong> von 770px auf 400px.<\/p>\n<div>\n<pre>.box-contacts {\r\n    max-width: <span style=\"color: #ff00ff\">770px<\/span>;\r\n}\r\n.box-contacts-horizontal {\r\n    display: -ms-flexbox;\r\n    display: -webkit-flex;\r\n    display: flex;\r\n    -webkit-flex-direction: row;\r\n    -ms-flex-direction: row;\r\n    flex-direction: row;\r\n}\r\n<\/pre>\n<\/div>\n<p>Der Kontaktblock hat jetzt die richtige Breite.<\/li>\n<li><strong>Texte.<br \/>\n<\/strong><br \/>\nDie Texte, die Ihr m\u00f6glicherweise ersetzen m\u00f6chtet, werden in der folgenden Code-Box hervorgehoben.<\/p>\n<div>\n<pre>&lt;div class=\"box-contacts-col box-contacts-right\"&gt;\r\n    &lt;div class=\"box-contacts-block\"&gt;\r\n        &lt;h3&gt;<span style=\"color: #ff00ff\">Get In Touch<\/span>&lt;\/h3&gt;\r\n        &lt;p&gt;<span style=\"color: #ff00ff\">Leave your name and phone number, and we\u2019ll contact you.<\/span>&lt;\/p&gt;\r\n        &lt;form data-form-output=\"form-output-global\" data-form-type=\"contact\" method=\"post\" action=\"bat\/rd-mailform.php\" class=\"rd-mailform\"&gt;\r\n            &lt;div class=\"form-group\"&gt;\r\n                &lt;label for=\"contact-full-name\" class=\"form-label-outside\"&gt;<span style=\"color: #ff00ff\">Full Name<\/span>&lt;\/label&gt;\r\n                &lt;input id=\"contact-full-name\" type=\"text\" name=\"name\" data-constraints=\"@Required\" class=\"form-control\"&gt;\r\n            &lt;\/div&gt;\r\n            &lt;div class=\"form-group\"&gt;\r\n                &lt;label for=\"contact-phone\" class=\"form-label-outside\"&gt;<span style=\"color: #ff00ff\">Telephone<\/span>&lt;\/label&gt;\r\n                &lt;input id=\"contact-phone\" type=\"text\" name=\"phone\" data-constraints=\"@Required @Numeric\" class=\"form-control\"&gt;\r\n            &lt;\/div&gt;\r\n            &lt;button type=\"submit\" class=\"btn btn-sm btn-primary btn-block btn-circle\"&gt;<span style=\"color: #ff00ff\">SEND REQUEST<\/span>&lt;\/button&gt;\r\n        &lt;\/form&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<\/div>\n<\/li>\n<li style=\"text-align: justify\"><strong>Karte<\/strong>.\n<p>Normalerweise ben\u00f6tigen Webinare keine Standortinformationen, da sie online durchgef\u00fchrt werden. Allerdings, wenn Ihr einen Ort angeben wollt, wo die Leute einige Eurer zus\u00e4tzlichen Produkte oder Dienstleistungen bekommen k\u00f6nnen - m\u00fcsst Ihr die Karte anpassen.<\/p>\n<div>\n<pre>&lt;div style=\"background-image: url(images\/<span style=\"color: #ff00ff\">home-three-3-1011x800.jpg<\/span>)\" class=\"cell-md-6 cell-md-6-mod-2 image-wrap-right bg-gray-dark bg-image\"&gt;\r\n    &lt;div class=\"image-wrap-inner\"&gt;...&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<\/div>\n<ul>\n<li>\n<div>\u00a0<strong>Kartenkoordinaten.<\/strong><\/div>\n<p>F\u00fcr die Anpassung der Karte m\u00fcssen wir die Koordinaten des Orts finden, den wir anpinnen m\u00f6chten. Dann f\u00fcgen wir sie dem untergeordneten Element des Blocks mit <strong>.box-wrap-map class <\/strong>hinzu.<strong><br \/>\n<\/strong><\/p>\n<div>\n<pre>&lt;div class=\"box-wrap-map\"&gt;\r\n    &lt;div data-zoom=\"14\" <span style=\"color: #ff00ff\">data-x=\"-73.8924068\" data-y=\"40.646197<\/span>\" data-styles=\"[{&amp;quot;featureType&amp;quot;:&amp;quot;administrative&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;all&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;saturation&amp;quot;:&amp;quot;-100&amp;quot;}]},{&amp;quot;featureType&amp;quot;:&amp;quot;administrative.province&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;all&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;visibility&amp;quot;:&amp;quot;off&amp;quot;}]},{&amp;quot;featureType&amp;quot;:&amp;quot;landscape&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;all&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;saturation&amp;quot;:-100},{&amp;quot;lightness&amp;quot;:65},{&amp;quot;visibility&amp;quot;:&amp;quot;on&amp;quot;}]},{&amp;quot;featureType&amp;quot;:&amp;quot;poi&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;all&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;saturation&amp;quot;:-100},{&amp;quot;lightness&amp;quot;:&amp;quot;50&amp;quot;},{&amp;quot;visibility&amp;quot;:&amp;quot;simplified&amp;quot;}]},{&amp;quot;featureType&amp;quot;:&amp;quot;road&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;all&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;saturation&amp;quot;:&amp;quot;-100&amp;quot;}]},{&amp;quot;featureType&amp;quot;:&amp;quot;road.highway&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;all&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;visibility&amp;quot;:&amp;quot;simplified&amp;quot;}]},{&amp;quot;featureType&amp;quot;:&amp;quot;road.arterial&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;all&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;lightness&amp;quot;:&amp;quot;30&amp;quot;}]},{&amp;quot;featureType&amp;quot;:&amp;quot;road.local&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;all&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;lightness&amp;quot;:&amp;quot;40&amp;quot;}]},{&amp;quot;featureType&amp;quot;:&amp;quot;transit&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;all&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;saturation&amp;quot;:-100},{&amp;quot;visibility&amp;quot;:&amp;quot;simplified&amp;quot;}]},{&amp;quot;featureType&amp;quot;:&amp;quot;water&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;geometry&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;hue&amp;quot;:&amp;quot;#ffff00&amp;quot;},{&amp;quot;lightness&amp;quot;:-25},{&amp;quot;saturation&amp;quot;:-97}]},{&amp;quot;featureType&amp;quot;:&amp;quot;water&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;labels&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;lightness&amp;quot;:-25},{&amp;quot;saturation&amp;quot;:-100}]}]\" class=\"rd-google-map rd-google-map__model\"&gt;\r\n        &lt;ul class=\"map_locations\"&gt;&lt;\/ul&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<\/div>\n<\/li>\n<li><strong><strong>Zoom.<br \/>\n<\/strong><\/strong><br \/>\nUm die Karte zu vergr\u00f6\u00dfern oder zu verkleinern, \u00e4ndert einfach das Attribut \"<em>data-zoom<\/em>\" von 14 auf 15 (mehr - zum Vergr\u00f6\u00dfern) oder auf 13 weniger - zum Verkleinern).<\/p>\n<div>\n<pre>&lt;div class=\"box-wrap-map\"&gt;\r\n    &lt;div data-zoom=\"14\" data-x=\"-73.8924068\" data-y=\"40.646197\" data-styles=\"[{&amp;quot;featureType&amp;quot;:&amp;quot;administrative&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;all&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;saturation&amp;quot;:&amp;quot;-100&amp;quot;}]},{&amp;quot;featureType&amp;quot;:&amp;quot;administrative.province&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;all&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;visibility&amp;quot;:&amp;quot;off&amp;quot;}]},{&amp;quot;featureType&amp;quot;:&amp;quot;landscape&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;all&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;saturation&amp;quot;:-100},{&amp;quot;lightness&amp;quot;:65},{&amp;quot;visibility&amp;quot;:&amp;quot;on&amp;quot;}]},{&amp;quot;featureType&amp;quot;:&amp;quot;poi&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;all&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;saturation&amp;quot;:-100},{&amp;quot;lightness&amp;quot;:&amp;quot;50&amp;quot;},{&amp;quot;visibility&amp;quot;:&amp;quot;simplified&amp;quot;}]},{&amp;quot;featureType&amp;quot;:&amp;quot;road&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;all&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;saturation&amp;quot;:&amp;quot;-100&amp;quot;}]},{&amp;quot;featureType&amp;quot;:&amp;quot;road.highway&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;all&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;visibility&amp;quot;:&amp;quot;simplified&amp;quot;}]},{&amp;quot;featureType&amp;quot;:&amp;quot;road.arterial&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;all&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;lightness&amp;quot;:&amp;quot;30&amp;quot;}]},{&amp;quot;featureType&amp;quot;:&amp;quot;road.local&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;all&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;lightness&amp;quot;:&amp;quot;40&amp;quot;}]},{&amp;quot;featureType&amp;quot;:&amp;quot;transit&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;all&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;saturation&amp;quot;:-100},{&amp;quot;visibility&amp;quot;:&amp;quot;simplified&amp;quot;}]},{&amp;quot;featureType&amp;quot;:&amp;quot;water&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;geometry&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;hue&amp;quot;:&amp;quot;#ffff00&amp;quot;},{&amp;quot;lightness&amp;quot;:-25},{&amp;quot;saturation&amp;quot;:-97}]},{&amp;quot;featureType&amp;quot;:&amp;quot;water&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;labels&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;lightness&amp;quot;:-25},{&amp;quot;saturation&amp;quot;:-100}]}]\" class=\"rd-google-map rd-google-map__model\"&gt;\r\n        &lt;ul class=\"map_locations\"&gt;&lt;\/ul&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<\/div>\n<\/li>\n<li style=\"text-align: justify\"><strong><strong>Kartenstile.<br \/>\n<\/strong><\/strong><br \/>\nSie k\u00f6nnen Kartenstile selbst anpassen oder vordefinierte Stile aus Snazzy-Karten verwenden. Kopiert einfach den Kartenstil und f\u00fcgt ihn als Wert des Attributs <em>'data-styles'<\/em> wie im n\u00e4chsten Codefeld ein.<br \/>\nWir tauschen diesen Code<\/p>\n<div>\n<pre>&lt;div class=\"box-wrap-map\"&gt;\r\n    &lt;div data-zoom=\"14\" data-x=\"-73.8924068\" data-y=\"40.646197\" data-styles=\"<span style=\"color: #ff00ff\">[{&amp;quot;featureType&amp;quot;:&amp;quot;administrative&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;all&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;saturation&amp;quot;:&amp;quot;-100&amp;quot;}]},{&amp;quot;featureType&amp;quot;:&amp;quot;administrative.province&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;all&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;visibility&amp;quot;:&amp;quot;off&amp;quot;}]},{&amp;quot;featureType&amp;quot;:&amp;quot;landscape&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;all&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;saturation&amp;quot;:-100},{&amp;quot;lightness&amp;quot;:65},{&amp;quot;visibility&amp;quot;:&amp;quot;on&amp;quot;}]},{&amp;quot;featureType&amp;quot;:&amp;quot;poi&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;all&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;saturation&amp;quot;:-100},{&amp;quot;lightness&amp;quot;:&amp;quot;50&amp;quot;},{&amp;quot;visibility&amp;quot;:&amp;quot;simplified&amp;quot;}]},{&amp;quot;featureType&amp;quot;:&amp;quot;road&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;all&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;saturation&amp;quot;:&amp;quot;-100&amp;quot;}]},{&amp;quot;featureType&amp;quot;:&amp;quot;road.highway&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;all&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;visibility&amp;quot;:&amp;quot;simplified&amp;quot;}]},{&amp;quot;featureType&amp;quot;:&amp;quot;road.arterial&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;all&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;lightness&amp;quot;:&amp;quot;30&amp;quot;}]},{&amp;quot;featureType&amp;quot;:&amp;quot;road.local&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;all&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;lightness&amp;quot;:&amp;quot;40&amp;quot;}]},{&amp;quot;featureType&amp;quot;:&amp;quot;transit&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;all&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;saturation&amp;quot;:-100},{&amp;quot;visibility&amp;quot;:&amp;quot;simplified&amp;quot;}]},{&amp;quot;featureType&amp;quot;:&amp;quot;water&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;geometry&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;hue&amp;quot;:&amp;quot;#ffff00&amp;quot;},{&amp;quot;lightness&amp;quot;:-25},{&amp;quot;saturation&amp;quot;:-97}]},{&amp;quot;featureType&amp;quot;:&amp;quot;water&amp;quot;,&amp;quot;elementType&amp;quot;:&amp;quot;labels&amp;quot;,&amp;quot;stylers&amp;quot;:[{&amp;quot;lightness&amp;quot;:-25},{&amp;quot;saturation&amp;quot;:-100}]}]\" class=\"rd-google-map rd-google-map__model<\/span>\"&gt;\r\n        &lt;ul class=\"map_locations\"&gt;&lt;\/ul&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<\/div>\n<p>mit dem folgenden aus:<\/p>\n<div>\n<pre>&lt;div class=\"box-wrap-map\"&gt;\r\n    &lt;div data-zoom=\"12\" data-x=\"-73.8924068\" data-y=\"40.646197\" data-styles='<span style=\"color: #ff00ff\">[{\"featureType\":\"all\",\"elementType\":\"labels.text.fill\",\"stylers\":[{\"color\":\"#ffffff\"}]},{\"featureType\":\"all\",\"elementType\":\"labels.text.stroke\",\"stylers\":[{\"visibility\":\"on\"},{\"color\":\"#424b5b\"},{\"weight\":2},{\"gamma\":\"1\"}]},{\"featureType\":\"all\",\"elementType\":\"labels.icon\",\"stylers\":[{\"visibility\":\"off\"}]},{\"featureType\":\"administrative\",\"elementType\":\"geometry\",\"stylers\":[{\"weight\":0.6},{\"color\":\"#545b6b\"},{\"gamma\":\"0\"}]},{\"featureType\":\"landscape\",\"elementType\":\"geometry\",\"stylers\":[{\"color\":\"#545b6b\"},{\"gamma\":\"1\"},{\"weight\":\"10\"}]},{\"featureType\":\"poi\",\"elementType\":\"geometry\",\"stylers\":[{\"color\":\"#666c7b\"}]},{\"featureType\":\"poi.park\",\"elementType\":\"geometry\",\"stylers\":[{\"color\":\"#545b6b\"}]},{\"featureType\":\"road\",\"elementType\":\"geometry\",\"stylers\":[{\"color\":\"#424a5b\"},{\"lightness\":\"0\"}]},{\"featureType\":\"transit\",\"elementType\":\"geometry\",\"stylers\":[{\"color\":\"#666c7b\"}]},{\"featureType\":\"water\",\"elementType\":\"geometry\",\"stylers\":[{\"color\":\"#2e3546\"}]}]' class=\"rd-google-map rd-google-map__model<\/span>\"&gt;\r\n        &lt;ul class=\"map_locations\"&gt;&lt;\/ul&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<\/div>\n<p>Und im Endergebnis erhalten wir eine andere Kartendarstellung!<\/li>\n<li style=\"text-align: justify\"><strong>Standorte<\/strong>.Urspr\u00fcnglich gab es keine Markierungen auf der Karte, die auf eine bestimmte Adresse hinweisen. Aber Ihr k\u00f6nnt sie ganz einfach hinzuf\u00fcgen. Ihr findet die ungeordnete Liste mit der Klasse \"<strong>.map_locations<\/strong>\". Um einen Standort hinzuzuf\u00fcgen, m\u00fcsst Ihr ein <em>&lt;li&gt;<\/em> Element rein kopieren. Es sollte Koordinaten und einen Absatz mit Adresse enthalten, der durch Anklicken auf die Pin-Markierung erscheinen wird. Jedes <em>&lt;li&gt;<\/em> Element wird f\u00fcr einen Ort auf der Karte verwendet. Ihr k\u00f6nnt so viele <em>&lt;li&gt;<\/em> Tags hinzuf\u00fcgen, wie Ihr braucht. Hier ist ein Beispiel daf\u00fcr:\n<div style=\"text-align: justify\">\n<pre>&lt;ul class=\"map_locations\"&gt;\r\n     <span style=\"color: #ff00ff\">&lt;li data-y=\"40.643180\" data-x=\"-73.9874068\"&gt;\r\n     \t&lt;p&gt;9870 St Vincent Place, Glasgow, DC 45 Fr 45.&lt;\/p&gt;\r\n     &lt;\/li&gt;<\/span>\r\n&lt;\/ul&gt;\r\n<\/pre>\n<\/div>\n<p>Lasst uns es auch hinzuf\u00fcgen, um Euch zu zeigen, wie es aussieht.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>Wir haben den Bereich 'Kontakte' angepasst und k\u00f6nnen nun das Ergebnis sehen:<\/p>\n<h3><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-9892\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/2017\/08\/section5-changes900.jpg\" alt=\"Bereich-5-\u00c4nderungen\" width=\"900\" height=\"289\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/section5-changes900.jpg 900w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/section5-changes900-300x96.jpg 300w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/section5-changes900-768x247.jpg 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/h3>\n<p style=\"text-align: justify\">\u00dcbrigens k\u00f6nnt Ihr auch die Pin-Markierung \u00e4ndern. Ersetzt einfach die Dateien <b>gmap_marker.png <\/b>und <b>gmap_marker_active.png<\/b> im \/<b>images<\/b>\/ Ordner mit Euren eigenen.<\/p>\n<hr \/>\n<h3 style=\"text-align: center\"><b>Abschnitt 6<\/b><\/h3>\n<p>Im letzten Abschnitt werden wir vor allem die Farben \u00e4ndern und auch einige Texte ersetzen.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-9895\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/2017\/08\/section6-structure900.jpg\" alt=\"Bereich-6-Struktur\" width=\"900\" height=\"204\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/section6-structure900.jpg 900w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/section6-structure900-300x68.jpg 300w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/section6-structure900-768x174.jpg 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/p>\n<ol>\n<li><strong>Links<\/strong>.\n<p>Da wir einige Abschnitte nicht brauchen, entfernen wir auch die Links im Footer:<\/p>\n<div>\n<pre>&lt;footer class=\"page-footer page-footer-variant-3\"&gt;\r\n    &lt;div class=\"shell\"&gt;\r\n        &lt;div class=\"range range-50\"&gt;\r\n            &lt;div class=\"cell-sm-6 cell-md-4\"&gt;\r\n                &lt;h3&gt;Pages&lt;\/h3&gt;\r\n                &lt;div class=\"divider divider-conch\"&gt;&lt;\/div&gt;\r\n                &lt;ul style=\"max-width: 390px;\" class=\"footer-navigation row footer-navigation-vertical\"&gt;\r\n                    &lt;li class=\"col-xs-6\"&gt;&lt;a href=\"index.html\"&gt;Home&lt;\/a&gt;&lt;\/li&gt;\r\n                    &lt;li class=\"col-xs-6\"&gt;&lt;a href=\"blog.html\"&gt;Blog&lt;\/a&gt;&lt;\/li&gt;\r\n                    &lt;li class=\"col-xs-6\"&gt;&lt;a href=\"about.html\"&gt;About&lt;\/a&gt;&lt;\/li&gt;\r\n               <span style=\"color: #ff00ff\">     &lt;li class=\"col-xs-6\"&gt;&lt;a href=\"shop.html\"&gt;Shop&lt;\/a&gt;&lt;\/li&gt;\r\n                    &lt;li class=\"col-xs-6\"&gt;&lt;a href=\"services.html\"&gt;Services&lt;\/a&gt;&lt;\/li&gt;<\/span>\r\n                    &lt;li class=\"col-xs-6\"&gt;&lt;a href=\"contacts-1.html\"&gt;Contacts&lt;\/a&gt;&lt;\/li&gt;\r\n                &lt;\/ul&gt;\r\n            &lt;\/div&gt;\r\n            &lt;div class=\"cell-sm-6 cell-md-5\"&gt;...&lt;\/div&gt;\r\n            &lt;div class=\"cell-sm-6 cell-md-3\"&gt;...&lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/footer&gt;\r\n<\/pre>\n<\/div>\n<\/li>\n<li><strong><strong>Texte<\/strong><\/strong>.\n<p>Dann bearbeiten wir die Beschreibung:<\/p>\n<div>\n<pre>&lt;div class=\"cell-sm-6 cell-md-5\"&gt;\r\n    &lt;h3&gt;Description&lt;\/h3&gt;\r\n    &lt;div class=\"divider divider-conch\"&gt;&lt;\/div&gt;\r\n    &lt;div class=\"text-highlighted-wrap\"&gt;\r\n        &lt;p class=\"text-highlighted\"&gt;<span style=\"color: #ff00ff\">Coffee Shop is a cosy place where friends meet to share coffee, cakes and light meals. At night, it is transformed into a vibey eatery.<\/span>&lt;\/p&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<\/div>\n<\/li>\n<li><b><b><b>Hintergrundfarbe.<br \/>\n<\/b><\/b><\/b><br \/>\nUm die Farbe des Hintergrundes zu \u00e4ndern, m\u00fcssen wir die Klasse finden, die diese Farbe bestimmt. Footer-Element hat 2 Klassen - <b>.page-footer<\/b> und .<b>page-footer-variant-3<\/b>. Die letzte hat eine <em>Hintergrundfarbe (Hintergrund) Eigenschaft<\/em>, die wir \u00e4ndern m\u00fcssen:<\/p>\n<div>\n<pre>.page-footer.page-footer-variant-3 {\r\n  padding: 60px 0;\r\n  background: <span style=\"color: #ff00ff\">#403832;<\/span>\r\n}\r\n<\/pre>\n<\/div>\n<\/li>\n<li><strong>Textfarbe<\/strong>.\n<p style=\"text-align: justify\">Die Farbe der Texte wird mit <b>'color' <\/b>Eigenschaft in <b>'.page-footer' <\/b>Klasse definiert. Wir finden es\u00a0 und ersetzen durch den helleren Farbton.<\/p>\n<div>\n<pre>.page-footer {\r\n  background: #fff;\r\n  color: <span style=\"color: #ff00ff\">#a29d9a;<\/span>\r\n}\r\n<\/pre>\n<\/div>\n<\/li>\n<li><strong>Soziale Icons<\/strong>.\n<p style=\"text-align: justify\">\u00a0Um Icons im Block '<strong>Folgen Sie uns<\/strong>' zu bearbeiten, lasst uns die Klasse mit den Stilen dieser Icons finden. Offensichtlich ist es \u2018.<b>icon-wild-sand-filled<\/b>\u2019 Klasse.<\/p>\n<div>\n<pre>&lt;div class=\"cell-sm-6 cell-md-3\"&gt;\r\n    &lt;h3&gt;Follow Us&lt;\/h3&gt;\r\n    &lt;div class=\"divider divider-conch\"&gt;&lt;\/div&gt;\r\n    &lt;ul class=\"inline-list inline-list-xs\"&gt;\r\n        &lt;li&gt;&lt;a href=\"#\" class=\"icon icon-xs-outline <span style=\"color: #ff00ff\">icon-wild-sand-filled<\/span> icon-circle fa-facebook\"&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n        &lt;li&gt;&lt;a href=\"#\" class=\"icon icon-xs-outline icon-wild-sand-filled icon-circle fa-twitter\"&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n        &lt;li&gt;&lt;a href=\"#\" class=\"icon icon-xs-outline icon-wild-sand-filled icon-circle fa-youtube\"&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n        &lt;li&gt;&lt;a href=\"#\" class=\"icon icon-xs-outline icon-wild-sand-filled icon-circle fa-linkedin\"&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n    &lt;\/ul&gt;\r\n    More Coffee Shop Website Templates at &lt;a rel=\"nofollow\" href=\"http:\/\/www.templatemonster.com\/category\/coffee-shop-website-templates\/\" target=\"_blank\"&gt;TemplateMonster.com&lt;\/a&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<\/div>\n<p style=\"text-align: justify\">Wir finden es im <strong>Style.css<\/strong> und \u00e4ndern die <em>Farb- und Hintergrundwerte<\/em> entsprechend den gew\u00fcnschten Stilen.<\/p>\n<div>\n<pre>.page .icon-wild-sand-filled, .page .icon-wild-sand-filled:active, .page .icon-wild-sand-filled:focus {\r\n  color: <span style=\"color: #ff00ff\">#fff;<\/span>\r\n  background:<span style=\"color: #ff00ff\"> #645e59;<\/span>\r\n}\r\n\r\n.page .icon-wild-sand-filled:hover {\r\n  color: <span style=\"color: #ff00ff\">#fff;<\/span>\r\n  background: <span style=\"color: #ff00ff\">#ce6d06;<\/span>\r\n}\r\n<\/pre>\n<\/div>\n<\/li>\n<\/ol>\n<p>Und hier ist schon der neue<strong> Footer<\/strong>!<\/p>\n<hr \/>\n<p><b>Das Endergebnis<\/b><\/p>\n<p>Im folgenden Leuchtk\u00e4sten k\u00f6nnt Ihr sehen, wie die Vorlage vorher aussah und wie sie jetzt aussieht:<br \/>\n<img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-9882 aligncenter\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/2017\/08\/full_before900.jpg\" alt=\"Demo-Webinar-Landingpage3\" width=\"299\" height=\"1024\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/full_before900.jpg 299w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/full_before900-88x300.jpg 88w\" sizes=\"(max-width: 299px) 100vw, 299px\" \/><\/p>\n<div class=\"row \">\n<div class=\"col-md-6\"><img decoding=\"async\" loading=\"lazy\" class=\" wp-image-9881 aligncenter\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/2017\/08\/demo2.jpg\" alt=\"Demo-Webinar-Landingpage2\" width=\"300\" height=\"590\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/demo2.jpg 521w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/demo2-153x300.jpg 153w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/div>\n<\/div>\n<p style=\"text-align: justify\">Der Prozess der Anpassung Eurer Vorlage ist sehr einfach und kann schnell durchgef\u00fchrt werden. So k\u00f6nnt Ihr Eure wertvolle Zeit sparen oder auch andere wichtige Angelegenheiten anpacken.<\/p>\n<hr \/>\n<p style=\"text-align: justify\">Wenn Ihr keine Zeit verlieren m\u00f6chtet oder in Zeitnot seid, k\u00f6nnt immer die Anpassung Eurer Website bei <a href=\"https:\/\/www.templatemonster.com\/de\/service-center\/\" target=\"_blank\">TM Service-Center<\/a> bestellen. Mit seiner Hilfe k\u00f6nnt Ihr alle Eure Ideen zum Leben erwecken und m\u00fchelos kosteng\u00fcnstige Dienstleistungen innerhalb k\u00fcrzester Zeit erhalten.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-9883\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/2017\/08\/ready-to-use-website.jpg\" alt=\"Fertige-Website\" width=\"835\" height=\"100\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/ready-to-use-website.jpg 835w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/ready-to-use-website-300x36.jpg 300w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/ready-to-use-website-768x92.jpg 768w\" sizes=\"(max-width: 835px) 100vw, 835px\" \/><\/p>\n<hr \/>\n<p>Wenn Ihr gern ein sch\u00f6nes Template f\u00fcr Eure Bedarfe w\u00e4hlen m\u00f6chtet, stehen f\u00fcr Euch bei TemplateMonster Tausende von <a href=\"https:\/\/www.templatemonster.com\/de\/kategorie\/marketing-agentur-templates\/\" target=\"_blank\">Marketing Vorlagen<\/a> zur Verf\u00fcgung.<\/p>\n<hr \/>\n<p style=\"text-align: center\"><strong>Vorlage unseres Tutorials - <b>Mehrzweck-Website-Template namens \"Kaffeehaus\"<br \/>\n<\/b><\/strong><br \/>\n<img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-9878\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/2017\/08\/coffee-store.png\" alt=\"Kaffeehaus\" width=\"963\" height=\"594\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/coffee-store.png 963w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/coffee-store-300x185.png 300w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/coffee-store-768x474.png 768w\" sizes=\"(max-width: 963px) 100vw, 963px\" \/><\/p>\n<p style=\"text-align: center\"><a class=\"btn\" href=\"https:\/\/www.templatemonster.com\/de\/demo\/62130.html\" target=\"_blank\" rel=\"noopener noreferrer\">Demo<\/a>\u00a0| <a class=\"btn\" href=\"https:\/\/www.templatemonster.com\/de\/website-vorlagen-tipo-62130.html\" target=\"_blank\" rel=\"noopener noreferrer\">Download<\/a><\/p>\n<hr \/>\n<p style=\"text-align: justify\">Ich hoffe, dass dieses Tutorial f\u00fcr Euch hilfreich war, also z\u00f6gert bitte nicht, Fragen zu stellen, wenn Ihr irgendwelche habt. Ich bin mir sicher, dass Euer erstes Webinar Euch Gewinn bringen und Euren Besuchern Appetit auf mehr machen wird!<\/p>\n<h5 style=\"text-align: justify\"><em>Der Artikel ist urspr\u00fcnglich auf dem\u00a0<a href=\"https:\/\/www.templatemonster.com\/blog\/customizing-webinar-landing-page\/\" target=\"_blank\">TemplateMonster.com-Blog<\/a>\u00a0erschienen und wurde aus dem Englischen \u00fcbersetzt<\/em><\/h5>\n<hr \/>\n","protected":false},"excerpt":{"rendered":"<p>Habt Ihr jemals daran gedacht, ein Webinar zu veranstalten? Ich veranstaltete mein erstes Webinar vor einigen Monaten und in diesem Moment wusste ich fast gar nichts \u00fcber Webinare und wie man sie hostet. Das war eine tolle Erfahrung. Vor allem kann ich Euch jetzt mit Sicherheit sagen - der ganze Prozess hatte sich gar nicht [&hellip;]<\/p>\n","protected":false},"author":1805543,"featured_media":10023,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[19,9,16],"tags":[231,237,61],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.11 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Wie baue ich eine Webinar-Landingpage in 1 Stunde? \u2b50 TemplateMonster Deutscher Blog<\/title>\n<meta name=\"description\" content=\"In diesem Tutorial lernt Ihr, wie Ihr innerhalb 1 Stunde eine umhauende Landingpage f\u00fcr Euer Webinar mit einer unserer Vorlage bauen k\u00f6nnt.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/monsterspost.com\/de\/wie-baue-ich-eine-umhauende-landingpage-fuer-ein-webinar\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wie baue ich eine Webinar-Landingpage in 1 Stunde? \u2b50 TemplateMonster Deutscher Blog\" \/>\n<meta property=\"og:description\" content=\"In diesem Tutorial lernt Ihr, wie Ihr innerhalb 1 Stunde eine umhauende Landingpage f\u00fcr Euer Webinar mit einer unserer Vorlage bauen k\u00f6nnt.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/monsterspost.com\/de\/wie-baue-ich-eine-umhauende-landingpage-fuer-ein-webinar\/\" \/>\n<meta property=\"og:site_name\" content=\"TemplateMonster Deutscher Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/templatemonster.de\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-08-17T08:55:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-04-02T13:44:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/webinar-landing-page-customization.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"538\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Olga Wirth\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@TM_Deutschland\" \/>\n<meta name=\"twitter:site\" content=\"@TM_Deutschland\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Olga Wirth\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"36 Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/monsterspost.com\/de\/wie-baue-ich-eine-umhauende-landingpage-fuer-ein-webinar\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/de\/wie-baue-ich-eine-umhauende-landingpage-fuer-ein-webinar\/\"},\"author\":{\"name\":\"Olga Wirth\",\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/person\/e49572bf6360863c66e5b53b2cab591e\"},\"headline\":\"Wie baue ich eine Webinar-Landingpage in 1 Stunde?\",\"datePublished\":\"2017-08-17T08:55:00+00:00\",\"dateModified\":\"2020-04-02T13:44:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/monsterspost.com\/de\/wie-baue-ich-eine-umhauende-landingpage-fuer-ein-webinar\/\"},\"wordCount\":2350,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/de\/#organization\"},\"keywords\":[\"HTML5\",\"Marketing\",\"Web Templates\"],\"articleSection\":[\"Anleitungen\",\"Webdesign\",\"Webentwicklung\"],\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/monsterspost.com\/de\/wie-baue-ich-eine-umhauende-landingpage-fuer-ein-webinar\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/monsterspost.com\/de\/wie-baue-ich-eine-umhauende-landingpage-fuer-ein-webinar\/\",\"url\":\"https:\/\/monsterspost.com\/de\/wie-baue-ich-eine-umhauende-landingpage-fuer-ein-webinar\/\",\"name\":\"Wie baue ich eine Webinar-Landingpage in 1 Stunde? \u2b50 TemplateMonster Deutscher Blog\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/de\/#website\"},\"datePublished\":\"2017-08-17T08:55:00+00:00\",\"dateModified\":\"2020-04-02T13:44:21+00:00\",\"description\":\"In diesem Tutorial lernt Ihr, wie Ihr innerhalb 1 Stunde eine umhauende Landingpage f\u00fcr Euer Webinar mit einer unserer Vorlage bauen k\u00f6nnt.\",\"breadcrumb\":{\"@id\":\"https:\/\/monsterspost.com\/de\/wie-baue-ich-eine-umhauende-landingpage-fuer-ein-webinar\/#breadcrumb\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/monsterspost.com\/de\/wie-baue-ich-eine-umhauende-landingpage-fuer-ein-webinar\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/monsterspost.com\/de\/wie-baue-ich-eine-umhauende-landingpage-fuer-ein-webinar\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/monsterspost.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Wie baue ich eine Webinar-Landingpage in 1 Stunde?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/monsterspost.com\/de\/#website\",\"url\":\"https:\/\/monsterspost.com\/de\/\",\"name\":\"TemplateMonster Deutscher Blog\",\"description\":\"Just another MonsterPost Sites site\",\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/monsterspost.com\/de\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/monsterspost.com\/de\/#organization\",\"name\":\"MonsterPost Deutschland\",\"url\":\"https:\/\/monsterspost.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Logo-TM.png\",\"contentUrl\":\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Logo-TM.png\",\"width\":180,\"height\":180,\"caption\":\"MonsterPost Deutschland\"},\"image\":{\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/template_monster\/\",\"https:\/\/www.pinterest.com\/templatemonster\/\",\"https:\/\/www.youtube.com\/channel\/UC19iEGcEhlFidO5ruNGE5yg\",\"https:\/\/www.facebook.com\/templatemonster.de\/\",\"https:\/\/twitter.com\/TM_Deutschland\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/person\/e49572bf6360863c66e5b53b2cab591e\",\"name\":\"Olga Wirth\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/fd431cbc24e171c296d1c39748f17e2f?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/fd431cbc24e171c296d1c39748f17e2f?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"caption\":\"Olga Wirth\"},\"description\":\"Hat sich Texterin auf den Bereich Webdesign und Online-Marketing spezialisiert. Olga auf Facebook.\",\"url\":\"https:\/\/monsterspost.com\/de\/author\/olgawirth\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Wie baue ich eine Webinar-Landingpage in 1 Stunde? \u2b50 TemplateMonster Deutscher Blog","description":"In diesem Tutorial lernt Ihr, wie Ihr innerhalb 1 Stunde eine umhauende Landingpage f\u00fcr Euer Webinar mit einer unserer Vorlage bauen k\u00f6nnt.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/monsterspost.com\/de\/wie-baue-ich-eine-umhauende-landingpage-fuer-ein-webinar\/","og_locale":"de_DE","og_type":"article","og_title":"Wie baue ich eine Webinar-Landingpage in 1 Stunde? \u2b50 TemplateMonster Deutscher Blog","og_description":"In diesem Tutorial lernt Ihr, wie Ihr innerhalb 1 Stunde eine umhauende Landingpage f\u00fcr Euer Webinar mit einer unserer Vorlage bauen k\u00f6nnt.","og_url":"https:\/\/monsterspost.com\/de\/wie-baue-ich-eine-umhauende-landingpage-fuer-ein-webinar\/","og_site_name":"TemplateMonster Deutscher Blog","article_publisher":"https:\/\/www.facebook.com\/templatemonster.de\/","article_published_time":"2017-08-17T08:55:00+00:00","article_modified_time":"2020-04-02T13:44:21+00:00","og_image":[{"width":900,"height":538,"url":"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/08\/webinar-landing-page-customization.jpg","type":"image\/jpeg"}],"author":"Olga Wirth","twitter_card":"summary_large_image","twitter_creator":"@TM_Deutschland","twitter_site":"@TM_Deutschland","twitter_misc":{"Verfasst von":"Olga Wirth","Gesch\u00e4tzte Lesezeit":"36 Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/monsterspost.com\/de\/wie-baue-ich-eine-umhauende-landingpage-fuer-ein-webinar\/#article","isPartOf":{"@id":"https:\/\/monsterspost.com\/de\/wie-baue-ich-eine-umhauende-landingpage-fuer-ein-webinar\/"},"author":{"name":"Olga Wirth","@id":"https:\/\/monsterspost.com\/de\/#\/schema\/person\/e49572bf6360863c66e5b53b2cab591e"},"headline":"Wie baue ich eine Webinar-Landingpage in 1 Stunde?","datePublished":"2017-08-17T08:55:00+00:00","dateModified":"2020-04-02T13:44:21+00:00","mainEntityOfPage":{"@id":"https:\/\/monsterspost.com\/de\/wie-baue-ich-eine-umhauende-landingpage-fuer-ein-webinar\/"},"wordCount":2350,"commentCount":0,"publisher":{"@id":"https:\/\/monsterspost.com\/de\/#organization"},"keywords":["HTML5","Marketing","Web Templates"],"articleSection":["Anleitungen","Webdesign","Webentwicklung"],"inLanguage":"de-DE","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/monsterspost.com\/de\/wie-baue-ich-eine-umhauende-landingpage-fuer-ein-webinar\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/monsterspost.com\/de\/wie-baue-ich-eine-umhauende-landingpage-fuer-ein-webinar\/","url":"https:\/\/monsterspost.com\/de\/wie-baue-ich-eine-umhauende-landingpage-fuer-ein-webinar\/","name":"Wie baue ich eine Webinar-Landingpage in 1 Stunde? \u2b50 TemplateMonster Deutscher Blog","isPartOf":{"@id":"https:\/\/monsterspost.com\/de\/#website"},"datePublished":"2017-08-17T08:55:00+00:00","dateModified":"2020-04-02T13:44:21+00:00","description":"In diesem Tutorial lernt Ihr, wie Ihr innerhalb 1 Stunde eine umhauende Landingpage f\u00fcr Euer Webinar mit einer unserer Vorlage bauen k\u00f6nnt.","breadcrumb":{"@id":"https:\/\/monsterspost.com\/de\/wie-baue-ich-eine-umhauende-landingpage-fuer-ein-webinar\/#breadcrumb"},"inLanguage":"de-DE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/monsterspost.com\/de\/wie-baue-ich-eine-umhauende-landingpage-fuer-ein-webinar\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/monsterspost.com\/de\/wie-baue-ich-eine-umhauende-landingpage-fuer-ein-webinar\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/monsterspost.com\/de\/"},{"@type":"ListItem","position":2,"name":"Wie baue ich eine Webinar-Landingpage in 1 Stunde?"}]},{"@type":"WebSite","@id":"https:\/\/monsterspost.com\/de\/#website","url":"https:\/\/monsterspost.com\/de\/","name":"TemplateMonster Deutscher Blog","description":"Just another MonsterPost Sites site","publisher":{"@id":"https:\/\/monsterspost.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/monsterspost.com\/de\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de-DE"},{"@type":"Organization","@id":"https:\/\/monsterspost.com\/de\/#organization","name":"MonsterPost Deutschland","url":"https:\/\/monsterspost.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/monsterspost.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Logo-TM.png","contentUrl":"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Logo-TM.png","width":180,"height":180,"caption":"MonsterPost Deutschland"},"image":{"@id":"https:\/\/monsterspost.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/template_monster\/","https:\/\/www.pinterest.com\/templatemonster\/","https:\/\/www.youtube.com\/channel\/UC19iEGcEhlFidO5ruNGE5yg","https:\/\/www.facebook.com\/templatemonster.de\/","https:\/\/twitter.com\/TM_Deutschland"]},{"@type":"Person","@id":"https:\/\/monsterspost.com\/de\/#\/schema\/person\/e49572bf6360863c66e5b53b2cab591e","name":"Olga Wirth","image":{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/monsterspost.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/fd431cbc24e171c296d1c39748f17e2f?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/fd431cbc24e171c296d1c39748f17e2f?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","caption":"Olga Wirth"},"description":"Hat sich Texterin auf den Bereich Webdesign und Online-Marketing spezialisiert. Olga auf Facebook.","url":"https:\/\/monsterspost.com\/de\/author\/olgawirth\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/posts\/9919"}],"collection":[{"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/users\/1805543"}],"replies":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/comments?post=9919"}],"version-history":[{"count":21,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/posts\/9919\/revisions"}],"predecessor-version":[{"id":25014,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/posts\/9919\/revisions\/25014"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/media\/10023"}],"wp:attachment":[{"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/media?parent=9919"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/categories?post=9919"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/tags?post=9919"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}