creating your first funnel - cloud object storagetutoria… · convertri tutorial – creating your...

Convertri Tutorial – Creating Your First Funnel © Architech Labs 2018

Creating Your First Funnel


TableofContents

Introduction......................................................................................................................3

SetYourPassword.............................................................................................................4

SetUpYourFirstSite.........................................................................................................5

SetUpYourFirstFunnel....................................................................................................7

CreateYourFirstPage.......................................................................................................8

BuildingYourFirstPage...................................................................................................10Step1:AddingAnImage..........................................................................................................10Step2:AddingTheTopAndBottomPanels..............................................................................12Step3:ChangingthePageBackground.....................................................................................14Step4:CreatingTheWhiteBackingPanel................................................................................15Step5:AddingTheText............................................................................................................16Step6:AddingAForm..............................................................................................................20Step7:MovingTheWhitePanel...............................................................................................22Step8:CreatingTheMobileVersion.........................................................................................22Step9:PublishingYourPage....................................................................................................24

CreateYourThankYouPage............................................................................................27

CreateYourPrivacyPolicyPage.......................................................................................28

ConnectPrivacyPolicylink..............................................................................................31

CreateYourList...............................................................................................................33

ConnectYourForm..........................................................................................................35

Congratulations!..............................................................................................................39


Introduction

We figure the easiest way to find out how to build funnels in Convertri is to get your hands dirty. So, this tutorial is designed to help you get a fully working sales funnel up and running as fast as possible.

In this pack, you’ll have everything you need to put together an opt-in funnel in the weight loss niche:

Copy - for a simple two-part funnel: a squeeze page and a thank you page.

Images from Pixabay - probably the best public domain image site.

PDF lead magnet – this is what your prospects will get when they opt in on your page. It’s been produced by our writers in-house, and you’ve got full rights to do anything you want with it.

A Privacy Policy - to cover the legal stuff (please make sure this covers all necessary laws where you are before it goes online).

So while this funnel is meant to be an example, if you want to drive traffic to it and build your own weight loss list - go for it! It’s all yours.

As well as this PDF guide, we’ve also made video tutorials to walk you through the process. Links to the videos are given at the beginning of each section, and you can access all of them from the Convertri Getting Started page.

You should have downloaded your images and copy already from a link in one of our e-mails. But, if you forgot where you put it, it’s available from this page too:

https://gettingstarted.convertri.com/


Set Your Password

When your Convertri account is set up, you’ll get an email with a few tips to help you get the best from the platform:

The Convertri platform is designed for Chrome. You can use other browsers to edit your pages, but it won’t work as well. However, your published pages will look good no matter what browser you’re using. If you don’t have Chrome, you can get it here for free: https://www.google.com/chrome/browser/desktop/

Convertri will create a mobile page for you automatically. But, because we give you a lot of page layout freedom, we can’t guarantee the elements will automatically go exactly where you want them when the mobile page is generated. So, it’s a good idea to spend 5 or 10 minutes adjusting elements on the mobile version before you hit publish, and checking new elements have added properly whenever you edit.

We’re here to help! We’d love to tell you Convertri was 100% bug-free and nothing would ever go wrong - but we’re constantly adding new features and updates as our users suggest them, and a few screws are bound to come loose. So, if you have any problems, please get in touch with us at [email protected]. We’ll do our best to get back to you within one business day.

You can also have a look at our help docs, which you’ll find here:

http://help.convertri.com/

Also in that e-mail, you’ll find a link to set up your Convertri password.

You can use anything you want for your password, as long as it’s over 6 characters.

Make sure it’s something memorable! (it’s easy enough to change later, but who wants the hassle?)

When your password’s set, you’ll be automatically logged in. By default, Convertri will keep you logged in on that browser until you tell it to log out.


Set Up Your First Site

Convertri’s ecosystem consists of sites, funnels and pages.

A site is all pages, funnels and assets on one domain. You’ll start out with one site on a convertri.com subdomain. You can add as many of these as you want.

