I've created this page to be an in-app instruction guide for you to learn the next steps of weebly mastery. I don't exactly have a syllabus for you, but we can take each concept step-by-step until your grasp of it allows you to explore beyond what I show you.
Impromtu Lesson 1: Images
For starters, look up at the top of the page! See the image at the head of this page? It's some random HQ shot of a body of water that I added as an example. You're going to change it.
It's really simple to do it!
- Highlight the image, avoiding the header text (the white text that says "Tutorial Lesson 1"). It should gray a bit, showing that you're about to edit it. Click.
- You will be presented with two options, both fairly self-explanatory. Don't worry about header layout for now. Instead, choose "edit background."
- This will show the main options for providing a header/section background. All of them are self explanatory. Feel free to try background options other than "Image" and "Video" before proceeding to the next step. Remember, this page's content won't negatively affect the rest of the website unless you reaaaally want it to.
- When you're ready to proceed with the lesson, choose "Image." You can either replace the image, which is what you're gonna do, or you can 'edit' the image. Weebly features a built-in editor that allows for you to do... very little. It only allows for four filters, blurring, and darkening. For now, just choose to replace it.
- I assume you can figure out how this works. Just choose to upload an image file that I'll recognize as a new image.
- After uploading, it will actually take you right to the 'edit' screen that I mentioned before! Feel free to mess around with some of the filters. I personally find the "blur" feature to be the most useful, and actually use it on many of the pages I've designed for you guys.
- Congrats! Hit the "save" button to apply it.
- Back on the background edit menu, I want to quickly explain what "Scroll options" are, they're actually quite cool. Well.. rather than explaining what they are, why don't you try changing them and seeing what results? That's likely the best way to explain it.
And that's how you replace header images!
Little did you know, I also was teaching you how to change the background of "Sections." Remember that for another lesson!
Next, we're going to go over inline images! They're the most basic forms, and won't take long to explain. See that triangle to the left of this? It's actually an inline image!
If you're not already there, please switch from the "Pages" tab to the "Build" tab on the top of this editor.
- Find "Image" under the "BASIC" category on the left of your screen. Drag and drop it into the green rectangle below.
- (Make sure you highlight the area that says "Drag elements here." A line should appear showing it inside of the rectangle.)
- You will then be prompted with a image upload screen identical to the one you used when changing the header image! This time, it won't allow you to edit, though. Choose whatever image you like.
- Congrats, it's in there! If you highlight the image, you can see small blue squares appear at the bottom of the image. Dragging these will allow you to resize your image. Fair warning: It's incredibly finicky. Resize your image to be smaller than it was when you originally uploaded it.
- If you want, you can make images in-text images! To do this, simply drag and drop an image element like before, but instead of dropping it in a rectangle, drag it into the text box below.
And that's how you Add basic inline images!
Lastly, we're going to tackle SLIDESHOWS! They're what I use for the homescreen, and rather self explanatory. I'll create one below for you to edit.
Slideshows are easy! Simply click on them to begin editing. Adding a slideshow will make it adapt to the size of the page it's added to. To make this slideshow smaller, I've added this text box beside it, more on that later.
- Adding and deleting photos is as easy as the other image types, however, you WILL get additional options for the images you add. To start, try adding an image to the slideshow by clicking "Add photos" on the top right of the window.
- After you've added 1-2 images, you can add several modifyers to them. From left to right, they are: Link, caption, alt-text, delete. Start by deleting one of the pictures I have on there.
- Link allows you to make it so that clicking on the picture will either take you to a page within this weebly website, or a location ourside of it.
- Caption will add text to the image depending on the theme setting and the option chosen in the menu I described above
- Alt-text is web programmer jargon that means "Text that appears when the mouse hovers above the image or when read by a text-to-speech filter for blind people."
- Delete is... do I gotta explain that?
- Since you already deleted one of the pictures I had on there, try adding a link to one image (You can link it to a humorous youtube video if you like, or a good song), a caption to another, and alt-text to a third.
And that's how you Set up a slideshow!
Image resolution does come into play, but that's a lesson for another day.