{"id":168,"date":"2025-11-07T10:04:45","date_gmt":"2025-11-07T09:04:45","guid":{"rendered":"http:\/\/657665.test-my-website.de\/?page_id=168"},"modified":"2025-11-07T10:04:46","modified_gmt":"2025-11-07T09:04:46","slug":"test","status":"publish","type":"page","link":"https:\/\/klarweltverlag.de\/index.php\/test\/","title":{"rendered":"Test"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"de\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Affiliate Produktbox<\/title>\n    <style>\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        body {\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n            background: #f5f5f5;\n            padding: 40px 20px;\n        }\n\n        .container {\n            max-width: 1200px;\n            margin: 0 auto;\n        }\n\n        h1 {\n            text-align: center;\n            margin-bottom: 40px;\n            color: #333;\n        }\n\n        \/* Produktbox Styles *\/\n        .product-box {\n            background: white;\n            border-radius: 12px;\n            padding: 24px;\n            box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n            transition: transform 0.3s ease, box-shadow 0.3s ease;\n            margin-bottom: 24px;\n        }\n\n        .product-box:hover {\n            transform: translateY(-4px);\n            box-shadow: 0 4px 16px rgba(0,0,0,0.15);\n        }\n\n        .product-grid {\n            display: grid;\n            grid-template-columns: 200px 1fr;\n            gap: 24px;\n            align-items: start;\n        }\n\n        .product-image {\n            width: 100%;\n            height: auto;\n            border-radius: 8px;\n            object-fit: cover;\n        }\n\n        .product-content {\n            display: flex;\n            flex-direction: column;\n            gap: 12px;\n        }\n\n        .product-badge {\n            display: inline-block;\n            background: #ff9900;\n            color: white;\n            padding: 4px 12px;\n            border-radius: 4px;\n            font-size: 12px;\n            font-weight: 600;\n            width: fit-content;\n        }\n\n        .product-title {\n            font-size: 22px;\n            font-weight: 600;\n            color: #333;\n            line-height: 1.4;\n        }\n\n        .product-description {\n            color: #666;\n            line-height: 1.6;\n            font-size: 15px;\n        }\n\n        .product-features {\n            list-style: none;\n            padding: 0;\n        }\n\n        .product-features li {\n            padding: 6px 0;\n            color: #555;\n            position: relative;\n            padding-left: 20px;\n        }\n\n        .product-features li:before {\n            content: \"\u2713\";\n            color: #4CAF50;\n            font-weight: bold;\n            position: absolute;\n            left: 0;\n        }\n\n        .product-footer {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            margin-top: 16px;\n            padding-top: 16px;\n            border-top: 1px solid #eee;\n        }\n\n        .product-price {\n            font-size: 28px;\n            font-weight: 700;\n            color: #B12704;\n        }\n\n        .price-info {\n            font-size: 12px;\n            color: #888;\n            margin-top: 4px;\n        }\n\n        .affiliate-button {\n            background: #ff9900;\n            color: white;\n            padding: 14px 32px;\n            border-radius: 8px;\n            text-decoration: none;\n            font-weight: 600;\n            font-size: 16px;\n            transition: background 0.3s ease;\n            display: inline-block;\n        }\n\n        .affiliate-button:hover {\n            background: #e88b00;\n        }\n\n        .affiliate-notice {\n            font-size: 11px;\n            color: #999;\n            margin-top: 12px;\n            font-style: italic;\n        }\n\n        \/* Kompakte Variante *\/\n        .product-box-compact {\n            display: flex;\n            gap: 16px;\n            align-items: center;\n        }\n\n        .product-box-compact .product-image {\n            width: 120px;\n            height: 120px;\n            flex-shrink: 0;\n        }\n\n        .product-box-compact .product-content {\n            flex: 1;\n        }\n\n        .product-box-compact .product-title {\n            font-size: 18px;\n        }\n\n        .product-box-compact .affiliate-button {\n            padding: 10px 24px;\n            font-size: 14px;\n        }\n\n        \/* Responsive *\/\n        @media (max-width: 768px) {\n            .product-grid {\n                grid-template-columns: 1fr;\n            }\n\n            .product-footer {\n                flex-direction: column;\n                gap: 12px;\n                align-items: flex-start;\n            }\n\n            .affiliate-button {\n                width: 100%;\n                text-align: center;\n            }\n\n            .product-box-compact {\n                flex-direction: column;\n            }\n\n            .product-box-compact .product-image {\n                width: 100%;\n                height: auto;\n            }\n        }\n\n        \/* Info Box *\/\n        .info-box {\n            background: #e7f3ff;\n            border-left: 4px solid #2196F3;\n            padding: 20px;\n            margin: 40px 0;\n            border-radius: 4px;\n        }\n\n        .info-box h3 {\n            color: #1976D2;\n            margin-bottom: 10px;\n        }\n\n        .info-box p {\n            color: #555;\n            line-height: 1.6;\n        }\n\n        .info-box code {\n            background: white;\n            padding: 2px 6px;\n            border-radius: 3px;\n            font-family: monospace;\n            color: #d63384;\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"container\">\n        <h1>Affiliate Produktbox Templates<\/h1>\n\n        <div class=\"info-box\">\n            <h3>So verwendest du die Templates in WordPress:<\/h3>\n            <p>1. F\u00fcge einen <strong>Custom HTML Block<\/strong> in deinem Beitrags-Editor hinzu<br>\n            2. Kopiere den HTML-Code unten und f\u00fcge ihn ein<br>\n            3. Passe Bild-URL, Titel, Beschreibung und Affiliate-Link an<br>\n            4. Das CSS f\u00fcgst du einmalig unter <code>Design \u2192 Customizer \u2192 Zus\u00e4tzliches CSS<\/code> ein<\/p>\n        <\/div>\n\n        <!-- Standard Produktbox -->\n        <div class=\"product-box\">\n            <div class=\"product-grid\">\n                <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/200x280\/cccccc\/666666?text=Produktbild\" alt=\"Produktname\" class=\"product-image\">\n                <div class=\"product-content\">\n                    <span class=\"product-badge\">Amazon Bestseller<\/span>\n                    <h2 class=\"product-title\">Produktname &#8211; Beispiel Buch oder Artikel<\/h2>\n                    <p class=\"product-description\">\n                        Eine kurze, ansprechende Beschreibung des Produkts. Erkl\u00e4re hier, warum das Produkt empfehlenswert ist und f\u00fcr wen es sich eignet.\n                    <\/p>\n                    <ul class=\"product-features\">\n                        <li>Vorteil oder Feature 1<\/li>\n                        <li>Vorteil oder Feature 2<\/li>\n                        <li>Vorteil oder Feature 3<\/li>\n                    <\/ul>\n                    <div class=\"product-footer\">\n                        <div>\n                            <div class=\"product-price\">29,99 \u20ac<\/div>\n                            <div class=\"price-info\">Preis bei Amazon (Stand: heute)<\/div>\n                        <\/div>\n                        <a href=\"https:\/\/amzn.to\/DEIN-LINK\" class=\"affiliate-button\" target=\"_blank\" rel=\"nofollow noopener\">\n                            Bei Amazon ansehen \u2192\n                        <\/a>\n                    <\/div>\n                    <p class=\"affiliate-notice\">* Als Amazon-Partner verdiene ich an qualifizierten Verk\u00e4ufen<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Kompakte Variante -->\n        <div class=\"product-box product-box-compact\">\n            <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/120x120\/cccccc\/666666?text=Bild\" alt=\"Produktname\" class=\"product-image\">\n            <div class=\"product-content\">\n                <h2 class=\"product-title\">Kompakte Produktbox &#8211; Kleinere Darstellung<\/h2>\n                <p class=\"product-description\">\n                    Perfekt f\u00fcr mehrere Produkte auf einer Seite oder in der Sidebar.\n                <\/p>\n                <div class=\"product-footer\">\n                    <div class=\"product-price\">19,99 \u20ac<\/div>\n                    <a href=\"https:\/\/amzn.to\/DEIN-LINK\" class=\"affiliate-button\" target=\"_blank\" rel=\"nofollow noopener\">\n                        Zum Produkt \u2192\n                    <\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Weitere Variante mit anderem Badge -->\n        <div class=\"product-box\">\n            <div class=\"product-grid\">\n                <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/200x280\/cccccc\/666666?text=epubli\" alt=\"Produktname\" class=\"product-image\">\n                <div class=\"product-content\">\n                    <span class=\"product-badge\" style=\"background: #4CAF50;\">Empfehlung<\/span>\n                    <h2 class=\"product-title\">Beispiel f\u00fcr epubli Produkt<\/h2>\n                    <p class=\"product-description\">\n                        Dieses Template funktioniert auch perfekt f\u00fcr epubli-B\u00fccher oder andere Affiliate-Produkte.\n                    <\/p>\n                    <div class=\"product-footer\">\n                        <div class=\"product-price\">14,99 \u20ac<\/div>\n                        <a href=\"https:\/\/www.epubli.de\/DEIN-LINK\" class=\"affiliate-button\" target=\"_blank\" rel=\"nofollow noopener\">\n                            Bei epubli kaufen \u2192\n                        <\/a>\n                    <\/div>\n                    <p class=\"affiliate-notice\">* Werbelink &#8211; Ich erhalte eine Provision bei K\u00e4ufen<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n\n    <\/div>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Affiliate Produktbox Affiliate Produktbox Templates So verwendest du die Templates in WordPress: 1. F\u00fcge einen Custom HTML Block in deinem [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"slim_seo":{"title":"Test","description":"Affiliate Produktbox Affiliate Produktbox Templates So verwendest du die Templates in WordPress: 1. F\u00fcge einen Custom HTML Block in deinem Beitrags-Editor hinzu"},"footnotes":""},"class_list":["post-168","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/klarweltverlag.de\/index.php\/wp-json\/wp\/v2\/pages\/168","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/klarweltverlag.de\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/klarweltverlag.de\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/klarweltverlag.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/klarweltverlag.de\/index.php\/wp-json\/wp\/v2\/comments?post=168"}],"version-history":[{"count":1,"href":"https:\/\/klarweltverlag.de\/index.php\/wp-json\/wp\/v2\/pages\/168\/revisions"}],"predecessor-version":[{"id":169,"href":"https:\/\/klarweltverlag.de\/index.php\/wp-json\/wp\/v2\/pages\/168\/revisions\/169"}],"wp:attachment":[{"href":"https:\/\/klarweltverlag.de\/index.php\/wp-json\/wp\/v2\/media?parent=168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}