MOD - CTA's Hubspot Coded

Title
Title
Name
Code for CTAs
Description
This document describes the steps to create CTAS in code what allows them to be responsive and better for SEO practices.
Creators / Developers
Live Examples
 https://www.walkwithpic.com/blog/foundational-seo-tasks 



HUBSPOT

Go to : Marketing > Lead Capture > CTAs

Click "CREATE CTA" Button



This Window will open:

    Change the button style to ⟶ Link (No Style)
    Click on ⟶ Advanced > Source Code

Copy the following code on the "Edit source code" window

    Change the text for the title, you should use <br> for line breaks
    Change the button text
    Change the ALT Text
    Paste the link to the image (should be already uploaded on the file manager)Remember to use .webp files and image no bigger than 600x400px


The code

<div class="blog__cta">
<div class="blog__cta--col1">
<h2>TITLE SHOULD <br> GO HERE</h2>
<div class="button button--stroke--white">BUTTON TEXT</div>
</div>
<div class="blog__cta--col2"><img alt="ALT TEXT" src="LINK TO FILE"></div>
</div>


On the next window:

    Add an internal name for the CTA
    Select the type of URL
    Choose the page/blog or add the link if external
    Select a campaign (If you don't know it, you should ask to the AM)


CSS that should be added to the sites using this type of CTA


.blog__cta {
	background-color: var(--color-primary);
	padding: 0px;
	color: white;
	display: flex;
	flex-direction: row;
	container-type: inline-size;
}

.blog__cta--col1 {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 30px !important;
	width: 100%;
}

.blog__cta h2 {
	color: white;
	margin-top: 0em;
	margin-bottom: 0.5em;
	line-height: 1.2;
	text-align: left;
}

.blog__cta .button {
	margin-bottom: 0em;
	background-color: var(--color-primary);
	border: 1px solid #fff;
	width: fit-content;
}

.blog__cta .button:hover {
	background-color: var(--color-primary-variant);
	border-color: #fff;
}

.blog__cta img {
	height: 100% !important;
	object-fit: cover;
	max-width: 400px !important;
	width: 400px;
}

@container (max-width: 800px) {
	.blog__cta img {
		width: 300px;
	}
}

/* Mobile 768px*/
@media (max-width: 768px) {
	.blog__cta {
		flex-direction: column-reverse;
		padding: 30px;
	}
	.blog__cta h2 {
		font-size: 40px;
	}
	.blog__cta img {
		width: 100% !important;
		max-width: 100% !important;
		object-fit: cover;
		height: 300px !important;
	}
	.blog__cta--col1 {
		align-items: center;
	}
	.blog__cta .button {
		margin-bottom: 1em;
	}
}


PIC Site CTA

Desk
Mobile
CTA Code
<div class="blog__cta">
<div class="blog__cta--col1">
<h3>Hiring for your Marketing Department?</h3>
<h2>USE THESE MUST-ASK QUESTIONS FOR MUST-HAVE MARKETING ROLES</h2>
<div class="button">GET IT NOW</div>
</div>
<div class="blog__cta--col2"><img alt="MUST-ASK QUESTIONS FOR MUST-HAVE MARKETING ROLES" src="https://www.walkwithpic.com/hubfs/CTAs/must-ask-cta-image.webp"></div>
</div>

CSS Code
.blog__cta {
	background-color: #dadada;
	padding: 0px;
	color: #000;
	display: flex;
	flex-direction: row;
	min-height: 270px;
	height: auto;
	container-type: inline-size;
}
a.cta_button:has(.blog__cta) {
	text-decoration: none;
}

.blog__cta--col1 {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 30px !important;
	width: 100%;
}
.blog__cta h2 {
	color: #000;
	margin-top: 0em;
	margin-bottom: 0.5em;
	line-height: 1.2;
	text-align: left;
	max-width: 500px;
	font-size: 35px;
	font-weight: 700;
}

.blog__cta h3 {
	color: #000;
	font-size: 26px;
	font-weight: 400;
	margin-top: 0em;
	margin-bottom: 0.5em;
	line-height: 1.2;
	text-align: left;
}

.blog__cta .button {
	background: linear-gradient(90deg, #e94490, #f18a62);
	border: 0 solid #fff;
	margin-bottom: 0;
	width: fit-content;
	padding: 15px 30px;
	border-radius: 30px;
	font-size: 20px;
	font-weight: 600;
}

.blog__cta .button:hover {
	background: linear-gradient(90deg, #f18a62, #e94490);
	border: 0px solid #fff;
}

.blog__cta img {
	height: 100%;
	width: 300px;
}

@container (max-width: 800px) {
	.blog__cta img {
		width: 300px;
	}
}

/* Mobile 768px*/
@media (max-width: 768px) {
	.blog__cta {
		flex-direction: column-reverse;
		padding: 30px;
	}
	.blog__cta h2 {
		text-align: center;
		font-size: 30px;
		margin: auto;
		padding-bottom: 25px;
	}
	.blog__cta h3 {
		margin-top: 25px;
		text-align: center;
		font-size: 22px;
	}
	.blog__cta img {
		display: none;
	}
	.blog__cta--col1 {
		align-items: center;
	}
	.blog__cta .button {
		margin-bottom: 1em;
	}
}