{"id":40428,"date":"2026-10-25T11:07:47","date_gmt":"2026-10-25T10:07:47","guid":{"rendered":"https:\/\/www.360vier.de\/?page_id=40428"},"modified":"2026-10-28T09:52:34","modified_gmt":"2026-10-28T08:52:34","slug":"headless-wordpress-astro","status":"publish","type":"page","link":"https:\/\/www.360vier.de\/en\/digital-platforms\/headless-wordpress-astro\/","title":{"rendered":"Headless WordPress with Astro"},"content":{"rendered":"<section class=\"dhsv-stage is-root-container is-theme-dark is-height-100svh is-content-width-60 with-bg bg-dark-gradient alignfull wp-block-dhsv-stage\">\n  <div\n  class=\"blur-bubbles blur-bubbles--dark dhsv-stage__bubbles\"\n  aria-hidden=\"true\"\n>\n  <span><\/span>\n  <span><\/span>\n  <span><\/span>\n  <span><\/span>\n  <span><\/span>\n<\/div>\n  <div class=\"dhsv-stage__inner alignwide\">\n    <div class=\"dhsv-stage__main\">\n      <div class=\"dhsv-stage__content\">\n        <nav class=\"breadcrumb\" aria-label=\"Breadcrumb navigation\">\n    <div class=\"breadcrumb__pill\" tabindex=\"0\">\n      <div class=\"breadcrumb__collapsed\" aria-hidden=\"true\">\n        <span class=\"breadcrumb__dots\">\n          <span class=\"breadcrumb__dot\"><\/span>\n          <span class=\"breadcrumb__dot\"><\/span>\n          <span class=\"breadcrumb__dot\"><\/span>\n        <\/span>\n        <span class=\"breadcrumb__sep\">\/<\/span>\n        <span class=\"breadcrumb__current\">360VIER<\/span>\n      <\/div>\n\n      <ol class=\"breadcrumb__expanded\">\n                  \n          <li class=\"breadcrumb__item \">\n                          <a class=\"breadcrumb__link\" href=\"https:\/\/www.360vier.de\/en\/\">\n                <span>Home<\/span>\n              <\/a>\n                      <\/li>\n                              <li class=\"breadcrumb__sep-item\" aria-hidden=\"true\">\/<\/li>\n          \n          <li class=\"breadcrumb__item breadcrumb__item--current\">\n                          <span>360VIER<\/span>\n                      <\/li>\n              <\/ol>\n    <\/div>\n  <\/nav>\n        \n<h1 class=\"wp-block-heading\">Headless WordPress<br>with <span style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-green-color\">Astro<\/span><\/h1>\n\n<p class=\"has-text-intro-font-size wp-block-paragraph\">Your editorial team keeps working in WordPress, and the website is delivered as a fast Astro frontend. If you like, step by step, section by section, without a big-bang relaunch.<\/p>\n\n<div class=\"wp-block-group is-style-without-space is-nowrap is-layout-flex wp-container-core-group-is-layout-7387b849 wp-block-group-is-layout-flex\"><div class=\"dhsv-buttons horizontal is-layout-flex wp-block-dhsv-buttons-is-layout-flex\" data-align=\"wide\" style=\"display: flex; flex-wrap: wrap; --button-width: unset; flex-direction: row; justify-content: left\">\n\t\n<a\n    href=\"https:\/\/www.360vier.de\/en\/calendar-hm\/\"\n    class=\"dhsv-button primary    \"\n    \n    \n>\n  <span class=\"text\">Book a call<\/span>\n  <span class=\"icon\">\n    <svg class=\"dhsv-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-right-icon lucide-arrow-right\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>  <\/span>\n<\/a>\n\n\n<\/div>\n\n\n\n<button class=\"wp-block-dhsv100-chat-button dhsv-chat-button dhsv-chat-button--secondary\" type=\"button\" data-dhsv-chat=\"\" data-dhsv-chat-morph=\"\" data-dhsv-chat-placement=\"center\" data-dhsv-chat-entry=\"stage\" data-dhsv-chat-source=\"block\" data-dhsv-chat-examples=\"[&quot;When does headless WordPress pay off?&quot;,&quot;Does the preview still work?&quot;]\" aria-label=\"Ask about headless WordPress\"><span class=\"dhsv-chat-button__icon\" aria-hidden=\"true\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M12 2.5l2 6.2 6.2 2-6.2 2-2 6.3-2-6.3-6.2-2 6.2-2z\"><\/path><path d=\"M19 15.5l.8 2.2 2.2.8-2.2.8-.8 2.2-.8-2.2-2.2-.8 2.2-.8z\" opacity=\".85\"><\/path><\/svg><\/span><span class=\"dhsv-chat-button__text\" aria-hidden=\"true\">Ask about headless WordPress<\/span><span class=\"dhsv-chat-button__caret\" aria-hidden=\"true\"><\/span><\/button>\n<\/div>\n\n      <\/div>\n              <div class=\"dhsv-stage__media\">\n                      <img width=\"735\" height=\"830\" src=\"https:\/\/www.360vier.de\/wp-content\/uploads\/data-enablement-pillar-hero-image-360vier.webp\" class=\"dhsv-stage__image dhsv-lcp-image\" alt=\"\" sizes=\"(max-width: 991.98px) 100vw, 42vw\" fetchpriority=\"high\" loading=\"eager\" decoding=\"async\" srcset=\"https:\/\/www.360vier.de\/wp-content\/uploads\/data-enablement-pillar-hero-image-360vier.webp 735w, https:\/\/www.360vier.de\/wp-content\/uploads\/data-enablement-pillar-hero-image-360vier-266x300.webp 266w\" \/>\n                  <\/div>\n          <\/div>\n          <div class=\"dhsv-stage__footer\">\n        <div class=\"dhsv-logoslider-block-wrapper dhsv-logoslider-block-wrapper-no-border dhsv-logoslider-block-wrapper-logo-align-left alignwide\" style=\"--_logo-opacity: 0.4;\">\n    <div\n        class=\"dhsv-logoslider splide\"\n        aria-label=\"Logo carousel\"\n        data-splide=\"{&quot;type&quot;:&quot;loop&quot;,&quot;perPage&quot;:3.5,&quot;gap&quot;:&quot;1rem&quot;,&quot;arrows&quot;:false,&quot;pagination&quot;:false,&quot;drag&quot;:true,&quot;breakpoints&quot;:{&quot;768&quot;:{&quot;perPage&quot;:1.5}},&quot;autoScroll&quot;:{&quot;speed&quot;:1,&quot;pauseOnHover&quot;:false}}\"\n    >\n        <div class=\"splide__track\">\n            <div class=\"splide__list\">\n                                    <div class=\"splide__slide\">\n                        <div class=\"logoslider__card\">\n                                                            <div class=\"logoslider__logo\">\n                                    <img decoding=\"async\"\n                                        src=\"https:\/\/www.360vier.de\/wp-content\/uploads\/ksk-immobilien-logo-black-360vier-cases.svg\"\n                                        alt=\"KSK Immobilien\"\n                                    \/>\n                                <\/div>\n                                                    <\/div>\n                    <\/div>\n                                    <div class=\"splide__slide\">\n                        <div class=\"logoslider__card\">\n                                                            <div class=\"logoslider__logo\">\n                                    <img decoding=\"async\"\n                                        src=\"https:\/\/www.360vier.de\/wp-content\/uploads\/lernstudio-barbarossa-logo-black-360vier-cases.svg\"\n                                        alt=\"Lernstudio Barbarossa\"\n                                    \/>\n                                <\/div>\n                                                    <\/div>\n                    <\/div>\n                                    <div class=\"splide__slide\">\n                        <div class=\"logoslider__card\">\n                                                            <div class=\"logoslider__logo\">\n                                    <img decoding=\"async\"\n                                        src=\"https:\/\/www.360vier.de\/wp-content\/uploads\/abg-frankfurt-gmbh-logo-black-360vier-cases.svg\"\n                                        alt=\"ABG Frankfurt\"\n                                    \/>\n                                <\/div>\n                                                    <\/div>\n                    <\/div>\n                                    <div class=\"splide__slide\">\n                        <div class=\"logoslider__card\">\n                                                            <div class=\"logoslider__logo\">\n                                    <img decoding=\"async\"\n                                        src=\"https:\/\/www.360vier.de\/wp-content\/uploads\/kampmeyer-logo-black-360vier-cases.svg\"\n                                        alt=\"KAMPMEYER Real Estate\"\n                                    \/>\n                                <\/div>\n                                                    <\/div>\n                    <\/div>\n                                    <div class=\"splide__slide\">\n                        <div class=\"logoslider__card\">\n                                                            <div class=\"logoslider__logo\">\n                                    <img decoding=\"async\"\n                                        src=\"https:\/\/www.360vier.de\/wp-content\/uploads\/taglieber-logo-black-360vier-cases.svg\"\n                                        alt=\"Taglieber\"\n                                    \/>\n                                <\/div>\n                                                    <\/div>\n                    <\/div>\n                                    <div class=\"splide__slide\">\n                        <div class=\"logoslider__card\">\n                                                            <div class=\"logoslider__logo\">\n                                    <img decoding=\"async\"\n                                        src=\"https:\/\/www.360vier.de\/wp-content\/uploads\/lakal-logo-black-360vier-cases.svg\"\n                                        alt=\"LAKAL\"\n                                    \/>\n                                <\/div>\n                                                    <\/div>\n                    <\/div>\n                                    <div class=\"splide__slide\">\n                        <div class=\"logoslider__card\">\n                                                            <div class=\"logoslider__logo\">\n                                    <img decoding=\"async\"\n                                        src=\"https:\/\/www.360vier.de\/wp-content\/uploads\/menlo-system-logo-white-360vier-cases.svg\"\n                                        alt=\"Menlo Systems\"\n                                    \/>\n                                <\/div>\n                                                    <\/div>\n                    <\/div>\n                                    <div class=\"splide__slide\">\n                        <div class=\"logoslider__card\">\n                                                            <div class=\"logoslider__logo\">\n                                    <img decoding=\"async\"\n                                        src=\"https:\/\/www.360vier.de\/wp-content\/uploads\/Buerger-logo-white-360vier-cases.svg\"\n                                        alt=\"B\u00dcRGER\"\n                                    \/>\n                                <\/div>\n                                                    <\/div>\n                    <\/div>\n                                    <div class=\"splide__slide\">\n                        <div class=\"logoslider__card\">\n                                                            <div class=\"logoslider__logo\">\n                                    <img decoding=\"async\"\n                                        src=\"https:\/\/www.360vier.de\/wp-content\/uploads\/euler-group-logo-black-360vier-cases.svg\"\n                                        alt=\"Euler Group\"\n                                    \/>\n                                <\/div>\n                                                    <\/div>\n                    <\/div>\n                                    <div class=\"splide__slide\">\n                        <div class=\"logoslider__card\">\n                                                            <div class=\"logoslider__logo\">\n                                    <img decoding=\"async\"\n                                        src=\"https:\/\/www.360vier.de\/wp-content\/uploads\/gsk-stockmann-logo-black-360vier-cases-1.svg\"\n                                        alt=\"GSK Stockmann\"\n                                    \/>\n                                <\/div>\n                                                    <\/div>\n                    <\/div>\n                            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n\n      <\/div>\n      <\/div>\n<\/section>\n\n\n\n<div class=\"wp-block-group alignfull is-style-without-space is-layout-constrained wp-block-group-is-layout-constrained\" style=\"padding-top:7rem;padding-bottom:7rem\">\n<div class=\"wp-block-group alignwide is-style-without-space is-layout-constrained wp-block-group-is-layout-constrained\"><details\n    class=\"wp-block-dhsv-ai-akkordeon\"\n     id=\"ai-akkordeon-astro2026\"                 data-ai-view=\"true\"\n    >\n    <summary>\n        <span class=\"ai-akkordeon__stars\" aria-hidden=\"true\">\n            <span class=\"ai-akkordeon__stars-badge\">\n                <svg class=\"ai-akkordeon__stars-icon\" width=\"25\" height=\"23\" viewBox=\"0 0 25 23\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\" focusable=\"false\">\n                    <path d=\"M16 16.1429C12.2129 16.1429 9.14282 19.2129 9.14282 23L6.85711 23C6.85712 19.2129 3.78707 16.1429 5.9947e-07 16.1429L7.99294e-07 13.8571C3.78707 13.8571 6.85712 10.7871 6.85712 7L9.14282 7C9.14282 10.7871 12.2129 13.8571 16 13.8571L16 16.1429Z\" fill=\"currentColor\"\/>\n                    <path d=\"M21.75 14C21.75 12.2065 23.2051 10.7526 25 10.7526L25 9.25383C23.2051 9.25383 21.75 7.79993 21.75 6.00645L20.25 6.00645C20.25 7.79993 18.7949 9.25383 17 9.25383L17 10.7526C18.7949 10.7526 20.25 12.2065 20.25 14L21.75 14Z\" fill=\"currentColor\"\/>\n                    <path d=\"M14.5625 6C14.5625 4.65381 15.6538 3.5625 17 3.5625L17 2.4375C15.6538 2.4375 14.5625 1.34619 14.5625 2.44931e-06L13.4375 2.35096e-06C13.4375 1.34619 12.3462 2.4375 11 2.4375L11 3.5625C12.3462 3.5625 13.4375 4.65381 13.4375 6L14.5625 6Z\" fill=\"currentColor\"\/>\n                <\/svg>\n            <\/span>\n        <\/span>\n        <span class=\"ai-akkordeon__chevron\" aria-hidden=\"true\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\">\n                <polyline points=\"6 9 12 15 18 9\" \/>\n            <\/svg>\n        <\/span>\n        <span class=\"ai-akkordeon__summary-content\">\n                            <div class=\"ai-akkordeon__summary-lead\"><strong>What is headless WordPress with Astro?<\/strong><\/div>\n                                        <div class=\"ai-akkordeon__summary-text\">With headless WordPress, WordPress remains the editorial system, while a separate frontend generates the visible website. 360VIER uses Astro for this: the framework delivers pages as finished HTML and loads JavaScript only where a page needs it. The content comes via the REST API or WPGraphQL. An existing WordPress website can also be switched over step by step this way.<\/div>\n                                <\/span>\n        <span class=\"ai-akkordeon__ai-icons\" aria-hidden=\"true\">\n    \n    <svg class=\"ai-akkordeon__ai-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\" focusable=\"false\">\n        <path d=\"M22.28 9.82a5.96 5.96 0 0 0-.51-4.91 6.05 6.05 0 0 0-6.51-2.9A6.07 6.07 0 0 0 4.99 4.16a5.98 5.98 0 0 0-3.99 2.9A6.05 6.05 0 0 0 1.74 14.18a5.97 5.97 0 0 0 .51 4.91 6.05 6.05 0 0 0 6.51 2.9 6 6 0 0 0 4.5 2.01 6.05 6.05 0 0 0 5.77-4.21 5.99 5.99 0 0 0 3.99-2.9 6.05 6.05 0 0 0-.74-7.07Zm-9.02 12.6a4.48 4.48 0 0 1-2.88-1.05l.14-.08 4.78-2.76a.78.78 0 0 0 .39-.68v-6.74l2.02 1.17.02.05v5.58a4.5 4.5 0 0 1-4.47 4.51Zm-9.62-4.11a4.48 4.48 0 0 1-.54-3.02l.14.08 4.78 2.76c.24.14.54.14.78 0l5.84-3.37v2.34l.02.04-4.84 2.79a4.5 4.5 0 0 1-6.18-1.62Zm-1.26-10.4a4.48 4.48 0 0 1 2.34-1.97v5.69c0 .28.15.54.39.68l5.81 3.36-2.02 1.17a.07.07 0 0 1-.07 0l-4.83-2.79a4.5 4.5 0 0 1-1.62-6.14Zm16.6 3.86-5.84-3.39 2.02-1.16a.07.07 0 0 1 .07 0l4.83 2.79a4.5 4.5 0 0 1-.68 8.11v-5.69c0-.27-.15-.53-.4-.66Zm2.01-3.02-.14-.09-4.77-2.78a.78.78 0 0 0-.79 0l-5.84 3.37V6.91l.02-.04L14.32 4.1a4.5 4.5 0 0 1 6.67 4.65Zm-12.66 4.18-2.02-1.17a.06.06 0 0 1-.02-.04V6.16a4.5 4.5 0 0 1 7.39-3.46l-.14.08L8.78 5.55a.78.78 0 0 0-.39.67Zm1.1-2.37 2.6-1.51 2.61 1.5v3l-2.59 1.5-2.6-1.5Z\"\/>\n    <\/svg>\n    \n    <svg class=\"ai-akkordeon__ai-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\" focusable=\"false\">\n        <path d=\"M12 0c0 6.627-5.373 12-12 12 6.627 0 12 5.373 12 12 0-6.627 5.373-12 12-12-6.627 0-12-5.373-12-12Z\"\/>\n    <\/svg>\n    \n    <svg class=\"ai-akkordeon__ai-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 31 30\" fill=\"currentColor\" aria-hidden=\"true\" focusable=\"false\">\n        <path d=\"M5.89437 19.9501L11.807 16.6399L11.9064 16.3524L11.807 16.1925H11.5189L10.5307 16.1317L7.15238 16.0406L4.22244 15.9192L1.38381 15.7673L0.669585 15.6155L0 14.7348L0.0689883 14.2955L0.669585 13.8926L1.5299 13.9675L3.43111 14.097L6.28395 14.2934L8.35357 14.4149L11.4195 14.7328H11.9064L11.9754 14.5364L11.809 14.4149L11.6792 14.2934L8.72692 12.2972L5.53118 10.1876L3.85721 8.97287L2.95226 8.3574L2.49573 7.7804L2.29891 6.52112L3.12067 5.61817L4.22447 5.69308L4.50651 5.76799L5.62451 6.6264L8.0127 8.47078L11.1313 10.7626L11.5879 11.1412L11.7705 11.0116L11.7928 10.9205L11.5879 10.5784L9.89159 7.51924L8.08168 4.40748L7.27615 3.11783L7.0631 2.34445C6.98803 2.02659 6.93324 1.75935 6.93324 1.43339L7.86863 0.166016L8.38604 0L9.6339 0.166016L10.1594 0.621543L10.9345 2.39101L12.1905 5.17681L14.1384 8.96477L14.7085 10.0884L15.0129 11.129L15.1265 11.4469H15.3233V11.2647L15.4836 9.13079L15.7799 6.511L16.068 3.1401L16.1674 2.19058L16.6382 1.05277L17.5736 0.437307L18.304 0.785532L18.9046 1.64395L18.8214 2.19868L18.4643 4.51478L17.7643 8.1428L17.3077 10.5723H17.5736L17.8779 10.2686L19.1095 8.6368L21.1792 6.05547L22.0922 5.03104L23.1575 3.89931L23.8413 3.36078H25.1338L26.0854 4.7719L25.6593 6.22959L24.3282 7.91402L23.2244 9.34135L21.6418 11.4671L20.6536 13.1678L20.7449 13.3034L20.9803 13.2811L24.5555 12.5219L26.4871 12.1737L28.7921 11.7789L29.8351 12.2648L29.9487 12.7588L29.5388 13.7691L27.0735 14.3764L24.1821 14.9534L19.8765 15.9698L19.8238 16.0082L19.8846 16.0831L21.8244 16.2654L22.6543 16.3099H24.6854L28.4675 16.5913L29.4556 17.2432L30.0481 18.0409L29.9487 18.6483L28.4269 19.4216L26.3735 18.9358L21.5809 17.798L19.9374 17.389H19.7101V17.5246L21.0797 18.8608L23.5897 21.1223L26.7327 24.0377L26.893 24.7584L26.4892 25.3273L26.0631 25.2666L23.3015 23.1934L22.2363 22.2601L19.8238 20.2335H19.6635V20.4461L20.2194 21.2579L23.1555 25.6614L23.3076 27.0117L23.0946 27.4511L22.3337 27.7163L21.4977 27.5644L19.7791 25.1572L18.0057 22.4464L16.5753 20.0169L16.4008 20.1161L15.5567 29.1882L15.161 29.6518L14.2479 30L13.4871 29.423L13.0833 28.4897L13.4871 26.6453L13.974 24.2381L14.3697 22.3249L14.7268 19.948L14.9399 19.1585L14.9257 19.1058L14.7512 19.1281L12.9554 21.5879L10.2244 25.2706L8.06342 27.5786L7.54602 27.7831L6.64918 27.3195L6.73237 26.4914L7.23354 25.7545L10.2244 21.9584L12.0282 19.6059L13.1928 18.2474L13.1847 18.051H13.1157L5.17203 23.1975L3.75779 23.3797L3.14908 22.8108L3.22415 21.8774L3.51228 21.5738L5.90046 19.9339L5.89234 19.942L5.89437 19.9501Z\" \/>\n    <\/svg>\n    \n    <svg class=\"ai-akkordeon__ai-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 31 35\" fill=\"currentColor\" aria-hidden=\"true\" focusable=\"false\">\n        <path d=\"M30.0772 10.4834H25.9449V0L15.8776 9.38788V0H14.1997V9.38788L4.13233 0V10.4834H0V25.5844H4.11846V35L14.1997 26.0281V35H15.8776V26.0281L25.9588 35V25.5844H30.0772V10.4834ZM24.267 3.85499V10.4695H17.1672L24.267 3.85499ZM5.81022 3.85499L12.9101 10.4695H5.81022V3.85499ZM1.67789 23.9065V12.1613H12.8823L4.11846 20.2179V23.9065H1.67789ZM5.79635 20.9529L14.1997 13.229V23.7817L5.79635 31.2559V20.939V20.9529ZM24.2809 31.2559L15.8776 23.7817V13.229L24.2809 20.9529V31.2698V31.2559ZM28.3994 23.9065H25.9588V20.2179L17.1949 12.1613H28.3994V23.9065Z\" \/>\n    <\/svg>\n<\/span>\n    <\/summary>\n    <div class=\"ai-akkordeon__separator\" aria-hidden=\"true\">\n        <span class=\"ai-akkordeon__separator-label\">ai-view<\/span>\n    <\/div>\n    <div class=\"ai-akkordeon__body\">\n        \n\n<pre class=\"wp-block-preformatted\">entity         360VIER GmbH<br>type           Organization | Digital agency<br>location       Gro\u00df-Umstadt near Frankfurt and Cologne<br><br>page           Headless WordPress with Astro<br>page.type      Technology page<br>page.pillar    Digital Platforms<br>page.url       \/en\/digital-platforms\/headless-wordpress-astro\/<br><br>provides       Astro frontends for existing and new WordPress installations<br>provides       Step-by-step migration of individual sections to headless<br>provides       Preview, forms, SEO metadata and structured data in headless operation<br><br>stack          WordPress (Gutenberg) \u00b7 REST API or WPGraphQL \u00b7 Astro \u00b7 Rank Math \u00b7 WPML<br>serves         Companies with an existing WordPress website and high requirements for loading time and security<br><br>relation       is part of \u2192 Digital Platforms (\/en\/digital-platforms\/)<br>relation       foundation \u2192 WordPress architecture (\/en\/digital-platforms\/wordpress-architecture\/)<br>relation       alternative \u2192 Payload CMS (\/en\/digital-platforms\/payload-cms-agency\/)<br>knowledge      Benefits of headless WordPress \u2192 \/en\/insights\/cms\/headless-wordpress\/<\/pre>\n\n\n    <\/div>\n<\/details>\n<\/div>\n\n\n\n<div style=\"height:7rem\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading alignwide\">Why Astro for <span style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-green-color\">headless WordPress<\/span><\/h2>\n\n\n\n<div style=\"height:2rem\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group alignwide is-style-without-space is-layout-grid wp-container-core-group-is-layout-27c64173 wp-block-group-is-layout-grid\" style=\"margin-top:0;margin-bottom:0\"><div class=\"dhsv-icon-box-block vertical align icon-size-small background-gray-transparent wp-container-content-b9cf2816\">\n            <div class=\"icon-box__image\">\n            <img decoding=\"async\" src=\"https:\/\/www.360vier.de\/wp-content\/uploads\/integrationen-medienbruch-onlight-360vier.svg\" alt=\"\">\n        <\/div>\n        <div class=\"icon-box__text\">\n                <h3 class=\"title\"><strong>Loading time<\/strong><\/h3>\n                <span>Astro delivers finished HTML and loads JavaScript only for interactive parts. This helps with Core Web Vitals and on weak mobile connections.<\/span>\n        <\/div>\n<\/div>\n\n<div class=\"dhsv-icon-box-block vertical align icon-size-small background-green-transparent wp-container-content-b9cf2816\">\n            <div class=\"icon-box__image\">\n            <img decoding=\"async\" src=\"https:\/\/www.360vier.de\/wp-content\/uploads\/security-icon-gray-green-360vier.svg\" alt=\"\">\n        <\/div>\n        <div class=\"icon-box__text\">\n                <h3 class=\"title\"><strong>Security<\/strong><\/h3>\n                <span>The WordPress backend is no longer publicly accessible, so attacks on the login, plugins or themes have nothing to target.<\/span>\n        <\/div>\n<\/div>\n\n<div class=\"dhsv-icon-box-block vertical align icon-size-small background-gray-transparent wp-container-content-b9cf2816\">\n            <div class=\"icon-box__image\">\n            <img decoding=\"async\" src=\"https:\/\/www.360vier.de\/wp-content\/uploads\/integrationen-manuell-nacharbeit-onlight-360vier.svg\" alt=\"\">\n        <\/div>\n        <div class=\"icon-box__text\">\n                <h3 class=\"title\"><strong>Editing stays the same<\/strong><\/h3>\n                <span>Gutenberg, roles, multilingual content and media stay as they are. Your editorial team has nothing new to learn.<\/span>\n        <\/div>\n<\/div>\n\n<div class=\"dhsv-icon-box-block vertical align icon-size-small background-green-transparent wp-container-content-b9cf2816\">\n            <div class=\"icon-box__image\">\n            <img decoding=\"async\" src=\"https:\/\/www.360vier.de\/wp-content\/uploads\/integrationen-kontext-onlight-360vier.svg\" alt=\"\">\n        <\/div>\n        <div class=\"icon-box__text\">\n                <h3 class=\"title\"><strong>Free frontend<\/strong><\/h3>\n                <span>Components in Astro, React or other frameworks. The design is no longer bound by the limits of a WordPress theme.<\/span>\n        <\/div>\n<\/div>\n\n<div class=\"dhsv-icon-box-block vertical align icon-size-small background-gray-transparent wp-container-content-b9cf2816\">\n            <div class=\"icon-box__image\">\n            <img decoding=\"async\" src=\"https:\/\/www.360vier.de\/wp-content\/uploads\/integrationen-reporting-blinde-flecken-onlight-360vier.svg\" alt=\"\">\n        <\/div>\n        <div class=\"icon-box__text\">\n                <h3 class=\"title\"><strong>Multiple data sources<\/strong><\/h3>\n                <span>Products from the PIM, properties from the CRM, jobs from applicant management: Astro fetches them directly via <a href='https:\/\/www.360vier.de\/en\/data-enablement\/api-integrations\/'>API integrations<\/a>, and WordPress does not have to store them.<\/span>\n        <\/div>\n<\/div>\n\n<div class=\"dhsv-icon-box-block vertical align icon-size-small background-green-transparent wp-container-content-b9cf2816\">\n            <div class=\"icon-box__image\">\n            <img decoding=\"async\" src=\"https:\/\/www.360vier.de\/wp-content\/uploads\/dataenablement-api-datenautomation-onlight-360vier.svg\" alt=\"\">\n        <\/div>\n        <div class=\"icon-box__text\">\n                <h3 class=\"title\"><strong>Readable for AI<\/strong><\/h3>\n                <span>Clean HTML and structured data make content easy to understand for search engines and AI assistants. More under <a href='https:\/\/www.360vier.de\/en\/digital-platforms\/ai-first-websites\/'>AI-First Websites<\/a>.<\/span>\n        <\/div>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignfull is-style-without-space has-dark-gradient-background has-background is-layout-constrained wp-block-group-is-layout-constrained\" style=\"padding-top:7rem;padding-bottom:7rem\">\n<div class=\"wp-block-columns alignwide are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-07579d57 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:55%\">\n<h2 class=\"wp-block-heading\">Switching WordPress to <span style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-green-color\">headless<\/span> step by step<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">An existing WordPress website does not have to go headless all at once. We start with the section that gains the most, such as campaign pages, a magazine or the product range. This part comes from Astro, while the rest keeps running in the classic theme. Both share content, navigation and design.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This way you see after a few weeks what changes in loading time and maintenance, and then decide on the next section. The page <a href=\"https:\/\/www.360vier.de\/en\/digital-platforms\/website-relaunch\/\">Website relaunch with WordPress<\/a> describes how we plan larger changeovers.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:45%\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"714\" height=\"955\" src=\"https:\/\/www.360vier.de\/wp-content\/uploads\/wordpress-enterprise-plattform-entwicklung-modular-skalierbar-4.webp\" alt=\"\" class=\"wp-image-35630\" srcset=\"https:\/\/www.360vier.de\/wp-content\/uploads\/wordpress-enterprise-plattform-entwicklung-modular-skalierbar-4.webp 714w, https:\/\/www.360vier.de\/wp-content\/uploads\/wordpress-enterprise-plattform-entwicklung-modular-skalierbar-4-224x300.webp 224w\" sizes=\"auto, (max-width: 714px) 100vw, 714px\" \/><\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignfull is-style-without-space has-light-background-color has-background is-layout-constrained wp-block-group-is-layout-constrained\" style=\"padding-top:7rem;padding-bottom:7rem\">\n<div class=\"wp-block-group alignwide is-style-without-space is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-54d22900 wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading alignwide\">WordPress as a headless CMS: what <span style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-green-color\">matters<\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Headless moves tasks that WordPress otherwise handles itself into the frontend. We plan these points from the start; the technical foundations are described on the page <a href=\"https:\/\/www.360vier.de\/en\/digital-platforms\/wordpress-architecture\/\">WordPress architecture<\/a>.<\/p>\n\n\n\n<div style=\"height:2rem\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group alignwide is-style-without-space is-layout-grid wp-container-core-group-is-layout-27c64173 wp-block-group-is-layout-grid\" style=\"margin-top:0;margin-bottom:0\"><div class=\"dhsv-icon-box-block vertical align icon-size-small background-gray-transparent wp-container-content-b9cf2816\">\n            <div class=\"icon-box__image\">\n            <img decoding=\"async\" src=\"https:\/\/www.360vier.de\/wp-content\/uploads\/integrationen-manuell-nacharbeit-onlight-360vier.svg\" alt=\"\">\n        <\/div>\n        <div class=\"icon-box__text\">\n                <h3 class=\"title\"><strong>Preview for editors<\/strong><\/h3>\n                <span>Before publication, drafts appear in the Astro frontend exactly as they will look live, not just in the editor.<\/span>\n        <\/div>\n<\/div>\n\n<div class=\"dhsv-icon-box-block vertical align icon-size-small background-green-transparent wp-container-content-b9cf2816\">\n            <div class=\"icon-box__image\">\n            <img decoding=\"async\" src=\"https:\/\/www.360vier.de\/wp-content\/uploads\/integrationen-kontext-onlight-360vier.svg\" alt=\"\">\n        <\/div>\n        <div class=\"icon-box__text\">\n                <h3 class=\"title\"><strong>Gutenberg blocks<\/strong><\/h3>\n                <span>Every block gets an Astro component. New blocks are created in both worlds at the same time, so the editor and the website match.<\/span>\n        <\/div>\n<\/div>\n\n<div class=\"dhsv-icon-box-block vertical align icon-size-small background-gray-transparent wp-container-content-b9cf2816\">\n            <div class=\"icon-box__image\">\n            <img decoding=\"async\" src=\"https:\/\/www.360vier.de\/wp-content\/uploads\/integrationen-marketing-ohne-feedback-onlight-360vier.svg\" alt=\"\">\n        <\/div>\n        <div class=\"icon-box__text\">\n                <h3 class=\"title\"><strong>Forms<\/strong><\/h3>\n                <span>Form plugins do not output a frontend in headless mode. We connect them via their interface or build them as a component connected to the CRM.<\/span>\n        <\/div>\n<\/div>\n\n<div class=\"dhsv-icon-box-block vertical align icon-size-small background-green-transparent wp-container-content-b9cf2816\">\n            <div class=\"icon-box__image\">\n            <img decoding=\"async\" src=\"https:\/\/www.360vier.de\/wp-content\/uploads\/integrationen-medienbruch-onlight-360vier.svg\" alt=\"\">\n        <\/div>\n        <div class=\"icon-box__text\">\n                <h3 class=\"title\"><strong>SEO with Rank Math<\/strong><\/h3>\n                <span>The frontend takes over titles, descriptions, canonicals and structured data from Rank Math via the plugin\u2019s headless interface.<\/span>\n        <\/div>\n<\/div>\n\n<div class=\"dhsv-icon-box-block vertical align icon-size-small background-gray-transparent wp-container-content-b9cf2816\">\n            <div class=\"icon-box__image\">\n            <img decoding=\"async\" src=\"https:\/\/www.360vier.de\/wp-content\/uploads\/integrationen-reporting-blinde-flecken-onlight-360vier.svg\" alt=\"\">\n        <\/div>\n        <div class=\"icon-box__text\">\n                <h3 class=\"title\"><strong>REST API or WPGraphQL<\/strong><\/h3>\n                <span>The REST API is built into WordPress. WPGraphQL pays off when pages need many linked pieces of content in a single query.<\/span>\n        <\/div>\n<\/div>\n\n<div class=\"dhsv-icon-box-block vertical align icon-size-small background-green-transparent wp-container-content-b9cf2816\">\n            <div class=\"icon-box__image\">\n            <img decoding=\"async\" src=\"https:\/\/www.360vier.de\/wp-content\/uploads\/dataenablement-api-datenautomation-onlight-360vier.svg\" alt=\"\">\n        <\/div>\n        <div class=\"icon-box__text\">\n                <h3 class=\"title\"><strong>Multilingual content<\/strong><\/h3>\n                <span>Language versions from WPML flow into the frontend together with their hreflang links, so that Google serves the right version.<\/span>\n        <\/div>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignfull is-style-without-space has-dark-gradient-background has-background is-layout-constrained wp-block-group-is-layout-constrained\" style=\"padding-top:7rem;padding-bottom:7rem\">\n<div class=\"wp-block-group alignwide is-style-without-space is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-54d22900 wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading alignwide\">Headless or classic <span style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-green-color\">WordPress<\/span>?<\/h2>\n\n\n\n<div style=\"height:2rem\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-07579d57 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<h3 class=\"wp-block-heading has-h-4-font-size\">Headless pays off if \u2026<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>loading time measurably affects rankings and conversion,<\/li>\n\n\n\n<li>your IT does not want the WordPress backend to be publicly accessible,<\/li>\n\n\n\n<li>content should also appear in apps, portals or on screens,<\/li>\n\n\n\n<li>several data sources come together in one website.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<h3 class=\"wp-block-heading has-h-4-font-size\">Classic is better if \u2026<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>the editorial team uses many plugins that output their own frontend,<\/li>\n\n\n\n<li>the website is manageable in size and already loads quickly,<\/li>\n\n\n\n<li>there is no budget for operating a second system.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:2rem\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Classic WordPress projects are described on the page <a href=\"https:\/\/www.360vier.de\/en\/digital-platforms\/wordpress-agency\/\">WordPress agency<\/a>. For new platforms without an existing WordPress setup, we also consider <a href=\"https:\/\/www.360vier.de\/en\/digital-platforms\/payload-cms-agency\/\">Payload CMS<\/a>. If the website is becoming more of an application with logins and data, we recommend <a href=\"https:\/\/www.360vier.de\/en\/ai-enablement\/ai-software-development\/\">AI software development with React and Supabase<\/a>. In detail on costs, preview and deployment: <a href=\"https:\/\/www.360vier.de\/en\/insights\/cms\/headless-wordpress\/\">Benefits of headless WordPress for companies<\/a>.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignfull is-style-without-space is-layout-constrained wp-block-group-is-layout-constrained\" style=\"padding-top:7rem;padding-bottom:7rem\">\n<div class=\"wp-block-group alignwide is-style-without-space is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-54d22900 wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading alignwide\">Migrating to headless <span style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-green-color\">with Astro<\/span>: the process<\/h2>\n\n\n<div class=\"alignwide wp-block-dhsv-process\">\n    <div data-component=\"ProcessComponent\" data-props=\"{&quot;align&quot;:&quot;wide&quot;,&quot;items&quot;:[{&quot;id&quot;:1792760000000,&quot;icon&quot;:&quot;icons.ideation-phase&quot;,&quot;headline&quot;:&quot;Audit&quot;,&quot;content&quot;:&quot;We review content, blocks, plugins, forms and interfaces and choose the section you start with. The result is a plan with architecture, effort and sequence.&quot;},{&quot;id&quot;:1792760000001,&quot;icon&quot;:&quot;icons.implementation-phase&quot;,&quot;headline&quot;:&quot;Implementation&quot;,&quot;content&quot;:&quot;Astro frontend, components for your blocks, preview and publishing. We check redirects and metadata before go-live.&quot;},{&quot;id&quot;:1792760000002,&quot;icon&quot;:&quot;icons.continuous-improvenet&quot;,&quot;headline&quot;:&quot;Operation and expansion&quot;,&quot;content&quot;:&quot;Updates for WordPress and the frontend, monitoring, and then the next section, within a fixed monthly framework.&quot;}],&quot;withGraph&quot;:true,&quot;bgColor&quot;:&quot;white&quot;}\"><\/div>\n<\/div>\n\n\n\n<div style=\"height:2rem\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">What ongoing operation includes is described on the page <a href=\"https:\/\/www.360vier.de\/en\/digital-platforms\/wordpress-agency\/wordpress-maintenance\/\">WordPress maintenance and support<\/a>.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignfull is-style-without-space has-light-down-transparent-gradient-background has-background is-layout-constrained wp-block-group-is-layout-constrained\">\n<div style=\"height:7rem\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group alignwide is-style- is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-54d22900 wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading alignwide\">Frequently asked questions about <span style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-green-color\">headless WordPress<\/span><\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"wp-block-dhsv-akkordeon\">\n        <accordion-group\n        class=\"has-active-bg-solid\"\n                                 name=\"block-astro-faq-1\"     >\n        \n<details class=\"wp-block-dhsv-akkordeon-item\" id=\"accordion-astro00\" >\n        <summary>\n            <span class=\"accordion-group__summary-icon\"><\/span>\n            <span class=\"accordion-group__summary-title\">What is headless WordPress?<\/span>\n        <\/summary>\n        <div>\n            \n\n<p class=\"wp-block-paragraph\">WordPress serves only as the editorial system and delivers content via an interface. A separate frontend generates the visible website, in our case usually Astro. Editing and presentation are thus separated.<\/p>\n\n\n        <\/div>\n    <\/details>\n\n<details class=\"wp-block-dhsv-akkordeon-item\" id=\"accordion-astro01\" >\n        <summary>\n            <span class=\"accordion-group__summary-icon\"><\/span>\n            <span class=\"accordion-group__summary-title\">What is Astro?<\/span>\n        <\/summary>\n        <div>\n            \n\n<p class=\"wp-block-paragraph\">Astro is an open-source framework for content-driven websites. It generates pages as finished HTML and loads JavaScript only for interactive parts, so-called islands. Components from React, Vue or Svelte can be integrated, and content comes from files or a CMS such as WordPress.<\/p>\n\n\n        <\/div>\n    <\/details>\n\n<details class=\"wp-block-dhsv-akkordeon-item\" id=\"accordion-astro02\" >\n        <summary>\n            <span class=\"accordion-group__summary-icon\"><\/span>\n            <span class=\"accordion-group__summary-title\">Why Astro and not Next.js?<\/span>\n        <\/summary>\n        <div>\n            \n\n<p class=\"wp-block-paragraph\">For content-driven websites, Astro delivers HTML without unnecessary JavaScript by default and therefore stays very fast. We use Next.js when the website is more of an application, with many login areas and interactive features.<\/p>\n\n\n        <\/div>\n    <\/details>\n\n<details class=\"wp-block-dhsv-akkordeon-item\" id=\"accordion-astro03\" >\n        <summary>\n            <span class=\"accordion-group__summary-icon\"><\/span>\n            <span class=\"accordion-group__summary-title\">Can we keep our existing WordPress website?<\/span>\n        <\/summary>\n        <div>\n            \n\n<p class=\"wp-block-paragraph\">Yes. Backend, content, users and media stay. What is new is the frontend. We can also switch only individual sections and leave the rest in the classic theme.<\/p>\n\n\n        <\/div>\n    <\/details>\n\n    <\/accordion-group>\n<\/div> <\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"wp-block-dhsv-akkordeon\">\n        <accordion-group\n        class=\"has-active-bg-solid\"\n                                 name=\"block-astro-faq-2\"     >\n        \n<details class=\"wp-block-dhsv-akkordeon-item\" id=\"accordion-astrob00\" >\n        <summary>\n            <span class=\"accordion-group__summary-icon\"><\/span>\n            <span class=\"accordion-group__summary-title\">What happens to our plugins?<\/span>\n        <\/summary>\n        <div>\n            \n\n<p class=\"wp-block-paragraph\">Plugins that only work in the backend, for example for editing, translation or SEO, keep running. Plugins that output something in the frontend, such as forms or sliders, are replaced by components or connected via their interface.<\/p>\n\n\n        <\/div>\n    <\/details>\n\n<details class=\"wp-block-dhsv-akkordeon-item\" id=\"accordion-astrob01\" >\n        <summary>\n            <span class=\"accordion-group__summary-icon\"><\/span>\n            <span class=\"accordion-group__summary-title\">Is headless WordPress good for SEO?<\/span>\n        <\/summary>\n        <div>\n            \n\n<p class=\"wp-block-paragraph\">Yes, if metadata, structured data, sitemaps and redirects are carried over properly. The faster loading time helps as well. Without this work, you lose rankings, which is why it is part of our projects.<\/p>\n\n\n        <\/div>\n    <\/details>\n\n<details class=\"wp-block-dhsv-akkordeon-item\" id=\"accordion-astrob02\" >\n        <summary>\n            <span class=\"accordion-group__summary-icon\"><\/span>\n            <span class=\"accordion-group__summary-title\">What does headless WordPress cost?<\/span>\n        <\/summary>\n        <div>\n            \n\n<p class=\"wp-block-paragraph\">More than a classic WordPress website, because frontend and backend are built and operated separately. How much depends on the number of blocks, languages and interfaces. Migrating step by step spreads the costs over time.<\/p>\n\n\n        <\/div>\n    <\/details>\n\n<details class=\"wp-block-dhsv-akkordeon-item\" id=\"accordion-astrob03\" >\n        <summary>\n            <span class=\"accordion-group__summary-icon\"><\/span>\n            <span class=\"accordion-group__summary-title\">Where is the Astro frontend hosted?<\/span>\n        <\/summary>\n        <div>\n            \n\n<p class=\"wp-block-paragraph\">Static pages can be delivered on almost any infrastructure, for example via a CDN. For server-rendered pages, we use platforms such as Vercel or servers in Germany, depending on your IT\u2019s requirements.<\/p>\n\n\n        <\/div>\n    <\/details>\n\n    <\/accordion-group>\n<\/div> <\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignwide is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-54d22900 wp-block-group-is-layout-constrained\"><div class=\"is-image-left has-image alignwide wp-block-dhsv-cta\">\n            <img loading=\"lazy\" decoding=\"async\"\n            class=\"image\"\n            src=\"https:\/\/www.360vier.de\/wp-content\/uploads\/hans-mengler-team-360vier.webp\"\n            alt=\"Hans Mengler\"\n             width=\"740\"              height=\"740\"         >\n        <div class=\"content with-bg bg-dark-gradient\">\n        <div class=\"content--body\">\n                            <h2 class=\"content--title\">Talk to us about your <span style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-green-color\">project<\/span><\/h2>\n                                <\/div>\n        <div class=\"content--footer\">\n            <div class=\"content--person\">\n                                    <p class=\"content--description\">Hans Mengler<\/p>\n                                                    <p class=\"content--role\">Managing Director<\/p>\n                            <\/div>\n            <div class=\"content--actions\">\n                                    <a href=\"mailto:beratung@360vier.de\" class=\"dhsv-button tertiary cta-email-button\">\n                        <span class=\"email-label\">Email Hans<\/span>\n                        <span class=\"icon email-icon\" aria-hidden=\"true\"><svg class=\"dhsv-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n  <path d=\"M18.3346 1.66406L9.16797 10.8307\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n  <path d=\"M18.3346 1.66406L12.5013 18.3307L9.16797 10.8307L1.66797 7.4974L18.3346 1.66406Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n<\/svg><\/span>\n                    <\/a>\n                                                    <a href=\"https:\/\/www.360vier.de\/en\/inquiry\/\"\n                                                                        class=\"dhsv-button primary\">\n                        <span>Get in touch<\/span>\n                        <span class=\"icon\" aria-hidden=\"true\">\n                            <svg class=\"dhsv-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-right-icon lucide-arrow-right\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>                        <\/span>\n                    <\/a>\n                            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:200px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Why Astro for headless WordPress Switching WordPress to headless step by step An existing WordPress website does not have to go headless all at once. We start with the section that gains the most, such as campaign pages, a magazine or the product range. This part comes from Astro, while the rest keeps running in &hellip; <a href=\"https:\/\/www.360vier.de\/en\/digital-platforms\/headless-wordpress-astro\/\">Continued<\/a><\/p>\n","protected":false},"author":10,"featured_media":0,"parent":39324,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_wpts_hint":"","footnotes":""},"class_list":["post-40428","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.360vier.de\/en\/wp-json\/wp\/v2\/pages\/40428","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.360vier.de\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.360vier.de\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.360vier.de\/en\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.360vier.de\/en\/wp-json\/wp\/v2\/comments?post=40428"}],"version-history":[{"count":5,"href":"https:\/\/www.360vier.de\/en\/wp-json\/wp\/v2\/pages\/40428\/revisions"}],"predecessor-version":[{"id":40496,"href":"https:\/\/www.360vier.de\/en\/wp-json\/wp\/v2\/pages\/40428\/revisions\/40496"}],"up":[{"embeddable":true,"href":"https:\/\/www.360vier.de\/en\/wp-json\/wp\/v2\/pages\/39324"}],"wp:attachment":[{"href":"https:\/\/www.360vier.de\/en\/wp-json\/wp\/v2\/media?parent=40428"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}