Pop-up

So fügst du das Pop-up korrekt ein:

Kopiere über den Button rechts den Aufbau des Popup und füge ihn unter dem Footer auf deiner Seite ein.
Setze das CSS im Customizer ein.
Nun kannst du die Inhalte des Pop-ups visuell im Editor bearbeiten. Beachte dabei, dass der angelegte Aufbau mitsamt Klassen und IDs bestehen bleibt so. Innerhalb des Pop-ups, also der weißen Fläche, können auch weitere Elemente ergänzt oder entfernt werden.
Hinweis: Fügst du die Struktur im Reusable Block des Footers unten ein, so wird, das Pop-up entsprechend auf jeder unterseite angezeigt.

So sieht das Pop-up aus:

<!-- wp:group {"style":{"snippets":[]},"layout":{"type":"constrained"},"cm4allBlockId":"b3c7ec2e-aeae-4ba0-aab0-7b809ca496aa"} -->
<div class="wp-block-group"><!-- wp:group {"style":{"color":{"background":"#12121282"},"snippets":[]},"className":"overlay","layout":{"type":"constrained"},"cm4allBlockId":"eb7c3416-6b02-4734-8fe8-4d7b08dbbdc0"} -->
<div id="overlay" class="wp-block-group overlay has-background" style="background-color:#12121282"><!-- wp:group {"align":"wide","style":{"border":{"radius":"10px","width":"1px"},"spacing":{"margin":{"right":"20px","left":"20px"},"padding":{"right":"0px","left":"0px","top":"0px","bottom":"40px"}}},"borderColor":"trinity-theme-primary-contrast-variant","backgroundColor":"trinity-theme-nochange-white","className":"popup","layout":{"type":"constrained"},"cm4allBlockId":"ac44215f-ef5e-4c30-88f5-33a5f87f17c9"} -->
<div class="wp-block-group alignwide popup has-border-color has-trinity-theme-primary-contrast-variant-border-color has-trinity-theme-nochange-white-background-color has-background" id="popup" style="border-width:1px;border-radius:10px;margin-right:20px;margin-left:20px;padding-top:0px;padding-right:0px;padding-bottom:40px;padding-left:0px"><!-- wp:group {"style":{"spacing":{"padding":{"top":"20px"},"margin":{"right":"20px","left":"20px"}},"snippets":[]},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"},"cm4allBlockId":"fa94367e-70d9-40a0-85a5-117d47b4c8cd"} -->
<div class="wp-block-group" style="margin-right:20px;margin-left:20px;padding-top:20px"><!-- wp:group {"style":{"spacing":{"padding":{"right":"10px","left":"10px","top":"10px","bottom":"10px"}},"snippets":[]},"className":"close-button","layout":{"type":"constrained"},"cm4allBlockId":"5659e564-d79d-417e-968f-2c05961e96e8"} -->
<div id="closeButton" class="wp-block-group close-button" style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px"><!-- wp:cm4all/icon {"size":"30px","icon":{"type":"svg","vendor":"md","name":"close","category":"filled","url":"/wp-content/plugins/cm4all-elements/cm4all-wp-plugin-components/iconSelectBox/svgs/md/filled/close.svg","xml":"\u003csvg xmlns=\u0022http://www.w3.org/2000/svg\u0022 viewBox=\u00220 0 24 24\u0022\u003e\u003cpath d=\u0022M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\u0022/\u003e\u003c/svg\u003e"},"searchTerm":"close","style":{"spacing":{"margin":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}},"border":{"style":"solid","width":"0px","radius":"0px"},"color":{"text":"#1e1e1e"}},"cm4allBlockId":"51c53aab-87ee-4796-a4d4-db63099180c0"} -->
<div class="wp-block-cm4all-icon cm4all-icon-block align-left-block has-text-color" style="border-style:solid;border-width:0px;border-radius:0px;color:#1e1e1e;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><div class="cm4all-icon-svg-wrapper  cm4all-icon-constrained" style="width:30px;transform:rotate(0deg);fill:#1e1e1e;height:30px"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg></div></div>
<!-- /wp:cm4all/icon --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"snippets":[]},"className":"is-style-cm4all-theme-block\u002d\u002dshrink-center","layout":{"type":"constrained"},"cm4allBlockId":"7340d4e5-8a01-4843-a60e-35af4bb52a66"} -->
<div class="wp-block-group is-style-cm4all-theme-block--shrink-center"><!-- wp:heading {"textAlign":"center","style":{"color":{"text":"#151515"},"snippets":[]},"className":"","cm4allBlockId":"3e6b9709-8d69-4fff-ae83-7bfb07682ec5"} -->
<h2 class="wp-block-heading has-text-align-center has-text-color" style="color:#151515">Hi, ich bin ein Popup!</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#696969"}},"className":"","cm4allBlockId":"15b5e7fe-402b-42c4-a955-a4ff6667c0c8"} -->
<p class="has-text-align-center has-text-color" style="color:#696969">Ich kann für Aktuelle Informationen wie z.B. ein neues Angebot oder auch Urlaubszeiten verwendet werden. Bitte beachte alle Schritte sorgsam, wenn du mich einsetzt.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#141414"}},"className":"","cm4allBlockId":"c7aa997a-7e27-4053-9f31-85c79167469a"} -->
<p class="has-text-align-center has-text-color" style="color:#141414"><strong>Vielen Dank!</strong></p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"},"style":{"snippets":[]},"cm4allBlockId":"853d6257-0373-4b3c-8c06-d00c86698b9b"} -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"snippets":[]},"className":"","cm4allBlockId":"2b26cede-d608-4542-9583-9b290bbb51ac"} -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="/kontakt">Kontakt aufnehmen</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:html {"style":{"snippets":[]}} -->
<script>
   window.onload = function() {
      document.getElementById('overlay').style.display = 'block';
   };
 
   document.getElementById('closeButton').addEventListener('click', function() {
      document.getElementById('overlay').style.display = 'none';
   });
 
   document.getElementById('overlay').addEventListener('click', function(event) {
      // Überprüfen, ob das Klickereignis außerhalb des Popup-Elements stattfand
      if (event.target.id === 'overlay') {
         document.getElementById('overlay').style.display = 'none';
      }
   });
</script>
<!-- /wp:html --></div>
<!-- /wp:group -->

Dieses CSS muss im Customizer hinterlegt werden:

/* Pop-up Style */
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
}
.close-button {
cursor: pointer;
}