Help - Search - Members - Calendar
Full Version: Howto: Create Your Own Custom Index/front Page!
World Dating Partners Forum > HTML > HTML tutorials
adultfinderlive
Tutorial on designing your own custom front pages

Hi guys, I recently decided to design my own custom front page for my site, as the standard template ones, didnt seem to be converting very well. My explaining might not be the best, but you get the idea. This is more for advanced users, but ill try explain for everyone.

If you want an example of what can be done, take alook at http://www.adultfinderlive.com, that is my most recent design.

Step 1:

Finding a tool to design your site, can be a daunting task. You need to find something you are comfortable with. I decided to use Adobe Fireworks, as im used to it and i feel its specially tailored for web design. Find a nice font to do your logo in, spend alot of time on design. Make sure you are 100% happy with the site, and you feel its appealing. If you have no web design skill/coding skill make sure you understand the principles of web design, because it will just make your life easier, when you actually coding the page in html. If you have a bit of money check out http://www.psd2html.com/ . They offer the service to cut your Adobe Photoshop template (If you designed it in photoshop), to html form. Very usefull service if you have no html skill of your own. I also highly recommend using CSS tableless designs, as its less HTML, and i think it helps with SEO and detection of keywords, due to less html inbetween your content.


Step 2:


Once the page is in HTML form, make sure the page has META tags, a title and a description. This just helps Search engines select keywords for your site. Also make sure that you have very few images on your site, and whatever can be text should be text. This also helps with keyword detection. (Search engines cant read text off images YET!). WDP does not have support for automatic profile image changing like on the templates, you need to do this MANUALLY, UNLESS you use their generic profile macro, which runs vertical, i havent played around with it too much, so i cant explain exactly how it works. Copy all the profile links from your template, or any other WDP site, (choose members who you think are appealing).

Step 3:


