Website Tutorial Using Yola
The annual Teen Biotech Challenge is a product of the BioTech SYSTEM under the
Directorship of Dr. Denneal Jamison-McClung.
Signing Up For A Website
To begin using Yola, you must first sign up for a free account at: http://www.yola.com/.
Just fill out the required fields and voila! You are now a Yola member.
Now that you’ve become an elitist,
follow the steps below to get
started on your Teen Biotech
Challenge award winning website.
Be prepared for all the fanfare,
website groupies and biotech
bunnies or rabbits that will be
knocking down your door to get at
such a talented techie!!
Website Tutorial 2
Okay, let’s jump in - both feet first!
IMPORTANT: Once you are finished with your website, you will be giving the
BioTech SYSTEM program manager your login and password information and the site
then becomes the property of the Teen Biotech Challenge. If there are images, text or
other webpage component that you’d like to use in future, please save them in local
files. All passwords will be changed and thus the ability to make further adjustments to
the websites. Winning webpages will be published on the Teen Biotech Challenge
website (http:///teenbiotechchallenge.ucdavis.edu). By entering this contest, you give
consent to turn over your website to the BioTech SYSTEM and acknowledge that it
may be published along with your name and school affiliation.
The content of your website may not include explicit or offensive language, images or
multimedia elements. Please do not include any personal information such as phone
number, email addresses and personal images.
Provide a name for your website where the field asks: “Enter Your Business Name”
then choose “Other” for Website Category. Later, you will add pages to the website for
the other required sections: Biotech Innovators, Social, Political & Economic Impact,
Ethical & Legal Issues, and Related Links & Project References. Additional pages may be
added, if needed.
Website Tutorial 3
Now that you’ve entered a name, the following dialogue box opens up.
Select “Start editing now” to start the web design process. After you do so, you will see
something similar to this:
IMPORTANT: First select the green “Publish to the web” button bar. This is something
you need to do regularly, so make it a habit!
Website Tutorial 4
Next, choose a website name that relates to your chosen topic in one of the seven TBC
focus areas: Agricultural Biotechnology; Biofuels & Bioenergy; Bioengineering &
Nanotechnology; Biomanufacturing; Genetic Testing & Forensics; Genomics & Synthetic
Biology; or Regenerative Medicine.
For example, a student working on a TBC website in the Agricultural Biotechnology
focus area might name their website “AgBiotech4FoodFiberFuel” or “YummyBTCorn”. In
other words, choose a name that will reflect the content of your website.
When you publish your site to the web, you need to see if someone else has the same
domain name. Enter your site name under “Get a free Yola subdomain:” and see if it’s
available. If it isn’t, then click on the “Next” button to proceed with designing,
otherwise, choose a different title.
Notice that there are Site Builder Tips throughout the building of your website. Thanks
Yola! After reading the introductory message and builder tips, go ahead and close the
Website Tutorial 5
The next dialogue box that pops up after you have a website domain name is important
for the people who run the contest. You will need to write down your web address and
give to your teacher so that s/he can provide us with the site url for judging purposes.
After you’ve copied the site address, close the dialogue box and now get ready to start
with designing your Rembrandt! To begin, determine what layout you’d like to have for
your main page. To start the process, click on the “Layout” drop down menu and start
experimenting with the different styles.
Website Tutorial 6
After you’ve chosen your layout, you should see some items on the bottom of your
page that look similar to this:
These are called “Widgets” and you will be using them for the rest of the design
process. If you double-click on these widgets, you can see that you’re able to change
the margins, upload new images and do a lot of other things quickly.
However, we will mostly be using the menu located directly to the right of your web
Website Tutorial 7
Notice that by double-clicking on any of the icons, you
can access text and photo tools and upload all the
pictures that you’ll be using in the creation of your
Double-clicking on any of the areas of your webpage will
enable you to change the banner photo, heading title,
and content for your headings.
Website Tutorial 8
Changing Your Style
Let’s say you’re a visionary but need to see something first to get ideas. No problem,
with Yola, you can change your layout style and select from one of the free templates
that they offer.
Simply select the “Style” dropdown menu and select “Change Style”. Notice that you
can click“ Free Styles” from the left side to see the formats that are available to you.
Go ahead and make the change or keep the one that you’ve already started, the
controls are in your hands!
Using the “Page” tab at the top of your homepage, you can
choose “Add New Page” from the drop down menu. This
can also be done by selecting the “Pages” tab at the top of
the homepage . Now, add the required site pages, starting
with “Biotech Innovators”. Notice that the heading
displayed at the top of each page will default to the website
title, which you may want to edit. I decided to change the
heading on each page to correlate with the “Name” of the
page. The “Switch Grass Can Fuel America” page heading
was changed to “Biotech Innovators”.
Website Tutorial 9
Click “OK” when finished with the new page set up. You should see the change
reflected in the new page’s top menu .
Add the rest of your pages using the “Page:” menu for the additional required pages
(Social, Political & Economic Impact, Ethical & Legal Issues, and Related Links & Project
DON’T LET THIS HAPPEN TO YOU!
Publish your site NOW and Constantly!
Website Tutorial 10
When you want to access your different pages, simply use the “Page:” drop down menu
to select the one you want. Remember, your main page is called the “Index”, and it is
important to keep that name.
Once you have created your pages, you can now get creative by adding designs for
each of them using the widget tools.
Yola offers over a myriad of widgets that you may “drag and drop” into the content
areas of each page on your website. Check out the panel on the far right hand side of
the screen. You may add a text box, image box, multimedia box, etc… Have fun!
Organize and store text, image files and multimedia elements that you will use on your
website using the “Site” dropdown menu and choose “File Manager…”. Yola allows up
to 1024 MB of free data storage.
Website Tutorial 11
Make sure that your text is an appropriate size/style/color for optimal readability. To
change the text from the default (recommended), use the buttons at the top of the
page. They appear whenever you are clicked inside a banner or text box.
Let’s say I want to change the color of the font to red. All I need to do is highlight the
text that I want to change and then choose a color on the palette
If I point to a red square, my selected text could look like this:
You can change the color of regular text but not always the text that is in the banner
heading, as in the case of the template I choose. Some templates give more than one
palette to select from.
Changing the margins of the text may be accomplished by clicking on “Margin” within
the text box. Think of the margins as padding within the box. How much padding, if
any, do you want from the sides of the textbox?
Adding text indentations, bullet lists, etc… may be done using the appropriate buttons
on the text editing toolbar.
Website Tutorial 12
Save Your Work
It is a good idea to frequently save your work. You will find the “Save” button on the
blue tabular menu next to “Preview” . The “Preview” button
allows you to see your website as it will look in any browser (Internet Explorer, Firefox,
Don’t forget to publish your site regularly as well!
Putting a link in your website is easy. Highlight what you want to use as a link using the
link icon on the formatting toolbar.
The following dialog box will pop up:
You are given four choices to link to, one of your
webpages, an external website, an email address
or a file.
For an external website, choose:
If you link to an external website, make sure to
give the entire address starting with http://
Website Tutorial 13
This and That (and maybe the other)
Under the “Page” drown down menu, you can access the “Page Manager”
which comes in handy when you want to re-order your pages for navigation.
Apply to all pages:
You can choose to apply the same background to all of the pages on your site instead
of changing the background on each page individually:
1. Click on the "Style" button on the main menu. Select "Edit Background" and
then "Apply to All Pages".
2. A dialog box will open asking you to confirm whether you would like to apply the
change to all the pages on your site, click on "Apply and Save" if you would like
to go ahead.
Yola’s website tutorial can be found here:
Website Tutorial 14
Your Fans Await You
You did it! Great job! Do you hear anyone at your door? Well, maybe it’s a bit too
soon for the fans to be coming just yet.
Have fun building your website! If you run into problems with your site, you can email
Marianne Hunter at firstname.lastname@example.org. Please be as thorough as possible
explaining your situation and include “TBC” in your subject line of the email so that it
will be answered quickly.