Designing Graphic Webpages For WSO

10 replies
  • WEB DESIGN
  • |
I did a serch here, and what I found did not answer my questions. (Oh why do I have soooo many questions?) :p

I am about to launch a WSO, and have created the sales page in Photoshop.

Photoshop is not a problem. I've worked with it in a Photo-Graphics business for some 16 or 17 years now.

I've downloaded several WSO sales pages others have created in Photoshop, so I can look at the structure. They all look as though the were created and saved as one long .png file, and then cropped and saved individually to form a sequence of shorter .png images.

It looks like the .png images are placed in a long table, one after another.

Then I found this here in the Web design thread... "Code your WSO sales page, then split it up into screenshots to post. If you take a look at other WSOs you'll see that's how they do it. "

What then, just dump the .png screen shots into the thread? How then do I add a payment link? Don't I need to make a table? Or do I use a shorter graphic across the salespage, and link that graphic?

Hmm. The WSO graphic web pages I have downloaded are made of pieces much larger than screenshots. Each section (image) of the page can be 3,000 to 5,000 pixels long. Right now, without yet adding the testimonials or payment links, mine is 720 pixels x 7,000 pixels plus. I can break it up into any length .png files.

Where there is a "Buy Now" button, or some other link to payment, that link item is a smaller image placed inside a table. (Or inside something.) Another small .png is used as the background image of the table, so the look of the table area is consistent with the look of the rest of the sales page. It done the same way you would create a graphic border around a minisite.

Questions...

How do I put this into the WSO thread?

Do I create an html sales page with the images in Dreamweaver? To make screenshots of this would be silly. I already have a long .png I can break into segments.

Do I put the images at one of my hosting accounts, and link to them in the html I put in the WSO thread? But wait... I don't believe html is permitted in the WSO thread. With the WF's WYSIWYG editor I can link to an image I store elsewhere. Is that where the individual .png files are put?

I'm confused, but then that is easy to do.

So once I have the .png files, and get an order button code from jvzoo or warrior-plus, (or even PayPal for that matter), how do I insert all this together in the WSO thread?

Thanks