You can also publish pages to a limited number of your own domains, or to your own hosting using the HTML export or Wordpress plugin features. You can find out about those in our help docs.

But the first thing to do is create your first site.

The first time you log in to your Convertri account, you’ll see a screen like this:

This is where you create your first site on a convertri.com subdomain.

So in the above example, any pages published on that site will go on a URL like https://bethscott.convertri.com/mypage1

A good idea is to use your brand name, or something related to the product you’re selling.

When you’ve got a subdomain you like, hit ‘Save’.

(Don’t worry about it too much – if you can’t think of the perfect name now, you can make more later. Just put something in there that’ll let you get up and running.)


When you have, you’ll see something like this:

All done! Your first Convertri subdomain is up and running.


Set Up Your First Funnel

Within each site, you can have as many funnels as you like.

To set up the first one, click Account, then Domains, then click on your new domain. Click Create New:

A dialog will open. Give your funnel a name (it can be anything you want, and you can always change the name later):

All done! Now, you’ll be able to create your first page.


Create Your First Page

To create the first page in your funnel, click the New Page button in the Funnels section:

This will take you into the Template Selector.

Pick a template that looks good, and find out what it will look like by clicking on the Preview icon:

In this tutorial we’re going to show you how to create a page from scratch, so click the Create a Page from Scratch button, and call the page ‘7 Tips For Slimming Without Starving’.


This will add the page to your funnel, and you’ll see a screen like this:

Click the page card to go to the Page Builder.


Building Your First Page

Here’s a quick intro to the Page Builder:

Let’s build your first page!

You might find it easier to see how some of this is done on video – so we’ve also done video walkthroughs for each step. Links to each video can be found at the beginning of each step in this guide.

Step 1: Adding An Image

First, let’s add the main background image. Click on the Image element to add it to the canvas.

The Media Gallery will appear. Don’t worry - it’s supposed to be empty!

Click on Upload, and navigate to your 7 Tips For Slimming Without Starving - Funnel Pack folder. Select the two images in there, and hit Upload.


Your Media Gallery should now look something like this:

(You might notice these are pretty big files - far bigger than you’d normally want on a web

page. Never fear: Convertri automatically optimises images when you publish.)

Now, click ‘Woman with sky’ and it’ll be added to the canvas.

You can move the image around by dragging it, and resize using the handles on the edge - but we’re going to use a shortcut.


With the image selected, you should also see the Quick Access toobar. Click on Full Width make the image automatically resize to fit the screen.

You can click and drag the image to reposition: Convertri only publishes the portion of the image inside the canvas.

Step 2: Adding The Top And Bottom Panels

Next, we’ll add panels for a defined top and bottom to the page design.

Click or drag the Panel element onto the page:

It’ll come out as a grey block, like this:

Not hugely ideal, so let’s make it a bit more pretty to look at.

With the panel selected, you should see the Elements Properties panel. If not, click to open it:


Here, we want to change the background colour, so click on Background, then click on Background Color to open the color picker (or, you can enter a hex or RGB value):

Now, make the panel full width, and shrink the height so it’s quite narrow (drag the handles).

Then, click and drag the panel so it sits directly underneath the main image. Like so:

Next, we’ll create the top panel.

To save time, we’ll just duplicate the panel we just created. There’s two ways to do this, and they’re both good:

With the panel selected, hold down the ALT key and drag. A copy will appear out of the panel.


With the panel selected, hit Clone in the Quick Access toolbar.

Put the new panel at the top of the canvas, and make it about one-third the height of the bottom one (drag the handles).

Step 3: Changing the Page Background

Optional: you can change the colour of the page background.

Convertri publishes all the way down to your lowest element – but, if someone’s got a big fancy resolution, they may see white at the bottom.

It’s not really a problem – lots of people don’t care about it – but if you don’t want that to happen, hit the Page button in the top toolbar:

There, you can select a page background color. Convertri automatically saves your used colors, so you can make the background match your panels for a seamless look.


Step 4: Creating The White Backing Panel

