Elements Intro & Site Management Continuing Weebly web site creation

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

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

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.

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

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

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

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

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!

Elements Overview of Weebly’s Elements

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

Layouts Overview of Weebly’s web site Layouts

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

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

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

Working with Elements Organizing and applying Elements to web pages

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

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

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

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

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

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

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!

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:

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

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)

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

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!