Welcome to part two of our landing page tutorials and templates. Hopefully, most of you will have read part one “The Photo Stack” – A One Button SEO Ready Landing Page CSS Template as it is a primer to this guide. To see a preview of this landing page, click here.
Each template guide (Part 1, 2 and 3) is organized into two main parts. The first portion is a simple customization and installation guide that will get you up and running in less than 1 hour. The second portion will go into more depth and detail regarding CSS for those of you that are interested in learning a bit more. Keep in tuned as Part 3 will not only include a 3 button design along with a text area, but will also include an advanced editing section solely on SEO preparation.
For those of you wanting to learn more about CSS and SEO, we highly recommend that you read Part 1 “The Photo Stack” as this article will build upon previously discussed topics.
So, without further adieu, let’s jump right in to steps 1 – 5 which are the customization and installation of the landing page.
The first thing you will want to do is download the files for the Photo Stack landing page by clicking here.
The files are organized into the following:
/design_files – These are the files used in the design process. We used Adobe Illustrator to create the layout, and thus we have included the .AI file in case any of you want to take the editing one step further and customize the design further. There is also a screenshot so you can quickly see the template design without loading it in the browser.
NOTE – there are no files in the /design_files folder that are actually used by the website. So you don’t need to upload it when uploading your website to your server.
/images – These are the image files that are used by the website code. You will need to upload these to your server when you have finished customizing your site.
index.html – This is the actual landing page itself. It contains all of the content of the page. It is named index.html because it is going to be the first page viewed when a user types in your website URL.
splashcss.css – This is a CSS (Cascading Style Sheet) file that is used to stylize the index.html page. It basically defines the look, placement and location of elements, colors, etc inside of the index.html file.
Before you can upload your landing page, we need to customize it so it is for your studio rather than for Lin and Jirsa Photography! Don’t worry though, we are going to walk you through each step, and once you finish you are going to revel in your new HTML editing skills!
i. Open the index.html for editing – You can open the index.html file in any standard text editor such as Notepad or Wordpad, or a code editor such as Adobe Dreamweaver. If you do open the file in Notepad or Wordpad, just make sure that you don’t change the file extension (.html) when you save the file. It should always read index.html
ii. Understanding the web page structure – To avoid repeating previously discussed material, please see Part One to get an understanding of the web page structure.
iii. Customizing the <head> section – There are three areas you are going to customize in the <head> of the document. Each are marked in the index.html file by comments. Comments are descriptions and explanations in the code that are marked so they are not displayed by the browser. HTML comments are denoted by anything that goes within the <!– and –>. The three areas you will edit are discussed below:
Title (Line 10) – The <title> tag is a short piece of text that will be displayed on top of the browser window and is the most important tag within the <head> of your document for SEO (Search Engine Optimization). So you want to make sure it is brief, descriptive and under 70 characters in total length. To edit this section, simply place your title text in between the <title> </title> tags. An example could be “Lin and Jirsa Wedding Photography and Engagement Photography.”
Meta Description (Line 13) – Yet another tag for SEO, the <meta name=”description”> tag is mainly used by search engines as the little bit of text copy that describes your site. For example, in Google, if you typed in Lin and Jirsa Photography, the text description that shows up below each search result is pulled from the meta description tag when declared. So, it is important that this section contain a brief little summary of your studio and services. Google only reads the first 150 characters, so we advise you keep it under 150 characters in length. To edit this section, simply place your text between the ” ” marks after content =
Meta Keywords (Line 16) – While not as important today for SEO as it was in the past, the <meta name=”keywords”> tag is used by search engines to categorize what your site is all about. Today, search engines such as google place much more emphasis on your site <title> along with the actual content contained in your site in order to properly categorize and index your website. In this section, you want to place about 10 keywords or less that describe your website and studio services. For example, “wedding photography” , “wedding photojournalism”, etc. Remember, less is more. If you exceed 10 keywords, search engines may ding you for “spamming” keywords. To edit this section, simply place your keyword text between the ” ” marks after the content =
Ok, good news, you are almost half way there already! We just finished the <head> of the document, and now we just need to edit a little of the <body> of the document and then we are done!
iv. Customizing the <body> section – The only thing we need to change in the<body> of the document is the URL link that will point to your site, but we are going to need to change it in 4 places. If you desire, you can also change the text portion of the links as you go through this portion to fit your site better.
Line 63 <a href> – <a href> is an HTML tag that stands for an Anchor Hypertext Reference, or otherwise known as a link/URL (yeah, seriously, why didn’t they just call it a link to begin with?). Currently, all of the links point to a dummy location which is https://www.YOURSITEGOESHERE.com. I wrote it that way so that it would stand out =). So, as most of you have guessed by now, you want to place the link of the site that you want this portal page to link. To do so, simply replace the https://www.YOURSITEGOESHERE.com with wherever you want it to link.
Line 73 – Same change as above, this time it applies to the second button.
Line 81 – Same change as on Line 73, this time it applies to the text “PORTFOLIO.” Once you finish editing the HTML link you can also edit the text to better fit your site. Simply change the text in between the <a> </a> to whatever you deem appropriate.
Line 88 – Same change as on Line 81, this time it applies to the text “THE BLOG.” Once you finish editing the HTML link you can also edit the text to better fit your site. Simply change the text in between the<a> </a> to whatever you deem appropriate.
Now, all of your links should be pointing to the right location.
OPTIONAL – On each of our landing pages we included a tiny link in the footer that gives SLRLounge and Lin and Jirsa Photography a little bit of link love. We mention it here because we don’t want to seem sneaky by hiding things from you. The link text is very small and virtually unnoticable, so we ask that you keep the link on the site. However, if you must remove the link, then we ask that you add the following code snippet to any one of your sites. You can do it in a blog entry, or on a remote resource page somewhere on your site, it really doesn’t matter. This will help us to keep providing you with these free, professional tutorials and resources for free. Here is the link code:
<a href=”https://slrlounge.com” target=”_blank” description=”Wedding photography tutorials, tips and resources”>Photography Tutorials, Tips and More at SLRLounge</a> a website by <a href=”https://www.linandjirsa.com” target=”_blank” description=”Los Angeles Wedding Photography”>Lin and Jirsa Los Angeles Wedding Photography</a>
Great job! We are now done editing our HTML and the only thing we have left to do is customize the images and change the colors if you desire.
v. Customizing the Button and Logo Images – Obviously you don’t want to use our pictures and logo for your site, so here is how to change it. Be warned, this is so easy that it might just confuse you.
Replacing the Logo – To replace the logo, simply create your logo and size it to 180×54 (180 pixels wide by 54 pixels tall). Save the file as logo.png and replace the current logo.png file contained in the /images folder. Viola! Now your logo is on the site.
NOTE – If you save the logo file as a .jpg you will need to change the code on line 78 to read images/logo.jpg rather than images/logo.png. Otherwise your image will not be displayed.
Replacing the Button Images – There are two images for each button. The image defaults to a light black and white version of the image and then switches to a nice color version when the mouse is moved over the button. So, in order to replace the images we need to change both of them.
To replace the black and white version of the first button, simply create a light black and white version of whatever image you like and size it to 100×100 (100 pixels wide by 100 pixels tall). Save the file as “front-picture-image-bw-light.jpg” and replace the current version of the “button-one-image-bw-light.jpg” file with your new one!
Next, take your same design file and make it a color version with the same 100×100 dimensions and save it as “button-one-image.jpg” and replace the old file with your new one.
Do the same steps with the second button images named “button-two-image.jpg” and “button-two-image-bw-light.jpg” and replace the current files with your new ones.
vi. Customizing the Background Colors – There are two main background colors on the site, to change them, simply open the stylesheet.css file and do the following:
Changing the <body> background color – Most of the CSS attributes that you may want to change will be placed at the top of the document. To change the background color of the <body> of the document, simply replace the hexadecimal color value on line 46 with the color of your choice.
Changing the rectangle background color – If you are going to change the <body> background color, you probably want to go ahead and change the background color of the #rectangle_area container as well so that it matches your new color scheme. To do so, simply replace the hexadecimal color value on line 52 with the color of your choice.
Step 4 -Revel in Your Awesomeness
That’s right, you just customized your own landing page by editing HTML! You can preview it by double clicking on the index.html or loading it into your preferred browser.
Now that we are done customizing, all you need to do now is upload the site! If you are unfamiliar with this process, keep reading.
i. Connect to Your Site – Connect to your site by using your browser web admin panel, or using an FTP software. If you need FTP software, we recommend using FileZilla as it is quite reliable, and best of all FREE! You can download it by going to Downloads.com or by clicking here. Your FTP connection information can be found in your server’s control panel, or by calling your hosting company.
ii. Upload the Files – After you have connected to your site, simply upload everything but the /design_files folder to the servers root directory. Usually, the root directory will be the default directory that your FTP will connect to. Make sure that you keep the file structure the same though. The images need to be within the /images folder and the index.html and splashcss.css file need to both be in the root directory.
iii. Check Your Homepage – If everything went well, then you are live! Go check out your site by typing in the URL to your homepage.
No explanation neeeded here, you should all know what this dance is since we did it in Part One.
OK, so for all of you interested in getting a little more into CSS, this section is for you. Now remember, we are building on what we discussed in Part One, so make sure you are caught up before reading on.
In Part One we discussed the basics of CSS and how it applies to HTML tags, so let’s get a little more advanced and start to discuss placement and positioning of CSS elements in Simple Green. While there is a lot about CSS that we haven’t discussed, knowing some CSS attributes and positioning along with HTML tag organization will give you a good basic foundation and help you get started creating custom sites of your own.
The first step in writing out the CSS to a newly designed webpage is to block out the major elements in the page. Now, we aren’t going to go over every item in the CSS file, but we are going to cover all the major elements. The illustration below will show you the major block elements of our Simply Green landing page. For a larger version, please download the Simply Green files and look in the design_files/ directory.
Each design is separated into major block pieces. The easiest way to block out a design is to start with the largest element and work your way down. So, let’s start from the top with the body of the document.
i. The <body> – The body of our page is going to contain the entire site. Therefore, it makes sense that the body of the site fills the entire browser window. So, we have set the following attributes in the our Simply Green CSS file on line 66.
body {
width:100%;
height:100%;
}
Setting the width and height both to 100% will allow the body element to fill the entire browser window. In addition, any additional attributes (such as the background-color set on line 46) that we set in the body element will apply through every child element contained within.
ii. The #page_area – The next thing we are going to define is the #page_area of our document. This is the element we will use to define the general area of the page, mainly the width and height of the actual page content as shown below (line 77 of the stylesheet.css file)
#page_area {
margin:auto;
width:480px;
height:100%;
}
Setting the margin to auto will ensure that the #page_area element will be centered within the body element. In addition, since the body element is set to 100% width, the #page_area will always stay centered regardless of the size of the window.
iii. The #content_area – Within the #page_area parent element is the #content_area child element. Now remember, the terms “parent” and “child” are only relative. While #page_area is the parent of all the elements within, it is still the child of the body element.
The #content_area element is going to contain our portal area content. Therefore, we are going to need to define the size, as well as give it a background as shown below (line 88 in the stylesheet.css)
body {
width:100%;
height:100%;
}
#content_area {
width:480px;
height:200px;
display:block;
background-image:url(images/content-background.png);
position:relative;
float:left;
}
There are a few attributes shown here that we haven’t discussed yet. I will give a brief explanation here, but I encourage you to read each item in more detail at W3Schools.
display:block; – Setting the display to block simply means that the browser will treat this element as a block element meaning any elements afterwards will be displayed below, rather than on the same line. It is similar to saying “I want a hard return after this line of text” forcing the next element down onto the next line.
background-image:url(images/content-background.png); – I wanted to have a nice little rectangular button area with rounded corners and a drop shadow as shown below:
So, I needed to use an actual image for the background since there is no way (presently) to create that look with CSS alone. So, the background-image attribute simply assigns a background image to the element. However, remember that the background will only be revealed to the extent of the content within. Meaning, if you asign a background to an element without a set height and width, the background will only be shown to the extent that the content within fills the element (this will make more sense when you start practicing with the background-image attribute).
position: relative; – Setting the position to relative means that its positioning will be in relation to whatever element it is contained within. It simply makes custom and unique positioning more simple and customizable. Using relative positioning allows you to use floats, which are described next.
float: left; – Once you have set the position to relative, you can use floats to position an element in a specific spot within the element. Floating an object left, means that it will be left-aligned to whatever object is directly in front of it.
iv. #rectangle_area – Now, because I wanted to have a rectangle with a different color inside of the #content_area I created another element within called the #rectangle_area. To do so, we simply set the color and size of the element as shown below.
#rectangle_area {
margin:20px;
width:440px;
height:160px;
position:relative;
float:left;
background-color:#D8EFE0;
}
Hopefully, you are beginning to see the pattern here. We are simply defining each element according to our design. It is going to be the organzation of the HTML that will give our design form as you will see shortly.
v. Buttons and Logo Elements – The only other major elements in our design are going to be the positioning and sizing of the button and logo elements. Most everything will be the same as our previous elements, so I am only going to discuss the noteworthy portions below.
#portal_button_one {
position:relative;
float:left;
margin:20px 0px 0px 10px;
border:1px solid #fff;
}
#portal_button_two {
position:relative;
float:left;
margin:20px 0px 0px 0px;
border:1px solid #fff;
}
There are two noteworthy items in our button elements. Each are discussed below:
margin: 20px 0px 0px 10px; – The margin attribute is simply used to create a margin between it and its parent element. It is shown in both button elements in shorthand, each item defines the top right bottom and left margins in that specific order. So, for button one we specified that we wanted a 20px top margin, no right or bottom margins and a 10px left margin.
border:1px solid #fff; – The border attribute simply applies a border to the element. Again, it is shown here in short hand which specifies that we want the border to be 1px in thickness, styled as a solid line (as opposed to a broken or dotted line) and set to the color white (#fff).
#logo {
position:relative;
float:left;
height:90px;
margin-top:50px;
margin-left:10px;
}
The logo element uses attributes we have already discussed. It is worth noting the long hand margin attributes. The same attribute could have been set by using the shorthand version as such:
margin: 50px 0px 0px 10px;
While we have discussed how to define the CSS elements according to our design, you are probably noticing that we really didn’t define anything that has to do with the actual positioning of each element. Why? Because this step actually comes in the organization of the HTML code itself.
Now, remember that all we need to do with the HTML is simply place each child container in its parent container as shown in our blockout image. So, if we were to remove all the actual text and image content in the HTML file, this is what the organization of the containers within the body would look like. Just an FYI, I have removed all the containers that we haven’t discussed to keep it simple and straightforward.
<body>
<div id=”page_area”>
<div id=”content_area”>
<div id=”rectangle_area”>
<div id=”portal_button_one”>
</div>
<div id=”portal_button_two”>
</div>
<div id=”logo”>
</div>
<div id=”portal_button_one_text”>
</div>
<div id=”portal_button_two_text”>
</div>
</div>
</div>
</div>
</body>
Before analyzing this snippet of code, let’s talk a bit about what we are looking at. We discussed HTML tags in Part One as different elements that had a specific purpose, some are predefined, others are custom, however all of them can be styled with CSS.
You know that the <body> tag is simply the HTML tag telling the browser where our page content begins and ends. We stylized our <body> tag in our CSS to ensure that it fit the entire browser window.
Next, a <div></div> tag is simply a container in HTML. What does it contain? Anything you want! It can be text, an image, a script, anything really. Each <div> container is given an “id” which is assigned to the CSS attribute that defines its respective style.
So, let’s talk about the organization and how it all comes together.
Our highest level parent object is the <body> which is also the HTML tag that defines the content area, so it makes sense that it comes first. Next, we place our page_area container within the <body> because it is the first child element of the <body>. Within the page_area container, is the content_area container followed by the rectangle_area container. How does the browser know that these elements are contained within eachother? Well, its simple, because we didn’t end one container before starting the next.
We opened the body tag, then the page_area div, then the content_area div, then the rectangle_area div before closing anything. This means that each container is contained within the prior and each container has the styles and attributes applied to them as defined in our CSS file and assigned with the “id”.
Now, inside the rectangle_area div container is where our buttons and logo are actually placed. So, you will notice that the portal_button_one is started first. Inside, is the button image and content. Then, portal_button_one is closed and portal_button_two is started. These elements are placed right next to eachother since the CSS defines their positioning as floating left. This means that when button one ends, button two will be placed right next to it left aligned. Then, when the container for button two is closed, the logo is placed next to that.
From there, we begin to close each container begining with the last first. So, we close the rectangle_area div container, then the content_area, then page_area, and last the body. So, by organizing how our div containers are placed within one another, as well as assigning sizing and attributes in CSS we can flesh out an entire design and get it ready for the web!
Hopefully this all made sense, if not, read a bit more at W3Schools practice with some simple sites, and you should be up and sprinting in no time!
Those of you familiar with SEO will note that there isn’t all that much on the flash page to prepare for SEO! So, our final article, Part 3 of this template series will be a three button landing page with a heading and text area for you to keyword up. In addition, this tutorial concludes the CSS training portion of the template series. The final series will have an advanced section that teaches you strictly about preparing your landing page for SEO. So, stay tuned!
If you have any questions, or comments please list them below in the comments.
Get Connected!