Now we need to add the page copy.

First, we’ll create the backing panel.

Create another panel, make it white, and set the transparency to 0.8 using the slider on the far right of the colour picker:

This panel will need to be fairly large to hold all the text and the form, but don’t worry about getting it exactly right at the moment. We can adjust the size later.

To make positioning the elements inside easy, center the panel by clicking this icon in the top toolbar when it’s selected:

Then, in the Properties Panel, click on Borders and set the border radius to 20. You can select the box in the top right to change all corners at once.


Step 5: Adding The Text

Now, it’s time to add some text.

Click on the Text element:

Place it inside the white panel toward the top, and center it using the Center Align button to position it right in the middle.

Click inside the text element and type your headline: 7 Top Tips For Slimming Without Starving. (You can copy and paste it straight from the Word document if you prefer.)

You’ll see that when the text element is selected, the Quick Actions toolbar becomes the Text Toolbar. You can toggle it back and forth with this button:


Now highlight your headline. Change the font to Maven Pro using the font dropdown box, change the font size to 28, make it bold, and centre-align the text.

Now add another textbox for your body copy. Place it inside the white panel, a bit below the headline box. You might find the Element Outlines option useful for positioning things properly.

And again, don’t worry too much about positioning precisely – it’s easy to change later when your text is all in.

So now copy and paste in your body copy from your Word document, and change it to Maven Pro 16pt.

Then, change the line height to 1.60. You can do this by clicking More in the Text Toolbar, and opening the Line Height dropdown.


Now your main text is in, you might need to make your panel a little bigger, so feel free to move the elements around until it looks good to you.


Now we just need three more short bits of text.

Add another text box and place it inside your white panel. In this one, type ‘Enter your details below:’. Then, centre-align it, and make it Maven Pro 12pt. Leave a gap below.

Now, clone this text element using the Alt-drag method. Change the text in your new element to: ‘We hate spam! Your details are safe with us.’ Put this new element somewhere near the bottom of your panel.

It should now look a bit like this:

Clone the text element one more time.

Change the text in this new element to ‘Privacy Policy’, and make it white using the font colour picker.

Place this element in the bottom panel, and center align it.


Step 6: Adding A Form

Now we’ll add a form to the page.

To add form elements, click on the Form element button to open the Form Elements tray.

Drag a Text Input field onto the white panel, and adjust the height so it’s a bit shallower

When the text input field is selected, its Properties panel will hold its options.

Click on Input Properties, then change the placeholder text to ‘Enter your best e-mail’, the font to Maven Pro, and the size to 14pt.


Now click on the Form elements tray, and drag a Submit button onto your page.

Using the Button Appearance options in its Properties panel, change the text to ‘Download Now’, the font to Maven Pro, and the font weight to Bold

Then, using the Background properties, change the background colour of the button to rgb (239, 189, 11).


Step 7: Moving The White Panel

Now, you can just move the white panel to where you want it. Select and drag the white panel, and everything inside it will move with it, so you don’t have to worry about repositioning everything.

Try it over to the right, like this:

And you’re pretty much done.

We still need to configure the form so you can collect your customers’ details and connect the Privacy Policy link, but we’ll do that later. For now, let’s look at the mobile version of your page.

Step 8: Creating The Mobile Version

You can see the mobile version of your page by clicking the Mobile View button up the top:

Convertri will try to work out where you want everything on your mobile page based on how everything’s arranged on the desktop version.

Because the editor is completely freeform, Convertri doesn’t have a preset framework to work with, and that means it doesn’t always get things 100% right.


But don’t worry, you can adjust elements in the mobile editor just like you can in the desktop one, so you’re not stuck with what you’re given.

In this case, Convertri’s first attempt probably looks something like this:

Not bad, but we’re going to add a bit of whitespace so you can get a feel for using the mobile editor.

So first, select each element and narrow it slightly. You can use the ‘centre-align’ button on the left-hand toolbar if anything gets out of place. Then, make your white panel slightly narrower and shorter.

