{"id":4995,"date":"2020-06-12T12:24:43","date_gmt":"2020-06-12T10:24:43","guid":{"rendered":"https:\/\/robert-leitinger.com\/?p=4995"},"modified":"2022-09-15T18:49:25","modified_gmt":"2022-09-15T16:49:25","slug":"wordpress-theme-erstellen","status":"publish","type":"post","link":"https:\/\/robert-leitinger.com\/wordpress-theme-erstellen\/","title":{"rendered":"WordPress Theme erstellen ohne Programmierkenntnisse &#8211; Schritt f\u00fcr Schritt"},"content":{"rendered":"\n<p>In diesem Tutorial zeige ich dir Schritt f\u00fcr Schritt, wie du einfach und schnell ein <strong>eigenes WordPress Theme erstellen<\/strong> kannst. Komplett ohne Programmierkenntnisse &#8211; einfach <strong>per Drag &amp; Drop<\/strong>.<\/p>\n\n\n\n<p>Das alles funktioniert mit dem WordPress <em>Theme Builder<\/em> von Elementor. Dazu aber gleich mehr.<\/p>\n\n\n\n<div class=\"video-container\"><iframe src=\"https:\/\/www.youtube-nocookie.com\/embed\/WTrnMDVpr7U;\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n\n<script type=\"application\/ld+json\">{\n  \"@context\": \"http:\/\/schema.org\",\n  \"@type\": \"VideoObject\",\n  \"name\": \"WordPress Theme selbst erstellen - Elementor Theme Builder Tutorial\",\n  \"description\": \"Ich zeige dir Schritt f\u00fcr Schritt, wie du ein eigenes WordPress Theme erstellen kannst - ohne Coding, ohne Programmierkenntnisse. Das funktioniert mit dem Elementor Theme Builder.  \ud83d\udc49\ud83c\udffb Im Video erw\u00e4hnt: *Direkt zu Elementor Pro: https:\/\/elementor.com\/?ref=8391 Elementor Theme Builder Tutorial zum Nachlesen: https:\/\/robert-leitinger.com\/wordpress-theme-erstellen\/ Mein Elementor-Tutorial (Video): https:\/\/youtu.be\/peHSdgepfh4 Mein Elementor-Review: https:\/\/robert-leitinger.com\/elementor\/  \ud83d\udc49\ud83c\udffb Weitere Links: Du ben\u00f6tigst eine optimierte Webseite \/ SEO Optimierung etc.: https:\/\/www.coderocker.at\/ Die besten Tools f\u00fcr WordPress, SEO & Blogging: https:\/\/robert-leitinger.com\/online-marketing-tools\/  \ud83d\udcd1 Inhaltsverzeichnis: 00:00 Eigenes WordPress Theme ohne Programmierung & Coding 02:45 Elementor Theme Builder Tutorial 12:40 Vorteile & Nachteile des Elementor Theme Builder  \ud83d\udccc Kurzbeschreibung: Wenn du ein WordPress Theme selbst erstellen m\u00f6chtest, hast du im Grunde zwei M\u00f6glichkeiten: 1. Ein eigenes Theme per Coding erstellen (HTML, PHP, CSS etc.) 2. Du kannst einen WordPress Theme Builder nutzen Ich zeige dir in diesem Tutorial die einfach Variante. Mit dem Elementor Theme Builder kannst du dir ganz einfach dein eigenes WordPress Theme per Drag & Drop erstellen. Dazu erstellst du einfach alle Elemente, die ein Theme ben\u00f6tigt: - Theme-Header - Theme Footer - Blog-Layout (+ Blog-Archiv) - Seiten-Layout - 404-Seite - Seite f\u00fcr Suchergebnisse Um den Elementot Theme Builder zu nutzen, ben\u00f6tigst du die Pro-Version von Elementor.  #Tutorial #WordPress #ElementorPro  Credit (Musik): Deflector by Ghostrifter Official  https:\/\/soundcloud.com\/ghostrifter-of...\u200b  Creative Commons \u2014 Attribution-ShareAlike 3.0 Unported \u2014 CC BY-SA 3.0 Free Download \/ Stream: http:\/\/bit.ly\/-deflector\u200b Music promoted by Audio Library https:\/\/youtu.be\/ItZMEV_Q2ww\u200b  Hinweis: * = Affiliate Link. Wenn du \u00fcber diesen Link etwas kaufst, bekomme ich eine kleine Provision. F\u00fcr dich bleibt der Preis gleich. Vielen Dank, so kannst du meine Arbeit unterst\u00fctzen.\",\n  \"thumbnailUrl\": \"https:\/\/i.ytimg.com\/vi\/WTrnMDVpr7U\/default.jpg\",\n  \"uploadDate\": \"2021-03-28T07:15:00Z\",\n  \"duration\": \"PT16M22S\",\n  \"embedUrl\": \"https:\/\/www.youtube.com\/embed\/WTrnMDVpr7U\",\n  \"interactionCount\": \"553\"\n}<\/script>\n\n\n<style>.kb-table-of-content-nav.kb-table-of-content-id_bc7218-e1 .kb-table-of-content-wrap{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px;background-color:var(--base-2);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kb-table-of-content-nav.kb-table-of-content-id_bc7218-e1 .kb-table-of-contents-title-wrap{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.kb-table-of-content-nav.kb-table-of-content-id_bc7218-e1 .kb-table-of-contents-title{font-weight:regular;font-style:normal;}.kb-table-of-content-nav.kb-table-of-content-id_bc7218-e1 .kb-table-of-content-wrap .kb-table-of-content-list{font-size:0.93em;line-height:1.5em;font-weight:regular;font-style:normal;margin-top:20px;margin-right:0px;margin-bottom:0px;margin-left:-10px;}.kb-table-of-content-nav.kb-table-of-content-id_bc7218-e1 .kb-table-of-content-wrap .kb-table-of-content-list .active > .kb-table-of-contents__entry{color:var(--accent);}.kb-table-of-content-nav.kb-table-of-content-id_bc7218-e1 .kb-table-of-content-list li{margin-bottom:12px;}.kb-table-of-content-nav.kb-table-of-content-id_bc7218-e1 .kb-table-of-content-list li .kb-table-of-contents-list-sub{margin-top:12px;}.kb-table-of-content-nav.kb-table-of-content-id_bc7218-e1 .kb-toggle-icon-style-basiccircle .kb-table-of-contents-icon-trigger:after, .kb-table-of-content-nav.kb-table-of-content-id_bc7218-e1 .kb-toggle-icon-style-basiccircle .kb-table-of-contents-icon-trigger:before, .kb-table-of-content-nav.kb-table-of-content-id_bc7218-e1 .kb-toggle-icon-style-arrowcircle .kb-table-of-contents-icon-trigger:after, .kb-table-of-content-nav.kb-table-of-content-id_bc7218-e1 .kb-toggle-icon-style-arrowcircle .kb-table-of-contents-icon-trigger:before, .kb-table-of-content-nav.kb-table-of-content-id_bc7218-e1 .kb-toggle-icon-style-xclosecircle .kb-table-of-contents-icon-trigger:after, .kb-table-of-content-nav.kb-table-of-content-id_bc7218-e1 .kb-toggle-icon-style-xclosecircle .kb-table-of-contents-icon-trigger:before{background-color:var(--base-2);}<\/style>\n\n\n<h2 class=\"wp-block-heading\">Wie du ein WordPress Theme selbst erstellen kannst<\/h2>\n\n\n\n<p>Im Grunde gibt es <strong>zwei M\u00f6glichkeiten<\/strong>, wie du ein WordPress Theme selbst erstellen kannst:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Ein Theme mit HTML, CSS und PHP selbst programmieren (komplex und aufwendig)<\/li><li>Ein Theme mit einem <em>Theme Builder<\/em> erstellen (einfach per Drag &amp; Drop)<\/li><\/ol>\n\n\n\n<p>Auf die erste M\u00f6glichkeit (ein Theme selbst programmieren), werde ich in diesem Beitrag nicht genauer eingehen. Ein sehr umfangreiches Tutorial dazu findest du auf <a aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" href=\"https:\/\/www.akademie.de\/wissen\/wordpress-theme-erstellen\" target=\"_blank\" class=\"rank-math-link wpel-icon-right\" data-wpel-link=\"external\">akademie.de<i class=\"wpel-icon dashicons-before dashicons-external\" aria-hidden=\"true\"><\/i><\/a> sowie auf <a aria-label=\"t3n.de (opens in a new tab)\" rel=\"noreferrer noopener\" href=\"https:\/\/t3n.de\/news\/grosse-guide-wordpress-theme-555618\/\" target=\"_blank\" class=\"rank-math-link wpel-icon-right\" data-wpel-link=\"external\">t3n.de<i class=\"wpel-icon dashicons-before dashicons-external\" aria-hidden=\"true\"><\/i><\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/robert-leitinger.com\/wp-content\/uploads\/2020\/06\/no-coding.gif\" alt=\"Keine Programmierkenntnisse\" class=\"wp-image-5134\" width=\"400\"\/><figcaption>Wenn ich ein eigenes WordPress Theme selbst programmieren m\u00fcsste, dann w\u00fcrde ich wahrscheinlich durchdrehen. Gott sei Dank gibt es eine einfachere M\u00f6glichkeit \ud83d\ude42<\/figcaption><\/figure>\n\n\n\n<p>Ich zeige dir die <strong>einfachere Variante<\/strong>.<\/p>\n\n\n\n<p>Mit dem Theme Builder von <strong>Elementor<\/strong> kannst du dein Theme n\u00e4mlich einfach per Drag &amp; Drop erstellen. Dabei kannst du sogar auf unz\u00e4hlige Vorlagen zur\u00fcckgreifen und diese dann einfach anpassen.<\/p>\n\n\n\n<p>Dein eigenes Theme kannst du somit in weniger als einer Stunde erstellen &#8211; ganz <strong>ohne<\/strong> HTML, CSS oder PHP-Kenntnisse!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Was ist der Elementor Theme Builder?<\/h2>\n\n\n\n<p>Elementor ist einer der popul\u00e4rsten Page- und Theme Builder f\u00fcr WordPress. Ein sehr umfangreiches Review \u00fcber dieses geniale Tool findest du hier in meinem <a href=\"https:\/\/robert-leitinger.com\/elementor\/\" class=\"rank-math-link\" data-wpel-link=\"internal\">Elementor Testbericht<\/a>.<\/p>\n\n\n\n<p>Elementor ist ein Plugin, welches du kostenlos \u00fcber das WordPress Backend installieren kannst.<\/p>\n\n\n\n<p>Die <strong>kostenpflichtige Pro-Version<\/strong> von Elementor verf\u00fcgt neben vielen anderen Features auch \u00fcber eine <em>Theme Builder Funktionalit\u00e4t<\/em>. Elementor Pro kannst du ab ca. 45 Euro (49 Dollar) <a href=\"https:\/\/robert-leitinger.com\/go\/elementor-preise\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/robert-leitinger.com\/go\/elementor-preise\" rel=\"noreferrer noopener sponsored\" data-wpel-link=\"external\" class=\"wpel-icon-right\"><strong>hier auf der offiziellen Webseite kaufen*<\/strong><i class=\"wpel-icon dashicons-before dashicons-external\" aria-hidden=\"true\"><\/i><\/a>.<\/p>\n\n\n\n<p>Auch diese Webseite wurde komplett mit Elementor&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-medium_large is-resized\"><img decoding=\"async\" src=\"https:\/\/robert-leitinger.com\/wp-content\/uploads\/2019\/09\/elementor-pro-675x379.jpg\" alt=\"Elementor Pro inklusive Theme Builder\" class=\"wp-image-2214\" width=\"506\" height=\"284\" srcset=\"https:\/\/robert-leitinger.com\/wp-content\/uploads\/2019\/09\/elementor-pro-675x379.jpg 675w, https:\/\/robert-leitinger.com\/wp-content\/uploads\/2019\/09\/elementor-pro-400x225.jpg 400w, https:\/\/robert-leitinger.com\/wp-content\/uploads\/2019\/09\/elementor-pro-1250x703.jpg 1250w, https:\/\/robert-leitinger.com\/wp-content\/uploads\/2019\/09\/elementor-pro-275x155.jpg 275w, https:\/\/robert-leitinger.com\/wp-content\/uploads\/2019\/09\/elementor-pro-775x436.jpg 775w, https:\/\/robert-leitinger.com\/wp-content\/uploads\/2019\/09\/elementor-pro-20x11.jpg 20w, https:\/\/robert-leitinger.com\/wp-content\/uploads\/2019\/09\/elementor-pro.jpg 1423w\" sizes=\"(max-width: 506px) 100vw, 506px\" \/><figcaption>Elementor ist ein Drag &amp; Drop Page Builder. Die Pro-Version enth\u00e4lt eine geniale Theme Builder Funktionalit\u00e4t mit der du die Grenzen von WordPress sprengen kannst. Auch diese Webseite wurde komplett mit Elementor erstellt.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">So funktioniert der Elementor Theme Builder<\/h2>\n\n\n\n<p>Eines m\u00f6chte ich gleich vorweg klarstellen: Elementor ist ein Plugin und ben\u00f6tigt immer ein echtes WordPress Theme als Basis, damit es \u00fcberhaupt funktioniert. Somit kann man auch kein \u201e<em>echtes WordPress Theme<\/em>\u201c mit Elementor erstellen.<\/p>\n\n\n\n<p>Allerdings ist es m\u00f6glich, dass du mit dem Elementor Theme Builder quasi jeden Bereich des von dir eingesetzten Themes \u00fcberschreibst.<\/p>\n\n\n\n<p>Du kannst also deine gesamte WordPress-Webseite mit Elementor erstellen: Den Header-Bereich inklusive Men\u00fc, das Blog-Layout, Archiv-&nbsp; bzw. Kategorie-Seiten, die Seite wo interne Suchergebnisse angezeigt werden, etc.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-style-default is-layout-flow wp-block-quote-is-layout-flow\"><p>Alle Bereiche, wo Layout und Design von deinem Theme vorgegeben werden, k\u00f6nnen mit Elementor Pro erstellt und ersetzt werden.<\/p><\/blockquote>\n\n\n\n<p>Das Prinzip hinter dem Theme Builder ist also, dass selbst erstellte <strong>Templates<\/strong> das eigentliche Theme-Layout ersetzen.<\/p>\n\n\n<style>.wp-block-kadence-column.kb-section-dir-horizontal > .kt-inside-inner-col > #kt-info-box_ff67f5-a9 .kt-blocks-info-box-link-wrap{max-width:unset;}#kt-info-box_ff67f5-a9 .kt-blocks-info-box-link-wrap{border-color:#4521d9;border-top-width:3px;border-right-width:3px;border-bottom-width:3px;border-left-width:3px;background:#ffffff;padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px;margin-top:0%;margin-right:0%;margin-bottom:0%;margin-left:0%;}#kt-info-box_ff67f5-a9 .kt-blocks-info-box-link-wrap:hover{border-color:#4521d9;background:#ffffff;}#kt-info-box_ff67f5-a9 .kadence-info-box-icon-container .kt-info-svg-icon, #kt-info-box_ff67f5-a9 .kt-info-svg-icon-flip, #kt-info-box_ff67f5-a9 .kt-blocks-info-box-number{font-size:30px;}#kt-info-box_ff67f5-a9 .kt-blocks-info-box-media{color:#4521d9;background:#ffffff;border-color:#eeeeee;border-radius:200px;overflow:hidden;border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-top:0px;margin-right:15px;margin-bottom:0px;margin-left:0px;}#kt-info-box_ff67f5-a9 .kt-blocks-info-box-link-wrap:hover .kt-blocks-info-box-media{color:#4521d9;background:#ffffff;border-color:#eeeeee;}#kt-info-box_ff67f5-a9 .kt-infobox-textcontent h2.kt-blocks-info-box-title{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-top:5px;margin-right:0px;margin-bottom:10px;margin-left:0px;}#kt-info-box_ff67f5-a9 .kt-infobox-textcontent .kt-blocks-info-box-text{color:#4521d9;}.wp-block-kadence-infobox#kt-info-box_ff67f5-a9 .kt-blocks-info-box-text{font-size:0.9em;line-height:1.8em;}#kt-info-box_ff67f5-a9 .kt-blocks-info-box-learnmore{color:#ffffff;background:#4521d9;border-color:#4521d9;font-size:1em;font-weight:400;border-width:2px 2px 2px 2px;padding-top:4px;padding-right:20px;padding-bottom:4px;padding-left:20px;margin-top:10px;margin-right:0px;margin-bottom:-44px;margin-left:0px;}#kt-info-box_ff67f5-a9 .kt-blocks-info-box-link-wrap:hover .kt-blocks-info-box-learnmore,#kt-info-box_ff67f5-a9 .kt-blocks-info-box-link-wrap .kt-blocks-info-box-learnmore:focus{color:#ffffff;background:#4521d9;border-color:#4521d9;}@media all and (max-width: 767px){#kt-info-box_ff67f5-a9 .kt-blocks-info-box-link-wrap{display:flex;justify-content:flex-start;flex-direction:row;}#kt-info-box_ff67f5-a9 .kt-blocks-info-box-link-wrap .kt-blocks-info-box-media{display:inline-block;max-width:100%;}}<\/style>\n<div id=\"kt-info-box_ff67f5-a9\" class=\"wp-block-kadence-infobox\"><div class=\"kt-blocks-info-box-link-wrap kt-blocks-info-box-media-align-left kt-info-halign-left kb-info-box-vertical-media-align-top\"><div class=\"kt-blocks-info-box-media-container\"><div class=\"kt-blocks-info-box-media kt-info-media-animate-none\"><div class=\"kadence-info-box-icon-container kt-info-icon-animate-none\"><div class=\"kadence-info-box-icon-inner-container\"><span style=\"display:block;justify-content:center;align-items:center\" class=\"kt-info-svg-icon kt-info-svg-icon-fas_lightbulb\"><svg style=\"display:inline-block;vertical-align:middle\" viewBox=\"0 0 384 512\" height=\"30\" width=\"30\" fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><title>Information<\/title><path d=\"M272 428v28c0 10.449-6.68 19.334-16 22.629V488c0 13.255-10.745 24-24 24h-80c-13.255 0-24-10.745-24-24v-9.371c-9.32-3.295-16-12.18-16-22.629v-28c0-6.627 5.373-12 12-12h136c6.627 0 12 5.373 12 12zm-143.107-44c-9.907 0-18.826-6.078-22.376-15.327C67.697 267.541 16 277.731 16 176 16 78.803 94.805 0 192 0s176 78.803 176 176c0 101.731-51.697 91.541-90.516 192.673-3.55 9.249-12.47 15.327-22.376 15.327H128.893zM112 176c0-44.112 35.888-80 80-80 8.837 0 16-7.164 16-16s-7.163-16-16-16c-61.757 0-112 50.243-112 112 0 8.836 7.164 16 16 16s16-7.164 16-16z\"><\/path><\/svg><\/span><\/div><\/div><\/div><\/div><div class=\"kt-infobox-textcontent\"><p class=\"kt-blocks-info-box-text\">Genau genommen erstellst du also kein echtes Theme, sondern lediglich ein <strong>Theme-Layout<\/strong>, welches das installierte Theme \u00fcberschreibt.<br\/>In der Praxis &#8211; also im Ergebnis &#8211; macht dies aber keinen Unterschied.<\/p><\/div><\/div><\/div>\n\n\n<style>.wp-block-kadence-spacer.kt-block-spacer-_11c124-b8 .kt-block-spacer{height:20px;}.wp-block-kadence-spacer.kt-block-spacer-_11c124-b8 .kt-divider{border-top-width:1px;height:1px;border-top-color:#eee;width:80%;border-top-style:solid;}@media all and (max-width: 767px){.wp-block-kadence-spacer.kt-block-spacer-_11c124-b8 .kt-block-spacer{height:15px!important;}}<\/style>\n<div class=\"wp-block-kadence-spacer aligncenter kt-block-spacer-_11c124-b8\"><div class=\"kt-block-spacer kt-block-spacer-halign-center\"><\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Welches (Basis-) Theme sollte man nutzen?<\/h3>\n\n\n\n<p>Elementor selbst bietet f\u00fcr diesen Einsatzzweck das kostenlose <a href=\"https:\/\/wordpress.org\/themes\/hello-elementor\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"rank-math-link wpel-icon-right\" data-wpel-link=\"external\"><strong>Hello Elementor Theme<\/strong><i class=\"wpel-icon dashicons-before dashicons-external\" aria-hidden=\"true\"><\/i><\/a>. Dabei handelt es sich um ein komplett reduziertes, ja \u201cnacktes\u201d Theme ohne Funktionen und ohne echtem Layout.<\/p>\n\n\n\n<p>In Kombination mit dem Elementor Theme Builder ist das nat\u00fcrlich die perfekte Wahl, um eine bestm\u00f6gliche Performance zu erreichen. Das <em>Hello Theme<\/em> ist so stark reduziert, das lediglich <strong>17kB<\/strong> an Daten geladen werden.<\/p>\n\n\n\n<p>Zwei weitere WordPress Themes die ebenfalls gro\u00dfartig mit Elementor harmonieren sind <a href=\"https:\/\/robert-leitinger.com\/generatepress\/\" data-wpel-link=\"internal\"><strong>GeneratePress<\/strong><\/a> und <a href=\"https:\/\/robert-leitinger.com\/astra-theme\/\" data-wpel-link=\"internal\"><strong>Astra<\/strong><\/a>. Die beiden Themes sind ebenfalls auf maximale Performance optimiert.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Theme-Style Funktion<\/h3>\n\n\n\n<p>Erg\u00e4nzend zum <em>Theme Builder<\/em> bietet Elementor Pro auch noch die Funktion <em>Theme-Style<\/em> an. Damit k\u00f6nnen globale Stile f\u00fcr Schriften (Body-Text, H1, H2&#8230;), Buttons, Links etc. festgelegt werden.<\/p>\n\n\n\n<p>Die Funktion Theme-Style ist vergleichbar mit den Customizer-Optionen von guten WordPress Themes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full box-shadow\"><img decoding=\"async\" width=\"301\" height=\"341\" src=\"https:\/\/robert-leitinger.com\/wp-content\/uploads\/2020\/06\/theme-styles.png\" alt=\"Theme-Stil Einstellungen\" class=\"wp-image-5069\" srcset=\"https:\/\/robert-leitinger.com\/wp-content\/uploads\/2020\/06\/theme-styles.png 301w, https:\/\/robert-leitinger.com\/wp-content\/uploads\/2020\/06\/theme-styles-243x275.png 243w, https:\/\/robert-leitinger.com\/wp-content\/uploads\/2020\/06\/theme-styles-18x20.png 18w\" sizes=\"(max-width: 301px) 100vw, 301px\" \/><\/figure>\n\n\n\n<p>Wenn du GeneratePress oder Astra nutzt, kannst du auf diese Funktion verzichten und die globalen Stile in den Optionen des Customizers festlegen. Wenn du das Hello Theme nutzt, solltest du die Theme-Stil Funktion nutzen, da hier keine disbez\u00fcglichen Optionen im Customizer bereitstehen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Welche Seiten \/ Bereiche musst du erstellen?<\/h2>\n\n\n\n<p>Bevor ich mit der (einfachen) Schritt f\u00fcr Schritt Anleitung starte, kl\u00e4ren wir noch schnell welche Seiten und Bereiche \u00fcberhaupt erstellt werden m\u00fcssen.<\/p>\n\n\n\n<p>Im Grunde m\u00fcssen wir folgende Templates erstellen, um ein komplettes Theme zu erhalten:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Header<\/li><li>Footer<\/li><li>Layout einer Standard-Seite<\/li><li>Layout eines einzelnen Blog Posts<\/li><li>Archiv-Layout (Kategorie Seite)<\/li><li>Suchergebnisseite<\/li><li>404-Seite<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Schritt f\u00fcr Schritt Anleitung<\/h2>\n\n\n\n<p>Falls du Elementor noch nie genutzt hast, dann wirst du jetzt \u00fcberrascht sein, wie <strong>einfach<\/strong> du damit ein eigenes Theme-Layout erstellen kannst:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Kaufe Elementor Pro<\/h3>\n\n\n\n<p>Damit du die Theme-Builder Funktion nutzen kannst, ben\u00f6tigst du die Pro-Version von Elementor. Falls du diese noch nicht hast, kannst du sie <strong><a href=\"https:\/\/robert-leitinger.com\/go\/elementor-preise\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/robert-leitinger.com\/go\/elementor-preise\" rel=\"noreferrer noopener sponsored\" data-wpel-link=\"external\" class=\"wpel-icon-right\">hier kaufen*<i class=\"wpel-icon dashicons-before dashicons-external\" aria-hidden=\"true\"><\/i><\/a><\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Installiere ein schlankes Basis-Theme<\/h3>\n\n\n\n<p>Wie vorhin schon angesprochen empfehle ich dir das <strong>Elementor Hello Theme<\/strong> zu verwenden. Bei diesem komplett blanken Theme werden nur <strong>17kB<\/strong> an Daten geladen. Somit hast du auch bez\u00fcglich der Performance, den perfekten Unterbau f\u00fcr deine Webseite.<\/p>\n\n\n\n<p>Aber auch <strong>GeneratePress<\/strong>, <strong>Astra<\/strong> und weitere Themes sind bestens mit Elementor kompatibel und ebenfalls sehr schlank.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Erstelle Header und Footer<\/h3>\n\n\n\n<p>Erstellte zuerst deinen Header und deinen Footer. Du findest die Option dazu im WordPress-Backend:<\/p>\n\n\n\n<p class=\"has-text-align-center has-background\" style=\"background-color:#ededed\"><em>Templates \u2013 Theme Builder \u2013 Neu hinzuf\u00fcgen &#8211; Kopfzeile<\/em><br><em>Templates \u2013 Theme Builder \u2013 <\/em> <em>Neu hinzuf\u00fcgen &#8211; Fu\u00dfzeile<\/em><\/p>\n\n\n<style>.wp-block-kadence-spacer.kt-block-spacer-_d21f89-81 .kt-block-spacer{height:20px;}.wp-block-kadence-spacer.kt-block-spacer-_d21f89-81 .kt-divider{border-top-width:1px;height:1px;border-top-color:#eee;width:80%;border-top-style:solid;}@media all and (max-width: 767px){.wp-block-kadence-spacer.kt-block-spacer-_d21f89-81 .kt-block-spacer{height:20px!important;}}<\/style>\n<div class=\"wp-block-kadence-spacer aligncenter kt-block-spacer-_d21f89-81\"><div class=\"kt-block-spacer kt-block-spacer-halign-center\"><\/div><\/div>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/robert-leitinger.com\/wp-content\/uploads\/2019\/10\/elementor-pro-theme-builder.jpg\" alt=\"Elementor Theme Builder benutzen\" class=\"wp-image-1503\" width=\"402\" height=\"384\" srcset=\"https:\/\/robert-leitinger.com\/wp-content\/uploads\/2019\/10\/elementor-pro-theme-builder.jpg 402w, https:\/\/robert-leitinger.com\/wp-content\/uploads\/2019\/10\/elementor-pro-theme-builder-400x382.jpg 400w, https:\/\/robert-leitinger.com\/wp-content\/uploads\/2019\/10\/elementor-pro-theme-builder-275x263.jpg 275w, https:\/\/robert-leitinger.com\/wp-content\/uploads\/2019\/10\/elementor-pro-theme-builder-20x20.jpg 20w\" sizes=\"(max-width: 402px) 100vw, 402px\" \/><\/figure>\n\n\n<style>.wp-block-kadence-spacer.kt-block-spacer-_c6376d-81 .kt-block-spacer{height:20px;}.wp-block-kadence-spacer.kt-block-spacer-_c6376d-81 .kt-divider{border-top-width:1px;height:1px;border-top-color:#eee;width:80%;border-top-style:solid;}@media all and (max-width: 767px){.wp-block-kadence-spacer.kt-block-spacer-_c6376d-81 .kt-block-spacer{height:20px!important;}}<\/style>\n<div class=\"wp-block-kadence-spacer aligncenter kt-block-spacer-_c6376d-81\"><div class=\"kt-block-spacer kt-block-spacer-halign-center\"><\/div><\/div>\n\n\n\n<figure class=\"wp-block-image size-medium_large is-resized\"><img decoding=\"async\" src=\"https:\/\/robert-leitinger.com\/wp-content\/uploads\/2019\/10\/theme-builder-675x322.jpg\" alt=\"\" class=\"wp-image-1504\" width=\"675\" height=\"322\" srcset=\"https:\/\/robert-leitinger.com\/wp-content\/uploads\/2019\/10\/theme-builder-675x322.jpg 675w, https:\/\/robert-leitinger.com\/wp-content\/uploads\/2019\/10\/theme-builder-400x191.jpg 400w, https:\/\/robert-leitinger.com\/wp-content\/uploads\/2019\/10\/theme-builder-275x131.jpg 275w, https:\/\/robert-leitinger.com\/wp-content\/uploads\/2019\/10\/theme-builder-775x370.jpg 775w, https:\/\/robert-leitinger.com\/wp-content\/uploads\/2019\/10\/theme-builder-20x10.jpg 20w, https:\/\/robert-leitinger.com\/wp-content\/uploads\/2019\/10\/theme-builder.jpg 1250w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><figcaption>Nachdem du auf den Button <em>Neu hinzuf\u00fcgen<\/em> geklickt hast, \u00f6ffnet sich dieses Fenster. Hier kannst du einen Bereich ausw\u00e4hlen (in diesem Fall <em>Kopfzeile<\/em>) und ein entsprechendes Template erstellen.<\/figcaption><\/figure>\n\n\n<style>.wp-block-kadence-spacer.kt-block-spacer-_56346b-37 .kt-block-spacer{height:20px;}.wp-block-kadence-spacer.kt-block-spacer-_56346b-37 .kt-divider{border-top-width:1px;height:1px;border-top-color:#eee;width:80%;border-top-style:solid;}@media all and (max-width: 767px){.wp-block-kadence-spacer.kt-block-spacer-_56346b-37 .kt-block-spacer{height:20px!important;}}<\/style>\n<div class=\"wp-block-kadence-spacer aligncenter kt-block-spacer-_56346b-37\"><div class=\"kt-block-spacer kt-block-spacer-halign-center\"><\/div><\/div>\n\n\n\n<p>Um deinen Workflow zu beschleunigen, kannst du auf bestehende Header- und Footer-Templates zur\u00fcckgreifen, und diese einfach anpassen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-medium_large is-resized\"><img decoding=\"async\" src=\"https:\/\/robert-leitinger.com\/wp-content\/uploads\/2019\/10\/elementor-pro-header-vorlage-675x373.jpg\" alt=\"Elementor Vorlagen f\u00fcr den Header\" class=\"wp-image-1502\" width=\"675\" height=\"373\" srcset=\"https:\/\/robert-leitinger.com\/wp-content\/uploads\/2019\/10\/elementor-pro-header-vorlage-675x373.jpg 675w, https:\/\/robert-leitinger.com\/wp-content\/uploads\/2019\/10\/elementor-pro-header-vorlage-400x221.jpg 400w, https:\/\/robert-leitinger.com\/wp-content\/uploads\/2019\/10\/elementor-pro-header-vorlage-275x152.jpg 275w, https:\/\/robert-leitinger.com\/wp-content\/uploads\/2019\/10\/elementor-pro-header-vorlage-775x428.jpg 775w, https:\/\/robert-leitinger.com\/wp-content\/uploads\/2019\/10\/elementor-pro-header-vorlage-20x11.jpg 20w, https:\/\/robert-leitinger.com\/wp-content\/uploads\/2019\/10\/elementor-pro-header-vorlage.jpg 1250w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><figcaption>Der schnellste Weg einen eigenen Header zu erstellen: W\u00e4hle eine Header-Template Vorlage<\/figcaption><\/figure>\n\n\n\n<p>Nach dem Abspeichern kannst du noch festlegen, wo dein Header bzw. Footer angezeigt werden soll. In der Regel wirst du hier die Option \u201egesamte Webseite\u201c (<em>Entire Site<\/em>) w\u00e4hlen.<\/p>\n\n\n\n<p>Es ist aber auch m\u00f6glich, unterschiedliche Header je nach Seitentyp etc. zu erstellen und anzeigen zu lassen. Z.b. kannst du in deinen Beitr\u00e4gen einen anderen Header anzeigen lassen, als z.B. auf deiner Startseite.<\/p>\n\n\n\n<figure class=\"wp-block-image size-medium_large is-resized\"><img decoding=\"async\" src=\"https:\/\/robert-leitinger.com\/wp-content\/uploads\/2019\/10\/wo-anzeigen-lassen-675x408.jpg\" alt=\"Bedingung erstellen, wo das Template angezeigt werden soll.\" class=\"wp-image-1506\" width=\"675\" height=\"408\" srcset=\"https:\/\/robert-leitinger.com\/wp-content\/uploads\/2019\/10\/wo-anzeigen-lassen-675x408.jpg 675w, https:\/\/robert-leitinger.com\/wp-content\/uploads\/2019\/10\/wo-anzeigen-lassen-400x242.jpg 400w, https:\/\/robert-leitinger.com\/wp-content\/uploads\/2019\/10\/wo-anzeigen-lassen-275x166.jpg 275w, https:\/\/robert-leitinger.com\/wp-content\/uploads\/2019\/10\/wo-anzeigen-lassen-775x469.jpg 775w, https:\/\/robert-leitinger.com\/wp-content\/uploads\/2019\/10\/wo-anzeigen-lassen-20x12.jpg 20w, https:\/\/robert-leitinger.com\/wp-content\/uploads\/2019\/10\/wo-anzeigen-lassen.jpg 1042w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">4. Erstelle dein Blog-Layout<\/h3>\n\n\n\n<p>Auch beim Blog-Layout kannst du auf bestehende Templates zur\u00fcckgreifen und diese anpassen.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><img decoding=\"async\" src=\"https:\/\/robert-leitinger.com\/wp-content\/uploads\/2019\/10\/template_beitrag-3.jpg\" alt=\"\" class=\"wp-image-1523\" width=\"410\" height=\"755\" srcset=\"https:\/\/robert-leitinger.com\/wp-content\/uploads\/2019\/10\/template_beitrag-3.jpg 410w, https:\/\/robert-leitinger.com\/wp-content\/uploads\/2019\/10\/template_beitrag-3-217x400.jpg 217w, https:\/\/robert-leitinger.com\/wp-content\/uploads\/2019\/10\/template_beitrag-3-367x676.jpg 367w, https:\/\/robert-leitinger.com\/wp-content\/uploads\/2019\/10\/template_beitrag-3-149x275.jpg 149w, https:\/\/robert-leitinger.com\/wp-content\/uploads\/2019\/10\/template_beitrag-3-11x20.jpg 11w\" sizes=\"(max-width: 410px) 100vw, 410px\" \/><figcaption> Eines von vielen Blog-Templates (Single-Post). Das Template f\u00fcr diesen  Blog (und somit auch f\u00fcr diesen Beitrag, den du gerade lie\u00dft) habe ich aber komplett neu erstellt. <\/figcaption><\/figure>\n<\/div>\n\n\n<p>Hier kannst du das Layout f\u00fcr deine Blog-Beitr\u00e4ge festlegen:<\/p>\n\n\n\n<p class=\"has-background\" style=\"background-color:#ededed\"><em>Templates \u2013 Theme Builder \u2013 Neu hinzuf\u00fcgen &#8211; Single<\/em> &#8211; Beitrag<\/p>\n\n\n\n<p>Hier kannst du das Layout f\u00fcr deinen Archiv- bzw. Kategorie-Seiten festlegen:<\/p>\n\n\n\n<p class=\"has-background\" style=\"background-color:#ededed\"> <em>Templates \u2013 Theme Builder \u2013 Neu hinzuf\u00fcgen &#8211; Archiv<\/em><\/p>\n\n\n\n<p>Schreiben kannst du deine Blog-Beitr\u00e4ge aber nat\u00fcrlich wie gewohnt im <strong>WordPress-Editor<\/strong> (z.B. Gutenberg). So mache ich das auch hier in diesem Blog.<\/p>\n\n\n\n<p>Das Blog- und Kategorie-Layout habe ich mit Elementor erstellt, die Blog-Beitr\u00e4ge schreibe ich aber im Gutenberg-Editor von WordPress. Es ist allerdings auch m\u00f6glich, die einzelnen Blog-Beitr\u00e4ge mit Elementor zu schreiben und zu stylen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5. Erstelle das Layout einer Standard-Seite<\/h3>\n\n\n\n<p>Hier kannst du das Layout einer gew\u00f6hnlichen Seite erstellen:<\/p>\n\n\n\n<p class=\"has-background\" style=\"background-color:#ededed\"><em>Templates \u2013 Theme Builder \u2013 Neu hinzuf\u00fcgen &#8211; Single<\/em> &#8211; Seite<\/p>\n\n\n\n<p>Den Schritt k\u00f6nntest du dir aber auch sparen, falls du alle weiteren Seiten sowieso direkt mit dem Elementor Page Builder erstellst.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">6. Erstelle deine 404- und Sucherergebnis-Seite<\/h3>\n\n\n\n<p>Die 404-Seite ist die Seite, welche angezeigt wird, wenn eine Seite nicht gefunden wird (z.B. bei einer fehlerhaften Verlinkung oder Umleitung). Die Seite kannst du wie gewohnt erstellen. <\/p>\n\n\n\n<p class=\"has-background\" style=\"background-color:#ededed\"><em>Templates \u2013 Theme Builder \u2013 Neu hinzuf\u00fcgen &#8211; Single<\/em> &#8211; 404 Seite<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"800\" height=\"449\" src=\"https:\/\/robert-leitinger.com\/wp-content\/uploads\/2020\/06\/404-seite-templates.jpg\" alt=\"\" class=\"wp-image-5187\" srcset=\"https:\/\/robert-leitinger.com\/wp-content\/uploads\/2020\/06\/404-seite-templates.jpg 800w, https:\/\/robert-leitinger.com\/wp-content\/uploads\/2020\/06\/404-seite-templates-400x225.jpg 400w, https:\/\/robert-leitinger.com\/wp-content\/uploads\/2020\/06\/404-seite-templates-675x379.jpg 675w, https:\/\/robert-leitinger.com\/wp-content\/uploads\/2020\/06\/404-seite-templates-275x154.jpg 275w, https:\/\/robert-leitinger.com\/wp-content\/uploads\/2020\/06\/404-seite-templates-775x435.jpg 775w, https:\/\/robert-leitinger.com\/wp-content\/uploads\/2020\/06\/404-seite-templates-20x11.jpg 20w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Dank einiger sch\u00f6ner Templates dauert das Erstellen der 404-Seite weniger als 5 Minuten<\/figcaption><\/figure>\n\n\n\n<p>F\u00fcr die Suchergebnis-Seite erstellst du einfach eine weitere Archiv-Seite:<\/p>\n\n\n\n<p class=\"has-background\" style=\"background-color:#ededed\"><em>Templates \u2013 Theme Builder \u2013 Neu hinzuf\u00fcgen &#8211; Archiv<\/em><\/p>\n\n\n\n<p>Bei den Anzeige-Bedingungen w\u00e4hlst du dann einfach &#8222;Suchergebnisse&#8220; aus:<\/p>\n\n\n\n<figure class=\"wp-block-image size-medium_large is-resized\"><img decoding=\"async\" src=\"https:\/\/robert-leitinger.com\/wp-content\/uploads\/2020\/06\/suchergebnis-seite-erstellen-675x291.png\" alt=\"\" class=\"wp-image-5184\" width=\"506\" height=\"218\" srcset=\"https:\/\/robert-leitinger.com\/wp-content\/uploads\/2020\/06\/suchergebnis-seite-erstellen-675x291.png 675w, https:\/\/robert-leitinger.com\/wp-content\/uploads\/2020\/06\/suchergebnis-seite-erstellen-400x173.png 400w, https:\/\/robert-leitinger.com\/wp-content\/uploads\/2020\/06\/suchergebnis-seite-erstellen-275x119.png 275w, https:\/\/robert-leitinger.com\/wp-content\/uploads\/2020\/06\/suchergebnis-seite-erstellen-20x9.png 20w, https:\/\/robert-leitinger.com\/wp-content\/uploads\/2020\/06\/suchergebnis-seite-erstellen.png 742w\" sizes=\"(max-width: 506px) 100vw, 506px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Optional: Erstelle die restlichen Seiten deiner Webseite<\/h3>\n\n\n\n<p>Ich gehe immer so vor, dass ich im ersten Schritt mein Theme-Layout erstelle. Das haben wir nach diesen 6 einfachen Schritten bereits erledigt.<\/p>\n\n\n\n<p>Danach erstelle ich die Startseite sowie die restlichen Seiten meiner Webseite ebenfalls mit Elementor (z.B. eine <em>\u00dcber mich Seite <\/em>\/ <em>Leistungs-Seite<\/em>, etc.).<\/p>\n\n\n\n<p>Lege dazu einfach jeweils eine neue Seite im WordPress-Backend an und erstelle sie wie gewohnt mit Elementor. Welche Seite deine Startseite ist, kannst du wie gewohnt im WordPress Customizer festlegen.<\/p>\n\n\n\n<p>Fertig \u2013 nun hast du neben deinem Theme-Layout auch deine gesamte Webseite mit Elementor Pro erstellt!<\/p>\n\n\n<style>.wp-block-kadence-column.kb-section-dir-horizontal > .kt-inside-inner-col > #kt-info-box_be3bf9-fc .kt-blocks-info-box-link-wrap{max-width:unset;}#kt-info-box_be3bf9-fc .kt-blocks-info-box-link-wrap{border-color:#4521d9;border-top-width:3px;border-right-width:3px;border-bottom-width:3px;border-left-width:3px;background:#ffffff;padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px;margin-top:0%;margin-right:0%;margin-bottom:0%;margin-left:0%;}#kt-info-box_be3bf9-fc .kt-blocks-info-box-link-wrap:hover{border-color:#4521d9;background:#ffffff;}#kt-info-box_be3bf9-fc .kadence-info-box-icon-container .kt-info-svg-icon, #kt-info-box_be3bf9-fc .kt-info-svg-icon-flip, #kt-info-box_be3bf9-fc .kt-blocks-info-box-number{font-size:30px;}#kt-info-box_be3bf9-fc .kt-blocks-info-box-media{color:#4521d9;background:#ffffff;border-color:#eeeeee;border-radius:200px;overflow:hidden;border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-top:0px;margin-right:15px;margin-bottom:0px;margin-left:0px;}#kt-info-box_be3bf9-fc .kt-blocks-info-box-link-wrap:hover .kt-blocks-info-box-media{color:#4521d9;background:#ffffff;border-color:#eeeeee;}#kt-info-box_be3bf9-fc .kt-infobox-textcontent h2.kt-blocks-info-box-title{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-top:5px;margin-right:0px;margin-bottom:10px;margin-left:0px;}#kt-info-box_be3bf9-fc .kt-infobox-textcontent .kt-blocks-info-box-text{color:#4521d9;}.wp-block-kadence-infobox#kt-info-box_be3bf9-fc .kt-blocks-info-box-text{font-size:0.9em;line-height:1.8em;}#kt-info-box_be3bf9-fc .kt-blocks-info-box-learnmore{color:#ffffff;background:#4521d9;border-color:#4521d9;font-size:1em;font-weight:400;border-width:2px 2px 2px 2px;padding-top:4px;padding-right:20px;padding-bottom:4px;padding-left:20px;margin-top:10px;margin-right:0px;margin-bottom:-44px;margin-left:0px;}#kt-info-box_be3bf9-fc .kt-blocks-info-box-link-wrap:hover .kt-blocks-info-box-learnmore,#kt-info-box_be3bf9-fc .kt-blocks-info-box-link-wrap .kt-blocks-info-box-learnmore:focus{color:#ffffff;background:#4521d9;border-color:#4521d9;}@media all and (max-width: 767px){#kt-info-box_be3bf9-fc .kt-blocks-info-box-link-wrap{display:flex;justify-content:flex-start;flex-direction:row;}#kt-info-box_be3bf9-fc .kt-blocks-info-box-link-wrap .kt-blocks-info-box-media{display:inline-block;max-width:100%;}}<\/style>\n<div id=\"kt-info-box_be3bf9-fc\" class=\"wp-block-kadence-infobox\"><div class=\"kt-blocks-info-box-link-wrap kt-blocks-info-box-media-align-left kt-info-halign-left kb-info-box-vertical-media-align-top\"><div class=\"kt-blocks-info-box-media-container\"><div class=\"kt-blocks-info-box-media kt-info-media-animate-none\"><div class=\"kadence-info-box-icon-container kt-info-icon-animate-none\"><div class=\"kadence-info-box-icon-inner-container\"><span style=\"display:block;justify-content:center;align-items:center\" class=\"kt-info-svg-icon kt-info-svg-icon-fas_lightbulb\"><svg style=\"display:inline-block;vertical-align:middle\" viewBox=\"0 0 384 512\" height=\"30\" width=\"30\" fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><title>Information<\/title><path d=\"M272 428v28c0 10.449-6.68 19.334-16 22.629V488c0 13.255-10.745 24-24 24h-80c-13.255 0-24-10.745-24-24v-9.371c-9.32-3.295-16-12.18-16-22.629v-28c0-6.627 5.373-12 12-12h136c6.627 0 12 5.373 12 12zm-143.107-44c-9.907 0-18.826-6.078-22.376-15.327C67.697 267.541 16 277.731 16 176 16 78.803 94.805 0 192 0s176 78.803 176 176c0 101.731-51.697 91.541-90.516 192.673-3.55 9.249-12.47 15.327-22.376 15.327H128.893zM112 176c0-44.112 35.888-80 80-80 8.837 0 16-7.164 16-16s-7.163-16-16-16c-61.757 0-112 50.243-112 112 0 8.836 7.164 16 16 16s16-7.164 16-16z\"><\/path><\/svg><\/span><\/div><\/div><\/div><\/div><div class=\"kt-infobox-textcontent\"><p class=\"kt-blocks-info-box-text\">Ich erstelle immer erst mein Theme-Layout mit Elementor Pro. Danach erstelle ich die restlichen Seiten ebenfalls mit Elementor.<br\/>Lediglich meine <strong>Blogbeitr\u00e4ge<\/strong> erstelle ich wie gewohnt im <strong>Gutenberg-Editor<\/strong> von WordPress.<\/p><\/div><\/div><\/div>\n\n\n<style>.wp-block-kadence-spacer.kt-block-spacer-_a8e71a-af .kt-block-spacer{height:20px;}.wp-block-kadence-spacer.kt-block-spacer-_a8e71a-af .kt-divider{border-top-width:1px;height:1px;border-top-color:#eee;width:80%;border-top-style:solid;}@media all and (max-width: 767px){.wp-block-kadence-spacer.kt-block-spacer-_a8e71a-af .kt-block-spacer{height:15px!important;}}<\/style>\n<div class=\"wp-block-kadence-spacer aligncenter kt-block-spacer-_a8e71a-af\"><div class=\"kt-block-spacer kt-block-spacer-halign-center\"><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Theme kaufen oder selbst erstellen? Mein Fazit<\/h2>\n\n\n\n<p>Ich bevorzuge mittlerweile einen Theme Builder \u00fcber ein Premium Theme, da die Vorteile einfach auf der Hand liegen:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Mit einem Theme Builder habe ich die volle Kontrolle \u00fcber das Layout meiner Webseite.<\/li><li>Durch einen Theme Builder bin ich komplett unabh\u00e4ngig von dem verwendeten Theme-<\/li><li>Mit einem Theme Builder kann ich die <em>User Experience<\/em> gezielt verbessern-<\/li><li>Elementor Pro spart mir viel Zeit, da Seiten und Templates einfach mittels Drag &amp; Drop erstellt werden-<\/li><li>Es macht mir gro\u00dfen Spa\u00df, meine Layouts mit Elementor umzusetzen. Selbst zu coden oder jedes Detail \u00fcber CSS anpassen zu m\u00fcssen, w\u00fcrde mir weniger Freude bereiten.<\/li><\/ul>\n\n\n\n<p>Nat\u00fcrlich ist Elementor Pro mit j\u00e4hrlichen (wenn auch \u00fcberschaubaren) Kosten verbunden. Allerdings ist Elementor Pro ja nicht nur ein Theme Builder, sondern vor allem ein Page Builder mit <strong>hohem Funktionsumfang<\/strong>. Somit lohnt sich die Investition allemal, wenn man ein ordentliches Online-Projekt auf WordPress-Basis umsetzen m\u00f6chte.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Weiterf\u00fchrende Informationen:<\/h3>\n\n\n\n<p class=\"left-line\">Mein <a href=\"https:\/\/robert-leitinger.com\/elementor\/\" class=\"rank-math-link\" data-wpel-link=\"internal\">Elementor Test<\/a> zum Nachlesen<\/p>\n\n\n\n<p class=\"left-line\">Elementor ist ab ca. 45 Euro erh\u00e4ltlich. Hier findest du die <a href=\"https:\/\/robert-leitinger.com\/go\/elementor-preise\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/robert-leitinger.com\/go\/elementor-preise\" rel=\"noreferrer noopener sponsored\" data-wpel-link=\"external\" class=\"wpel-icon-right\">aktuellen Preise auf der offiziellen Webseite*<i class=\"wpel-icon dashicons-before dashicons-external\" aria-hidden=\"true\"><\/i><\/a><\/p>\n\n\n\n<p class=\"left-line\">Hier findest du <a href=\"https:\/\/robert-leitinger.com\/kostenlose-elementor-templates\/\" data-wpel-link=\"internal\">kostenlose Elementor Templates<\/a><\/p>\n\n\n\n<p class=\"left-line\">Mein Review zum <a href=\"https:\/\/robert-leitinger.com\/astra-theme\/\" data-wpel-link=\"internal\">Astra Theme<\/a> (harmoniert super mit Elementor)<\/p>\n\n\n\n<p class=\"left-line\">Mein Review zum <a href=\"https:\/\/robert-leitinger.com\/generatepress\/\" data-wpel-link=\"internal\">Generatepress Premium Theme<\/a> (ebenfalls eine gro\u00dfartige Wahl)<\/p>\n\n\n\n<p class=\"left-line\">Das kostenlose <a href=\"https:\/\/wordpress.org\/themes\/hello-elementor\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"rank-math-link wpel-icon-right\" data-wpel-link=\"external\">Hello Theme im WordPress Theme Verzeichnis<i class=\"wpel-icon dashicons-before dashicons-external\" aria-hidden=\"true\"><\/i><\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Fragen oder Erg\u00e4nzungen?<\/h3>\n\n\n\n<p>Hast zu Fragen zum Elementor Theme Builder oder weitere Erg\u00e4nzungen zum Beitrag? Wenn ja dann schreibe doch einfach gleich jetzt <strong>ein Kommentar<\/strong>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In diesem Tutorial zeige ich dir Schritt f\u00fcr Schritt, wie du einfach und schnell ein eigenes WordPress Theme erstellen kannst. Komplett ohne Programmierkenntnisse &#8211; einfach per Drag &amp; Drop. Das alles funktioniert mit dem WordPress Theme Builder von Elementor. Dazu aber gleich mehr. Wie du ein WordPress Theme selbst erstellen kannst Im Grunde gibt es &#8230; <a title=\"WordPress Theme erstellen ohne Programmierkenntnisse &#8211; Schritt f\u00fcr Schritt\" class=\"read-more\" href=\"https:\/\/robert-leitinger.com\/wordpress-theme-erstellen\/\" aria-label=\"Mehr Informationen \u00fcber WordPress Theme erstellen ohne Programmierkenntnisse &#8211; Schritt f\u00fcr Schritt\" data-wpel-link=\"internal\">Weiterlesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":5182,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[117],"class_list":["post-4995","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-elementor"],"acf":[],"_links":{"self":[{"href":"https:\/\/robert-leitinger.com\/wp-json\/wp\/v2\/posts\/4995","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/robert-leitinger.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/robert-leitinger.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/robert-leitinger.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/robert-leitinger.com\/wp-json\/wp\/v2\/comments?post=4995"}],"version-history":[{"count":0,"href":"https:\/\/robert-leitinger.com\/wp-json\/wp\/v2\/posts\/4995\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/robert-leitinger.com\/wp-json\/wp\/v2\/media\/5182"}],"wp:attachment":[{"href":"https:\/\/robert-leitinger.com\/wp-json\/wp\/v2\/media?parent=4995"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/robert-leitinger.com\/wp-json\/wp\/v2\/categories?post=4995"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/robert-leitinger.com\/wp-json\/wp\/v2\/tags?post=4995"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}