Need To Change Something In A Lander? Don't Know HTML? Here Are Your Answers (11)

Need to fix up/change a lander template that you've acquired, but don't know HTML?

In the past we've said "just learn HTML". And that's still a good plan when you have a few hours to spare - Codeacademy's tutorials on HTML and CSS are great..

But when you're starting affiliate marketing, the amount you need to learn is overwhelming, and anything you can do to simplify the learning curve is gold dust.

That's why this post exists.

It'll get you up and running fast with the most basic tasks you might want to complete when changing a lander - no code knowledge required.

You should also check out Vortex's guide to fixing up ripped landers for tasks more specific to that job.



I want to...

Before you jump in, read Things You Need To Know Before You Start. Then go to:

• Change links to my tracking link
• Change text on the page
• Change an image
• Change colors
• Change font sizes
• Make the page mobile-responsive
• Move an element like a CTA
  

<p><b>This is an example</b></p>

I Want To... Change Links

Links are always an "a" tag around some text or another tag.

The simplest way to find a link and replace it is to load the page up in your web browser, right-click on the link, and choose "Copy Link Address" on Chrome or "Copy Link Location in Firefox.

Then just open the page in your text editor, paste the thing you just copied into the Find function, and hit Find. You'll probably find something like this:



Replace the bit marked as "change this to change the web destination" with your own tracking link. Then hit save, and load up the page in your web browser.

Click on the link, and check that it registers in your tracker!

(As mentioned, you can also change the CTA text by changing the bit of text that's between the two pointy-bracketed sections.)

I want to ... Change text on the lander

This is really easy. Just search for the text in the web page in Visual Studio Code or whatever text editor you're using.

When you find the text, replace it with the text you want to use, and save.

Then load it up in a web browser to check it hasn't broken the layout of the page: sometimes if you replace text with longer text it may cause problems. The easiest way to fix this - and good affiliate practice anyway - is to make your text shorter!

If you can't find the text on the page, the chances are that it's in an image. Load the lander up in your Web browser, then right-click on the text - if one of the options on the right-click menu is "view image", it's an image. See "I Want To... Replace An Image", below.

I want to... Change an image

This is pretty easy too! Open the lander in a web browser, right-click on the image, and choose "View Image".

Then, from the address bar, copy the filename - only the filename, not the full address - of the image. In your HTML editor, search for that filename.



Now you'll need your new image. It should be the same size as the image you're replacing - or else the layout of the page may break in a hilarious but unhelpful way.

Save it into the folder that holds the HTML for your lander. It's easiest to just save it into the main folder, but if you want to be fancy you can create a folder called "images" and stick it in there. (MAKE SURE that the folder is named with all lower case, particularly if you're on Windows.)

Now replace the highlighted bit with either:

• /image_filename if you saved it in the main folder
• /images/image_filename if you saved it in an "images" folder.
  

I want to... Change colors used in the page

Changing colors can be pretty tricky - you'll have to dive into the Cascading Style Sheets (CSS) used in the page. We won't cover that here.

But fortunately there's a neat hack that you can use which will work most of the time.

Firstly, determine the Web code for the color you want to use. You can do that using the color picker in Photoshop:



Now, find the section of HTML you want to change the color for. To do that, load up the page in your Web browser, right click on the area where you want to change the color, then select "inspect element" in Firefox or "Inspect" in Chrome.

You'll see a big pane of HTML open up, with a bit of it highlighted.

Find that highlighted bit in the HTML of the page in your text editor. (This can be a bit of a hunting job - use the find tool intelligently to make it quicker.)

Now, find the outermost tag that was highlighted. At the end of that tag, just before the closing >, add a bit of additional text. Don't remove anything, just add this text in.

If you want to change the font color, add:

style="color: YOURCOLOR !important"

style="background-color: YOURCOLOR !important"

I want to... Change font sizes

Font sizes are usually set in the Cascading Style Sheets for the document.

To find those, look in the downloaded files for the landing page for any files with a file extension of ".css".

Search in that file or those files for "font-size: ". That's the command that sets font size for part of the document.

If you want to change the font sizes for headers, you're looking for that close to "h1", "h2", or "h3" (usually). If you want to change the overall font size, you're looking for it close to "body" or "p".

Make the number that's set after "font-size" larger to make the fonts larger, and smaller to make them smaller! Don't mess with whatever's after the number, and make sure to keep the spacing exactly as it was before you changed it.

Save, reload in your web browser, and see if it's changed appropriately.

If you want to just change the font size for one thing (like a CTA), open the page up in your Web browser, and right-click on the thing you want to change. Then, select "inspect element" in Firefox or "Inspect" in Chrome.

You'll see a big pane of HTML open up, with a bit of it highlighted.

Find that highlighted bit in the HTML of the page in your text editor. (This can be a bit of a hunting job - use the find tool intelligently to make it quicker.)

Now, find the outermost tag that was highlighted. At the end of that tag, just before the closing >, add a bit of additional text. Don't remove anything, just add this text in, with YOURFONTSIZE replaced by the number you think will work well. (This might take a bit of trial and error.)

style="font-size: YOURFONTSIZErem !important"

I want to... Make the page mobile-responsive

This is probably not a job that you can easily do: making a page responsive is usually a job for a coder.

However, there are a couple of quick hacks you can try to improve things a bit.

Firstly, at the top of the page, just below

<html>

<meta name=viewport content="width=device-width, initial-scale=1">

font-size: 24pt;

font-size: 3vw;

I want to... move an element on the page

This is really easy but might require some trial and error.

First, find the element. If it's a piece of text, just search for the text. If it's an image, see "I want to change an image" for details on how to find it in the HTML.

Next, cut not only the element, but also the tags immediately around it. This is where the trial and error comes in.

If you want to move a CTA, for example, it'll probably be wrapped in an a tag, and maybe a button tag too.

For example, here's the CTA from STM's homepage:

<a href="http://stmforum.com/join/">join now</a>

<a href="linkylinky"><img src="myimg.jpg"></a>

Reserved for future sections

Reserved for future sections 2

Simple, practical, didactic and easy.

You can´t ask for more.