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

2. Overview  Review  Adding a second website  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  Review  Adding a second website  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  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.  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. Dashboards-old   Here is the old daskboard  Hee is how to switchmbetween them   Here is the old daskboard  Hee is how to switchmbetween them

6. Old dashboard

7. Switching  Choose Account  Switch to old:  Choose Account  Switch to old:

8. Switchingold/new Choose Account settings (top right) Then change back

9. Adding a Site  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  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

10. 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  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

11. 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  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

12. 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  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

13. 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!  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!

14. Elements Overview of Weebly’s Elements

15. 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  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

16. Layouts Overview of Weebly’s web site Layouts

17. 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  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

18. 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  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

19. 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  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

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

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

22. 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  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

23. 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  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

24. 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  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

25. 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  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

26. 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  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

27. 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!  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!

28. 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:  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:

29. 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  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

30. 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)  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)

31. 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

32. 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!  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!