logo that links to homepage
Inquire

MiNI TRAINING👩‍🏫

Create your opt-in page with Mailerlite

Bonus: Template with instructions

  • Estimated duration: 40 mins

Are you ready to take your email marketing to the next level? Great news! In this bonus section, I have an awesome recipe to share with you. I’ll show you how to create a stunning lead magnet page on Mailerlite that not only looks fantastic, but is also super easy to replicate. With just a few simple steps, you’ll have a lead magnet page that’s not only pretty, but also optimized to capture leads and grow your email list. So let’s get started! 

P.S The detailed steps are located below the video with timestamps for easy navigation.

🎬 Video Tutorial 

1. Prep Work (0:28 – 1:52)

  1. Log in to your Mailerlite account and go to your Dashboard.
  2. From the left navigation menu bar, click on “Sites” to access the Sites page.
  3. Click on “CREATE SITE” to create a new site.
  4. Give your site a name and select “Landing Page” as the page type.
  5. Choose which subscriber group you want to add the page to. This is an important step in automating your workflows, especially if you have multiple groups and automations.
  6. Once you’ve chosen your settings, select “Start from Scratch” as the template for your page. 
  7. Remove all the blocks from the Standard Template so you have a pure White Canvas.

2. Create the HERO section (1:52 – 3:42)

  1. Open  HTML EDITOR: https://htmledit.squarefree.com/ on a different tab, it will be used for the upcoming session.
  2. Copy the code below and paste it into your HTML editor.
				
					<div style="background-image: url('https://launchandelevate.com/wp-content/uploads/2023/02/IMG_5802.jpg'); background-size: cover; background-position: center center; height: 500px; display: flex; justify-content: center; align-items: center;">
  <div style="background-color: white; border: 4px solid #F7F8F9; width: 90%; max-width: 800px; height: 80%; max-height: 500px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 30px;">
    <h2 style="font-family:Inter; font-size: 40px; text-align: center;">Ready to start list building?</h2>
    <hr style="border-top: 4px solid #F83C91; width: 100px; margin: 20px 0;">
    <p style="font-family:Inter; font-size: 19px; line-height:40px; text-align: center;"> Build Your Email List and Create an Opt-In Landing Page for Free on Mailerlite - No Technical Skills Required!</p>

  </div>