In this shot, we’ve switched Element Outlines on so you can see what we did:


And that’s it! All done.

Step 9: Publishing Your Page

Now let’s put the page live and see how it looks.

Click on Save first, then hit Publish:

You’ll be asked to enter a path. This is what will go at the end of your URL.

In this example, we’re publishing on the site bethscott.convertri.com, so if we type in ‘7tipsforslimming’, our page will be published at bethscott.convertri.com/7tipsforslimming.


When you’ve entered your path, click Publish.

Up at the top, near your page name, you’ll see the text ‘not published yet’ change to ‘Published’ and a new button appear:

Click View Page to load the live version of your page in a new tab. (It loaded pretty quick, right?)

You’ve now got a live squeeze page!

For bonus points, go to https://developers.google.com/speed/pagespeed/insights/ and enter your URL into the test box.


This is Google’s own page speed test tool, and will show you how well optimised your page is.

Hit ‘Analyze’ to see what it says about your new Convertri page.

Pretty good, right?

Sometimes you might find it’s a bit lower – adding Google Analytics will make it lose a couple of points, for example. But we’re adding extra optimisations all the time, so soon we should be able to deliver excellent scores for almost any page.


Create Your Thank You Page

Have a go at this one yourself. You won’t need anything you haven’t learned from making the squeeze page – and in fact, since you don’t need to connect a form, it’ll be even easier.

Create the page in the same Weight Loss Funnel as your squeeze page and you’ll be able to link them up in the funnel planner later, if you want.

When you’ve created it, publish it at the path ‘7tipsthankyou’.


Create Your Privacy Policy Page

This is super easy, because we’ve made a general Privacy Policy page for you so you don’t have to worry about sorting it out on your own.

This is a legal document, so we need to make clear:

It’s your responsibility to make sure this covers all the rules and regulations for the territory where your company is founded. This is a very basic policy, and while it should cover your needs for this funnel, we’re not lawyers and we don’t claim to be, so do your due diligence. We’re not taking responsibility or indemnifying you or your business from any consequences of using this policy.

Right, now that’s out of the way:

In the Dashboard, navigate to your funnel’s screen. Then click Import Page:

When the dialog appears, copy this code into the ‘Shared Entry Code’ box:

2730332d-e932-11e6-829d-066a9bd5fb79

Then, enter ‘Privacy Policy’ as the page name. Click Import.


You now have a Privacy Policy page in your funnel!

Next, open your new Privacy Policy page in the Page Builder.

This general policy essentially says:

• You’ll be collecting personal details on this page

• You’ll use cookies and may use third-party services for things like tracking and marketing

• You might use the information you get to send them marketing and transactional messages

• You do your best to keep their data secure

• You’ll let them know if the policy is ever updated


Some sections of the policy need you to edit them to fit your details. These have been marked in red on the template:

Check the mobile version after you’ve made your changes. Depending on how long they were, you may need to make the text box a bit bigger.

When you’ve done that, hit ‘Save and Publish’ and use ‘privacypolicy’ as the path.


Connect Privacy Policy link

Now we’ve got a Privacy Policy, we need to link to it from the squeeze page. Pretty much any source of paid traffic, like Facebook or AdWords, requires that you have a Privacy Policy link on pages you advertise.

So open your squeeze page in the Page Builder.

Highlight the ‘Privacy Policy’ text...

And click the Hyperlink button in the Text Toolbar.

In the dialog, add the link to where you published your Privacy Policy in the Link box, and tick ‘open in new tab’. Then, hit Save.


You’ll see that your ‘Privacy Policy’ text is now underlined to show it’s a link. Publish your page again, and Convertri will update your page.


Create Your List

Now the page is created, let’s sort out the form.

These instructions show you how to create a form and list in Mailchimp. Depending on what autoresponder you use, it might be a bit different.

We’re building up help guides on how to do this in every autoresponder. Check out this page to see if your one’s there:

http://help.convertri.com/

