Landing Page Set-Up

We did NOT design client's Website and we're using one of our generic sites

Here are the generic sites:

https://cleanercarpetsusa.com
https://electricalserviceshq.com/
https://fencingprosusa.com/
https://homeserviceprousa.com/
https://newblindsusa.com
https://paintingprosusa.com/
https://pestcontrolservicesusa.com/
https://tilecleaningusa.com
https://usacomputerrepairpros.com/
https://usawaterrestoration.com

These sites already have CSS. Do not add any CSS.

In the dashboard, go to Pages > Add New

Once in the new page:
- 1. Add page title - use Company Name - Name of Ad Group
- 2. Click on the Pagebuilder tab to switch format
- 3. From drop-down, choose Landing page template
- 4. Publish the page

Select Prebuilt Layout

Now click on Clone Pages

Choose another landing page whose layout you like the best.
- Once the file has uploaded, select Insert > Replace Current in the lower right corner (it will ask if you're sure).

To edit the fields, hover over the widget and select Edit

In the phone field, you need to update the phone number and background-color (if applicable.)

In the Mobile Tap Button field, update the 555-555-5555 with the client's phone number.
Fill in rest of sections with content from client's website if applicable. Add the ad text from your landing page document for relevancy.

<div class="fixed_footer_cta">
<a href="tel:555-555-5555"><div id="call" style="background: #;" class="responsivecta"><img class="icon" src="https://cleanercarpetsusa.com/wp-content/uploads/phone-cta.png" alt="call"/><p>Give us a Call<br></p></div></a>

Change the phone number and add background colors (if applicable) for the call and text buttons
In the Privacy Policy section, highlight the text and link to the privacy policy page.
Now fill in the sections to correspond to the Google Ads and client's company. Certain sections can be filled in with content from their website if allowed.
Add a Title Tag that includes a headline and keyword from the ad (based on ad and ad group)

Custom Body Class

In the Layout Settings section, add lander_fullpage as the Custom Body Class

How to create the pages for the other ad groups:

Go back to pages > add new page.
Copy all steps, except this time clone the page you previously made.
Adjust to be relevant to ad group.
Update links in landing page text document.
Update appropriate ad links.

Old CSS on generic domains (don't use this on new sites)

Dynamik > Custom > CSS

/* landing pages */

.desktop_phone {
border-radius: 40px;
padding: 10px;
font-size: 25px;
text-align: center;
color: #fff;
width: 200px;
display: block;
margin: 5% auto 0;
line-height: 125%;
text-shadow: 1px 1px 2px #333;
-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
-o-box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
}

.fixed_footer_cta {
display: none;
}

.landingpage_pics img {
-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
-o-box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}

.landingpage_pics img:hover {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

Responsive CSS

Dynamik > Design > Responsive > @media query (4th)

/* displays tap buttons */
.fixed_footer_cta {
display: inline !important;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
}
.desktop_phone {
margin: 0 auto !important;
}

/* creates button effect */
.responsivecta {
padding: 10px 0;
color: #fff;
text-align: center;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .4), inset -2px -2px 2px rgba(0, 0, 0, .4);
-webkit-box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .4), inset -2px -2px 2px rgba(0, 0, 0, .4);
box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .4), inset -2px -2px 2px rgba(0, 0, 0, .4);
margin: 0 0 -20px 0;
}

/* tap button CALL*/
#call {
float: left;
width: 50%;
}
#call p {
color: #ffffff !important;
font-size: 20px;
font-weight: 400;
text-shadow: 1px 1px 1px #333;
}

/* tap button TEXT*/
#text {
float: left;
width: 50%;
}
#text p {
color: #ffffff !important;
font-size: 20px;
font-weight: 400;
text-shadow: 1px 1px 1px #333;
}

/* phone & mobile phone icons */
.icon {
float: left;
padding-left: 10px;
width: 20px;
margin-top: -3px;
}

/* adds margin to footer so you can access all info with the buttons */
.footer {
margin: 0 0 50px 0 !important;
}

We did NOT design client's Website and they bought a new domain

If the client bought a new domain for the purpose of ads, send website login information to web designer so we can host it.

Make sure client has bought or is going to buy an SSL for the site.

