Sites II:More elements Rev 09/17/2015

  • Start Weebly.
  • Select your MyPractice Site

Remember thatElements are building blocks of a site. All your text, pictures, video and most other content are added that way, through elements.Here is the BASIC section of the elements window:As you can see there are 8 BASIC elements, of which we’ll use mostly the first 3

Also note the five icons at the top of the elements. We will discuss them along with the elements themselves. .

A word or two. The first page Weebly sees is essentially an index page. Assuming we didn’t delete the heading, Let’s drag the American Indian page to the top of the list of pages:

End of note…

BASIC Elements

  • Every site has a Title by default, MY PRACTICE SITE below
  • Use the TITLE element to edit the title:
  • You're asked to provide a Title of some kind when you first create your site. It can this can be changed at any time. You also have the option to edit the text , delete the text, or upload an image logo. Let's look at these options
  • . If you don’t have a TITLE , go ahead and add one by selecting TITLE element and then clickinginside the header area..My theme had a spot already reserved, so all that’s needed is a change in wordage:
  • Scroll over the Title area to make a change.

You can:

  • choose to keep thecurrent Text Title,
  • Upload a Logo (image) or
  • Turn the Title area off to make it disappear from the theme.Here is my title.
  • Here are the options:

The current title options

And here is what it looks like

If you choose to stick with a Text title, simply type whatever you want. It should be fairly short and to the point (no more than six or seven words).

If you prefer to upload a Logo image, scroll over the title and select the Logobutton

This will open a dialog box prompting you to upload an image from your computer. The image must be a JPEG (JPG), GIF or PNG. Perhaps you created a banner in Photoshop.

Notice the lack of font properties. Fonts have their own section.

OK, that’s TITLE element.

STRUCTUREicons

The second major icon switches to display STRUCTURE Elements

We will eventually use SPACER and DIVIDERto separate sections from each other.

Buttons and YouTube

The final STRUCTURE element is a button, which is meant for linking to actions like play a video or jump to your blog we’ll look at them a bit later.

To create buttons,

  • Double-click the button element
  • Enter some properties:

The last icon proves search functionality, which is somewhat limited in the free version, which we are using

MEDIA elements

The Media elements are next::

  • HIGH DEFINITION VIDEO
  • AUDIO
  • YOUTUBE
  • DOCUMENTS

YOUTUBE

Let’s play a YouTube. The approach is:

  • Find and play the YouTube you want
  • Search for “Playing YouTube videos in Weebly”
  • Found one?
  • Locate a Share button :
  • Click it to see:

  • Copy the https link
  • Return to Weebly
  • Add a You Tube element
  • Click on the element and paste in the URL
  • You can vary several parameters; here is size:

Move away and the video plays

DOCUMENT

Assume you want to display a word document, or a pdf,…. Use DOCUMENT

I’ll show the jma501 syllabus

  • Drag a DOCUMENT element to the screen

This is what you should see:

  • So: Click, select to upload the new file. Navigate to the document. Here is how I might display the class syllabus

Navigate…

  • Click Open

A conversion takes place and the document displayed:

AUDIO

Here is what you see:

We can get around this problem by hand-coding a bit. Hold off until we discuss sound (and video)

Layouts

Every Weebly page has at least one layout. A given page might have several layouts or designs.Depending on the theme you've selected, anywhere from 4 to 6 different page layouts can be applied to each individual page of your site. For example, a landing page (a “linked-to page) page,a page with options for a large banner, a small banner and so on.

The bottom is where we add content. The heading area at the top specifies the purpose of your website along with an attractive title or caption of your site. Adding an image or a slideshow about your site offers visitors the quick extract of your site which you can do it the image area by just dragging and dropping elements. The free version doesn’t support searching

PRACTICE

Here is some fake Latin we will insert into aTEXT element

Lorem ipsum dolor sit amet, autem eligendi disputationi sit in, no sit ludus nominavi dissentias. Cu noster insolens usu, dicant nullam te mei. Vel te stet facer pertinacia, eum ea movet oratio instructior. Et probo fierent intellegam eam, vel torquatos efficiantur in

  • Select and drag a TEXT element to the white area page…Look for these words
  • Select and copy the lorem ipsum text (ctrl-a, Ctrl C) from class notes
  • paste the text we just created

Now, we want to place an image on the page, on the right side,. Weebly will create two equally sized columns and put the text in column one, the image in columntwo

  • Drag an IMAGE element to the page. See where the element landed:
  • Drag the image to the right side of the text…look for the blue bar:

You can add as many elements to a page as you want or need, the page itself will get longer and longer to accommodate however many elements you drag on,

  • Click the upload Image shape

Browse to an IMAGE you’d like to display. There are 4 sources

  • My Computer
  • Search
  • Favorites
  • URL

OR:

Search your computer; search the Weebly libraries; search the favorites you perhaps found earlier, and search the Internet. I selected to search the database of free pictures

  • Pick one

You’ll then see this:

Be sure to search Free Photos!

  • Click one and it will save into the IMAGE object:
  • Click the IMAGE and you’ll see a set of properties ( We discuss in the next module).

Edit Image

Practice on one of the photos.

Double-click the image to show:

Here is mine:

  • resizing,
  • adding thick borders,
  • Adjust the column width
  • Move the images around

MISC

  • When you drop elements, Weebly generates two columns on the page that place the elements side-by-side with equal space allotted to each.
  • You can adjust the space between columns by using the narrow blue bar that appears between them. Just click and drag to the left or right
  • The "X" in the upper right allows you to delete an element. Be careful when deleting, though, as a deleted element can't be brought back.
  • The arrow in the upper left allows you to copy an element (to the same page or another page) to move an element (to another page).
  • all elements include three basic options to be deleted, copied, or moved on the page. You'll see each of these options when you scroll over any element.
  • You can freely move the graphics anywhere on the page

.

Elements 2 Page 1 of 16