Profile Picture
Julian Galluzzo

PostPilot CTA Section

A contrasting blue CTA section from the PostPilot website.
Copy component
{"content":[{"id":"xlhalw","name":"section","parent":0,"children":["wgkcrj","jhkocg"],"settings":{"_cssGlobalClasses":["nweqpe","gvycbe"],"_position":"relative","_justifyContent":"center"},"label":"Sky Section"},{"id":"wgkcrj","name":"container","parent":"xlhalw","children":["vwzifg"],"settings":{"_cssGlobalClasses":["dccpwx"]},"label":"Sky Container"},{"id":"vwzifg","name":"div","parent":"wgkcrj","children":["qtaybd","dctfos"],"settings":{"_cssGlobalClasses":["ibjysu"],"_alignItemsGrid":"flex-end"},"label":"Grid 2 Col"},{"id":"qtaybd","name":"div","parent":"vwzifg","children":["bbeqhp","syxjaq","jxsbbl","xcxwbd"],"settings":{"_cssGlobalClasses":[],"_padding":{"bottom":"125","top":"125"},"_position":"relative","_zIndex":"1","_width:mobile_landscape":"100%","_padding:mobile_landscape":{"bottom":"0"}}},{"id":"bbeqhp","name":"div","parent":"qtaybd","children":["rzwtfi","urqlkx","tdomwi"],"settings":{"_cssGlobalClasses":["dzvijm"],"_margin":{"bottom":"30","left":"auto","right":"auto"}},"label":"Rating"},{"id":"rzwtfi","name":"svg","parent":"bbeqhp","children":[],"settings":{"signature":"08325a2439d2c8fd7398a5e158c89641","user_id":1,"time":1737369926,"file":{"id":131,"filename":"shopify_logo_whitebg.svg","url":"https://postpilot.local/wp-content/uploads/2025/01/shopify_logo_whitebg.svg"},"_height":"24px","_margin":{"right":"10"}},"themeStyles":[]},{"id":"urqlkx","name":"div","parent":"bbeqhp","children":["inyubp","ghpqlk","acpblq","qgppys","jdbmms"],"settings":{"_cssGlobalClasses":["uymsvy"]}},{"id":"inyubp","name":"icon","parent":"urqlkx","children":[],"settings":{"icon":{"library":"ionicons","icon":"ion-ios-star"},"_cssGlobalClasses":["vacymq"]},"themeStyles":[],"label":"Star"},{"id":"ghpqlk","name":"icon","parent":"urqlkx","children":[],"settings":{"icon":{"library":"ionicons","icon":"ion-ios-star"},"_cssGlobalClasses":["vacymq"]},"themeStyles":[],"label":"Star"},{"id":"acpblq","name":"icon","parent":"urqlkx","children":[],"settings":{"icon":{"library":"ionicons","icon":"ion-ios-star"},"_cssGlobalClasses":["vacymq"]},"themeStyles":[],"label":"Star"},{"id":"qgppys","name":"icon","parent":"urqlkx","children":[],"settings":{"icon":{"library":"ionicons","icon":"ion-ios-star"},"_cssGlobalClasses":["vacymq"]},"themeStyles":[],"label":"Star"},{"id":"jdbmms","name":"icon","parent":"urqlkx","children":[],"settings":{"icon":{"library":"ionicons","icon":"ion-ios-star"},"_cssGlobalClasses":["vacymq"]},"themeStyles":[],"label":"Star"},{"id":"tdomwi","name":"text-basic","parent":"bbeqhp","children":[],"settings":{"text":"5.0","_cssGlobalClasses":["htwgzp"],"_typography":{"color":{"hex":"#2e2f34","id":"rzwavb","name":"Color #4"}}}},{"id":"syxjaq","name":"heading","parent":"qtaybd","children":[],"settings":{"text":"Try PostPilotRisk-Free","_cssGlobalClasses":["nqfpij"],"_widthMax":"750px","_margin":{"top":"25"},"_typography":{"font-size":"65"},"_typography:mobile_portrait":{"font-size":"50"}},"label":"H2"},{"id":"jxsbbl","name":"text-basic","parent":"qtaybd","children":[],"settings":{"text":"No contracts or minimums. Incredible results.","_cssGlobalClasses":["ztnvmt"],"_margin":{"bottom":"30","top":"15"}}},{"id":"xcxwbd","name":"text-link","parent":"qtaybd","children":[],"settings":{"text":"Try it risk-free","_cssGlobalClasses":["kzgewl"]},"themeStyles":[]},{"id":"dctfos","name":"image","parent":"vwzifg","children":[],"settings":{"image":{"id":165,"filename":"hand.avif","size":"large","full":"https://postpilot.local/wp-content/uploads/2025/01/hand.avif","url":"https://postpilot.local/wp-content/uploads/2025/01/hand-1024x1002.avif"},"_position":"relative","_zIndex":"1"}},{"id":"jhkocg","name":"svg","parent":"xlhalw","children":[],"settings":{"file":{"id":13,"filename":"66f14b25a707363026887052_PostPilot-logo-mark.svg","url":"http://postpilot.local/wp-content/uploads/2025/01/66f14b25a707363026887052_PostPilot-logo-mark.svg"},"_cssGlobalClasses":["zzcdtp"]},"themeStyles":[]}],"source":"bricksCopiedElements","sourceUrl":"https://postpilot.local","version":"1.11.1.1","globalClasses":[{"id":"nweqpe","name":"sky-section","settings":{"_background":{"color":{"hex":"#bbdeff","id":"tigemx","name":"Color #7"}}},"modified":1737382996,"user_id":1},{"id":"gvycbe","name":"section-padding-side","settings":{"_padding":{"left":"5%","right":"5%"}},"modified":1737219324,"user_id":1},{"id":"dccpwx","name":"container-width","settings":{"_width":"100%","_widthMax":"1300px"}},{"id":"ibjysu","name":"grid-2-col","settings":{"_width":"100%","_display":"grid","_gridTemplateColumns":"1fr 1fr","_gridGap":"125","_alignItemsGrid":"center","_display:mobile_landscape":"flex","_direction:mobile_landscape":"column","_columnGap:mobile_landscape":"75","_rowGap:mobile_landscape":"75"},"modified":1737373612,"user_id":1},{"id":"dzvijm","name":"rating","settings":{"_display":"flex","_justifyContent":"flex-start","_alignItems":"center"},"modified":1737370371,"user_id":1},{"id":"uymsvy","name":"rating__star-wrap","settings":{"_display":"flex","_justifyContent":"center","_columnGap":"2px"}},{"id":"vacymq","name":"rating__star--dark","settings":{"iconSize":"20","iconColor":{"hex":"#2e2f34","id":"rzwavb","name":"Color #4"}}},{"id":"htwgzp","name":"rating__number","settings":{"_typography":{"font-weight":"600","color":{"hex":"#ffffff","id":"edddcc","name":"Color #2"}},"_margin":{"left":"10"}},"modified":1737370371,"user_id":1},{"id":"nqfpij","name":"h2","settings":{"_typography":{"color":{"hex":"#2e2f34","id":"rzwavb","name":"Color #4"},"font-family":"Merriweather","font-size":"50","font-weight":"400"},"_typography:mobile_portrait":{"font-size":"30"}},"modified":1737219727,"user_id":1},{"id":"ztnvmt","name":"paragraph","settings":{"_typography":{"font-size":"18"}},"modified":1737382996,"user_id":1},{"id":"kzgewl","name":"button--blue","settings":{"_typography":{"color":{"hex":"#ffffff","id":"edddcc","name":"Color #2"},"font-size":"18px","text-transform":"uppercase","font-weight":"600"},"_background":{"color":{"hex":"#6ab1f3","id":"vqhiae","name":"Color #1"}},"_padding":{"left":"25","right":"25","bottom":"15","top":"15"},"_cssTransition":"all 200ms ease","_background:hover":{"color":{"hex":"#208bee"}}}},{"id":"zzcdtp","name":"hero__svg","settings":{"_pointerEvents":"none","_opacity":"0.15","_position":"absolute","_right":"-3%","_zIndex":"0","_height":"75%","_top:mobile_portrait":"auto","_right:mobile_portrait":"-3%","_bottom:mobile_portrait":"10%","_height:mobile_portrait":"100%","_display:mobile_landscape":"none"}}],"globalElements":[]}

