TUTORIAL AIM: In this tutorial we will take a quick look at how you build your first opt-in box.
PLEASE NOTE: This is a very quick and basic overview video showing how to pick an overlay template, quickly edit the styling and then how to use the basic publish options. There are more detailed tutorials that cover all the specific options of editing and publishing an opt-in overlay.
In this tutorial, we're going to be building a simple optin overlay using one a template from our Overlay category, which we'll then edit and customise. By the end of this tutorial, you will have a general overview of how the OptimizeLeads tools work and a solid foundation to build from moving forward.
- To begin, let's start off by clicking on the 'Create New Opt-In' link on the top menu bar. Next, scroll through the list of optin designs until you see the optin style called 'Download'. Click the green 'Use This Design' button to make your selection.
- Once clicked, an overlay box will appear, prompting you to select the panel type of the optin box. This allows you to choose how you would like your optin box to be displayed on the page. For this tutorial, we will leave this default to 'Main Panel'. Click the blue 'Create My Optin' button to confirm the selection.
- You will be taken to the main optin box editing window to begin editing and customising. The first thing you will be prompted to do is to select your autoresponder:
PLEASE NOTE: If you have yet to integrate with an email provider, please ensure you do this first by referring to the Integrations section of the tutorials.
- Once your email provider has been selected, you will be given the option to select the email list/form you will have set in your email provider service, assign tags if you have them assigned, assigned forms and whether you would like to add your subscribers to 'GotoWebinar'. This option is mainly used if you would like your visitors to be placed to a webinar service if you're promoting a scheduled webinar.
You can edit these settings by clicking on the
selection on the main editing window.
- Once you've made your selections, click the blue 'Save' button to confirm the changes. You will be taken to the main editing window to begin editing your optin box.
- The white vertical bar on the left of the editing area represents each of the elements you can edit on your optin box. Clicking on them will expand the options for that element to begin making changes. For an extended overview of the settings bar, please refer to the 'Main Settings of the Editor' tutorial.
- Any changes made will display live in the box to get a visual idea of how it will look prior to saving and confirming the changes. Again, you can always go back and make future edits at a later date.
- You can also click on any of the elements you would like to edit by clicking on an element on the optin box itself. This will expand the editing options for that element.
The first thing we're going to begin editing is the percentage bar:
- To edit this, click on the
selection under the 'Content Styling' section. You will be given a range of editing options to change and customise to your liking.
- For this tutorial, we're going to round the corners of the progress bar. To do this, head to the section called 'Border Radius', then click on the slider and scroll to the right until the slider reaches '8px'. This will round the corners of the progress bar.
- Next, we're going to change the colour. Head to the 'Percentage Colour' section and add in the following colour code: #37a7bf
- Click on the text area under 'Percentage Text' and type in the following: 50% Complete - 50% To Go
- Change the 'Text Colour' to the following: #785f5f
The progress bar should now look like this:
- Next, We'll change the main headline of the optin box:
- Click on the
option under the 'Content Styling' options.
- Under the 'Text' area, type in the following headline: DO YOU HAVE THE CODE? DOWNLOAD THE EBOOK NOW!
With the changes made, your optin box should now look like this:
- Lastly, we're going to change the styling of the optin box submit button:
- To do this, head on over to the
section under the 'Content Styling' options.
- Set the 'Background Colour' to: #00c2ff
- Set the 'Border Colour' to: #000000
- Set the 'Border Width' to: 1px
Save the changes. You should now have an optin box that looks like this:
- For your optin box, we're going to want to set a redirection URL or a page that you would like your visitors to be sent to after they've opted into your form. To do this. Head to the option. You will be taken to an area to enter in the page URL of the page you would like to use. Enter in your page URL and save the changes.
- Once you're happy with the changes made to your optin box, click on the
button on the top right of the editing window.
- The 'Publishing Options' overlay box will appear, prompting you to set how you would like your optin box to be displayed. For a further breakdown of this, please refer to the 'Publish Options' tutorial.
- For this example, we're going to change the 'Link Text' of the publishing setting, making sure that the 'Link' option is selected. This will create a text link, which will allow a visitor to click on and display the optin box on their page.
- Type in the following text: CLICK ME TO SEE POPUP
- Finally, we will want to grab the embed code of your optin box so we can paste this in on your page. You will have 3 embed options to select from. For this tutorial, we will select the 'HTML' option. Click on the
button to copy the embed code to the clipboard.
- Head on over to your page (Making sure you're in html view) and paste in the code.
- Save the changes. Your optin box is now live on your page and ready to begin collecting leads.
