Here are a couple of quick tricks for newbies when it comes to downloading and modifying landers. If you’ve ever downloaded someone else’s lander and found out you didn’t get it all, this guide is for you. At the end, I’ll mention a couple of things that have helped me modify landers easily (without using Muse; you can use a text editor OR even use Dreamweaver, without actually having to know anything about Dreamweaver).
How to Find the Stuff that is Missing from Your Ripped Lander
If you have tried ripping landers just by saving them from your browser, you’ve probably noticed some stuff is missing. I don’t just mean images, either. You may miss out on fonts or other things that are integral to the landing page. But there is an easy way to get these.
(No, I don’t mean HTTRACK. Although, I’m told if I would just take a few minutes to put in the right settings, this shouldn’t be a problem. I’m gonna do that…soon. This guide is for others who haven’t gotten around to it, or who just want to rip straight from the browser as much as they can.)
I used this when I was ripping landers just by downloading someone else's lander via my browser. What would happen is that I would use Chrome>More Tools>Save Page As to download the page. Then I would upload the HTML page and its accompanying file folder to my own server. THEN I would check the page and notice that all kinds of important stuff was missing. Then I would get pissed.
Why wasn’t this stuff showing up? After all, I had the “This_Is_The_Name_of_The_Page-Files” folder, and I uploaded it with the actual HTML page. Wasn’t everything supposed to be in that folder?
Well, it’s not. Had I remembered a thing or two about where images are stored on most websites, that would have at least helped. I was an affiliate marketer now, and didn’t need any of my old crap WordPress SEO Article Marketing Bullshit Knowledge—right?
Well…
Anyways, I got smart and ran my page through a couple of speed testers, pretty sure it was https://tools.pingdom.com, and one other, but most of the good ones will work here. Anything that shows you a cascading/” waterfall” view of how long each file takes to load, will be useful here.
Most of them will list the exact files referenced in the HTML and how long it takes each load. These speed testers will ALSO tell you if a file is not found on your page. Like, when the HTML references "bigmoney.jpg" but you don't have that image, most page testers will tell you.
Do that, and you’ll know exactly what you’re missing. You’ll also see exactly where the missing element(s) should go on your own site. For example, your missing images will probably show up in the folder yourawesomesite.com/img. So you’ll know that, instead of finding the image you need and putting it into you “lp1_files” folder, you’ll actually need to put that image into your site’s /img folder (or wherever the speed tester shows you).
But how & where do you find that image?
Just grab the URL of the page you want to rip. Put it in the speed tester. The tester will show you EXACTLY where on the site these files are.
Then just click the link (or enter by hand if you need) of each element/file you need, and there you go! Download that sucker. I have done this for image files, fonts, JavaScript, and other stuff.
(The JavaScript may not always be that easily accessible. This is where HTTRACK or more advanced HTML knowledge comes in handy.)
Make sure you look for any fonts you’re missing, too, since your ripped lander might look funny without them. They are usually stored in a folder separate from the HTML file.
For fonts that aren’t unique-looking, you can replace them with Google fonts, or even have your page direct the browser to use fonts native to the viewer’s device. Chances are that Google fonts are probably already in the browser cache. The difference in load time is probably only milliseconds, but every bit counts when you’re going for speed, especially if your page will have many mobile views.
How Even a Newbie Can Use, Dreamweaver or Even Just Chrome to Modify Your Pages
This one is basic knowledge for a lot of people but certainly not for everybody. It wasn’t for me. So if you already know all of this, please don’t think I’m insulting your intelligence. I’m not entirely stupid (only about 50%) and it took me a minute to figure this out.
Quick-and-dirty way to mod landers:
I like to use Dreamweaver to modify pages. I am by no means a coder and I don't even know a ton of html. But having a reference (W3 School for me) close by helps.
In fact I don't know 1/10th of Dreamweaver's features, and you don’t have to either. But you can easily use it to modify the page’s HTML code and instantly see what the mod looks like. It helps if you use split mode.
You can do something similar in Chrome. I think this works for Firefox, too, but I’m not 100% on that.
In Chrome, you can open a page's html code at the bottom, with the page showing, and make changes. This won't change the page on someone else's server, but it will change what you see in your browser. You can then copy and paste it the code into your own html file. (Or you might download the page first, open it up in Dreamweaver or a text editor, and replace sections of the old code with your new code).
For speed, a lot of people like to use a plain ol’ text editor. I had never really considered doing this outside of some complicated PHP I used to edit (I don’t really know much PHP…just enough to be dangerous and modify some things). But a text editor can be used for “regular” web pages, too.
Sublime Text seems to be the editor of choice around here, and I love it. It will color-code your HTML, which can keep you from getting mixed up. Gedit is another good choice, although I use ST almost exclusively now. They are both much better than Notepad (or whatever Microsoft is calling it these days).
To see the effects, you have to save in the page from the text editor and then reopen or refresh he actual webpage. But it's free and sometimes a little simpler to use. For me, it's best for pages where I already have a good idea what I want to get rid of, replace, and modify. Mostly for non-visual stuff. Visual stuff, Dreamweaver is great for because you can instantly see how your page design changes.
Muse is better for creating a nice page from scratch, if you don't have much design skill and you want it to look slick. Dreamweaver has less bloated code though, which = faster load times. I just wouldn’t use it for creating slick-looking stuff from scratch (at least not at my basic skill level).
There are other ways to go about all of this, but this is my quick-and-dirty method that worked for me as a newbie. It still works for me as a "late noob". Hopefully it will help some of you as well.
Amazing post! Thanks my friend!
(We hadn't noticed it because it was posted in a subforum that didn't allow posting. It just got noticed and moved to this section.)
Amy