Ask web designer to set up basic homepage that includes the following:

Logo
"Tap to call" and/or "tap to text" button.
Add other content if desired.

Once the website is set up, start creating your landing pages*:

- *It is recommended to add your CSS first before you publish the page but it's not necessary.

In the dashboard, go to Pages > Add New

Once in the new page:
- 1. Add page title - use Company Name - Name of Ad Group
- 2. Click on the Pagebuilder tab to switch format
- 3. From drop-down, choose Landing page template
- 4. Publish the page

Select Prebuilt Layout

Now click on Import/Export

Find the file in Google Ads (Google Docs) > Landing Page Mock-Ups > new-landing-page-template.json
- Once the file has uploaded, select Insert > Replace Current in the lower right corner (it will ask if you're sure).

To edit the fields, hover over the widget and select Edit

In the phone field, you need to update the phone number and background-color (if applicable.)

In the Mobile Tap Button field, update the 555-555-5555 with the client's phone number.
- NOTE: if web designer already added tap buttons, then delete the "mobile tap button" field.
Fill in the rest of the sections as applicable.

Change the phone number and add background colors (if applicable) for the call and text buttons
In the Privacy Policy section, highlight the text and link to the privacy policy page.
Now fill in the sections to correspond to the Google Ads and client's company. Certain sections can be filled in with content from their website if allowed.
Add a Title Tag that includes a headline and keyword from the ad (based on ad and ad group)

Custom Body Class

In the Layout Settings section, add lander_fullpage as the Custom Body Class

How to create the pages for the other ad groups:

Go back to pages > add new page.
Copy all steps, except this time clone the page you previously made.
Adjust to be relevant to ad group.
Update links in landing page text document.
Update appropriate ad links.

CSS

IF CLIENT DOESN'T HAVE A TEXT NUMBER:

Navigate to: Dynamik > Design > Responsive > @media query (4th)
Apply the Dynamik CSS (found below).
Find this section:
- #call {
  float: left;
  width: 50%;
  }
CHANGE TO
- #call {
  width: 100%;
  }
Delete the 'tap to text' code in the "mobile tap button" back on the landing page.

CSS to add

Dynamik > Custom > CSS

/* landing pages */

.lander_sticky {
position: fixed;
top: 0;
width: 100%;
}

.desktop_phone {
border-radius: 25px;
padding: 10px;
font-size: 25px;
text-align: center;
color: #fff;
width: 200px;
display: block;
margin: -50px 0 0 15%;
line-height: 125%;
text-shadow: 1px 1px 2px #333;
-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
-o-box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .2), inset -2px -2px 2px rgba(0, 0, 0, .2);
-webkit-box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .2), inset -2px -2px 2px rgba(0, 0, 0, .2);
box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .2), inset -2px -2px 2px rgba(0, 0, 0, .2);
}

.fixed_footer_cta {
display: none;
}

/* info for landers with call tracking */
.lander .mainheader {
display: none !important;
}
.lander .calltoaction {
display: none !important;
}

/* full-page lander general */
.lander_header {
padding: 0 15%;
}
.lander_text {
padding: 0 12%;
}
.lander_fullpage h2 {
color: #333 !important;
font-weight: 500 !important;
}
.lander_fullpage h3 {
color: #333 !important;
font-weight: 500 !important;
}
.lander_fullpage {
background-color: #333;
background-image: url(https://bigwestplayground.com/landers/wp-content/uploads/bg2.jpg);
background-repeat: no-repeat;
}
.lander_fullpage #wrap, .lander_fullpage #content .page, .lander_fullpage #content .post, #content .entry, .lander_fullpage #inner, .lander_fullpage #content blockquote{
background: transparent;
}
.lander_fullpage #inner {
max-width: 100% !important;
padding: 0 0 0 0 !important;
margin-right: 0 !important;
margin-left: 0 !important;
}
.full-width-content #content {
width: 100% !important;
}
.full-width-content #content-sidebar-wrap {
width: 100% !important;
}
@media only screen and (max-width: 1140px) and (min-width: 480px)
{#content .override {
padding: 0 !important;
}}

.lander_fullpage #content {
padding: 0 !important;
margin: 100px 0 0 0;
}