Upload your images to your site. Login to WDP admin panel, click on My Sites -> Yoursite.com (Manage) -> Files Management. Create a new directory, and start uploading your site images. This will give you a hardlink to your images once the file has been uploaded. Once this is done, go through your HTML and replace any image, with the relevant image hardlink you got from uploading to WDP. (ie, if the image was called /logo.png, on your site, replace it with http://www.yourdomain.com/static/site/logo.png), or whatever link the file uploader gave you. Also remember to change the image links in your CSS file too! WDP does not allow you to upload the CSS file, (if i remember correctly), so you have to embed your CSS into your html. All you need to do is wrap your CSS in a <style type="text/css"></style> tag, before the end of your </head> tag. With all the image tags and the CSS uploaded/correctly inserted into your html, double click the html file to see if everything is still working. If so move to step 4, otherwise find out what is not working and fix! smile.gif

Step 4:


Ok so your front page is working if you run it on your local computer (with the links pointing to your uploaded images on WDP, and your CSS inline with your html). Log back into the WDP admin page, click on My Sites -> Yoursite.com (Manage) -> Site Settings, and change "Editor used for index page" to "Custom HTML" from "WYSIWYG editor". Click "Save" on the bottom. Now you should have a new tab called "Front Page Layout", click on that, remove ALL the content in the big textbox, open your HTML file with a word editor, select all of it, and paste it in the big textbox. (Basicly replace the content of the textbox, with your html). Click save, and preview your site! You SHOULD now have a working FULLY customised template! Also under the "Front Page Layout" tab you can take alook at the macros, for GEO location. (This you can do on your own time).

Pat yourself on the back, and goodluck!

Hope this tutorial helps. Any comments/questions below. Thanks!
sportydate
A very big thankyou AFL.. wink.gif
Will try this over the next few days.
zaczebra
great advice, thanks for that biggrin.gif biggrin.gif - just a shame you can't add the member rotation block.

I think new fresh faces when a customer logs in... is key to retaining your members

great design also
WDMG
Hallo everyone.
We have done some changes on our site http://www.asiadate.nu
If anyone have any suggestion about the site, you are welcome to give us advice. We have about 10-20 signup per day but not so many paid members. So, what can we do to make the site better????
Robert (8191)
Sign of the times at the moment WDMG with the credit crunch, in comparison my Iwantu stats (another dating sponsor) are 12,000 unq, 64 members and 4 conversions which has to be the worst conversion in history, either that or they do more shaving than a transexual whorehouse.

My bets are on the shaving.
Zsolt (6280)
Is there any other way to change frontpage much more easier than this?

................................................................................
........................
QUOTE(adultfinderlive @ May 14 2008, 02:13 PM) *
Tutorial on designing your own custom front pages

Hi guys, I recently decided to design my own custom front page for my site, as the standard template ones, didnt seem to be converting very well. My explaining might not be the best, but you get the idea. This is more for advanced users, but ill try explain for everyone.

If you want an example of what can be done, take alook at http://www.adultfinderlive.com, that is my most recent design.

Step 1:

Finding a tool to design your site, can be a daunting task. You need to find something you are comfortable with. I decided to use Adobe Fireworks, as im used to it and i feel its specially tailored for web design. Find a nice font to do your logo in, spend alot of time on design. Make sure you are 100% happy with the site, and you feel its appealing. If you have no web design skill/coding skill make sure you understand the principles of web design, because it will just make your life easier, when you actually coding the page in html. If you have a bit of money check out http://www.psd2html.com/ . They offer the service to cut your Adobe Photoshop template (If you designed it in photoshop), to html form. Very usefull service if you have no html skill of your own. I also highly recommend using CSS tableless designs, as its less HTML, and i think it helps with SEO and detection of keywords, due to less html inbetween your content.
Step 2:


Once the page is in HTML form, make sure the page has META tags, a title and a description. This just helps Search engines select keywords for your site. Also make sure that you have very few images on your site, and whatever can be text should be text. This also helps with keyword detection. (Search engines cant read text off images YET!). WDP does not have support for automatic profile image changing like on the templates, you need to do this MANUALLY, UNLESS you use their generic profile macro, which runs vertical, i havent played around with it too much, so i cant explain exactly how it works. Copy all the profile links from your template, or any other WDP site, (choose members who you think are appealing).

Step 3:


Upload your images to your site. Login to WDP admin panel, click on My Sites -> Yoursite.com (Manage) -> Files Management. Create a new directory, and start uploading your site images. This will give you a hardlink to your images once the file has been uploaded. Once this is done, go through your HTML and replace any image, with the relevant image hardlink you got from uploading to WDP. (ie, if the image was called /logo.png, on your site, replace it with http://www.yourdomain.com/static/site/logo.png), or whatever link the file uploader gave you. Also remember to change the image links in your CSS file too! WDP does not allow you to upload the CSS file, (if i remember correctly), so you have to embed your CSS into your html. All you need to do is wrap your CSS in a <style type="text/css"></style> tag, before the end of your </head> tag. With all the image tags and the CSS uploaded/correctly inserted into your html, double click the html file to see if everything is still working. If so move to step 4, otherwise find out what is not working and fix! smile.gif

Step 4:


Ok so your front page is working if you run it on your local computer (with the links pointing to your uploaded images on WDP, and your CSS inline with your html). Log back into the WDP admin page, click on My Sites -> Yoursite.com (Manage) -> Site Settings, and change "Editor used for index page" to "Custom HTML" from "WYSIWYG editor". Click "Save" on the bottom. Now you should have a new tab called "Front Page Layout", click on that, remove ALL the content in the big textbox, open your HTML file with a word editor, select all of it, and paste it in the big textbox. (Basicly replace the content of the textbox, with your html). Click save, and preview your site! You SHOULD now have a working FULLY customised template! Also under the "Front Page Layout" tab you can take alook at the macros, for GEO location. (This you can do on your own time).

Pat yourself on the back, and goodluck!

Hope this tutorial helps. Any comments/questions below. Thanks!
nurijk
Nice tutorial. I still have to do all these things.
hypey
wink.gif Great post Sam, just what I was looking for. Your co.za site looks great! Thank you.
point2
Great guide.. but do you have any set up where we can change the inner pages into LOGO instead of slogan?
hot stuff
QUOTE(point2 @ Nov 23 2009, 06:24 PM) *
Great guide.. but do you have any set up where we can change the inner pages into LOGO instead of slogan?

hi can u help i am new iand i dnt under stand how it work i have set my site up right i think but dont no what to do next or were to find y site can u guide me please
Laura(WDP)
QUOTE(hot stuff @ Sep 23 2010, 11:56 PM) *
hi can u help i am new iand i dnt under stand how it work i have set my site up right i think but dont no what to do next or were to find y site can u guide me please



Hello and this year we have added the tools that allow to change headers of the inside pages. Please find the detailed instructions here:

http://forum.worlddatingpartners.com/index...showtopic=20631

Regards,

hot stuff
QUOTE(WDMG @ Jun 20 2008, 07:36 AM) *
Hallo everyone.
We have done some changes on our site http://www.asiadate.nu
If anyone have any suggestion about the site, you are welcome to give us advice. We have about 10-20 signup per day but not so many paid members. So, what can we do to make the site better????

hi can u tell me how to set up site like u have as i am new i have done the things i have been told to do and that is it any tips u can give me try to find were my site is and to get pepole to come to it as i do not under stand it how did u get your web address and what is url
thanks [size="5"][/size]
Laura(WDP)
QUOTE(hot stuff @ Sep 24 2010, 03:18 PM) *
hi can u tell me how to set up site like u have as i am new i have done the things i have been told to do and that is it any tips u can give me try to find were my site is and to get pepole to come to it as i do not under stand it how did u get your web address and what is url
thanks [size="5"][/size]


The question was not to me directly but usually all newbies start with the same thing - what shall I do?

I belive, nobody will tell you how to promote your site as we are all on the same market here BUT there is a lot of very helpful tips on the forum that had been presented by experienced partners years ago but they still do work on a today's market - try looking through the forum, its topics and you will be definetely excited about the things you will find.

Moreover it is always helpful to be specific in your questions and in what you need. I recone you will find many good friends here.

Regards,
hellrazaa
This is by far the best tutorial on here. I suggest to people you use microsoft front page for the Html editing
Stephen (4808)
My best converting WDP template is a Cartoon dating site. Awesome or what?
Robert (8191)
QUOTE(Stephen (4808) @ Oct 21 2011, 11:34 PM) *
No Robert, is another nicely reworked WDP site. Shame he doesnt speak English too well


lol
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2012 Invision Power Services, Inc.