OLD LU ASL Weebly is an easy way to build a fantastic site, but that doesn’t mean a little guidance can't make it even easier. Beginning Weebly - Let’s Get Started by Selecting a Theme! The first step to building your site is selecting a theme, There are well over a hundred themes to choose from with more added every month. See a theme you like? Mouse on over and Choose it. It might be a little overwhelming to choose exactly which theme you want before you've even started working on your site, but there's no need to worry since you can very easily change the theme later. So just select a theme to get started. ‘After you pick a theme you'll be asked to choose your site's address / domain name. The simplest thing to do is select a free subdomain of Weebly.com using the first option and then enter your name, grade, and content area Intro to Content Elements Weebly Elements are the essential building blocks of your site. Nearly all the content you to add to your pages will be built with Elements, Quite simply, you only need to find the Element you want to use then Click, Drag and Drop it exactly where you want it.‘Add as many Elements to a page as you want, and the page will just lengthen as you add more elements on top of, or below, the last. As you drag an Element to a page, a blue guide line will tell you where the element will be placed when you drop it. Either stack elements on top of each other or, drag one element to the left or right of another. sments side-b; When you place equal space to each element. e, Weebly will generate two columns on the page that allot ‘You can adjust the space between these columns by using the narrow bar that appears between them, Just click and drag to the left or ri All elements have three universal options: Delete, Copy and Move. Hover over an element and a blue L appear. The "X" in the upper right allows you to delete this element. Keep in mind though, once deleted, it can never come back. Poet Perey Fim menotanny amen Mateo aedes {ld with litle more thanmy camera, Macbook abicycle, a sd mysel in trouble (a Hitchhiker's Guide totheThe arrow in the upper left allows you to copy an element (to the same page or another page) or to move an element (to another page). ida trusty towe br anyone who ‘And clicking on the box between the "X" and the arrow, allows you to pick the element up and drag it around the page. ‘rllthere! My rae’ Tom and uaingthe ward wamitle me han ny camera. Macbook abieyele. a Intro to Page Layouts There ate two ways to add content to any standard page you create: build the page from scratch by dragging elements to a page in the order you'd like them to appear or by Choosing a Layout. We ly’s Page Layout feature allows fou to quickly build out a blank page by choosing from over 40 layout designs and simply adding your own content. Layouts are designed with the most common page types in mind: Home, About, Services, Contact, Menu, and Portfolio, These page headings can also be customized. Select a layout, then Keep it if you like it, or Cancel to choose another. Keeping the Layout will make it an editable part of your page. Simply click on each element to add your own content. You can use the layout just as it is, or expand and alter it as you see fit. Any element within a layout can be deleted if you don't want it, and new elements can be dragged into (and outside of) the layout if you'd like to add more and different kinds of content to the page.‘What if you later decide you'd prefer to use a different kind of layout for the page? Well, we only display the option to choose a layout when a page is blank. So to select a different layout you'd need to delete all the elements currently on the page. If this, seems like a lot of work, keep a couple of things in mind: You can drag elements around on the screen to completely change the layout on your own. You're not locked in to the layout you choose, you can treat it as just a starting point that can be changed whenever you feel like it. Ifyou really want to start a page over with a new layout, you can always go to the Pages tab and start a new Page with the same name (and just delete the old one). We always prompt you to Choose a Layout on a new page. Create More Pages for Your Site Click Add Page to create a new page. Edit Page There are a few different page options, but Standard Page is the one you will want to select. Adding more pages is a matter of clicking Add Page and choosing Standard Page again (and again). As you add (and name) each of your pages, they'll automatically become part of your site's navigation bar. ‘You can rearrange the order of the pages by clicking and dragging them up and down the Pages list Dragging a page to the top of the list will make that page your Home (though you can name it whatever you'd like),You're also able to create subpages of other pages. You can do this by dragging a page or pages underneath and to the right of another page. The navigation menu will show your main pages, and when you hover over them, your sub-pages will appear in a drop-down menu below them, Welcome Page Name ra Japan Hide page in navigation a ~ Header Type: — vr on ——> Europe The Americas Tall Header tt To edit the content of a page just click on its link from the navigation menu or go to the Pages tab, select the page from the list and click the Edit Page button. 2 Ad First Element ig Pictures to a Site There are four ways to add pictures to your pages: Image Elements, Slideshow Elements, Gallery Elements, and via Headers. The most commonly used of these is the Image Element Drag the image element to a page. Welcome to Biology with Mr, DunneThen click on the element to open the image dialog box. There are several ways to add a photo. The most direct is to upload an image from your own computer, by dragging an ima e from your desktop into the window, or clicking “upload a photo” and selecting the file ize of a picture will vary after upload, but it may be a different size than you'd like and will be as wide as the entire site. You can alter this, though; hover over over the image and a blue box in the lower right comer will appear, which you can click and drag to adjust the image’s size.Clicking on the photo also opens up a settings dialog box that you can use to make further changes. Edit Image Lightbox: If you turn this on then any visitor who clicks the image on your site will be shown a larger version. I k: This option turns the image into a link 1g: Makes minor adjustments to the amount of white space around the picture. Caption: Lets you add a basic text caption under the pic Advanced: Allows you to adjust (or turn off / on) the border around the picture. And the big blue Edit Image button will open a simple image editor, where you can add basic effects, rotate, or crop your image SB OmeThe Crop option places a box over the top of the picture, You can click on that box to drag it around and adjust the bubbles on the corners and sides to change the dimensions. Once you've made changes click OK. If you dont like the changes you can click Crop again to readjust or click the grey Cancel button to drop out of the editor. Edit the Header All themes include a header image at the top of each page. As it's doubtful you'll want to use this, default image on any of your pages, we've made this header very simple to edit and change. To get started, scroll over the header image and click the Edit Image button: Tom's Travel Photography none - Depending on your theme, you'll be prompted by one of two interfaces. Hither one that asks you to Select Background or one that asks you to Add Image. After selecting an image, select the Save button to Save it, You can use the arrow to the right of the Save button to choose whether to save the image to every page of the site, just this page or to select only certain pages to save it to, In that way you can have different headers on different pages if you want, Iryou’re prompted to Select Background when you change the header, then the process is a little different. You'll first see a dialog box that contains a collection of high-quality stock photos that you're welcome to use. Or you can upload an image from your own computer using the Upload Image option in the Lower left of that same dialog box. Whichever direction you choose, you'll be presented with some basic image editing tools to blur or darken the image (so any text overlaid above it stands out more) and to Save the image only to thisone page or to any other pages that are using the same kind of Page Layout as the one you're working on. Edit Fonts Each Weebly theme includes default, global font settings for all your text. But you can change these font settings through the hange Fonts area found under the Design tab, There are mumerous font controls to choose from in this section, but only a few of them have much impact on the overall look of your site. The most important of these s Paragraph text controls the default font for all the Text elements you add to your site. You can change the Font Family, Size, Weight, and Color. There are a little over 100 font families available. Each of these is what is known as a “web safe” font. This mé any computer, will be able to view the font without any trouble, Set your font size to any number you like; however, for paragraph text we recommend keeping the size between 12 and 20 pixels. This ensures that your text is large enough to read, yet not so large as to give the impression you're sereaming at people. tings is called Paragraph Text. s any person, using any browser, on How to Switch Themes The very first step in creating a site is selecting a theme for that site. But that doesn't mean you're stuck with theme you selected. You can change your theme by going to the Design tab and selWhen you scroll over a theme you're given the option to Preview it. Previewing it shows exactly how your own pictures and content would appear in this new theme. If you like the theme you can Choose it, if you don't you can Cancel and look through some of the other themes. ‘You can sort the themes by categories and popularity, if you'd prefer not to scroll through all of them. Ey ead Newest ed Parry or Corporate Coe Ce Seek ord rae Start a New Blog To create a blog, go to the Pages tab of the editor, click Add Page and Select the Blog Page option. This will add the blog to your list of pages. Give the blog a name and then click Edit Pa eto start adding content.‘A new blog starts with a blank content area and a sidebar with some default content that you can easily change. To create your first post, click the New Post button at the bottom of the screen. Change the Look of a Page by Altering Header Types Every Weebly theme includes a number of different types for the header of each page. The number and kind of types available vary from theme to theme, but they all have at least four that can be applied to any and all of your pages. Select a Header Type from the options under the Pages tab. You can also change the header from the page itself, by clicking on the gear icon in the lower right corner of the current header. This can be changed later (and over and over again), so feel free try out different types to determine which one you'd like to use, Pages + Ai Edit Page — = = —— Wsioey: © Your Site ‘Now that you've added some basic content to your site, this is a pretty good time Publish it. To do so, just use the Publish button in the upper right corner of the editor. This will bring up a verification box, letting you know your site has been Published, Congrats! Your website is now liveUnder Settings, then General, at the bottom of the page we show you the last time you published, as well as giving you the option to Un-Publish your site. When you decide you're ready for people to view your site again, just click Publish. It’s that simple. Weebly — Digging a Little Deeper! ‘Adding text to your site is as easy as dragging any of our text elements to a page. ‘The primary text elements are Text and Title. The text element is exactly what it sounds like: an element for writing text. Click inside the element to start writing, Eos As you write, take note of the gray toolbar at the top of the element, This is the text toolbar and it allows basic changes to the formatting of your text. It works much like any other such toolbar normally works: select the text you want to change and click the appropriate button to make that change. Create Text Links Any text you enter into one our Text or Image elements can be turned into a link (or hyperlink) to another site, a page on your own site, a downloadable file, or an email address. To ereate a text link, first highlight the text you want to use for the link, ‘Then click the "chain link" icon in the text toolbar. ‘This will open the link dialog box, where you can select the kind of link you'd like to create. Link to:When you've created your link, click Save. Just keep in mind this link won't be active in the editor, but clicking on it will show you where it leads, and give you the ability to change or remove it if needed. Your link will be fully functional on the Published site. kext that | Go to link: htto:/www.onlyinsanfrancisco.com/ - Change -Remove *| Create Image Links To create a picture link, first click the image you want to use for the link. Then click the Link option in the image toolbox. This will open the link dialog box, where you can select the kind of link you'd like to create, When you've selected the link you want, just Save and you're all set. Just keep in mind that the link won't do anything in the editor; itll only work on the Published site. Create Button Links The button element enables you to create call-to-action buttons that link to other pages on your own site, pages on other sites, or files like PDFs and documents, ‘As with any other element, you can add a button to your site by dragging it to a page. The button is essentially nothing more than a link that stands out because of it’s size and how it looks. You can edit the text of a button so that it says whatever you like, Though buttons ideally should contain no more than five or six words,The style of the button can be altered via four preset options. Each button has two colors and two sizes specifically designed for the specific theme you're using, ‘When should you use a button instead of a regular link? When a very strong call to action is needed (like leading visitors to a page where they can purchase a product) and you want to make the link stand out more than usual Upload PDFs, PowerPoint Slides, and other Docs ‘You have the option to upload and link to pretty much any kind of document, allowing a visitor to download it to their computer. Or you can embed a document so it is directly visible on a page. You can create a link to a document either by highlighting the text you want to link or clicking on an image. Then selecting the appropriate link option for either Either option will open a link dialog box from where you'll need to select the File tab on the left and then click the Upload a File button, Link to: ‘And then select the file you want to upload from your computer.Upload an Image Slideshow To add a slideshow of images, drag the element to a page on your site. This will open the "Choose a Slideshow Style" dialog box where you can select which style of slideshow you want. This can always be changed later, so don't spend too much time worrying about which one you want. You'll now be prompted to upload photos. Hit the big Upload Photos button or just drag some photos into the box to get started. Then select the photos you want to upload, You will be able to both delete unwanted photos and add more photos to the slideshow at any time Depending on how many photos you've chosen, it may take them a few minutes to upload. Once theyre done uploading you'll see them all on the photo management screen. ‘You can drag photos to re-order them, click the "x" next to each to delete them and click the "bubble" icon to add a caption that'll appear along with the photo in the slideshow. ‘Drag to reorder photos. Click the bubble icons to add captions, ave oe ‘When you're ready to move on, click Save and you'll see the slideshow as part of the page.Click on the slideshow to open its toolbox and make changes. Ee CEVA a aoe cod cr fore) Use the Add / Edit Photos button to bring up the Manage Photos dialog box we saw earlier. Use Transition Style to switch between five different photo transitions Use Navigation to select whether you want to use Thumbnails, Numbers or no navigation at all Use Speed to determine how fast the slideshow should play. Use spacing the tweak the amount of space around the image. Use Caption to determine if any text captions should appear at the top or bottom of each image. ‘And with the Advanced option, set Autoplay to On or Off (i's on by default) and determine if you want the slideshow to always play in order or start from a random point every time the show is loaded. Note that the slide show will automatically expand to the width of the page or column in which you've placed it. So if you want to shrink a slideshow, you simply need to place it in a column by dragging a Spacer element too either side of it. Upload an Image Gallery ‘The Weebly gallery element enables you to display several images (as many as you want) in a click- to-see-a-larger-version grid format that you control. Drag the Photo Gallery element to a page to get started.Then click the Upload Images button that appears in the element. And either drag images into the box or click the big green Upload Photos button, This will let you select images from your computer to upload, You can select multiple images by holding the CTRL key. If you have trouble uploading images, it is recommended to limit the number you upload to no more than 50 or so ata time, You can always add more later Give the photos a few minutes to upload and then you'll see your gallery on the page. Each image in the gallery automatically links to a larger version of the image. You can also link an image elsewhere (another site or page) if you like or add a caption that will appear on the enlarged version of an image. Click on the gallery to see these options. z Fore Cat Click on thumbnails and drag them around to rearrange images within the gallery The gallery's toolbox enables you to make additional changes. eset eo] oe) en ‘Add Images. There's no limit, but we recommend uploading no more than 200 images to any one gallery so as to not overwhelm your visitors. Determine the number of columns you want, The default is 3, but you can use from 2 to 6. Se 4 the amount of Spacing to place between each image. ‘And with Advanced, choose if you want a border around each thumbnail or not. And select if you want to crop the thumbnails to either squares or rectangles. This cropping has no impact on the enlarged images, it only changes the look of the thumbnails to make the gallery look more uniform,Copy a Page A page can be copied and used as the basis for a new page. To do this, just go to the Pages tab and, select the page you want to copy from your list of pages, then use the Copy Page button to generate a copy of the page. es EY co = ca This will generate a new page at the bottom of your list of pages. This new page will have the same name as the original page. Give the page a new name and then click Save & Edit to make changes to it Reorder Pages [As you add pages to your site, they appear in the site's navigation menu and are also stacked in a list found under your Pages tab. Where a page appears on this Pages list directly controls where it appears in the navigation. To move a page elsewhere in the lis, just click it and drag it wherever you want, Organize Subpages If your site has more pages than you can fit on the navigation bar our system will automatically create a More link and add all of your new pages as subpages of this More link.This works reasonably well, but a better option is to avoid this More link entirely by making any excess pages of your site sub-pages of other pages. This gives you more control over the structure of the site. How? By using the option found under the Pages tab. Drag a page underneath and to the right of another page in the list to create a subpage.Pages Embed Videos from YouTube Let's start with how to use the YouTube element, As with any other element, drag it to a page to get things going Then click anywhere in the element to bring up the Toolbar. You need to enter the direct link to the YouTube video in the provided field.To find the direct link, click the Share button beneath the YouTube video. And copy / paste from there. No other link will work, so be sure to use the one found here. Spectacular Norway Northem Lights Once you add the link, the video should show up on your page in less that a minute, [fit does not show up then you are not using the direct link - please double check that you are copying the proper link using the option noted above. Once the link is in place, you can determine the size of the video player using the Advanced option in the YouTube element's toolbox. If you feel at all limited by this element, you're also welcome to embed videos from YouTube using cour Embed Code element, How so? Find the video you'd like to add to your site, then click the Share link. Select the Embed option and copy the code provided in that section. Edit your Weebly site and drag the Embed Code element to apage. Click the Edit Custom HTML button and paste the YouTube code into the box. Then simply click outside of the element and your video will appear! Add Your Twitter Feed Twitter provides an easy to use widget generator so you can share all your recent tweets with visitors to your site. Start by going here’ https:/twitter. com/settings/widgets, Then sel the Create New button in the upper right. If you're not already logged in to Twitter you'll this Ci be prompted to log in before you're able to ac ¢ New button, Select the User Timeline tab and fill in all the info requested there.@ vor serton he Sesion Contguration ewrere | 9 ang cote sfc eae swears ace sven (ae HQ seven Preview Tweets eretnenonnin Retr Somating te com youcteloge rsa tnayu wih 0 mie aiTrntesstdiersumanurce nt ara ‘cnn conto so tbe nto with Soon stoned Esodangstlnen eran Yon you onan saniaounnagrat ry, rae Make sure the username field matches the username of the Twitter account you're currently using. Twitter will allow you to change the username field (for some mysterious and unknown reason) but if you enter a username other than one you're logged into you'll later see an error stating "Unable to save your widget, please check your inputs." ‘You can change the height of the feed (the default of 600 is alittle tall) and switch from the Light theme to a Darker one should it better suit your fancy. When you're done, click the Save Changes or Create Widget button. Twitter will present you with code to copy & paste to your site, Select all of that code and Copy it. Then go to Weebly and drag a Custom HTML Element to the section of your site where you'd like the Widget to appear.