.lander_fullpage p {
color: #333 !important;
}
.landercontact {
font-size: 25px;
text-align: center;
line-height: 125%;
color: #000;
margin: 0 0 -30px 0;
}
.landerform {
border-radius: 25px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
background: #fffc;
width: 80%;
display: block;
margin: 0 auto;
padding: 20px 0 0 0;
-moz-box-shadow: inset 2px 2px 2px rgba(115, 115, 115, 0.4), inset -2px -2px 2px rgba(0, 0, 0, .4);
-webkit-box-shadow: inset 2px 2px 2px rgba(115, 115, 115, 0.4), inset -2px -2px 2px rgba(0, 0, 0, .4);
box-shadow: inset 2px 2px 2px rgba(115, 115, 115, 0.4), inset -2px -2px 2px rgba(0, 0, 0, .4);
}
/* navigation links */
.landernav {
padding:7px 0;
}
.landernav a {
color: #e3e3e3 !important;
font-size: 20px;
}
.landernav a:hover {
color: #949494 !important;
font-size: 20px;
}

/* reviews */
.review-stars2 {
float: left;
color: #ed8600;
font-size: 20px;
margin: 12px 8px;
}
.reviews_servicepages {
font-style: italic;
color: #333;
font-size: 18px;
background: #ffffff9e;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
border: 1px #333 solid;
padding: 20px;
border-radius: 25px;
}
.reviewtitle {
font-size: 35px;
color: #fff;
float: left;
font-style: italic;
}

Responsive CSS to add

Dynamik > Design > Responsive > @media query (4th)

.lander_fullpage #content {
margin: 150px 0 0 0 !important;
}

/* removes header and nav */
#header, .responsive-primary-menu-container, #nav {
display:none;
}

/* tap buttons */
.fixed_footer_cta {
display: inline !important;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
}
.responsivecta {
padding: 10px 0;
color: #fff;
text-align: center;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .4), inset -2px -2px 2px rgba(0, 0, 0, .4);
-webkit-box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .4), inset -2px -2px 2px rgba(0, 0, 0, .4);
box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .4), inset -2px -2px 2px rgba(0, 0, 0, .4);
margin: 0 0 -20px 0;
}
#call {
float: left;
width: 50%;
}
#call p {
color: #ffffff !important;
font-size: 20px;
font-weight: 400;
text-shadow: 1px 1px 1px #333;
}
#text {
float: left;
width: 50%;
}
#text p {
color: #ffffff !important;
font-size: 20px;
font-weight: 400;
text-shadow: 1px 1px 1px #333;
}
.icon {
float: left;
padding-left: 10px;
width: 20px;
margin-top: -3px;
}
.footer {
margin: 0 0 50px 0 !important;
}

/* landing page general */
.desktop_phone {
margin: 0 auto !important;
}
.reviewtitle {
font-size: 30px !important;
text-align: center !important;
}
.review-stars2 {
margin: 0 auto !important;
display: table !important;
float: none !important;
}

We designed client's Website - Has tap buttons

In the dashboard, go to Pages > Add New

Once in the new page:
- 1. Add page title - Landing Page - name of Ad Group
- 2. Click on the Pagebuilder tab to switch format
- 3. Check all three boxes to de-index the page
- 4. Publish the page

Select Prebuilt Layout

Now click on Import/Export

Find the file in Google Ads > Landing Page Mock-Ups > new-landing-page-template.json
- Once the file has uploaded, select Insert > Replace Current in the lower right corner (it will ask if you're sure).

Now add in the client's logo, information, and images to correspond to the Google Ads.
Add a Title Tag that includes a headline and keyword from the ad (based on ad and ad group)

How to create the pages for the other ad groups:

Go back to pages > add new page.
Copy all steps, except this time clone the page you previously made.
Adjust to be relevant to ad group.
Update links in landing page text document.
Update appropriate ad links.

CSS

IF USING A TRACKING NUMBER:

You will need to add CSS to remove the header, mobile header, fixed footer, CTAs, and tap buttons on the rest of the site so they don't display the company number.

IF CLIENT DOESN'T HAVE A TEXT NUMBER:

Navigate to: Dynamik > Design > Responsive > @media query (4th)
Apply the Dynamik CSS (found below).
Find this section:
- #call {
  float: left;
  width: 50%;
  }