:-Don
#designing #graphic #webpages #wso
  • Profile picture of the author KristianI
    <div>image 1</div>
    <div>image 2</div>
    <div>image 3</div>
    <div><a href="buy-link">BUY NOW Image</a></div>
    <div>image 4</div>

    There is a test forum here, so you can test your code before going live. But make sure your buy button is not active in the test forum.
    {{ DiscussionBoard.errors[6619170].message }}
  • Profile picture of the author spesialis
    No, you can't use HTML, this is vBulletin.

    Go to photobucket, register and upload your images there.

    Under each image, there's embed code like this [IMG] [/IMG]

    You know what, just send me the image file, I'll post it on test forum, you can copy paste the code to your sales thread later.

    I've helped half dozens warriors create WSO sales thread for free, yours is the easiest because it's just image.

    PM me
    {{ DiscussionBoard.errors[6619876].message }}
  • Profile picture of the author Don Schenk
    Thanks for your offer Fanny.

    I will PM, yet I do want to understand this so I can do it myself. I've been building websites in Dreamweaver for about 5 years, know just enough html to be dangerous, and find where to drop in code when I need to.

    On one of the WSO I kooked at, there is a payment link midway down the page, and another near the bottom.

    The image is a jpeg is as wide as the page, and it looks to be about 400px tall. In the center of this apparent image, is a clickable link to jvzoo. That clickable image is on top of the jpeg!

    So I right click on the surrounding area and do a "save as," to capture the surounding jpeg. I open it in Photoshop, and I see it is as wide as the WF page, but...

    ...it is only 50px tall, not the 400px as it appears on the sales page. It is there just to create borders that match the rest of the sales page.

    I usually do that by creating a table, and making the short image (sometimes only a few pixels tall) be the "background" image of a table.

    I haven't a clue how he is doing that. The only links that show up in his WSO are the 2 links he put in for payment through jvzoo.

    Thanks.

    :-Don
    {{ DiscussionBoard.errors[6620381].message }}
  • Profile picture of the author Jordi
    I'll attempt to answer these here without handing out your WSO to anyone

    You first save the WSO graphic piece you've created through PS, save it as a PNG/JPG.

    Now you have the original as back up, you then cut up the pieces into 4 or 5 different sections with the crop tool. The reason being is that WF cannot handle one big file, if you do upload it on the thread it will re-size it thus getting yourself a small size image. You want to cut it up and post it in order so you can get big pictures for each section.

    After that you save each slice image individually.

    Create an account on photobucket.com and upload the image files.

    After it's done uploading, you save and continue and you should see the 4 codes that you can use for each of your images. You want the [IMG][/IMG] one which is the last one which is the IMG code.

    Click on it, photobucket will just copy the link for you.

    Come to WF and create a new thread in the TEST FORUM

    Paste each picture in the IMG code in order from top to bottom inside the box.

    Post it and bam.

    As for the buttons you can cut up the button as an individual piece and then do the same process but when you paste the IMG code into the box, you then highlight the IMG code and hyperlink it with your paypal order link.

    I've never done buttons with WF or JVZoo before so don't know the process.
    {{ DiscussionBoard.errors[6620498].message }}
  • Profile picture of the author Don Schenk
    Thanks Jordi,

    I suspect jvzoo and warrior-plus work like PayPal does, giving us the code. Hmm. More will be revealed.

    I can stick the png pieces at one of my hosting accounts, and I believe I can just use the "insert image" icon in the WF thread editor to place the images into the thread.

    I am just not sure how to place the "code" from zoo or PayPal into the image. I know I can hyperlink any of the individual .png files, but have no idea what to do with PayPal or other payment system's code.

    Thanks.

    :-Don
    {{ DiscussionBoard.errors[6620676].message }}
    • Profile picture of the author Jordi
      Originally Posted by Don Schenk View Post

      I am just not sure how to place the "code" from zoo or PayPal into the image. I know I can hyperlink any of the individual .png files, but have no idea what to do with PayPal or other payment system's code.
      What do you mean by the payment's code? Paypal you just create any service and I believe they give you a link for the button, you then copy the link and hyperlink it with the cut up image of your button.

      Jordi
      {{ DiscussionBoard.errors[6620830].message }}
      • Profile picture of the author Don Schenk
        Originally Posted by Jordi View Post

        What do you mean by the payment's code? Paypal you just create any service and I believe they give you a link for the button, you then copy the link and hyperlink it with the cut up image of your button.

        Jordi
        Oh heavens, I've been thinking of the multiple lines of code PayPal gives that gets embedded into the HTML of a site.

        I forget PayPal also gives a short link that can be inserted into an email.

        I just set up a test page with odd-ball section of a large .png image, and made to of the image slices link out... one to a test site I have, and the other to PayPal.

        Thank you Jordi, that will work. Now, I am assuming jvzoo and/or warrior plus also give a short link too, the way PayPal does.

        I still can't figure out how to have an image used for the background and put the payment link in the center without having the background image also be a link out to payment.

        I will PM to you the URL of someone who is doing it at the WSO forum.

        Thanks

        :-Don
        {{ DiscussionBoard.errors[6621074].message }}
  • Profile picture of the author spesialis
    I still can't figure out how to have an image used for the background and put the payment link in the center without having the background image also be a link out to payment.

    Warrior plus will give you a code, remember that you need to center it
    I never used JVzoo, but I assume you can save your button there, and they will give you a code to embed.

    First time using Warrior plus you'll be confused (I know I was), you need to "link" your WSO thread inside Warrior plus control panel.

    let me know if you need help by that point.
    {{ DiscussionBoard.errors[6622976].message }}
  • Profile picture of the author Evocess
    Hi! If you need some WSO sales page we can help you create and launch it.
    {{ DiscussionBoard.errors[6624163].message }}

Trending Topics