Duplicate and customize an AIOP Rock Funnel share code page.
What This Training Is About
This training is being presented for you as a RocktheBizOps Team member, so that from now on, you will have the *option (and know-how) to duplicate (copy) most Rock Funnel share code pages as your own. Once you have properly duplicated a page and have it set-up within your own AIOP Splash Builder... you will be able to change the page background image (or colors)... able to delete or add individual images or graphics included... edit the text copy, font size/color, etc...
Not only will you be able to customize the page more to your own personal creative tastes... but all of the pre-written *Funnel emails that are included with the specific share code (campaign) will remain linked to the AIOP Response opt-in form of the page as well.
The following video shows you how-to duplicate and save an AIOP share code page and then how-to simply (easily) change the page background. Below the video are written instructions as well as some additional and more advanced editing options.
Watch This Video For Reference
The Best Way To Start
- As you were shown in the video above, you will want to login to your AIOP back office and then access both AIOP Response (autoresponder) and AIOP Splash Builder.
- Also, you will want to have either a back ground image already saved or to open/visit Pexels.com or some other free to use image gallery that will allow you to 'save' and use images without any copyright restrictions.
- It's also worth your time to browse the background images available within your AIOP Splash Builder itself. ***Keep in mind... you also have the option to simply select to use a solid color background (no image) and you are able to edit to any solid color background. You can access additional how-to tutorials by selecting the 'tutorials' option from inside of AIOP Splash Builder main page.
Note: The best way to get started here is to follow the video (Above) step-by-step... pause the video at each significant step... etc... until you have the page duplicated, background design updated to what you like and ready to promote as-is. ALWAYS be sure to 'test' YOUR new page links... be sure the page looks ok... and most importantly... ALWAYS double check to verify that the opt-in button (and opt-in form!) are working properly.
Watch the video above and follow step-by-step.
Pause video and complete each individual step.
- Also, it's worth mentioning, that to duplicate an AIOP share code Funnel page as easily as this example... requires that the page being copied has been designed using the advanced user 'HTML' page option (AIOP only) and requires that you duplicate (copy/*code) using only the advanced user 'HTML' page option as well. So, for example... attempting to duplicate an old school AIOP page with the opt-in form on the side, etc... can become way more of a headache than it's worth. Which is why we'll practice it 'this' way.
Additional Editing Options
- Editing any of the actual page text (*not button text) can be done as easily as making the changes using the basic page editor controls without having to enter the HTML source code view. SEE BELOW for both a 'Before and After' example.
Simple Text Edit - Before
Simple Text Edit - After
Very Important Note: Whenever you are making any changes to design in either the basic editor or when using the HTML source editor, you MUST click *Update settings to 'save' changes... or all changes will be lost.
Adding or Changing Images
Next up... is how to add/change individual images within the text area itself. In this same page design, there are actually *3 images included - 1.) the 'how simple' text image up top and then - 2.) the 'team logo' image above the call to action button and 3.) small 'rockthebizops logo' below the button.
Here is the quick and easy solution that I am personally using...
Watch This Video For Reference
- For the training example, I am going to walk you through the steps of changing the 'how simple...' image at the top of the share code page, to the 'top secret...' image saved onto the blogger blog.
- This will serve as a good example because the 'top secret..' is too large as-is and will also need to be re-sized in order to fit (and hopefully look) ok on the page... without getting all wonky looking.
Again, here are the original images included on the page...
- The first step is to remove the current image. You will be able to do this using the basic editor by simply 'deleting' the image. SEE BELOW
- Next, you will go to your new blogger blog. For this example, I'll go directly to rockinteamblog.blogspot.com in the search bar (new window) and then open the actual blog post. SEE BELOW
- You will hover over the image you want and then 'right click' and select the copy image address option. The image address is the url (*link)...
- Inside of the AIOP basic editor, you will click on the picture icon located in the editor control bar (top center).
- The 'insert/edit image' box will open. (see on right). SEE BELOW
- The only information you need to enter (and then to save) is marked with the arrows and I'll explain from top to bottom...
>>> Arrow 1. is where you will 'paste' the image url you copy/saved.
>>> Arrow 2. is where you will 'name' the image *name is your choice.
>>> Arrow 3. is where you can 'edit' the image size (if needed)
>>> Arrow 4. will 'insert' (save) image when you are done.
Note: once you paste the image url into the editor box, the dimensions of the image will auto-fill into the form and then you can manually adjust the dimensions *height/width in the image editor.
- You will not be able to see how well the image 'fits' until AFTER you click to 'insert image' AND AFTER you click to 'update settings' in the main editor.
- If the image needs re-sizing AFTER you 'update'... you DO NOT need to delete and start over. You can simply 'highlight' over the image in the main editor and then 'click' to open image editor control box.
Special Note: Always remember to select 'update' or 'save' after each edit.
SEE BELOW
- - - - - - - - - - - - - - -
It is very important to understand that attempting any edits to the CTA button (autoresponder/form code) is a *risk that you can very easily disable the function completely. When that happens, it's too late. So, before attempting even the simplest of edits that I am about to show you... PLEASE... make a 2nd duplicate/copy of any page you are editing (as-is)... and test/test/test often!
Editing The CTA Button Text
In an attempt to play-it-safe, I will only be showing you how to edit the button 'text' and the main button 'color'. Note: any edits to CTA button can only be made using the HTML source editor! You will not be able to change text or color in the basic editor and any attempt to do so will immediately disable the button functions permanently. SEE BELOW
What you see above is >Click Here For Step 1< and what I will change it to (by simply typing in) will be >Join The Revolution!<. Also, you notice that the text always begins and ends with > and <. Be sure to stay between the > and < and with no extra spaces and remember to click 'update' from inside of the HTML editor and then ALSO to click 'update settings' in the main editor so your changes will be saved. SEE BELOW
Changing the button color is also pretty easy, but it can be a little more difficult to find where to make the change in the code. And... the colors in the code are #'s not... red, yellow, blue. For example... colors will appear something like #aaa00111. SEE BELOW
What you will change will be the color '#'.
An easy way to choose a color # is to use the main background color settings option on the splash builder settings page. SEE BELOW
Once you have the color you want, you can simply copy/paste the new color # into the HTML and always remember to click 'update' before exiting the HTML editor and then to click 'update settings' on the main splash builder page. SEE BELOW
and this is how the share code page looks to end the training...
Ready To Start Building Your List?
Comments
Post a Comment