We’re adding more all the time, so if you don’t see your one there, let us know which it is and we’ll add it to the list!

In Mailchimp, here’s what you do:

First of all, log into your Mailchimp account, then click Lists, then Create List, just under your name.

Add the list setup details on the next screen. You’ll need to add your list name, default From email, default From name, and what to say to remind people how they signed up to your list.

Mailchimp will fill in default values based on your account, so you can leave some details as-is. Click Save.

On the next screen, you can import any subscribers you already have.


Next, we need to configure Mailchimp’s sign up form to choose the fields we need. Click Signup Forms, and select General Forms.

For our simple squeeze page, we just need an email - no first name, last name, or any other info, so go ahead and delete these fields.

(This isn’t exactly essential - we only have an email form on our page anyway, so there’s nowhere to put extra information. But it’s good to know for future pages. This is where you’d add the extra fields you might need so that you can map them to your Convertri form elements in the next step.)

Mailchimp will save your form automatically, so when you’re done it’s time to plug it all together.


Connect Your Form

Now to get people on the list, we need to connect your Mailchimp signup form to the form element you put in your Convertri page.

So, back in Convertri, click on Account at the top of your Dashboard, then click Integrations. Find Mailchimp in the Autoresponders section, and hover over it to click Setup. Then, click Connect Your Account.

This will take you to the Mailchimp login screen. Enter your login credentials, and click Log In.

You should be taken back to Convertri and see a success message.

Next, navigate to your squeeze page and open it up in the Page Builder.

Click on Forms in the top toolbar:

In the Forms dialog, click on Autoresponders, then Mailchimp. Choose the list you just created from the dropdown list.

Now it’s time to map the form inputs to their corresponding fields in Mailchimp.


(This is where, for more complex forms you’d be mapping things like First Name, Last Name, etc.)

For this example we’ve only got one email input on our squeeze page - and now in Mailchimp - and this is a fixed field, so it should map automatically:

Next, you’ll need to configure your post-submission redirect URL. This is the page your prospects will be taken to once they sign up to your list.

Click Post-Submission Redirect on the left-hand menu in the Configure Form dialog, and enter the URL of your thank you page (you can just enter a fake one, or any website like Google or YouTube for now):

Then, click Done.

If everything went through correctly, you’ll see a red check on the Forms button in the top toolbar: this shows there’s a form correctly configured to your page.

Next, click your email signup form element, and click Form Field Settings in its Properties panel. Assign a field type by clicking the dropdown: all available form elements (i.e. all the ones you set up in Mailchimp) will be in bold. Again, we only have one, so choose Email.


What’s happening here is you’re basically telling Mailchimp the text people enter in this box is an email address. With more complex forms, you’ll have to assign other values to different text boxes so Mailchimp - or any other connected service - knows the difference between a first name, last name, favourite color, etc.

Next, check the Required box, and choose to validate the text as an email address. Click Publish to update your changes.

That’s it! Your form is now configured to your squeeze page, and anyone who enters their email in the signup box will be subscribed to your Mailchimp list.

Want to test it? Simply view your published page, and enter your own email address, then hit your Download button. You’ll be taken to the thank you page you configured. In another tab, refresh your Mailchimp list, and you’ll see one subscriber: you.


Congratulations!

You’ve made a simple funnel - so what’s next? Why not...

• Collect leads - this funnel is entirely yours. Simply add the download link for your lead magnet to your thank you page, and send over some traffic!

• Make another funnel - why not try it out with your own idea?

• Play around with forms - add more fields like first name, last name, address, favourite color… it’s up to you. Remember you need to map form values in three locations: your autoresponder signup form, then the Forms dialog in the Page Builder, then the Properties panel of your individual form element.

• Ask a question – we’re here to help! Simply e-mail [email protected] or join the Convertri Clubhouse Facebook group: https://www.facebook.com/groups/convertri/ There’s thousands of other users there, and the company team hangs out there regularly too.

creating your first funnel - cloud object storagetutoria… · convertri tutorial – creating your...

Documents