! ! ! !! !! !!
Adding Elements in Weebly!
Section 1: Adding Text Elements ! 1. Log into your Weebly account at: https://education.weebly.com ! 2. Click the Edit button to edit your site.!
3. Click on the Build button. (When you edit or add any elements to a page (text, images, etc.), you will work under the Build button of the Site Creator Toolbar.)!
! !
4. There are two types of text you can add to a page, titles and text. They both work the same way. In this example, we will add a Text Element. ! 5. Click, hold, and drag a Text Element from the Elements Window to your page. As you drag, you’ll notice a long blue placement bar. This placement bar shows where the element will be added to the page.!
! 6. A text box will appear. Click on the box to type your text. !
!! !! !! !!
July 2014!
!
1
7. Notice the Text Toolbar above your text box. This toolbar will allow you to format your text. You must highlight the text to change its formatting. Looking at the toolbar from left to right, you can do the following to your text: bold, italics, underline, increase text size, decrease text size, change text color, link to a website, align text, create a bulleted list, create a numbered list, remove formatting, undo, and redo. (You are not able to change your font here. This change must be made in the Design tab.) !
!! !! !! ! !! !! !!
8. When you are done typing in the text box, just click off the box. If you need to edit the text again, just click back on it.! 9. To move a Text Element, move your mouse over it so that the text box appears. Then, click, hold, and drag the element using the blue box at the top of the box. (You will move all other elements using the same blue box.)!
10.To delete a Text Element, move your mouse over it so that the text box appears. Then, click the blue X at the top right of the box. (You will delete all other elements using the same X.) Then, click the Delete button. (To cancel the delete, click anywhere else on the screen.)!
!! !! !! !! !
11. All of the elements that you add to a page, stack on top of each other. To change the structure of your page, you can add columns, dividers, and spacers. You’ll find these in the Elements Window in Weebly. Click the Structure button to show the Structure Elements. The Structure Elements include: Divider, Spacer, Button, and Search Box (not available for free users). We’ll explore these in the next few sections. !
!! !! !! !! !! !! !! !! !! !! !!
July 2014!
!
2
Section 2: Adding the Divider Element!
!
1. The Divider Element places a line between other Elements you have on your webpage. To add the Divider Element, click, hold, and drag it from the Elements Window to your page. As you drag the Divider Element, a blue line will appear as a guide to help you place it on your page. !
!! !! !! ! ! !
!! !! !! !
Optional: Click the divider on your page to see the Divider Toolbar. You can use the toolbar to make small changes to the spacing and width of the divider. !
Section 3: Adding the Spacer Element! 1. The Spacer Element allows you to put spaces between your titles, text, images, etc. To add the Spacer Element, click, hold, and drag it from the Elements Window to your page. The Spacer Element appears as a faint, dotted rectangle on your page. (Visitors to your site will only see an empty space on your published site.) !
!! !
2. To make the space smaller or larger, place your mouse over the rectangle. Then, click, hold and drag the blue line up or down.!
Section 4: Adding the Button Element!
! !! !! !!
1. To add the Button Element to your page, click, hold, and drag it from the Elements Window to your page. Click on the button labeled “Button Text” that appears on the page to edit it. !
!! July 2014!
!!
!
!
3
2. You will use the Button Toolbar to format and link your button to a website. Below are your options:
!! !! !! ! !! !! !! !! ! !! !! !! ! !! !! !! !! !! !! !! !!
!
a. To change the alignment of your button, click the right, center, or left align option.!
!
b. To change the style (size and color) of your button, click Button Style and choose an option.!
!
c. To add a link to your button, click the Link button in the toolbar. !
! !
You can link your button to several things: a website, another page on your site, store page (will not use), a file, or an email address. Let’s look at each next. ! Click the button beside one to choose it:! 1. Website URL: Type in the link to an external website.!
! ! !
2. Standard Page: Click the button to choose another page within your site to link to. ! 3. Store Page: This will not be used.! 4. File: Link to a PDF file that you have saved on your computer. Click on Upload a new file. Then, choose the file in the window that appears. !
!
5. Email Address: Type your email address.!
!
Make your selection and then click Save. If you need to remove the link, click the Remove Link button in the top right of the window. !
!! !!
!
July 2014!
!
4
!
d. To change the spacing of your button, click the Spacing button in the toolbar. Here you have the option of adjusting the spacing above and below the button.!
Section 5: Adding the Image Element!
!
1. Adding an image to a page is just like adding text. Click the Text button in the Elements Window to see the Image Elements. In this example, we will add an Image Element. Click, hold, and drag the Image Element from the Elements Window to your page!
! ! !! ! ! !! !! !! !! !! !! !! !! ! !! !! !! !
! 2. Click on the Upload Image icon to upload or browse for an image.!
July 2014!
!
5
!
3. In the window that opens, you can choose to add a photo by: uploading or dragging a photo from your computer, or searching the Weebly stock photo database.!
!! !! !! !! !! !! !! !! !! ! !! !! !! !! !! !! !! !! !
4. In this example, we will focus on uploading or dragging a photo from your computer. !
!! !! !
a. To drag a photo, just position your browser window so that you can see the photo that you saved onto your desktop. Then, click, hold, and drag the photo to the Weebly window. !
b. To upload a photo from your computer, click on the green button labeled “Upload a photo from your computer.” In the window that opens, navigate to where you saved the photo and click on it to choose it. Then, click Open.!
5. To resize the photo, put your mouse on the photo. Notice the blue square in the bottom right of the photo. Click, hold and drag the square to resize the photo. (You can also move and delete the Image Element the same way you do any element you add.)!
!! !!
Resize
July 2014!
!
6
6. When you have the Image Element selected, an Image Toolbar appears.!
!! !! !! !! !
! !! !! !! !!
a. Here you can:! • Edit Image- Crop, rotate, add opacity, fade, or add an effect (See directions below)! • Alignment- Right, center, or left align a photo! • Lightbox- If this is turned on, a visitor to your site can click on the photo to reveal a larger ! photo.! • Link- Use this to link your photo to a website, a standard page on your site, a file, or an ! email address. (See section 4 step 2 for instructions).! • Spacing- Adjust the amount of white space around your photo! • Caption- Add a caption to your photo.! • Advanced- Add a border around your photo.!
7. To edit an image, click the Edit Image button. !
! ! !
a. Crop: Click, hold, and drag the gray dots that appear on the image when you click the Crop Tool. You can also ! move the crop box around by clicking, holding, and dragging it. Press OK to save. Click Cancel to exit the Crop ! tool.!
! ! !
b. Rotate: The left and right buttons allow you to rotate the image at a 90° angle. The slider allows you to rotate ! manually. To flip the image, use the vertical and horizontal flip buttons. Press OK to save. Click Cancel to exit the ! Rotate tool. !
!! !! !! !! !! !! !! ! !! !! !! !!
July 2014!
!
7
!
! !
c. Opacity: Move the slider backwards to change the opacity. This will dim the colors in the photo. Press OK to save. ! Click Cancel to exit the Opacity tool.!
! !
d. Fade: Move the slider to the right to fade the photo. Use the arrows to control the direction of the fade. Press OK to save. Click Cancel to exit the Fade tool.!
! !
e. Effects: Click on an effect to change the appearance of the photo. Press OK to save. Click Cancel to exit the ! Effects tool.!
!! !! !! !! !! ! !! !! !! !! !! !! !
When you are done editing your picture, click the Save button. (Use the Cancel button if you do not want to save your changes.)!
Section 6: Creating Columns! 1. To create columns, you place Elements side by side. To do this, drag your first Element (text, image, etc.) to your page. Then, drag your second Element, placing it in front of your first. As you are dragging your second Element, be sure to watch the blue line to make sure that it is in front of your first Element. Once it is, let go of your mouse. !
!! !! !! !! !
2. You should now have two columns. (In my example, I added two Text Elements, but you can also use columns to place images and other Elements in columns.) !
3. To change the width of a column, move your mouse over one of the column’s Elements. A blue line should appear. ! Click, hold, and drag the blue line to the left or right to change the width. (This bar will not appear on your published ! ! website.)!
July 2014!
!
8
! ! !! !
4. You can add additional Elements next to existing columns to make more columns. ! 5. To delete a column, move your mouse over the Element in the column you want to delete. Click the blue X. Then, click Delete to remove the Element and take away the column.!
!
Looking for additional resources? Check out the Weebly help center at: https://weebly.zendesk.com/hc/en-us
July 2014!
!
9