</div>

  • background-image: url('https://launchandelevate.com/wp-content/uploads/2023/02/IMG_5802.jpg'): This is the URL of the background image you want to use. You can replace “https://launchandelevate.com/wp-content/uploads/2023/02/IMG_5802.jpg” with the URL of your desired image. You can use an image from your computer or an image from the web.

  • height: 500px: This sets the height of the entire div. Replace “500px” with your desired height (e.g. “400px”).

  • background-color: white: This sets the background color of the inner div(box). Replace “white” with your desired color.

  • border: 4px solid #F7F8F9: This sets the border size, style, and color of the inner div. Replace “4px solid #F7F8F9” with your desired values (e.g. “2px dotted black”).

  • max-width: 800px: This sets the maximum width of the inner div. Replace “800px” with your desired maximum width (e.g. “600px”).

  • max-height: 500px: This sets the maximum height of the inner div. Replace “500px” with your desired maximum height (e.g. “400px”).

  • padding: 30px: This sets the padding of the inner div. Replace “30px” with your desired padding (e.g. “20px”).

  • font-family:Inter: This sets the font family of the text. Replace “Inter” with your desired font family (e.g. “Arial”).

  • font-size: 40px: This sets the font size of the text. Replace “40px” or “19px” with your desired font size.

  • <h2>Ready to start list building?</h2>: This is the header text that will appear in the h2 tag. Replace “Ready to start list building?” with your desired header text.

  • <hr style="border-top: 4px solid #F83C91; width: 100px; margin: 20px 0;">: This is the horizontal rule that appears below the header. Replace the size, style, and color values (“4px solid #F83C91”) with your desired values.

  • `<p>Build Your Email List and

3. Once you are satisfied with the styling, go back to Mailerlite, create a new “code” into your landing page and paste the formatted html code. 

3. Main Copy (3:42 – 4:40)

Go Back to your Page, Click on the plus button and add “2 columns. Add text into one of the columns and and an image to the other column. In the settings of this block, you can modify things like the background color, the font family, etc. 

4. The Benefits Section (4:40 – 6:54)

  1.  Open your HTML Editor, and paste this code:
				
					<div style="font-family:Inter; background-color: #FFF6F7; padding-top:30px;">
<h2 style="font-family:Inter; padding-top: 20px; font-size: 40px;  text-align: center;">With our step-by-step guidance, you'll learn <br>the technical skills needed to: </h2>
<br>
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; padding-right:10%; padding-left:10%;">
  <div style="background-color: white; width:100%; height: auto; border-radius: 10px; border: 2px solid #ffcfd4; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 20px; padding: 15px;">
    <span style="background-color: #F83C91; color: white; font-size: 30px; border-radius: 50%; width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; margin-bottom: 10px;">1</span>
    <p style="font-family:Inter; color: black; font-size: 25px; text-align: center; overflow-wrap: break-word;">Build your email list for free</p>
    <p style="font-family:Inter; color: black; font-size: 20px; text-align: center; overflow-wrap: break-word;">Our training is perfect for beginners in email marketing who don't have the budget for expensive marketing tools.</p>
  </div>
  <div style="background-color: white; width:100%; height: auto; border-radius: 10px; border: 2px solid #ffcfd4; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 20px; padding: 15px;">
    <span style="background-color: #F83C91; color: white; font-size: 30px; border-radius: 50%; width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; margin-bottom: 10px;">2</span>
    <p style="font-family:Inter; color: black; font-size: 25px; text-align: center; overflow-wrap: break-word;">Design an opt-in page:</p>
    <p style="font-family:Inter; color: black; font-size: 20px; text-align: center; overflow-wrap: break-word;">No technical skills needed. Follow our step-by-step guidance and use our free templates to create an attractive landing page.</p>
  </div>
  <div style="background-color: white; width:100%; height: auto; border-radius: 10px; border: 2px solid #ffcfd4; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 20px; padding: 15px;">
    <span style="background-color: #F83C91; color: white; font-size: 30px; border-radius: 50%; width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; margin-bottom: 10px;">3</span>
    <p style=" color: black; font-size: 25px; text-align: center; overflow-wrap: break-word;">Automate your workflow:</p>
    <p style="font-family:Inter; color: black; font-size: 20px; text-align: center; overflow-wrap: break-word;">Save time and energy with our email automation tools. Create targeted campaigns and schedule them in advance.</p>
  </div>
</div>
  • font-family: This sets the font family for the entire section. Replace “Inter” with your desired font family.
  • background-color: This sets the background color for the entire section. Replace “#FFF6F7” with your desired color.
  • padding-top: This sets the top padding for the entire section. Replace “30px” with your desired padding size.
  • h2: This is the header text that will appear in the h2 tag. Replace “With our step-by-step guidance, you’ll learn the technical skills needed to:” with your desired header text.
  • background-color: white; – replace the box color with the color of your preference
  • span: This is the circle number that appears before each step. Replace the number in the circle and the color (“#F83C91”) with your desired values.
  • p: This is the body text that will appear in the p tag. Replace the text in each step with your desired text.

2.  Once you are satisfied with the styling, go back to Mailerlite, create a new “code” into your landing page and paste the formatted html code. 

5. The Testimonials Section (6:54 – 7:17)

  1.  Add a new block and select “Testimonial with star ratings”
  2. Modify the block, replace text and add images If needed.

6. Create a Sign Up Form (7:17 – 8:54)

  1.  Add a new block and select “Sign up Form” 
  2. In the content block,  DISPLAY ✅Include media (image or video) ✅ Include text
  3. Go to Form – Fields and add your desired fields. e.g. I like to also keep track of my subscriber’s names and add the consent form
  4. Go to Settings and style your form. 

6. Create Anchors (8:54 – 10:27)

Anchors in Mailerlite are a way to link to a specific section of the page to a button. To use anchors, you need to first to identify a section of your landing page that you want to link to, and then create an Anchor for that section. You then need to give it a name, and go back to your buttons at the very top of the page and replace the link so it connects to the anchor.   When the subscriber clicks on the link at te top of the page, they will be taken directly to the anchored section.

7. Publish your page

  1. Preview the landing page to make sure it looks the way you want it to.
  2. Click on “Publish” in the upper right corner.
  3. Choose a URL for your landing page (you can use your own domain or a Mailerlite subdomain).
  4. Click on “Publish” again to make your landing page live.

Great job! We are getting there

You have completed creating your lead magnet page. You have done an excellent job so far. Now, it’s time to move on to the next step and set up the automations. Are you ready to continue?

Go to Module 3
logo that links to homepage