Our notes on this component

This CTA section contains a contrasting background behind a heading, paragraph, and a button. Along with that, it contains an SVG with the PostPilot logo as a faint background detail.

The design from this component was taken from the PostPilot website – so the images are more than likely all owned by them!

Similar components

Profile Picture
Julian Galluzzo

Blue CTA With Background Grid

Clean CTA with a blue background so it's hard to miss - exactly what you want out of a CTA!
View now
Copy now
{"content":[{"id":"mcxvwe","name":"section","parent":0,"children":["caizip"],"settings":{},"label":"CTA"},{"id":"caizip","name":"container","parent":"mcxvwe","children":["akwgbc"],"settings":{"_cssGlobalClasses":["pnwqzk"],"_cssCustom":"#brxe-caizip {\n background-color: #2962ff;\n background-image: radial-gradient(circle farthest-corner at 50% 50%, #2962ffe0, #2962ff), url(https://cdn.prod.website-files.com/5bbfaf3252489b4c484ba9b9/670cf0f9f0b7e71f431857f7_cross.svg);\n background-position: 0 0, 0 0;\n background-size: auto, 20px;\n}"},"label":"Container"},{"id":"akwgbc","name":"block","parent":"caizip","children":["itefhy","pyopxo","luodcf","mbnjde"],"settings":{"_cssGlobalClasses":["fufayd"]}},{"id":"itefhy","name":"div","parent":"akwgbc","children":["kmkmtj","bhulqx"],"settings":{"_cssGlobalClasses":["qioxst","uwtrkg"]},"label":"Sectitle"},{"id":"kmkmtj","name":"icon","parent":"itefhy","children":[],"settings":{"icon":{"library":"ionicons","icon":"ion-ios-play"},"_cssGlobalClasses":["jldrhu"]},"label":"Icon","themeStyles":[]},{"id":"bhulqx","name":"text-basic","parent":"itefhy","children":[],"settings":{"text":"Start Building"},"label":"Text"},{"id":"pyopxo","name":"heading","parent":"akwgbc","children":[],"settings":{"text":"Get started for free","tag":"h2","_margin":{"bottom":"10"},"_cssGlobalClasses":["acss_import_h2"]}},{"id":"luodcf","name":"text-basic","parent":"akwgbc","children":[],"settings":{"text":"Memberstack is 100% free until you're ready to launch - so, what are you waiting for? Create your first app and start building today.","_margin":{"bottom":"25"},"_cssGlobalClasses":["acss_import_text--neutral-light"]}},{"id":"mbnjde","name":"button","parent":"akwgbc","children":[],"settings":{"text":"Get started for free","style":"secondary","_cssGlobalClasses":["grgqgk","qgmohn"]}}],"source":"bricksCopiedElements","sourceUrl":"https://memberstack.local","version":"1.12.3","globalClasses":[{"id":"pnwqzk","name":"cta__container","settings":{"_border":{"radius":{"top":"20","right":"20","bottom":"20","left":"20"},"style":"solid","width":{"bottom":"1","top":"1","left":"1","right":"1"},"color":{"raw":"var(--border--base)"}},"_boxShadow":{"values":{"offsetY":"5","blur":"10"},"color":{"id":"acss_import_black-trans-10","name":"black-trans-10","raw":"var(--black-trans-10)"}},"_padding":{"bottom":"75","top":"75","left":"50","right":"50"},"_justifyContent":"center","_alignItems":"center","_typography":{"color":{"id":"acss_import_white","name":"white","raw":"var(--white)"}},"_columnGap":"0","_rowGap":"0"},"modified":1741626622,"user_id":1},{"id":"fufayd","name":"cta__content-wrap","settings":{"_columnGap":"0","_rowGap":"0","_widthMax":"500","_justifyContent":"center","_alignItems":"center","_typography":{"text-align":"center"}}},{"id":"qioxst","name":"sectitle","settings":{"_padding":{"bottom":"5","top":"5","left":"12","right":"12"},"_border":{"style":"solid","width":{"bottom":"1","top":"1","left":"1","right":"1"},"color":{"hex":"#dbdbdb"},"radius":{"top":"6","right":"6","bottom":"6","left":"6"}},"_display":"flex","_justifyContent":"center","_alignItems":"center","_columnGap":"10","_rowGap":"10","_typography":{"font-size":"14","font-weight":"600"},"_boxShadow":{"values":{"offsetY":"5","blur":"10"},"color":{"id":"acss_import_black-trans-10","name":"black-trans-10","raw":"var(--black-trans-10)"}},"_margin":{"bottom":"15"},"_background":{"color":{"id":"acss_import_white","name":"white","raw":"var(--white)"}}}},{"id":"uwtrkg","name":"sectitle--blue","settings":{"_background":{"color":{"id":"acss_import_white-trans-10","name":"white-trans-10","raw":"var(--white-trans-10)"}},"_border":{"color":{"id":"acss_import_white-trans-40","name":"white-trans-40","raw":"var(--white-trans-40)"}},"_typography":{"color":{"id":"acss_import_white-trans-80","name":"white-trans-80","raw":"var(--white-trans-80)"}}}},{"id":"jldrhu","name":"sectitle__icon","settings":{"iconSize":"18"}},{"id":"acss_import_h2","name":"h2","settings":{"_cssCustom":".blue {\n color: #2962ff;\n}","_typography":{"font-weight":"800","font-size":"40"},"_typography:mobile_portrait":{"font-size":"30"}},"category":"acss","_categoryData":{"id":"acss","name":"Automatic.css"}},{"id":"acss_import_text--neutral-light","name":"text--neutral-light","settings":[],"category":"acss","_categoryData":{"id":"acss","name":"Automatic.css"}},{"id":"grgqgk","name":"button","settings":{"_padding":{"bottom":"12","top":"12","left":"22","right":"22"},"_cssCustom":".button {\n box-shadow: \n 0 4px 6px rgba(0, 0, 0, 0.1), /* Outer shadow */\n inset 0 2px 5px rgba(255, 255, 255, 0.3), /* Light inner shadow at the top */\n inset 0 -2px 5px rgba(0, 0, 0, 0.3); /* Dark inner shadow at the bottom */\n}","_background:hover":{"color":{"id":"acss_import_primary-semi-dark","name":"primary-semi-dark","raw":"var(--primary-semi-dark)"}},"_cssTransition":"0.2s","_background":{"color":{"id":"acss_import_primary","name":"primary","raw":"var(--primary)"}},"_typography":{"font-weight":"600","letter-spacing":"-0.5"},"_transform:hover":{"scaleX":"1.05","scaleY":"1.05"}},"modified":1741686006,"user_id":1},{"id":"qgmohn","name":"button--white","settings":{"_background":{"color":{"id":"acss_import_white","name":"white","raw":"var(--white)"}},"_typography":{"color":{"id":"acss_import_black","name":"black","raw":"var(--black)"}},"_background:hover":{"color":{"id":"acss_import_white-trans-90","name":"white-trans-90","raw":"var(--white-trans-90)"}},"_cssCustom":".button--white {\n box-shadow: \n 0 4px 6px rgba(0, 0, 0, 0.1), /* Outer shadow */\n inset 0 2px 5px rgba(255, 255, 255, 0.3), /* Light inner shadow at the top */\n inset 0 -2px 5px rgba(0, 0, 0, 0.1); /* Dark inner shadow at the bottom */\n}","_border":{"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"id":"acss_import_black-trans-10","name":"black-trans-10","raw":"var(--black-trans-10)"}}}}],"globalElements":[]}

Categories

CTAs