Transcript Weebly Elements, Part 2

Overview
▪ Review Elements
▪ Working with Web Pages – Adding, Reorder & Deleting
▪ Structural Elements – Editing Title Text & Buttons
▪ Media Elements –Video & File Upload
▪ Adding & Editing an Image
▪ Closing Review
Review Elements
▪ Elements are the building blocks of a web site when using
Weebly
– This is your text, graphics, video, audio, etc. that adds interactivity to
your site.
▪ Remember, when using Weebly, the goal is to create
Responsive web designs using these elements
– This concept carries over into Web Design & Development, when using
languages like HTML & CSS
Working with Web Pages
Adding, Reordering & Deleting in Weebly
Working with Web Pages
▪ As you build your website, you will want to add web pages for
organization
▪ Most websites have a Home (Index) page and then each topic
area has its own page
– With the navigation bar in Weebly, it is very easy to add additional web
pages to your site
▪ Weebly’s Page Menu lets you add, remove and reorder web
pages, which auto-updates your navigation bar on your site
Working with Web Pages – Adding a Page
▪ Begin by logging into Weebly and choosing
to Edit your Practice Site
▪ On the menu bar, click on “Pages” – the left
bar will change from the build bar to the
pages bar
– Note: If you chose a different theme, yours will
look different from mine
▪ Next to Pages is a Plus symbol, click on that
and add another page to your list.
– Notice you have several options, for practice, just
use the Standard Page choice
Working with Pages – Adding a Page
▪ Again, Select the “Standard Page” for
this example
▪ Give the page a name, I will use
“Contact Us”
▪ At this point, you can hit “Save” and
Weebly takes you back to the Pages
list
Working with Pages – Adding a Page
▪ Additional Notes on the Adding a Page Window:
– “Hide in Navigation”: Makes it so the new page is not listed in the Web
Site Navigation
▪ Great for time sensitive web pages and/or hiding a page from the web site
that you are still working on (seriously, “Under Construction” on a blank web
page that people can navigate to is so 90s)
– Header Type: Changes the layout of the header area for the web page.
For my “Contact Us” Page, a Tall Header or Short Header would be best
design wise
▪ You can let Weebly decide for you as far as the header type is concerned
when you make the new page
– Visibility & SEO Settings: These two options are more for business and
search engines, leave these at the default for now
Working with Pages – Reorder Pages
▪ To reorder the navigation, view all your pages in the Pages Tab
▪ Click and hold on the page you want to reposition, then drag
the page to the spot you want it to appear
▪ Notice your navigation bar on the site – It automatically
updates the order for you
Working with Pages – Deleting a Page
▪ So you have created a page but changed your
mind – How do you delete it?
– To bring up the menu for a specific page, just click on its
button in the pages bar
▪ At the bottom of the page menu bar, you should
see copy and delete
– Choose to delete the page you just created
– Weebly asks if you are sure – BE SURE! There is no undo!
Structural Elements
Working with Titles & Buttons in Weebly
Structural Elements – Working with a Title
▪ Every web site has a Title to tie it together
– Sub-pages can also have titles to help guide users as to their location in the
site
▪ Depending on the theme you picked, you may already have a Title on
the page, or you may have to add one
▪ Remember: All Weebly Themes will ask you to provide a title of some
kind when you first create your site.
– This can be changed at any time in the Settings options
Structural Elements – Working with a Title
▪ Options for the title include:
– Keep your current title
– Upload a Logo (image), or
– Turn the Title area off to make it disappear from the Theme
▪ Tips on Titles:
– If you choose to stick with a text title, simply type whatever you want.
– It should be fairly short and to the point (no more than six or seven words)
▪ For using a Logo as a Title:
– Select the Logo button for the Title
– For the dialog box, you will need to upload an image from your computer
(.jpg/.jpeg, .gif or .png)
▪ Logos can be created in the Adobe Products
Structural Elements – Working with Buttons
▪ To create a button, begin by
dragging the Button element
onto your page
▪ Select the button to bring up
its property menu
– Can change the Button Text
– How the button appears
– Where on the page it is
positioned,
– Add a Link to the button, and
– The spacing above and below
the button
Structural Elements – Working with a Button
▪ Adding more about Linking a Button
▪ When you select link – You will have
multiple options
– For this example, choose Website URL
– In the Address area, add a URL of your
choosing
▪ “Open in a New Window” – An old web
practice, when this button is clicked, the
link will open in a new tab in the browser
window
– If the link is going somewhere else that isn’t
in your website, it is good practice to have it
open in a new tab
Media Elements
Adding YouTube Videos & Uploading Files
Media Elements – Adding a YouTube Video
▪ Next, let’s try the YouTube Media Element
▪ Drag and drop the YouTube Element into your
webpage, it will have a default video displaying
– Click on the YouTube Video to bring up its sub-menu
▪ To change the video, you will need to get a
YouTube URL
▪ Position: Changes the displayed location of the
video
▪ Spacing: Options for adding spacing above or
below the video
▪ Advanced: Enables you to change the size of the
YouTube video, but default, it is set to auto size
Media Elements – Adding a YouTube Video
▪ To get a YouTube URL:
– Go to YouTube.com & bring up a video you’d like
to use
– When the video page opens, click on the ‘Share’
button to open the sharing options for the video
– Highlight the URL and copy it
– Go back to the YouTube Element in Weebly and
bring up the sub-menu by clicking on the element
– Paste the URL and the preview image for your
video should appear
Media Elements – Uploading a Document
▪ The document element gives you the option to display a word
document or .pdf
– If you are using this to display your resume or things you do not want
people to be able to edit – use a .PDF (Portable Document Format)
▪ Drag a Document Element to the page, click the new element
and choose “Upload new File” at the top of the menu
Media Elements – Uploading a Document
▪ After navigating click ‘Open’ and you should now see the
document you selected being displayed
Pictures in Weebly
Adding and Editing Images
Images – Adding an Image
▪ To begin – Drag an image element onto the webpage
– The image element should now say ‘Upload Image’, click on
that to open up the image options
▪ Working with images, you have four sources that you
can pull from to get an image:
– My Computer: The local computer you are working on at the
moment
– Search: Offers the ability to search the Internet and pull a
graphic in
▪ Also controls for Copyright through the ‘Free Image’ search
– Favorites: Images that were previously used and favorited
from searching
– URL: If you have the specific address (such as an image
stored on a server) to display a graphic
Images – Adding an Image
▪ Let’s practice searching for an image:
– Click the Image Element to upload an image
– When in the sub-menu, click on the Search
button
▪ Type in what you would like to search for and
click ‘Search’
– You will be shown the professional photo tab
first
▪ These photographs cost money, so click on the
Free Photo tab
– Select one of the Free Photos by hovering
over it and clicking the select button to place
it in the Image Element
Images – Editing an Image
▪ Once the image is selected and placed, click on it
to open the Edit panel. The top level options allow:
– Lightbox, which makes the picture zoom when hovered
over – the image becomes a thumbnail
– Link, which lets you make it a button that takes you to a
different page (provide the page URL)
– Align, which orients the text around the image if it was
added to a text element
– Spacing, which allows you to add a buffer around the
image (otherwise text will flow directly on the image
– Caption, allows a small block of text below the image
– Advanced, which allows you to set a border style and
color, as well as Alt Text – what to show when you hover
▪ The Edit Image button seen here is shown on next
slide…
Images – Editing an Image, Continued
▪ The Edit Image button allows you to crop, rotate,
fade, and apply effects
Images – Editing an Image, Still Continued
▪ Explore these
options to try to
recreate this format
in an existing text
element
▪ Notice how the text
wraps around the
bottom of the
image
Closing Review
Reminders about what we have done thus far
Closing Review
▪ Reminders about positioning & spacing:
– When you drop elements on the page, Weebly can generate two columns on the page
that place the elements side-by-side
▪ Remember you can adjust the spacing by using the narrow blue bar that appears between
them – Click to drag it left or right
– The “X” in the upper right is to delete an element
▪ Remember that once an element is deleted – it cannot be undone!
– The arrow in the upper left is for copying elements (on the same page or to another)
and to move an element to another page
– The middle rectangle is to bring up the sub-menu options specific to that element
and to drag/move the element around on the page
▪ All elements include three basic options to be deleted, copies or moved on
the page.
– Remember to just hover over an element to see these options for that element