{"id":2127,"date":"2021-12-09T17:01:22","date_gmt":"2021-12-09T17:01:22","guid":{"rendered":"https:\/\/stax.organicthemes.com\/?page_id=2127"},"modified":"2023-06-07T13:00:33","modified_gmt":"2023-06-07T19:00:33","slug":"modal-block","status":"publish","type":"page","link":"https:\/\/www.thinksai.com\/latam\/blocks\/organic-blocks\/modal-block\/","title":{"rendered":"Modal Block"},"content":{"rendered":"\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<hr class=\"wp-block-separator has-text-color has-medium-gray-color has-css-opacity has-medium-gray-background-color has-background is-style-wide\"\/>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-28f84493 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\">\n<h4 class=\"has-medium-font-size wp-block-heading\" id=\"content-slideshow-block-1\">Modal Block Examples<\/h4>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-buttons is-content-justification-right is-layout-flex wp-container-core-buttons-is-layout-d445cf74 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-font-size is-style-outline has-extra-small-font-size is-style-outline--1\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/organicthemes.com\/block\/modal-block\/\">Documentation<\/a><\/div>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-subtle-teal-gradient-background has-background wp-element-button\" href=\"https:\/\/organicthemes.com\/blocks\/\">Buy Blocks<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-medium-gray-color has-css-opacity has-medium-gray-background-color has-background is-style-wide\"\/>\n\n\n\n<p class=\"has-normal-font-size\">The <strong>Modal Block<\/strong> reveals custom content within a dismissible popup window. It&#8217;s the perfect tool for displaying conditional content like signup forms, client logins, and data collection fields. Click the example buttons below to view a variety of modal style examples.<\/p>\n\n\n\n<p class=\"has-small-font-size\">Multiple block variations are showcased below. Each variation may be copied to your clipboard, and pasted directly into your WordPress block editor. However, the <a rel=\"noreferrer noopener\" href=\"https:\/\/organicthemes.com\/blocks\/\" target=\"_blank\"><strong>Organic Blocks<\/strong><\/a> plugin is required.<\/p>\n\n\n\n<p class=\"has-small-font-size\"><strong>Please Note:<\/strong> These are example style variations created to showcase the block flexibility. Any variation can be modified to your liking, and entirely new variations may be created using the block settings.<\/p>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<h4 class=\"has-text-align-center wp-block-heading\" id=\"variation-1\">Variation 1<\/h4>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-obb-modal-block organic-block obb-modal is-style-fill\"><div id=\"obb-modal-box-0\" class=\"modal obb-modal-box obb-style-rounded obb-align-center\" style=\"max-width:720px\"><div class=\"obb-modal-content\" style=\"background-color:#fff;background-image:linear-gradient(135deg, rgb(0, 100, 170), rgb(124, 0, 163) 100%);box-shadow:0 0 12px undefined\">\n<div class=\"wp-block-cover is-light\" style=\"min-height:280px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-60 has-background-dim\" style=\"background-color:#ff9c00\"><\/span><img fetchpriority=\"high\" decoding=\"async\" width=\"1600\" height=\"2400\" class=\"wp-block-cover__image-background wp-image-2247\" alt=\"\" src=\"https:\/\/\/wp-content\/uploads\/sites\/9\/2021\/12\/interactive-01.jpg\" style=\"object-position:53% 23%\" data-object-fit=\"cover\" data-object-position=\"53% 23%\" srcset=\"https:\/\/www.thinksai.com\/latam\/wp-content\/uploads\/sites\/9\/2021\/12\/interactive-01.jpg 1600w, https:\/\/www.thinksai.com\/latam\/wp-content\/uploads\/sites\/9\/2021\/12\/interactive-01-200x300.jpg 200w, https:\/\/www.thinksai.com\/latam\/wp-content\/uploads\/sites\/9\/2021\/12\/interactive-01-683x1024.jpg 683w, https:\/\/www.thinksai.com\/latam\/wp-content\/uploads\/sites\/9\/2021\/12\/interactive-01-768x1152.jpg 768w, https:\/\/www.thinksai.com\/latam\/wp-content\/uploads\/sites\/9\/2021\/12\/interactive-01-1024x1536.jpg 1024w, https:\/\/www.thinksai.com\/latam\/wp-content\/uploads\/sites\/9\/2021\/12\/interactive-01-1365x2048.jpg 1365w, https:\/\/www.thinksai.com\/latam\/wp-content\/uploads\/sites\/9\/2021\/12\/interactive-01-8x12.jpg 8w, https:\/\/www.thinksai.com\/latam\/wp-content\/uploads\/sites\/9\/2021\/12\/interactive-01-1200x1800.jpg 1200w, https:\/\/www.thinksai.com\/latam\/wp-content\/uploads\/sites\/9\/2021\/12\/interactive-01-980x1470.jpg 980w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<h6 class=\"has-text-align-center has-white-color has-text-color has-large-font-size wp-block-heading\" id=\"sign-up\">Sign Up!<\/h6>\n\n\n\n<p class=\"has-text-align-center has-white-color has-text-color has-medium-font-size\">Get news, updates, and freebies from our company!<\/p>\n\n\n\n<p class=\"has-text-align-center has-white-color has-text-color has-small-font-size\">This <strong>Modal Block<\/strong> contains the Jetpack <strong>Newsletter Block<\/strong>.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-jetpack-contact-form has-white-color has-text-color has-white-color has-text-color\">\n\n\n\n\n\n<\/div>\n<\/div><\/div><div class=\"wp-block-button obb-modal-button\" style=\"text-align:center\"><a class=\"wp-block-button__link obb-modal-open\" href=\"#obb-modal-box-0\" rel=\"modal:open\" style=\"color:#fff;background-image:linear-gradient(135deg, rgb(255, 0, 116), rgb(0, 40, 205) 100%);border-radius:3px\"><span class=\"obb-modal-button-text\">Newsletter Signup<\/span><\/a><\/div><\/div>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-28f84493 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:60%\">\n<p class=\"has-small-font-size\">Copy this block variation using the button, and paste it into your WordPress block editor. The <strong>Organic Blocks<\/strong> plugin is required.<\/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\">\n<div id=\"obb-clipboard-id-0\" class=\"wp-block-obb-clipboard-block organic-block obb-clipboard wp-block-button obb-clipboard-button is-style-outline\" style=\"text-align:right\"><a id=\"obb-clipboard-button-0\" class=\"wp-block-button__link\" data-alert-target=\"obb-clipboard-alert-0\" data-clipboard-text=\"&lt;!-- wp:obb\/modal-block {&quot;modalstyle&quot;:&quot;rounded&quot;,&quot;btnshadow&quot;:0,&quot;btnborderwidth&quot;:0,&quot;btnbordercolor&quot;:&quot;#999999&quot;,&quot;buttontextcolor&quot;:&quot;#fff&quot;,&quot;buttonbggradient&quot;:&quot;linear-gradient(135deg, rgb(255, 0, 116), rgb(0, 40, 205) 100%)&quot;,&quot;bggradient&quot;:&quot;linear-gradient(135deg, rgb(0, 100, 170), rgb(124, 0, 163) 100%)&quot;,&quot;className&quot;:&quot;is-style-fill&quot;} --&gt;\n&lt;div class=&quot;wp-block-obb-modal-block organic-block obb-modal is-style-fill&quot;&gt;&lt;div id=&quot;obb-modal-box-0&quot; class=&quot;modal obb-modal-box obb-style-rounded obb-align-center&quot; style=&quot;max-width:720px&quot;&gt;&lt;div class=&quot;obb-modal-content&quot; style=&quot;background-color:#fff;background-image:linear-gradient(135deg, rgb(0, 100, 170), rgb(124, 0, 163) 100%);box-shadow:0 0 12px undefined&quot;&gt;&lt;!-- wp:cover {&quot;url&quot;:&quot;https:\/\/\/wp-content\/uploads\/sites\/9\/2021\/12\/interactive-01.jpg&quot;,&quot;id&quot;:2247,&quot;dimRatio&quot;:60,&quot;customOverlayColor&quot;:&quot;#ff9c00&quot;,&quot;focalPoint&quot;:{&quot;x&quot;:0.53,&quot;y&quot;:0.23},&quot;minHeight&quot;:280,&quot;isDark&quot;:false} --&gt;\n&lt;div class=&quot;wp-block-cover is-light&quot; style=&quot;min-height:280px&quot;&gt;&lt;span aria-hidden=&quot;true&quot; class=&quot;wp-block-cover__background has-background-dim-60 has-background-dim&quot; style=&quot;background-color:#ff9c00&quot;&gt;&lt;\/span&gt;&lt;img class=&quot;wp-block-cover__image-background wp-image-2247&quot; alt=&quot;&quot; src=&quot;https:\/\/\/wp-content\/uploads\/sites\/9\/2021\/12\/interactive-01.jpg&quot; style=&quot;object-position:53% 23%&quot; data-object-fit=&quot;cover&quot; data-object-position=&quot;53% 23%&quot;\/&gt;&lt;div class=&quot;wp-block-cover__inner-container&quot;&gt;&lt;!-- wp:heading {&quot;textAlign&quot;:&quot;center&quot;,&quot;level&quot;:6,&quot;placeholder&quot;:&quot;Modal Example&quot;,&quot;textColor&quot;:&quot;white&quot;,&quot;fontSize&quot;:&quot;large&quot;} --&gt;\n&lt;h6 class=&quot;has-text-align-center has-white-color has-text-color has-large-font-size&quot; id=&quot;sign-up&quot;&gt;Sign Up!&lt;\/h6&gt;\n&lt;!-- \/wp:heading --&gt;\n\n&lt;!-- wp:paragraph {&quot;align&quot;:&quot;center&quot;,&quot;textColor&quot;:&quot;white&quot;,&quot;fontSize&quot;:&quot;medium&quot;} --&gt;\n&lt;p class=&quot;has-text-align-center has-white-color has-text-color has-medium-font-size&quot;&gt;Get news, updates, and freebies from our company!&lt;\/p&gt;\n&lt;!-- \/wp:paragraph --&gt;\n\n&lt;!-- wp:paragraph {&quot;align&quot;:&quot;center&quot;,&quot;textColor&quot;:&quot;white&quot;,&quot;fontSize&quot;:&quot;small&quot;} --&gt;\n&lt;p class=&quot;has-text-align-center has-white-color has-text-color has-small-font-size&quot;&gt;This &lt;strong&gt;Modal Block&lt;\/strong&gt; contains the Jetpack &lt;strong&gt;Newsletter Block&lt;\/strong&gt;.&lt;\/p&gt;\n&lt;!-- \/wp:paragraph --&gt;&lt;\/div&gt;&lt;\/div&gt;\n&lt;!-- \/wp:cover --&gt;\n\n&lt;!-- wp:jetpack\/contact-form {&quot;subject&quot;:&quot;[Stax Theme Demo] Modal Block&quot;,&quot;to&quot;:&quot;david@organicthemes.com&quot;,&quot;className&quot;:&quot;wp-block-jetpack-contact-form&quot;,&quot;textColor&quot;:&quot;white&quot;} --&gt;\n&lt;div class=&quot;wp-block-jetpack-contact-form has-white-color has-text-color has-white-color has-text-color&quot;&gt;&lt;!-- wp:jetpack\/field-name {&quot;required&quot;:true} \/--&gt;\n\n&lt;!-- wp:jetpack\/field-email {&quot;required&quot;:true} \/--&gt;\n\n&lt;!-- wp:jetpack\/field-consent {&quot;implicitConsentMessage&quot;:&quot;By submitting information, you&#x27;re giving us permission to email you. You may unsubscribe at any time.&quot;} \/--&gt;\n\n&lt;!-- wp:jetpack\/button {&quot;element&quot;:&quot;button&quot;,&quot;text&quot;:&quot;Subscribe&quot;,&quot;textColor&quot;:&quot;white&quot;,&quot;gradient&quot;:&quot;california-dusk&quot;,&quot;borderRadius&quot;:3,&quot;width&quot;:&quot;100%&quot;,&quot;lock&quot;:{&quot;move&quot;:false,&quot;remove&quot;:true},&quot;className&quot;:&quot;is-style-fill&quot;} \/--&gt;&lt;\/div&gt;\n&lt;!-- \/wp:jetpack\/contact-form --&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;wp-block-button obb-modal-button&quot; style=&quot;text-align:center&quot;&gt;&lt;a class=&quot;wp-block-button__link obb-modal-open&quot; href=&quot;#obb-modal-box-0&quot; rel=&quot;modal:open&quot; style=&quot;color:#fff;background-image:linear-gradient(135deg, rgb(255, 0, 116), rgb(0, 40, 205) 100%);border-radius:3px&quot;&gt;&lt;span class=&quot;obb-modal-button-text&quot;&gt;Newsletter Signup&lt;\/span&gt;&lt;\/a&gt;&lt;\/div&gt;&lt;\/div&gt;\n&lt;!-- \/wp:obb\/modal-block --&gt;\" style=\"border-radius:3px;border-width:2px;border-style:solid;border-color:#ccc\"><span class=\"obb-clipboard-button-text\">Copy Block<\/span><\/a><div id=\"obb-clipboard-alert-0\" class=\"obb-clipboard-alert\">Copied block to clipboard!<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-medium-gray-color has-css-opacity has-medium-gray-background-color has-background is-style-wide\"\/>\n\n\n\n<div style=\"height:80px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<h4 class=\"has-text-align-center wp-block-heading\" id=\"variation-2\">Variation 2<\/h4>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-obb-modal-block organic-block obb-modal is-style-fill\"><div id=\"obb-modal-box-1\" class=\"modal obb-modal-box obb-style-modern obb-align-center\" style=\"max-width:720px\"><div class=\"obb-modal-content\" style=\"background-color:#fff;border-width:3px;border-style:solid;border-color:#ccc;box-shadow:0 0 12px #00000040\">\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/\/wp-content\/uploads\/sites\/9\/2021\/12\/avatar_022.png\" alt=\"\" class=\"wp-image-2000\" width=\"160\" height=\"160\" srcset=\"https:\/\/www.thinksai.com\/latam\/wp-content\/uploads\/sites\/9\/2021\/12\/avatar_022.png 512w, https:\/\/www.thinksai.com\/latam\/wp-content\/uploads\/sites\/9\/2021\/12\/avatar_022-300x300.png 300w, https:\/\/www.thinksai.com\/latam\/wp-content\/uploads\/sites\/9\/2021\/12\/avatar_022-150x150.png 150w, https:\/\/www.thinksai.com\/latam\/wp-content\/uploads\/sites\/9\/2021\/12\/avatar_022-12x12.png 12w, https:\/\/www.thinksai.com\/latam\/wp-content\/uploads\/sites\/9\/2021\/12\/avatar_022-400x400.png 400w, https:\/\/www.thinksai.com\/latam\/wp-content\/uploads\/sites\/9\/2021\/12\/avatar_022-200x200.png 200w, https:\/\/www.thinksai.com\/latam\/wp-content\/uploads\/sites\/9\/2021\/12\/avatar_022-320x320.png 320w\" sizes=\"(max-width: 160px) 100vw, 160px\" \/><\/figure>\n\n\n\n<h6 class=\"has-text-align-center has-large-font-size wp-block-heading\" id=\"sign-up\">Register!<\/h6>\n\n\n\n<p class=\"has-text-align-center\">An example registration form within the <strong>Modal Block<\/strong>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-medium-gray-color has-css-opacity has-medium-gray-background-color has-background is-style-wide\"\/>\n\n\n\n<div class=\"wp-block-jetpack-contact-form\">\n\n\n\n\n\n<\/div>\n<\/div><\/div><div class=\"wp-block-button obb-modal-button\" style=\"text-align:center\"><a class=\"wp-block-button__link obb-modal-open\" href=\"#obb-modal-box-1\" rel=\"modal:open\" style=\"color:#fff;background-image:linear-gradient(135deg, rgb(244, 182, 0), rgb(200, 0, 0) 100%);border-radius:3px;box-shadow:0 0 18px #00000040\"><span class=\"obb-modal-button-text\">Customer Registration<\/span><\/a><\/div><\/div>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-28f84493 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:60%\">\n<p class=\"has-small-font-size\">Copy this block variation using the button, and paste it into your WordPress block editor. The <strong>Organic Blocks<\/strong> plugin is required.<\/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\">\n<div id=\"obb-clipboard-id-1\" class=\"wp-block-obb-clipboard-block organic-block obb-clipboard wp-block-button obb-clipboard-button is-style-outline\" style=\"text-align:right\"><a id=\"obb-clipboard-button-1\" class=\"wp-block-button__link\" data-alert-target=\"obb-clipboard-alert-1\" data-clipboard-text=\"&lt;!-- wp:obb\/modal-block {&quot;id&quot;:1,&quot;modalstyle&quot;:&quot;modern&quot;,&quot;styleborderwidth&quot;:3,&quot;styleshadowcolor&quot;:&quot;#00000040&quot;,&quot;btnshadow&quot;:18,&quot;btnborderwidth&quot;:0,&quot;btnbordercolor&quot;:&quot;#999999&quot;,&quot;btnshadowcolor&quot;:&quot;#00000040&quot;,&quot;buttontextcolor&quot;:&quot;#fff&quot;,&quot;buttonbggradient&quot;:&quot;linear-gradient(135deg, rgb(244, 182, 0), rgb(200, 0, 0) 100%)&quot;,&quot;className&quot;:&quot;is-style-fill&quot;} --&gt;\n&lt;div class=&quot;wp-block-obb-modal-block organic-block obb-modal is-style-fill&quot;&gt;&lt;div id=&quot;obb-modal-box-1&quot; class=&quot;modal obb-modal-box obb-style-modern obb-align-center&quot; style=&quot;max-width:720px&quot;&gt;&lt;div class=&quot;obb-modal-content&quot; style=&quot;background-color:#fff;border-width:3px;border-style:solid;border-color:#ccc;box-shadow:0 0 12px #00000040&quot;&gt;&lt;!-- wp:image {&quot;align&quot;:&quot;center&quot;,&quot;id&quot;:2000,&quot;width&quot;:160,&quot;height&quot;:160,&quot;sizeSlug&quot;:&quot;full&quot;,&quot;linkDestination&quot;:&quot;none&quot;} --&gt;\n&lt;figure class=&quot;wp-block-image aligncenter size-full is-resized&quot;&gt;&lt;img src=&quot;https:\/\/\/wp-content\/uploads\/sites\/9\/2021\/12\/avatar_022.png&quot; alt=&quot;&quot; class=&quot;wp-image-2000&quot; width=&quot;160&quot; height=&quot;160&quot;\/&gt;&lt;\/figure&gt;\n&lt;!-- \/wp:image --&gt;\n\n&lt;!-- wp:heading {&quot;textAlign&quot;:&quot;center&quot;,&quot;level&quot;:6,&quot;placeholder&quot;:&quot;Modal Example&quot;,&quot;fontSize&quot;:&quot;large&quot;} --&gt;\n&lt;h6 class=&quot;has-text-align-center has-large-font-size&quot; id=&quot;sign-up&quot;&gt;Register!&lt;\/h6&gt;\n&lt;!-- \/wp:heading --&gt;\n\n&lt;!-- wp:paragraph {&quot;align&quot;:&quot;center&quot;} --&gt;\n&lt;p class=&quot;has-text-align-center&quot;&gt;An example registration form within the &lt;strong&gt;Modal Block&lt;\/strong&gt;.&lt;\/p&gt;\n&lt;!-- \/wp:paragraph --&gt;\n\n&lt;!-- wp:separator {&quot;opacity&quot;:&quot;css&quot;,&quot;backgroundColor&quot;:&quot;medium-gray&quot;,&quot;className&quot;:&quot;is-style-wide&quot;} --&gt;\n&lt;hr class=&quot;wp-block-separator has-text-color has-medium-gray-color has-css-opacity has-medium-gray-background-color has-background is-style-wide&quot;\/&gt;\n&lt;!-- \/wp:separator --&gt;\n\n&lt;!-- wp:jetpack\/contact-form {&quot;subject&quot;:&quot;A new registration from your website&quot;,&quot;to&quot;:&quot;david@organicthemes.com&quot;,&quot;className&quot;:&quot;wp-block-jetpack-contact-form&quot;} --&gt;\n&lt;div class=&quot;wp-block-jetpack-contact-form&quot;&gt;&lt;!-- wp:jetpack\/field-name {&quot;required&quot;:true,&quot;width&quot;:50} \/--&gt;\n\n&lt;!-- wp:jetpack\/field-email {&quot;required&quot;:true,&quot;width&quot;:50} \/--&gt;\n\n&lt;!-- wp:jetpack\/field-url \/--&gt;\n\n&lt;!-- wp:jetpack\/button {&quot;element&quot;:&quot;button&quot;,&quot;text&quot;:&quot;Register&quot;,&quot;gradient&quot;:&quot;fire-blaze&quot;,&quot;align&quot;:&quot;center&quot;,&quot;lock&quot;:{&quot;move&quot;:false,&quot;remove&quot;:true}} \/--&gt;&lt;\/div&gt;\n&lt;!-- \/wp:jetpack\/contact-form --&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;wp-block-button obb-modal-button&quot; style=&quot;text-align:center&quot;&gt;&lt;a class=&quot;wp-block-button__link obb-modal-open&quot; href=&quot;#obb-modal-box-1&quot; rel=&quot;modal:open&quot; style=&quot;color:#fff;background-image:linear-gradient(135deg, rgb(244, 182, 0), rgb(200, 0, 0) 100%);border-radius:3px;box-shadow:0 0 18px #00000040&quot;&gt;&lt;span class=&quot;obb-modal-button-text&quot;&gt;Customer Registration&lt;\/span&gt;&lt;\/a&gt;&lt;\/div&gt;&lt;\/div&gt;\n&lt;!-- \/wp:obb\/modal-block --&gt;\" style=\"border-radius:3px;border-width:2px;border-style:solid;border-color:#ccc\"><span class=\"obb-clipboard-button-text\">Copy Block<\/span><\/a><div id=\"obb-clipboard-alert-1\" class=\"obb-clipboard-alert\">Copied block to clipboard!<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-medium-gray-color has-css-opacity has-medium-gray-background-color has-background is-style-wide\"\/>\n\n\n\n<div style=\"height:80px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<h4 class=\"has-text-align-center wp-block-heading\" id=\"variation-3\">Variation 3<\/h4>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-obb-modal-block organic-block obb-modal is-style-outline\"><div id=\"obb-modal-box-2\" class=\"modal obb-modal-box obb-style-minimal obb-align-center\" style=\"max-width:720px\"><div class=\"obb-modal-content\" style=\"background-color:#fff;border-width:3px;border-style:solid;border-color:#000000;box-shadow:0 0 12px undefined\">\n<div class=\"wp-block-cover\" style=\"min-height:280px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-40 has-background-dim\"><\/span><img decoding=\"async\" width=\"1800\" height=\"1200\" class=\"wp-block-cover__image-background wp-image-1515\" alt=\"\" src=\"https:\/\/\/wp-content\/uploads\/sites\/9\/2017\/07\/page-05-1.jpg\" data-object-fit=\"cover\" srcset=\"https:\/\/www.thinksai.com\/latam\/wp-content\/uploads\/sites\/9\/2017\/07\/page-05-1.jpg 1800w, https:\/\/www.thinksai.com\/latam\/wp-content\/uploads\/sites\/9\/2017\/07\/page-05-1-300x200.jpg 300w, https:\/\/www.thinksai.com\/latam\/wp-content\/uploads\/sites\/9\/2017\/07\/page-05-1-1024x683.jpg 1024w, https:\/\/www.thinksai.com\/latam\/wp-content\/uploads\/sites\/9\/2017\/07\/page-05-1-768x512.jpg 768w, https:\/\/www.thinksai.com\/latam\/wp-content\/uploads\/sites\/9\/2017\/07\/page-05-1-1536x1024.jpg 1536w, https:\/\/www.thinksai.com\/latam\/wp-content\/uploads\/sites\/9\/2017\/07\/page-05-1-18x12.jpg 18w, https:\/\/www.thinksai.com\/latam\/wp-content\/uploads\/sites\/9\/2017\/07\/page-05-1-1200x800.jpg 1200w, https:\/\/www.thinksai.com\/latam\/wp-content\/uploads\/sites\/9\/2017\/07\/page-05-1-980x653.jpg 980w\" sizes=\"(max-width: 1800px) 100vw, 1800px\" \/><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/\/wp-content\/uploads\/sites\/9\/2021\/12\/paper-plane-icon-white.png\" alt=\"\" class=\"wp-image-1988\" width=\"32\" height=\"32\" srcset=\"https:\/\/www.thinksai.com\/latam\/wp-content\/uploads\/sites\/9\/2021\/12\/paper-plane-icon-white.png 320w, https:\/\/www.thinksai.com\/latam\/wp-content\/uploads\/sites\/9\/2021\/12\/paper-plane-icon-white-300x300.png 300w, https:\/\/www.thinksai.com\/latam\/wp-content\/uploads\/sites\/9\/2021\/12\/paper-plane-icon-white-150x150.png 150w, https:\/\/www.thinksai.com\/latam\/wp-content\/uploads\/sites\/9\/2021\/12\/paper-plane-icon-white-12x12.png 12w, https:\/\/www.thinksai.com\/latam\/wp-content\/uploads\/sites\/9\/2021\/12\/paper-plane-icon-white-200x200.png 200w\" sizes=\"(max-width: 32px) 100vw, 32px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-white-color has-css-opacity has-white-background-color has-background\"\/>\n\n\n\n<h6 class=\"has-text-align-center has-white-color has-text-color has-large-font-size wp-block-heading\" id=\"documents\">Documents<\/h6>\n\n\n\n<p class=\"has-text-align-center has-white-color has-text-color has-medium-font-size\" style=\"line-height:1\">Download the necessary documents.<\/p>\n<\/div><\/div>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>Example Document Title 01<\/td><td class=\"has-text-align-right\" data-align=\"right\"><a href=\"#blank\">Download<\/a><\/td><\/tr><tr><td>Example Document Title 02<\/td><td class=\"has-text-align-right\" data-align=\"right\"><a href=\"#blank\">Download<\/a><\/td><\/tr><tr><td>Example Document Title 03<\/td><td class=\"has-text-align-right\" data-align=\"right\"><a href=\"#blank\">Download<\/a><\/td><\/tr><tr><td>Example Document Title 04<\/td><td class=\"has-text-align-right\" data-align=\"right\"><a href=\"#blank\">Download<\/a><\/td><\/tr><tr><td>Example Document Title 05<\/td><td class=\"has-text-align-right\" data-align=\"right\"><a href=\"#blank\">Download<\/a><\/td><\/tr><tr><td>Example Document Title 06<\/td><td class=\"has-text-align-right\" data-align=\"right\"><a href=\"#blank\">Download<\/a><\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div><\/div><div class=\"wp-block-button obb-modal-button\" style=\"text-align:center\"><a class=\"wp-block-button__link obb-modal-open\" href=\"#obb-modal-box-2\" rel=\"modal:open\" style=\"color:#000;border-radius:3px;border-width:3px;border-style:solid;border-color:#000000\"><span class=\"obb-modal-button-text\">Download Documents<\/span><\/a><\/div><\/div>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-28f84493 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:60%\">\n<p class=\"has-small-font-size\">Copy this block variation using the button, and paste it into your WordPress block editor. The <strong>Organic Blocks<\/strong> plugin is required.<\/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\">\n<div id=\"obb-clipboard-id-2\" class=\"wp-block-obb-clipboard-block organic-block obb-clipboard wp-block-button obb-clipboard-button is-style-outline\" style=\"text-align:right\"><a id=\"obb-clipboard-button-2\" class=\"wp-block-button__link\" data-alert-target=\"obb-clipboard-alert-2\" data-clipboard-text=\"&lt;!-- wp:obb\/modal-block {&quot;id&quot;:2,&quot;styleborderwidth&quot;:3,&quot;stylebordercolor&quot;:&quot;#000000&quot;,&quot;btnshadow&quot;:0,&quot;btnborderwidth&quot;:3,&quot;btnbordercolor&quot;:&quot;#000000&quot;,&quot;buttontextcolor&quot;:&quot;#000&quot;,&quot;className&quot;:&quot;is-style-outline&quot;} --&gt;\n&lt;div class=&quot;wp-block-obb-modal-block organic-block obb-modal is-style-outline&quot;&gt;&lt;div id=&quot;obb-modal-box-2&quot; class=&quot;modal obb-modal-box obb-style-minimal obb-align-center&quot; style=&quot;max-width:720px&quot;&gt;&lt;div class=&quot;obb-modal-content&quot; style=&quot;background-color:#fff;border-width:3px;border-style:solid;border-color:#000000;box-shadow:0 0 12px undefined&quot;&gt;&lt;!-- wp:cover {&quot;url&quot;:&quot;https:\/\/\/wp-content\/uploads\/sites\/9\/2017\/07\/page-05-1.jpg&quot;,&quot;id&quot;:1515,&quot;dimRatio&quot;:40,&quot;minHeight&quot;:280} --&gt;\n&lt;div class=&quot;wp-block-cover&quot; style=&quot;min-height:280px&quot;&gt;&lt;span aria-hidden=&quot;true&quot; class=&quot;wp-block-cover__background has-background-dim-40 has-background-dim&quot;&gt;&lt;\/span&gt;&lt;img class=&quot;wp-block-cover__image-background wp-image-1515&quot; alt=&quot;&quot; src=&quot;https:\/\/\/wp-content\/uploads\/sites\/9\/2017\/07\/page-05-1.jpg&quot; data-object-fit=&quot;cover&quot;\/&gt;&lt;div class=&quot;wp-block-cover__inner-container&quot;&gt;&lt;!-- wp:image {&quot;align&quot;:&quot;center&quot;,&quot;id&quot;:1988,&quot;width&quot;:32,&quot;height&quot;:32,&quot;sizeSlug&quot;:&quot;full&quot;,&quot;linkDestination&quot;:&quot;none&quot;} --&gt;\n&lt;figure class=&quot;wp-block-image aligncenter size-full is-resized&quot;&gt;&lt;img src=&quot;https:\/\/\/wp-content\/uploads\/sites\/9\/2021\/12\/paper-plane-icon-white.png&quot; alt=&quot;&quot; class=&quot;wp-image-1988&quot; width=&quot;32&quot; height=&quot;32&quot;\/&gt;&lt;\/figure&gt;\n&lt;!-- \/wp:image --&gt;\n\n&lt;!-- wp:separator {&quot;opacity&quot;:&quot;css&quot;,&quot;backgroundColor&quot;:&quot;white&quot;} --&gt;\n&lt;hr class=&quot;wp-block-separator has-text-color has-white-color has-css-opacity has-white-background-color has-background&quot;\/&gt;\n&lt;!-- \/wp:separator --&gt;\n\n&lt;!-- wp:heading {&quot;textAlign&quot;:&quot;center&quot;,&quot;level&quot;:6,&quot;placeholder&quot;:&quot;Modal Example&quot;,&quot;textColor&quot;:&quot;white&quot;,&quot;fontSize&quot;:&quot;large&quot;} --&gt;\n&lt;h6 class=&quot;has-text-align-center has-white-color has-text-color has-large-font-size&quot; id=&quot;documents&quot;&gt;Documents&lt;\/h6&gt;\n&lt;!-- \/wp:heading --&gt;\n\n&lt;!-- wp:paragraph {&quot;align&quot;:&quot;center&quot;,&quot;placeholder&quot;:&quot;This is an example subheading.&quot;,&quot;style&quot;:{&quot;typography&quot;:{&quot;lineHeight&quot;:&quot;1&quot;}},&quot;textColor&quot;:&quot;white&quot;,&quot;fontSize&quot;:&quot;medium&quot;} --&gt;\n&lt;p class=&quot;has-text-align-center has-white-color has-text-color has-medium-font-size&quot; style=&quot;line-height:1&quot;&gt;Download the necessary documents.&lt;\/p&gt;\n&lt;!-- \/wp:paragraph --&gt;&lt;\/div&gt;&lt;\/div&gt;\n&lt;!-- \/wp:cover --&gt;\n\n&lt;!-- wp:table --&gt;\n&lt;figure class=&quot;wp-block-table&quot;&gt;&lt;table&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;Example Document Title 01&lt;\/td&gt;&lt;td class=&quot;has-text-align-right&quot; data-align=&quot;right&quot;&gt;&lt;a href=&quot;#blank&quot;&gt;Download&lt;\/a&gt;&lt;\/td&gt;&lt;\/tr&gt;&lt;tr&gt;&lt;td&gt;Example Document Title 02&lt;\/td&gt;&lt;td class=&quot;has-text-align-right&quot; data-align=&quot;right&quot;&gt;&lt;a href=&quot;#blank&quot;&gt;Download&lt;\/a&gt;&lt;\/td&gt;&lt;\/tr&gt;&lt;tr&gt;&lt;td&gt;Example Document Title 03&lt;\/td&gt;&lt;td class=&quot;has-text-align-right&quot; data-align=&quot;right&quot;&gt;&lt;a href=&quot;#blank&quot;&gt;Download&lt;\/a&gt;&lt;\/td&gt;&lt;\/tr&gt;&lt;tr&gt;&lt;td&gt;Example Document Title 04&lt;\/td&gt;&lt;td class=&quot;has-text-align-right&quot; data-align=&quot;right&quot;&gt;&lt;a href=&quot;#blank&quot;&gt;Download&lt;\/a&gt;&lt;\/td&gt;&lt;\/tr&gt;&lt;tr&gt;&lt;td&gt;Example Document Title 05&lt;\/td&gt;&lt;td class=&quot;has-text-align-right&quot; data-align=&quot;right&quot;&gt;&lt;a href=&quot;#blank&quot;&gt;Download&lt;\/a&gt;&lt;\/td&gt;&lt;\/tr&gt;&lt;tr&gt;&lt;td&gt;Example Document Title 06&lt;\/td&gt;&lt;td class=&quot;has-text-align-right&quot; data-align=&quot;right&quot;&gt;&lt;a href=&quot;#blank&quot;&gt;Download&lt;\/a&gt;&lt;\/td&gt;&lt;\/tr&gt;&lt;\/tbody&gt;&lt;\/table&gt;&lt;\/figure&gt;\n&lt;!-- \/wp:table --&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;wp-block-button obb-modal-button&quot; style=&quot;text-align:center&quot;&gt;&lt;a class=&quot;wp-block-button__link obb-modal-open&quot; href=&quot;#obb-modal-box-2&quot; rel=&quot;modal:open&quot; style=&quot;color:#000;border-radius:3px;border-width:3px;border-style:solid;border-color:#000000&quot;&gt;&lt;span class=&quot;obb-modal-button-text&quot;&gt;Download Documents&lt;\/span&gt;&lt;\/a&gt;&lt;\/div&gt;&lt;\/div&gt;\n&lt;!-- \/wp:obb\/modal-block --&gt;\" style=\"border-radius:3px;border-width:2px;border-style:solid;border-color:#ccc\"><span class=\"obb-clipboard-button-text\">Copy Block<\/span><\/a><div id=\"obb-clipboard-alert-2\" class=\"obb-clipboard-alert\">Copied block to clipboard!<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-medium-gray-color has-css-opacity has-medium-gray-background-color has-background is-style-wide\"\/>\n\n\n\n<div style=\"height:80px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<h4 class=\"has-text-align-center wp-block-heading\" id=\"variation-4\">Variation 4<\/h4>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-obb-modal-block organic-block obb-modal\"><div id=\"obb-modal-box-3\" class=\"modal obb-modal-box obb-style-rounded obb-align-center\" style=\"max-width:980px\"><div class=\"obb-modal-content\" style=\"background-color:#fff;box-shadow:0 0 12px undefined\">\n<div class=\"wp-block-cover is-light\" style=\"min-height:280px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-40 has-background-dim\"><\/span><img loading=\"lazy\" decoding=\"async\" width=\"2400\" height=\"1600\" class=\"wp-block-cover__image-background wp-image-1180\" alt=\"\" src=\"https:\/\/\/wp-content\/uploads\/sites\/9\/2021\/11\/stacking-stones-01.jpg\" data-object-fit=\"cover\" srcset=\"https:\/\/www.thinksai.com\/latam\/wp-content\/uploads\/sites\/9\/2021\/11\/stacking-stones-01.jpg 2400w, https:\/\/www.thinksai.com\/latam\/wp-content\/uploads\/sites\/9\/2021\/11\/stacking-stones-01-300x200.jpg 300w, https:\/\/www.thinksai.com\/latam\/wp-content\/uploads\/sites\/9\/2021\/11\/stacking-stones-01-1024x683.jpg 1024w, https:\/\/www.thinksai.com\/latam\/wp-content\/uploads\/sites\/9\/2021\/11\/stacking-stones-01-768x512.jpg 768w, https:\/\/www.thinksai.com\/latam\/wp-content\/uploads\/sites\/9\/2021\/11\/stacking-stones-01-1536x1024.jpg 1536w, https:\/\/www.thinksai.com\/latam\/wp-content\/uploads\/sites\/9\/2021\/11\/stacking-stones-01-2048x1365.jpg 2048w, https:\/\/www.thinksai.com\/latam\/wp-content\/uploads\/sites\/9\/2021\/11\/stacking-stones-01-18x12.jpg 18w, https:\/\/www.thinksai.com\/latam\/wp-content\/uploads\/sites\/9\/2021\/11\/stacking-stones-01-1200x800.jpg 1200w, https:\/\/www.thinksai.com\/latam\/wp-content\/uploads\/sites\/9\/2021\/11\/stacking-stones-01-980x653.jpg 980w\" sizes=\"(max-width: 2400px) 100vw, 2400px\" \/><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<div class=\"wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-28f84493 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:70%\">\n<h6 class=\"has-text-align-left has-white-color has-text-color has-large-font-size wp-block-heading\" id=\"example-modal\">Example Modal<\/h6>\n\n\n\n<p class=\"has-white-color has-text-color has-normal-font-size\">The <strong>Modal Block<\/strong> is extremely customizable. Any other block type may be added within the modal container. Additionally, you can modify the modal width, style, borders, colors, and more. The possibilities are truly endless.<\/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:30%\">\n<div class=\"wp-block-buttons is-content-justification-right is-layout-flex wp-container-core-buttons-is-layout-d445cf74 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-font-size is-style-outline has-small-font-size is-style-outline--2\"><a class=\"wp-block-button__link has-white-color has-text-color wp-element-button\" href=\"#blank\">Example Button<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div><\/div>\n<\/div><\/div><div class=\"obb-modal-button\" style=\"text-align:center\"><a class=\"obb-modal-open\" href=\"#obb-modal-box-3\" rel=\"modal:open\" style=\"box-shadow:0 0 12px undefined\"><span class=\"obb-modal-button-text\">Modal Text Link<\/span><\/a><\/div><\/div>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-28f84493 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:60%\">\n<p class=\"has-small-font-size\">Copy this block variation using the button, and paste it into your WordPress block editor. The <strong>Organic Blocks<\/strong> plugin is required.<\/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\">\n<div id=\"obb-clipboard-id-3\" class=\"wp-block-obb-clipboard-block organic-block obb-clipboard wp-block-button obb-clipboard-button is-style-outline\" style=\"text-align:right\"><a id=\"obb-clipboard-button-3\" class=\"wp-block-button__link\" data-alert-target=\"obb-clipboard-alert-3\" data-clipboard-text=\"&lt;!-- wp:obb\/modal-block {&quot;id&quot;:3,&quot;modalstyle&quot;:&quot;rounded&quot;,&quot;modalwidth&quot;:&quot;980px&quot;,&quot;displaylink&quot;:true} --&gt;\n&lt;div class=&quot;wp-block-obb-modal-block organic-block obb-modal&quot;&gt;&lt;div id=&quot;obb-modal-box-3&quot; class=&quot;modal obb-modal-box obb-style-rounded obb-align-center&quot; style=&quot;max-width:980px&quot;&gt;&lt;div class=&quot;obb-modal-content&quot; style=&quot;background-color:#fff;box-shadow:0 0 12px undefined&quot;&gt;&lt;!-- wp:cover {&quot;url&quot;:&quot;https:\/\/\/wp-content\/uploads\/sites\/9\/2021\/11\/stacking-stones-01.jpg&quot;,&quot;id&quot;:1180,&quot;dimRatio&quot;:40,&quot;minHeight&quot;:280,&quot;minHeightUnit&quot;:&quot;px&quot;,&quot;isDark&quot;:false} --&gt;\n&lt;div class=&quot;wp-block-cover is-light&quot; style=&quot;min-height:280px&quot;&gt;&lt;span aria-hidden=&quot;true&quot; class=&quot;wp-block-cover__background has-background-dim-40 has-background-dim&quot;&gt;&lt;\/span&gt;&lt;img class=&quot;wp-block-cover__image-background wp-image-1180&quot; alt=&quot;&quot; src=&quot;https:\/\/\/wp-content\/uploads\/sites\/9\/2021\/11\/stacking-stones-01.jpg&quot; data-object-fit=&quot;cover&quot;\/&gt;&lt;div class=&quot;wp-block-cover__inner-container&quot;&gt;&lt;!-- wp:columns {&quot;verticalAlignment&quot;:&quot;center&quot;} --&gt;\n&lt;div class=&quot;wp-block-columns are-vertically-aligned-center&quot;&gt;&lt;!-- wp:column {&quot;verticalAlignment&quot;:&quot;center&quot;,&quot;width&quot;:&quot;70%&quot;} --&gt;\n&lt;div class=&quot;wp-block-column is-vertically-aligned-center&quot; style=&quot;flex-basis:70%&quot;&gt;&lt;!-- wp:heading {&quot;textAlign&quot;:&quot;left&quot;,&quot;level&quot;:6,&quot;placeholder&quot;:&quot;Modal Example&quot;,&quot;textColor&quot;:&quot;white&quot;,&quot;fontSize&quot;:&quot;large&quot;} --&gt;\n&lt;h6 class=&quot;has-text-align-left has-white-color has-text-color has-large-font-size&quot; id=&quot;example-modal&quot;&gt;Example Modal&lt;\/h6&gt;\n&lt;!-- \/wp:heading --&gt;\n\n&lt;!-- wp:paragraph {&quot;textColor&quot;:&quot;white&quot;,&quot;fontSize&quot;:&quot;normal&quot;} --&gt;\n&lt;p class=&quot;has-white-color has-text-color has-normal-font-size&quot;&gt;The &lt;strong&gt;Modal Block&lt;\/strong&gt; is extremely customizable. Any other block type may be added within the modal container. Additionally, you can modify the modal width, style, borders, colors, and more. The possibilities are truly endless.&lt;\/p&gt;\n&lt;!-- \/wp:paragraph --&gt;&lt;\/div&gt;\n&lt;!-- \/wp:column --&gt;\n\n&lt;!-- wp:column {&quot;verticalAlignment&quot;:&quot;center&quot;,&quot;width&quot;:&quot;30%&quot;} --&gt;\n&lt;div class=&quot;wp-block-column is-vertically-aligned-center&quot; style=&quot;flex-basis:30%&quot;&gt;&lt;!-- wp:buttons {&quot;layout&quot;:{&quot;type&quot;:&quot;flex&quot;,&quot;justifyContent&quot;:&quot;right&quot;}} --&gt;\n&lt;div class=&quot;wp-block-buttons&quot;&gt;&lt;!-- wp:button {&quot;textColor&quot;:&quot;white&quot;,&quot;className&quot;:&quot;is-style-outline&quot;,&quot;fontSize&quot;:&quot;small&quot;} --&gt;\n&lt;div class=&quot;wp-block-button has-custom-font-size is-style-outline has-small-font-size&quot;&gt;&lt;a class=&quot;wp-block-button__link has-white-color has-text-color wp-element-button&quot; href=&quot;#blank&quot;&gt;Example Button&lt;\/a&gt;&lt;\/div&gt;\n&lt;!-- \/wp:button --&gt;&lt;\/div&gt;\n&lt;!-- \/wp:buttons --&gt;&lt;\/div&gt;\n&lt;!-- \/wp:column --&gt;&lt;\/div&gt;\n&lt;!-- \/wp:columns --&gt;&lt;\/div&gt;&lt;\/div&gt;\n&lt;!-- \/wp:cover --&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;obb-modal-button&quot; style=&quot;text-align:center&quot;&gt;&lt;a class=&quot;obb-modal-open&quot; href=&quot;#obb-modal-box-3&quot; rel=&quot;modal:open&quot; style=&quot;box-shadow:0 0 12px undefined&quot;&gt;&lt;span class=&quot;obb-modal-button-text&quot;&gt;Modal Text Link&lt;\/span&gt;&lt;\/a&gt;&lt;\/div&gt;&lt;\/div&gt;\n&lt;!-- \/wp:obb\/modal-block --&gt;\" style=\"border-radius:3px;border-width:2px;border-style:solid;border-color:#ccc\"><span class=\"obb-clipboard-button-text\">Copy Block<\/span><\/a><div id=\"obb-clipboard-alert-3\" class=\"obb-clipboard-alert\">Copied block to clipboard!<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-medium-gray-color has-css-opacity has-medium-gray-background-color has-background is-style-wide\"\/>\n\n\n\n<div style=\"height:80px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Modal Block Examples The Modal Block reveals custom content within a dismissible popup window. It&#8217;s the perfect tool for displaying conditional content like signup forms, client logins, and data collection fields. Click the example buttons below to view a variety of modal style examples. Multiple block variations are showcased below. Each variation may be copied [&hellip;]<\/p>\n","protected":false},"author":236185298,"featured_media":0,"parent":48,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_eb_attr":"","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-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":"","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-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":"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":""},"mobile":{"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":""}},"footnotes":""},"class_list":["post-2127","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Modal Block - ThinkSAi - LatAm<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.thinksai.com\/latam\/blocks\/organic-blocks\/modal-block\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Modal Block - ThinkSAi - LatAm\" \/>\n<meta property=\"og:description\" content=\"Modal Block Examples The Modal Block reveals custom content within a dismissible popup window. It&#8217;s the perfect tool for displaying conditional content like signup forms, client logins, and data collection fields. Click the example buttons below to view a variety of modal style examples. Multiple block variations are showcased below. Each variation may be copied [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.thinksai.com\/latam\/blocks\/organic-blocks\/modal-block\/\" \/>\n<meta property=\"og:site_name\" content=\"ThinkSAi - LatAm\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-07T19:00:33+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.thinksai.com\\\/latam\\\/blocks\\\/organic-blocks\\\/modal-block\\\/\",\"url\":\"https:\\\/\\\/www.thinksai.com\\\/latam\\\/blocks\\\/organic-blocks\\\/modal-block\\\/\",\"name\":\"Modal Block - ThinkSAi - LatAm\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thinksai.com\\\/latam\\\/#website\"},\"datePublished\":\"2021-12-09T17:01:22+00:00\",\"dateModified\":\"2023-06-07T19:00:33+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.thinksai.com\\\/latam\\\/blocks\\\/organic-blocks\\\/modal-block\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.thinksai.com\\\/latam\\\/blocks\\\/organic-blocks\\\/modal-block\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.thinksai.com\\\/latam\\\/blocks\\\/organic-blocks\\\/modal-block\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/www.thinksai.com\\\/latam\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blocks\",\"item\":\"https:\\\/\\\/www.thinksai.com\\\/latam\\\/blocks\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Organic Blocks\",\"item\":\"https:\\\/\\\/www.thinksai.com\\\/latam\\\/blocks\\\/organic-blocks\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Modal Block\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.thinksai.com\\\/latam\\\/#website\",\"url\":\"https:\\\/\\\/www.thinksai.com\\\/latam\\\/\",\"name\":\"ThinkSAi - LatAm\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.thinksai.com\\\/latam\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.thinksai.com\\\/latam\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.thinksai.com\\\/latam\\\/#organization\",\"name\":\"ThinkSAi - LatAm\",\"url\":\"https:\\\/\\\/www.thinksai.com\\\/latam\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thinksai.com\\\/latam\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.thinksai.com\\\/latam\\\/wp-content\\\/uploads\\\/sites\\\/9\\\/2023\\\/06\\\/SAiPurple_Logo.png\",\"contentUrl\":\"https:\\\/\\\/www.thinksai.com\\\/latam\\\/wp-content\\\/uploads\\\/sites\\\/9\\\/2023\\\/06\\\/SAiPurple_Logo.png\",\"width\":406,\"height\":407,\"caption\":\"ThinkSAi - LatAm\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thinksai.com\\\/latam\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Modal Block - ThinkSAi - LatAm","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.thinksai.com\/latam\/blocks\/organic-blocks\/modal-block\/","og_locale":"en_US","og_type":"article","og_title":"Modal Block - ThinkSAi - LatAm","og_description":"Modal Block Examples The Modal Block reveals custom content within a dismissible popup window. It&#8217;s the perfect tool for displaying conditional content like signup forms, client logins, and data collection fields. Click the example buttons below to view a variety of modal style examples. Multiple block variations are showcased below. Each variation may be copied [&hellip;]","og_url":"https:\/\/www.thinksai.com\/latam\/blocks\/organic-blocks\/modal-block\/","og_site_name":"ThinkSAi - LatAm","article_modified_time":"2023-06-07T19:00:33+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.thinksai.com\/latam\/blocks\/organic-blocks\/modal-block\/","url":"https:\/\/www.thinksai.com\/latam\/blocks\/organic-blocks\/modal-block\/","name":"Modal Block - ThinkSAi - LatAm","isPartOf":{"@id":"https:\/\/www.thinksai.com\/latam\/#website"},"datePublished":"2021-12-09T17:01:22+00:00","dateModified":"2023-06-07T19:00:33+00:00","breadcrumb":{"@id":"https:\/\/www.thinksai.com\/latam\/blocks\/organic-blocks\/modal-block\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.thinksai.com\/latam\/blocks\/organic-blocks\/modal-block\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.thinksai.com\/latam\/blocks\/organic-blocks\/modal-block\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.thinksai.com\/latam\/"},{"@type":"ListItem","position":2,"name":"Blocks","item":"https:\/\/www.thinksai.com\/latam\/blocks\/"},{"@type":"ListItem","position":3,"name":"Organic Blocks","item":"https:\/\/www.thinksai.com\/latam\/blocks\/organic-blocks\/"},{"@type":"ListItem","position":4,"name":"Modal Block"}]},{"@type":"WebSite","@id":"https:\/\/www.thinksai.com\/latam\/#website","url":"https:\/\/www.thinksai.com\/latam\/","name":"ThinkSAi - LatAm","description":"","publisher":{"@id":"https:\/\/www.thinksai.com\/latam\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.thinksai.com\/latam\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.thinksai.com\/latam\/#organization","name":"ThinkSAi - LatAm","url":"https:\/\/www.thinksai.com\/latam\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thinksai.com\/latam\/#\/schema\/logo\/image\/","url":"https:\/\/www.thinksai.com\/latam\/wp-content\/uploads\/sites\/9\/2023\/06\/SAiPurple_Logo.png","contentUrl":"https:\/\/www.thinksai.com\/latam\/wp-content\/uploads\/sites\/9\/2023\/06\/SAiPurple_Logo.png","width":406,"height":407,"caption":"ThinkSAi - LatAm"},"image":{"@id":"https:\/\/www.thinksai.com\/latam\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.thinksai.com\/latam\/wp-json\/wp\/v2\/pages\/2127","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.thinksai.com\/latam\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.thinksai.com\/latam\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.thinksai.com\/latam\/wp-json\/wp\/v2\/users\/236185298"}],"replies":[{"embeddable":true,"href":"https:\/\/www.thinksai.com\/latam\/wp-json\/wp\/v2\/comments?post=2127"}],"version-history":[{"count":0,"href":"https:\/\/www.thinksai.com\/latam\/wp-json\/wp\/v2\/pages\/2127\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.thinksai.com\/latam\/wp-json\/wp\/v2\/pages\/48"}],"wp:attachment":[{"href":"https:\/\/www.thinksai.com\/latam\/wp-json\/wp\/v2\/media?parent=2127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}