2. Overview Review Elements
Working with Web Pages – Adding, Reorder & Deleting
Structural Elements – Editing Title Text & Buttons
Media Elements –Video & File Upload
Adding & Editing an Image
Closing Review

3. Review Elements
Elements are the building blocks of a web site when using Weebly
This is your text, graphics, video, audio, etc. that adds interactivity to your site.
Remember, when using Weebly, the goal is to create Responsive web designs using these elements
This concept carries over into Web Design & Development, when using languages like HTML & CSS

4. Working with Web Pages
Adding, Reordering & Deleting in Weebly

5. Working with Web Pages
As you build your website, you will want to add web pages for organization
Most websites have a Home (Index) page and then each topic area has its own page
With the navigation bar in Weebly, it is very easy to add additional web pages to your site
Weebly’s Page Menu lets you add, remove and reorder web pages, which auto-updates your navigation bar on your site

6. Working with Web Pages – Adding a Page
Begin by logging into Weebly and choosing to Edit your Practice Site
On the menu bar, click on “Pages” – the left bar will change from the build bar to the pages bar
Note: If you chose a different theme, yours will look different from mine
Next to Pages is a Plus symbol, click on that and add another page to your list.
Notice you have several options, for practice, just use the Standard Page choice

7. Working with Pages – Adding a Page
Again, Select the “Standard Page” for this example
Give the page a name, I will use “Contact Us”
At this point, you can hit “Save” and Weebly takes you back to the Pages list

8. Working with Pages – Adding a Page
Additional Notes on the Adding a Page Window:
“Hide in Navigation”: Makes it so the new page is not listed in the Web Site Navigation
Great for time sensitive web pages and/or hiding a page from the web site that you are still working on (seriously, “Under Construction” on a blank web page that people can navigate to is so 90s)
Header Type: Changes the layout of the header area for the web page. For my “Contact Us” Page, a Tall Header or Short Header would be best design wise
You can let Weebly decide for you as far as the header type is concerned when you make the new page
Visibility & SEO Settings: These two options are more for business and search engines, leave these at the default for now

9. Working with Pages – Reorder Pages
To reorder the navigation, view all your pages in the Pages Tab
Click and hold on the page you want to reposition, then drag the page to the spot you want it to appear
Notice your navigation bar on the site – It automatically updates the order for you

10. Working with Pages – Deleting a Page
So you have created a page but changed your mind – How do you delete it?
To bring up the menu for a specific page, just click on its button in the pages bar
At the bottom of the page menu bar, you should see copy and delete
Choose to delete the page you just created
Weebly asks if you are sure – BE SURE! There is no undo!

11. Structural Elements
Working with Titles & Buttons in Weebly

12. Structural Elements – Working with a Title
Every web site has a Title to tie it together
Sub-pages can also have titles to help guide users as to their location in the site
Depending on the theme you picked, you may already have a Title on the page, or you may have to add one
Remember: All Weebly Themes will ask you to provide a title of some kind when you first create your site.
This can be changed at any time in the Settings options

13. Structural Elements – Working with a Title
Options for the title include:
Keep your current title
Upload a Logo (image), or
Turn the Title area off to make it disappear from the Theme
Tips on Titles:
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)
For using a Logo as a Title:
Select the Logo button for the Title
For the dialog box, you will need to upload an image from your computer (.jpg/.jpeg, .gif or .png)
Logos can be created in the Adobe Products

14. Structural Elements – Working with Buttons
To create a button, begin by dragging the Button element onto your page
Select the button to bring up its property menu
Can change the Button Text
How the button appears
Where on the page it is positioned,
Add a Link to the button, and
The spacing above and below the button

15. Structural Elements – Working with a Button
Adding more about Linking a Button
When you select link – You will have multiple options
For this example, choose Website URL
In the Address area, add a URL of your choosing
“Open in a New Window” – An old web practice, when this button is clicked, the link will open in a new tab in the browser window
If the link is going somewhere else that isn’t in your website, it is good practice to have it open in a new tab

16. Media Elements
Adding YouTube Videos & Uploading Files

17. Media Elements – Adding a YouTube Video
Next, let’s try the YouTube Media Element
Drag and drop the YouTube Element into your webpage, it will have a default video displaying
Click on the YouTube Video to bring up its sub-menu
To change the video, you will need to get a YouTube URL
Position: Changes the displayed location of the video
Spacing: Options for adding spacing above or below the video
Advanced: Enables you to change the size of the YouTube video, but default, it is set to auto size

18. Media Elements – Adding a YouTube Video
To get a YouTube URL:
Go to YouTube.com & bring up a video you’d like to use
When the video page opens, click on the ‘Share’ button to open the sharing options for the video
Highlight the URL and copy it
Go back to the YouTube Element in Weebly and bring up the sub-menu by clicking on the element
Paste the URL and the preview image for your video should appear

19. Media Elements – Uploading a Document
The document element gives you the option to display a word document or .pdf
If you are using this to display your resume or things you do not want people to be able to edit – use a .PDF (Portable Document Format)
Drag a Document Element to the page, click the new element and choose “Upload new File” at the top of the menu

20. Media Elements – Uploading a Document
After navigating click ‘Open’ and you should now see the document you selected being displayed

21. Pictures in Weebly
Adding and Editing Images

22. Images – Adding an Image
To begin – Drag an image element onto the webpage
The image element should now say ‘Upload Image’, click on that to open up the image options
Working with images, you have four sources that you can pull from to get an image:
My Computer: The local computer you are working on at the moment
Search: Offers the ability to search the Internet and pull a graphic in
Also controls for Copyright through the ‘Free Image’ search
Favorites: Images that were previously used and favorited from searching
URL: If you have the specific address (such as an image stored on a server) to display a graphic

23. Images – Adding an Image
Let’s practice searching for an image:
Click the Image Element to upload an image
When in the sub-menu, click on the Search button
Type in what you would like to search for and click ‘Search’
You will be shown the professional photo tab first
These photographs cost money, so click on the Free Photo tab
Select one of the Free Photos by hovering over it and clicking the select button to place it in the Image Element

24. Images – Editing an Image
Once the image is selected and placed, click on it to open the Edit panel. The top level options allow:
Lightbox, which makes the picture zoom when hovered over – the image becomes a thumbnail
Link, which lets you make it a button that takes you to a different page (provide the page URL)
Align, which orients the text around the image if it was added to a text element
Spacing, which allows you to add a buffer around the image (otherwise text will flow directly on the image
Caption, allows a small block of text below the image
Advanced, which allows you to set a border style and color, as well as Alt Text – what to show when you hover
The Edit Image button seen here is shown on next slide…

25. Images – Editing an Image, Continued
The Edit Image button allows you to crop, rotate, fade, and apply effects

26. Images – Editing an Image, Still Continued
Explore these options to try to recreate this format in an existing text element
Notice how the text wraps around the bottom of the image

27. Closing Review
Reminders about what we have done thus far

28. Closing Review Reminders about positioning & spacing:
When you drop elements on the page, Weebly can generate two columns on the page that place the elements side-by-side
Remember you can adjust the spacing by using the narrow blue bar that appears between them – Click to drag it left or right
The “X” in the upper right is to delete an element
Remember that once an element is deleted – it cannot be undone!
The arrow in the upper left is for copying elements (on the same page or to another) and to move an element to another page
The middle rectangle is to bring up the sub-menu options specific to that element and to drag/move the element around on the page
All elements include three basic options to be deleted, copies or moved on the page.
Remember to just hover over an element to see these options for that element