Skip to content Skip to navigation

Getting started on Sites: Creating a Personal Webpage

I am sure some of you have noticed that there is a Stanford Light sample image of Jane Smith's personal website and were wondering how to recreate the same page for yourself. 

In this blog post, I'll show you how you can put together an About page layout similar to the Jane Smith's personal website preview image seen on the Appearance page.

Before we get started, I do reocmmend checking out the following blog posts to familiarize yourself with some of the things that we will be using:

How to set your front page (*This is important if you would like to make this page your homepage!)

Stanford BEAN Types Module

Using Context to Add Blocks to a Region

Open Framwork Regions

Font Awesome Icons

Stanford Light Theme

Creating a Basic Page

This will be the About page that the sidebar blocks will sit on. 

1. Navigate to Content > Add Content > Basic Page.

2. Fill in the Title and Body text fields. 

3. Save!

Enabling the Stanford BEAN Types Module

1. Navigate to Modules from the admin toolbar.

2. Search for Stanford BEAN Types and turn the switch from OFF to ON.

3. Save configuration!

Creating the Profile Photo Block

1. Navigate to Content > Add Block > stanford_large_block

2. Add the label — I named mine Profile image.

3. Upload your profile image in the Image Insert section.

4. From the style dropdown, select large-square.

5. Insert the Image into the Body

6. Save!

Creating the Contact Information Block

1. Navigate to Content > Add Block > stanford_large_block

2. Add the label — I named mine Contact information.

3. Now at this point you can just input your contact information and Save.

However, if you are interested in incorporating Font Awesome icons and aren't afraid of a bit of HTML, continue onward!

Incorporating Font Awesome 4.7.0

4. We'll want to check and see which version of Font Awesome your theme is currently using. In order to do so, we'll want to navigate to Appearance > Settings > Stanford Light.

5. Locate the Packages accordion and expand it.

6. Make sure Font Awesome 4.7.0 is selected.

7. Save

8. Navigate back to the Contact information block that you had created.

9. Assuming that you had input your Contact information previously in step 3, you will want to change the Text format (located under the Body editor) from Context Editor Text Format to Full HTML from the dropdown. 

10. Now your Body should be displaying HTML! You can now select your Icons from Font Awesome 4.7.0 site. Once you've found the one you want to add, copy the HTML from the Font Awesome site and paste the HTML into the area where you would like the icon to appear.

You can get a preview of how it looks by switching back and forth Full HTML to Context Editor Text Format.

Alternatively, you can copy and paste the following HTML to get you started:

<p><i class="fa fa-building-o" aria-hidden="true">&nbsp;</i>&nbsp; &nbsp; <a href="[destination url]">[Your Team]</a><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;[Location]<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;[Address]<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;[City and Zip]<br />
<i class="icon-envelope">&nbsp;</i>&nbsp; &nbsp;<a href="mailto:[your email]">[your email]</a></p>
You'll want to replace the text wrapped with square brackets accordingly with your own information. 
 
11. Before you save, make sure the Body Text format is set to Full HTML otherwise the Icons won't show up!
 

Creating a Context and placing the Blocks

1. Navigate to Structure > Context > Add from the admin toolbar:

2. On the new context page, input the necessary information:

3. On the same page, in the Conditions section, select Path from the dropdown (see image A) and input the path of the Basic Page you had previously created (see image B):

(A)

(B)

*You can find the node path of the page by editting the page and looking at the URL: https://rehong.people.stanford.edu/node/136/edit

4. Next is the Reactions section. Select Blocks from the dropdown:

5. This is where reviewing the Open Framwork Regions come in handy. You'll want to select the Blocks you created earlier from the BEAN accordian located on the right handside. 

6. Navigate to the Second Sidebar Section (located towards the end, under Content: Bottom) and click +Add to add the Blocks to the section.

7. Save your changes.

The Final Results!

Now when you navigate to your About page, you should now be able to see the Blocks stacked ontop of one another on the right.

Categories: 

Comments

i wasn't expecting such a detailed blog but that was super helpful.