Most photographers have at least 2 sites (a portfolio and blog) if not more. Thus, our websites require a splash/portal page that allows our clients to access any of our sites with ease. While we have a good foundation in web programming, we realize that this may be a daunting process for those of you starting your own photography companies. So we went ahead and created a simple, SEO ready, customizable splash/portal page that you guys can easily implement on your own website. While it is more simple than the Lin and Jirsa Los Angeles Wedding Photography home page, this template is nice and elegant and will give you a great start in getting hands on with HTML and CSS programming.
If you guys like this template, then we will go ahead and create more, so let us know in the comments! This template has been tested in Explorer, Firefox and Chrome. Feel free to use this template on your site, customize it, study the code, or do whatever else you like. However, since we are providing these tools for free though, we do ask that you don’t remove the virtually unnoticeable link to our site in the page footer.
Before you get around to installing the page on your server, you will want to customize the page and add in all your text and images. So, here is how to get started.
1) Download the files by clicking here
2) Unzip the files to any folder and open the index.html file in a simple text editor such as Wordpad, Notepad, or a code editor such as Dreamweaver.
3) In the code, you will notice instructions on how to fill everything into the page. Instructions are located in the comments which are denoted by the text in between the <!– and –> . Keep in mind that anything inside of brackets such as these <> is actually HTML code and you want to make sure you understand HTML before you go editing it.
4) First section you will want to edit is the text within the <head> </head> of the document. This section is mainly used to help search engines, such as Google, better index and classify your site. So complete your DESCRIPTION, KEYWORDS and TITLE section and then move on to the <body> </body> of the html document.
5) Everything in the <body> </body> tags of the document is where everything visible to users will appear. So, in this section you want to modify all of the text to properly promote your studio. Again, to quickly find the areas you need to modify, look for the instruction text placed in between the <!– and –>.
6) The images currently placed in the site are just placeholders. You will want to replace these images with your own. To do so, simply replace each image named button-image-one.jpg, button-image-two.jpg and button-image-three.jpg in the /images folder with the appropriate image. Remember to size your image to 200×200 pixels to make sure it fits within the template.
The CSS document splashpage.css is where all the style information is contained for the splash page. CSS is quite easy and intuitive to understand. However, it is beyond the scope of this tutorial. If you do wish to edit the CSS, we recommend that you do a little bit of reading at https://www.w3schools.org on CSS before proceeding. We made the CSS document very easy and clear to edit, to find the section you are looking to edit, simply look to the comments denoting each section as marked by the /* and */ characters.
Once you have properly edited all the text, links and images within the index.html file you are going to upload the files to your server. To do so, simply do the following.
1) Connect to your server using your preferred FTP client. A good free client is FileZilla which can be downloaded at https://www.downloads.com
2) Once you have connected, transfer all the files into the desired location on your server. If you want the splash page to be the first page that shows up when clients type in your URL, then you need to place the index.html file into the root directory of your server. Both the splashpage.css file and the images folder needs to also be within the same folder as the index.html file to properly work. If you already have an image folder, transfer the images contained in this tutorial’s image folder to the folder on your site.
3) Viola! If everything worked correctly, you should be able to type in your URL and see your new, customized, and SEO ready splash page!
If you like this article, and would like to see more articles on website tutorials, please let us know in the comments below!
By: Lin and Jirsa Los Angeles Wedding Photography, Los Angeles and Orange County Wedding Photographers
_______________________________________________________________________________
If you’ve found this article informative, please consider donating below:
_______________________________________________________________________________
Get Connected!