1. Elements Intro & Site Management
Continuing Weebly web site creation

2. Overview Review Adding a second website Editing a Site Elements
Setting the settings for the website
Editing a Site
Elements
Layouts
Working with Elements
Stacking Order
Moving Elements
Elements Workflow
Copy, Move and Delete Elements

3. Review We eventually want to have two sites:
One for experimenting/practicing, and
One for an Indian Pow-Wow I went to
We will begin with the Practice Site today. You will complete the Pow-Wow site on your own

4. Adding a Site Start by logging into Weebly
At this point you will see your Dashboard and should see your site from our last practice
The dashboard enables easy navigation between websites and options per each site.

5. Adding a Site Weebly will take you back to the Choose a Theme Page
To add a second site –
Next to the title of the current website, there is a circle with a plus symbol next to it
Click on the plus symbol button and a drop down menu will appear
Select the “Add Site” option
Weebly will take you back to the Choose a Theme Page

6. Adding a Site
Similar to the last example we did, select a theme for your new web site
Use a sub-domain of weebly.com again:
No two people can have the same sub-domain name so,
Call this website – YOURINITIALSjmaPractice
Click the Continue Button

7. Adding a Site - Settings
Navigate to the Settings of the new practice website and under the General Settings change the Site title to “My Practice Site” and make sure the “Show title on the top of your pages” is checked.
Click the save button and close out the settings panel

8. Adding a Site
Click on the ‘W’ in the upper left corner to go back to your Dashboard
The second site you just created should be the active website
To change this in the future, again:
Click on the + button next to the title for the drop down menu to appear
You will see the list of websites for your account, just click on one to select it and make it the active website

9. Editing a Site from the Dashboard
Using the Drop Down button next to the title of the website, select the site you want to work on by clicking it to make it active (We will be continuing with the practice site)
Click the Edit Site Button to navigate to the editor
Side Note: The “…” Button offers additional options – Specifically deleting a website
Deleting a website is forever! THERE IS NO UNDO TO THIS OPTION!

10. Elements
Overview of Weebly’s Elements

11. Elements
We will be using elements (aka building blocks) to create and edit the web sites
Most common elements are text and images (which is why they are the basic elements at the top of the Weebly element bar)
Elements are the building blocks of a site
This includes text, pictures, video and other content are added through elements
There are a few exceptions like header images, which will be covered later
Once an element is dragged and dropped onto the page, you can click on the element to move it around, or open its sub-menu to make additional changes

12. Layouts
Overview of Weebly’s web site Layouts

13. Layouts Every Weebly page has at least one layout
A given page might have several layouts or designs
The layouts and options of a web site in Weebly depends on the theme selected
Some themes have anywhere from four to six different layouts that can be applied to an individual page

14. Layouts
For example – a landing page might have a large banner image with text overlaying it
Landing Page: Often considered the home page of a web site, these are often very unique in comparison to the rest of the web site layout.
Meant to be eye catching and normally consist of three basic elements in Weebly:
Text, Image and a Button

15. Layouts
The Text Areas are the places for adding content that is pertinent to the web site
For example, the Title Text would be the name of your web site, where the sub-heading would be a catch phrase describing your website
Adding images or a slide show about your site offers visitors the quick extract of your site which you can do in Weebly just by dragging and dropping the slide show element onto the page
Buttons are a means of navigation and adding calls to action such as contact us or connecting to a blog website

16. Working with Elements
Organizing and applying Elements to web pages

17. Working with Elements
Most of the Weebly Themes allow you to just drag and drop an element onto your web page

18. Working with Elements
Select a Text Element and drag it onto your web page
Notice the blue outline and lines noting where the element will be dropped
Don’t worry if it gets misplaced in the process – you can still move the element after it’s been placed
Can add the following place holder text (Lorem Ipsum) or your own:
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

19. Working with Elements
Once added, an additional open bar will appear to allow you to edit and work with the text further
Try Yourself:
Add another element to the web page and edit it
You can add as many elements to a page as you want/need, the page will just continue to get longer to accommodate however many elements you drag on

20. Working with Elements
Weebly Elements will stack one on top of the other if left to their own devices
Can easily place the elements side by side by dragging an element to the right or left of another until you see a blue, vertical line

21. Working with Elements
When you are ready to make edits to a specific element, just click on it to bring up it’s sub menu.
Try it Yourself: Add the Map Element and bring up its sub- menu and edit it

22. Elements Workflow - Example
I created and saved 100 Lorem Ipsum words
I added a text element to the web page, and pasted the text into the text element
Next I add an image element. There is no image in it yet, this will have to be added

23. Elements Workflow - Example
Having placed the image element, I click on it to upload an image into the element
I want to place it to the right of the text so I will click on the handle in the middle and position it until I see the blue bar
Note: Weebly does offer you the option to search the web for photos. You should select the “Free Photo” Tab. Just because it’s on the Internet doesn’t mean its free for you to use!

24. Elements Workflow - Example
Once I place the image next to the text, I want to edit the columns spacing.
This can be done by using the narrow bar that appears between the text and image. Just click and drag left or right:

25. Elements – Copy, Move and Delete
Aside from the various functions of each element, like adding text and uploading photos all elements include three basic options:
Copy, Move and Delete
These can be seen each time you hover over any element

26. Element - Copy
The arrow in the upper-left corner of an element opens a drop down menu
In the drop down menu you can:
Copy an element (either on the same page or to another), and
Move the element to another page (and gives options of which page to move it to)

27. Elements - Move
Clicking on the handle between the Copy Arrow and the Delete X enables you to pick up the element and drag it around the page and reposition it in the stack order of elements

28. Elements - Delete
The “X” in the upper right allows you to delete an element.
NOTE: Be careful deleting elements, once deleted they are gone
THERE IS NO UNDO BUTTON!