CHANGE TO
- #call {
  width: 100%;
  }
Delete the 'tap to text' code in the "mobile tap button" back on the landing page.

CSS to add

Dynamik > Custom > CSS

/* landing pages */

.lander_sticky {
position: fixed;
top: 0;
width: 100%;
}

.fix_footer_cta {
display: none;
}

/* info for landers with call tracking */
.lander .mainheader {
display: none !important;
}
.lander .calltoaction {
display: none !important;
}

.lander_fullpage #content {
padding: 0 !important;
margin: 100px 0 0 0;
}

Responsive CSS to add

Dynamik > Design > Responsive > @media query (4th)

.lander_fullpage #content {
margin: 150px 0 0 0 !important;
}

/* removes header and nav */
#header, .responsive-primary-menu-container, #nav {
display:none;
}

/* tap buttons */
.fix_footer_cta {
display: inline !important;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
}
.responsivecta {
padding: 10px 0;
color: #fff;
text-align: center;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .4), inset -2px -2px 2px rgba(0, 0, 0, .4);
-webkit-box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .4), inset -2px -2px 2px rgba(0, 0, 0, .4);
box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .4), inset -2px -2px 2px rgba(0, 0, 0, .4);
margin: 0 0 -20px 0;
}
#call {
float: left;
width: 50%;
}
#call p {
color: #ffffff !important;
font-size: 20px;
font-weight: 400;
text-shadow: 1px 1px 1px #333;
}
#text {
float: left;
width: 50%;
}
#text p {
color: #ffffff !important;
font-size: 20px;
font-weight: 400;
text-shadow: 1px 1px 1px #333;
}
.icon {
float: left;
padding-left: 10px;
width: 20px;
margin-top: -3px;
}
.footer {
margin: 0 0 50px 0 !important;
}

We designed client's Website - No tap buttons

In the dashboard, go to Pages > Add New

Once in the new page:
- 1. Add page title - "Client's business name - name of Ad Group"
- 2. Click on the Pagebuilder tab to switch format
- 3. Check all three boxes to de-index the page
- 4. Publish the page

Select Prebuilt Layout

Now click on Import/Export

Find the file in Google Ads (Google Docs)> Landing Page Mock-Ups > new-landing-page-template.json
- Once the file has uploaded, select Insert > Replace Current in the lower right corner (it will ask if you're sure).

To start, select the wrench and delete the rows that has the header/desktop phone and privacy policy**:
- **KEEP THESE IF CLIENT HAS TRACKING NUMBER. Insert tracking number into the desktop phone and mobile sections.

Change the phone number and add background colors (if applicable) for the call and text buttons
Now add in the client's logo, information, and images to correspond to the Google Ads. Take content from their site.
Add a Title Tag that includes a headline and keyword from the ad (based on ad and ad group)
Fill in the rest of the sections with applicable business ands Google Ads content.

How to create the pages for the other ad groups:

Go back to pages > add new page.
Copy all steps, except this time clone the page you previously made.
Adjust to be relevant to ad group.
Update links in landing page text document.
Update appropriate ad links.

CSS

IF CLIENT DOESN'T HAVE A TEXT NUMBER:

Navigate to: Dynamik > Design > Responsive > @media query (4th)
Apply the Dynamik CSS (found below).
Find this section:
- #call {
  float: left;
  width: 50%;
  }
CHANGE TO
- #call {
  width: 100%;
  }
Delete the 'tap to text' code in the "mobile tap button" back on the landing page.

CSS to add

Dynamik > Custom > CSS

/* landing pages */

.lander_sticky {
position: fixed;
top: 0;
width: 100%;
}

.fixed_footer_cta {
display: none;
}

/* info for landers with call tracking */
.lander .mainheader {
display: none !important;
}
.lander .calltoaction {
display: none !important;
}

.lander_fullpage #content {
padding: 0 !important;
margin: 100px 0 0 0;
}

Responsive CSS to add

Dynamik > Design > Responsive > @media query (4th)

.lander_fullpage #content {
margin: 150px 0 0 0 !important;
}

/* removes header and nav */
#header, .responsive-primary-menu-container, #nav {
display:none;
}