Landing page anatomy (headline, CTA, proof) in Digital Marketing - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a clear headline to the landing page.

Digital Marketing

<h1>[1]</h1>

Drag options to blanks, or click blank then click option'

AClick Here Now

BWelcome to Our Service

CBuy Now

DContact Us

Attempts:

3 left

💡 Hint

Common Mistakes

Using a call-to-action (CTA) phrase as the headline.

Leaving the headline vague or unclear.

The headline should clearly state what the page is about to grab attention immediately.

2fill in blank

medium

Complete the code to add a strong call-to-action (CTA) button.

Digital Marketing

<button>[1]</button>

Drag options to blanks, or click blank then click option'

ALearn More

BOur Service

CWelcome

DSign Up Now

Attempts:

3 left

💡 Hint

Common Mistakes

Using vague phrases like 'Welcome' or 'Our Service' as CTA.

Not making the CTA stand out as a button.

The CTA button should encourage visitors to take the desired action clearly and directly.

3fill in blank

hard

Fix the error in the proof section by completing the testimonial text.

Digital Marketing

<blockquote>[1]</blockquote>

Drag options to blanks, or click blank then click option'

AClick here to buy

BWelcome to our site

C"This product changed my life!"

DSign up now

Attempts:

3 left

💡 Hint

Common Mistakes

Using CTA phrases instead of testimonials.

Leaving the proof section empty or irrelevant.

The proof section uses testimonials to build trust by showing real user experiences.

4fill in blank

hard

Fill both blanks to create a landing page section with headline and CTA.

Digital Marketing

<section>
  <h2>[1]</h2>
  <button>[2]</button>
</section>

Drag options to blanks, or click blank then click option'

AGet Started Today

BWelcome

CJoin Now

DLearn More

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing greeting words with action phrases.

Using vague CTAs that don't tell what happens next.

The headline invites action and the button clearly tells what to do next.

5fill in blank

hard

Fill all three blanks to build a landing page snippet with headline, CTA, and proof.

Digital Marketing

<article>
  <h1>[1]</h1>
  <button>[2]</button>
  <p>[3]</p>
</article>

Drag options to blanks, or click blank then click option'

AStart Your Free Trial

BSign Up

C"I love this service! Highly recommend."

DWelcome

Attempts:

3 left

💡 Hint

Common Mistakes

Using greetings instead of action phrases.

Leaving proof empty or using non-testimonial text.

This snippet shows a clear headline, a direct CTA, and a testimonial to build trust.

Practice

1. What is the main purpose of the headline on a landing page?

easy

A. To provide customer testimonials

B. To list all product features in detail

C. To grab attention and explain the main benefit

D. To display the company logo

Solution

1. Step 1: Understand the role of a headline

   The headline is designed to catch the visitor's eye and quickly communicate the main benefit of the offer.

2. Step 2: Compare with other elements

   Other elements like testimonials provide proof, and logos build brand identity, but the headline focuses on attention and benefit.

3. Final Answer:

   To grab attention and explain the main benefit -> Option C

4. Quick Check:

   Headline = Grab attention + main benefit [OK]

Hint: Headline = attention + benefit, not details or proof [OK]

Common Mistakes:

• Confusing headline with proof or testimonials
• Thinking headline lists all features
• Assuming headline is just a logo

2. Which of the following is the correct function of a CTA (Call To Action) on a landing page?

easy

A. To tell visitors exactly what action to take next

B. To explain the product's history

C. To show customer reviews

D. To display the company's contact information

Solution

1. Step 1: Define CTA purpose

   The CTA is a clear instruction that tells visitors what to do next, like "Buy Now" or "Sign Up".

2. Step 2: Eliminate other options

   Product history, reviews, and contact info serve different purposes and are not CTAs.

3. Final Answer:

   To tell visitors exactly what action to take next -> Option A

4. Quick Check:

   CTA = Clear next action [OK]

Hint: CTA = clear next step, not info or history [OK]

Common Mistakes:

• Confusing CTA with testimonials or contact info
• Thinking CTA explains product background
• Ignoring the action-oriented nature of CTA

3. Consider a landing page with these elements: a headline saying "Lose Weight Fast!", a button labeled "Get Started", and a section showing customer testimonials. Which element represents proof?

medium

A. The headline "Lose Weight Fast!"

B. The customer testimonials section

C. The page background image

D. The button labeled "Get Started"

Solution

1. Step 1: Identify proof element

   Proof builds trust by showing others have had positive experiences, which is done by testimonials.

2. Step 2: Differentiate other elements

   The headline grabs attention, the button is the CTA, and background image is decorative.

3. Final Answer:

   The customer testimonials section -> Option B

4. Quick Check:

   Proof = Testimonials [OK]

Hint: Proof = testimonials or reviews, not headline or buttons [OK]

Common Mistakes:

• Choosing headline or button as proof
• Ignoring testimonials as trust builders
• Confusing decorative elements with proof

4. A landing page has a headline, a CTA button, and a proof section. The CTA button text says "Learn More" but the goal is to get visitors to sign up immediately. What is the main issue here?

medium

A. The CTA text does not clearly tell visitors to sign up

B. The proof section is missing images

C. The headline is too long

D. The page background color is distracting

Solution

1. Step 1: Analyze CTA text relevance

   The CTA should clearly tell visitors what action to take; "Learn More" is vague and does not push for immediate sign-up.

2. Step 2: Check other elements

   Headline length, proof images, or background color are not the main problem related to the CTA's effectiveness.

3. Final Answer:

   The CTA text does not clearly tell visitors to sign up -> Option A

4. Quick Check:

   CTA clarity = Clear sign-up action [OK]

Hint: CTA must clearly state the desired action, not vague phrases [OK]

Common Mistakes:

• Blaming headline or proof instead of CTA text
• Ignoring the importance of clear CTA wording
• Focusing on unrelated design issues

5. You want to improve a landing page that has a strong headline and CTA but low conversions. Which proof element would best help increase trust and encourage action?

hard

A. Add a detailed product description

B. Add more navigation links to other pages

C. Use a brighter background color

D. Include customer testimonials with photos

Solution

1. Step 1: Identify what builds trust

   Proof elements like customer testimonials with photos show real experiences, which builds trust and encourages conversions.

2. Step 2: Evaluate other options

   Product descriptions inform but don't build trust as strongly; colors and navigation links can distract or reduce focus.

3. Final Answer:

   Include customer testimonials with photos -> Option D

4. Quick Check:

   Proof = Testimonials + photos increase trust [OK]

Hint: Proof with real testimonials boosts trust and conversions [OK]

Common Mistakes:

• Adding navigation links that distract visitors
• Changing colors instead of adding proof
• Confusing product info with trust-building proof