In the previous lecture, we looked at the
basic elements that are available to us in Weebly. In this lecture, we’re going to
look at the more advanced elements. We have structure, we have media, we have
e-commerce, and we have more elements. So, I’ve created a new page here on my
website, and I’ve inserted a title and some text. Now, perhaps I want to insert a
divider. A divider element allows you to add a gray divider line to a page on
your website. This can be useful for dividing chunks of information that need
to be on the same page, but still separated more than just space. So, the
divider element can be used to go all the way across the page, or to separate
smaller chunks of information in columns. The divider element is used like all
other elements. I just simply drag it and drop it where I want the divider line to
be. Now, let’s say for example, I don’t want
to use a divider line. So I delete this, and instead I want to put space between
my title and my text. To do that, I use the spacer element. So the same thing–I
drag the spacer element over to my web page, and I drop it where I want, and you
see now we have additional space added between the title section and the text.
Weebly now has also a new structure element called section. So, my text here,
or the gray highlighted area, is all considered a section. If I want to add a
new section, I drag the section element, and I place it where I want the section
to be added. So this blue line shows me it’s going to be added below my existing
section, and now I’ve got a whole separate section that I can work with
and do whatever I want. I can add elements, I can change the background to
be different from the previous section. There are many things I can do here. I
can check the selection layout and operate this entire section totally
separate from the previous section. So, just to give us a simple example to
just demonstrate the difference, let’s just change the background of this
particular section. We’ll add some color. So let’s just drag this to a color, pick
a color, and now you can see that I have a section here and a separate section
here. Alright, now let’s look at the media
elements. The first two media elements, HD video and audio, you notice have an orange lightning bolt on them. That means that in order to use those
elements you must upgrade your Weebly plan to a paid plan. So, for the
purposes of this website, we will omit using the HD video and audio elements.
Okay, I’ve made my section a little bit bigger here. Now let’s look at the
document element. The document element allows you to upload a document to your
page. Unlike the file element, which will be
covered shortly, the document element allows readers to view the document in
real time on the page without having to download it. So, for example, I click
on the document, and I drag it to my section here, and you see the instruction.
“This is a blank document. To upload a new document, click here, and select new file.”
So I click and I upload the new file. I want to upload
it from the computer. So let’s go to my current course here, which is English 422,
and I can upload my bio, for example. Don’t worry about this message saying
“Sorry, we can’t display this document.” As you can see, Weebly is transforming
this document into a format that can be viewed on the webpage, and now, as you can
see, my bio is here. Now, this isn’t scrollable because it’s in
an edit window. But if I were to click on publish, and publish my website, and then
go to the actual website,, you will see
that if I go to a new page, we’ve got the title and example that we had here and
our second section. Now this document is scrollable and I can also zoom in or
zoom out. This button would also give me the
ability to download the document. The next element that we want to look at is
the YouTube element. The YouTube element allows you to embed a YouTube video into
a page on your website. So, to do that, let’s get rid of this document element, and let’s drag the YouTube element to our section, and in order to add a
YouTube video, we click on the window, we put in a URL, and we can make adjusting
here left center or right line adjusting and some other techniques as well, but we
won’t worry about those right now, and then we hit enter. I’m sorry,
no that’s right, and then we have an embedded YouTube video that we can play
right here directly on our webpage. So if once again I publish and go to my web
page, I do a refresh, and you’ll see now the video is here, the YouTube, which I can
then play. The flash element, the next element,
allows you to embed a flash animation to your website. In order to use this
feature, you must have a file with an SWF extension, which is the extension use for
Shockwave flash files. The next element is the file element. The file element
allows you to upload a file to your page that users can download. Unlike the
document element, which was discussed earlier, the file element does not allow
you to preview the file. It simply places a download link to the file on your page.
So, let’s delete the YouTube video, and let’s use the file element, and as you
see, I can upload a file. Let’s click the same one we use before
and open i,t and now you notice on my web page, instead of the actual file being
embedded and displayable, the only thing we have here is a link to download the
file. Next, we have the e-commerce elements. The e-commerce elements can be
used if your purpose is to build a website on which to sell items. While
these elements are free to use, you probably will not need to use them for
the purposes of your website in this course. Thus, I will not cover them here.
So now let’s look at more elements. The first element in this category, the
search box, is a paid feature. Therefore, it will not be covered in this class. Nor
will you need to use it for your website project in this class. The next is the
block quote. The block quote element allows you to include a block quote on
your web page. This element is useful if you have a chunk of quoted text that you
want to include on your webpage. You can see an example here. So we take the block
quote, move it, and I’ve already copied some text. So I paste it here, and now
we’ve got a block quote on our web page. The next element is the social icons
element. As I’m sure you’ve seen on many web pages, the icons indicate which of
the major social media platforms a website may support or link to. So the
social icon elements allow you to include various social media icons to
your website’s page. Once you drag the element to your page, you can click each
individual icon to customize the links. In addition, you can choose to add or
remove social media icons. So I click here, and I can manage, I can make it
active by going to a specific Facebook page, I can show or hide it, and of course,
I can decide whether or not I want to add other ones that are currently not
here. The next element is the RSVP form element.
The RSVP form allows you to include a form for visitors to RSVP to an event.
Much like the contact form element discussed earlier in the previous
lecture, when the RSVP form is selected, the gray panel to the left of your
Weebly site will show different ways to edit the RSVP form as you see here. The next element is the survey element. The survey form allows you to include
a form with questions of your choosing for visitors to fill out upon viewing the
page. Much like the RSVP form, you can edit the
form and change the questions. So here we have default questions. I can click on
this, and I can change the name of the question, I can change the options, I can
also indicate whether or not the question is
required, I can add instructions and spacing, and when I have finished
creating my survey, I can also look here on view entries to see responses that
people have given to my survey. Also, like the forms page, you can see over here, I
have new form fields that I can use to help complete the form. The final element
in the more section is the Google Adsense. If I drag this over to my
section, I get some instructions here. “Google Adsense helps you generate
revenue from your website by automatically showing contextual ads
targeted to your site content. Weebly does not take any cut from the reveune
generated. To set up Google Adsense, connect your account by clicking
authorize.” So, if you want Google ads to appear on your website, this would be the
way to do that. I personally don’t want that, so I’m going to hit cancel. And that
concludes the lecture on using additional elements or advanced elements
in Weebly.