Web Design Workshop

Autry Technology Center

Start at www.Weebly.com
● Sign Up
● Choose website type
● Choose a​ theme,​ you can change it later.
● Choose a ​domain ​- start with a temporary domain, _____________.weebly.com. When your
site is ready, you’ll have to upgrade your Weebly account to connect a domain you already own,
purchase one elsewhere like godaddy.com or enom.com, or purchase one through Weebly.

Build
● Title​ - headline text
● Text​ - paragraph text
● Image
○ You can ​edit​ images and adjust the crop, filters, brightness, saturation, contrast, text and
focus.
○ Lightbox ​makes the image larger on the screen when the viewer clicks on it.
○ You can ​link a photo​ to another website, a page on your site, product page, blog post,
phone number, file or an email.
○ You can add a caption, a border and Alt Text. Change the ​Alt Text​ from “Picture” to
whatever the picture is, as this helps with accessibility and search engine optimization.
● Gallery​ - images are in a grid pattern, you can change the number of columns, spacing,
captions, borders, image ratio and image order.
● Slideshow​ - rotating images, you can change the transition style, navigation, speed, spacing,
caption location, autoplay, play controls, starting position, aspect ratio and image order.
● Map​ - change the address, zoom level, size, position, and advanced settings
● Contact Form
○ You can add text boxes, option buttons, dropdown boxes check boxes, file upload
(upgrade), and other predetermined spaces
○ View Entries - check occasionally to make sure you received all submissions in your
email
○ Form Options
■ Change the ​form name​ (shows in the subject of the emails you will receive)
■ Check the ​email address​ the submissions will be sent to
■ Google Captcha helps reduce spam
■ Opt-in adds a checkbox so people can consent to receive marketing from you
 ■ Confirmation
● Message - you can change the message they see after they submit the
form
● Link - you can send them to another website or page of your site after
they submit the form
● Newsletter Form ​- a pre-made Contact Form for people to sign up for your newsletters
● Button​ - add a button anywhere and change the text, where it links to, and its position
● Embed Code​ - if you have iframe code from a YouTube video or PayPal button, for example
● Section​ - create sections that can be moved around as a group, with its own background
● Divider​ - a horizontal line
● Spacer ​- adds space, can be used to add vertical space between items or horizontal space
● HD Video​ (upgrade) - allows you to directly upload a video file
● Audio​ (upgrade) - allows you to upload an audio file
● Scribd Document ​- upload a document and it will show on the page
● YouTube ​- include the URL of a video
● Flash​ - upload a Flash file
● File ​- upload almost any type of file
● Products​ - you can select products to show on a page
● Categories ​- you can select an entire category of your products to include on a page
● Search Box ​- to let viewers search your site
● Block Quote​ - creates a quote that stands out, such as a testimonial or important text
● Social Icons​ - manage and reorder social media and email icons, and add links to your
accounts
● RSVP Form​ - a Contact Form already set up for RSVPs
● Survey​ - a Contact Form with a survey questions started for you
● Google AdSense​ - if you’d like to show Google ads on your site, and you might earn a bit of
revenue
● Cookie Opt Out​ - allows your customers to opt out of cookies that track their use on your site

Pages
● Add​ pages, ​rearrange​ pages and create ​drop-down​ menus
○ Standard Page​ - add a regular page
○ Blog Page​ - add a blog
○ Category Page​ - add a page that includes all products in a category
○ Product Page​ - add a page with one product
○ External Page​ - link to another website
○ Non-clickable Menu​ - add a link to your menu that will have drop-down pages, and not
actually clickable itself
● Pages can be ​hidden​ from the menu, ​copied​ or ​deleted
● Header ​- options for the page, can be changed any time
● Visibility ​- choose who can see your site - public, only with a site password, or only members
 ● SEO Settings ​- individual page
○ Page Title​ - add to show up as search engine result headings, or will be your page
name if left blank
○ Page Permalink​ - choose the page’s URL, will be the page name with “-” as spaces if
left blank
○ Page Description​ - 2-3 sentences about what is on the page. This will show up in
search results, and should include keywords on the page
○ Meta Keywords ​- add keywords that people might use to find your page and separate
the words with commas. These words should be in the content of your page also.
○ Footer Code​ and ​Header Code​ - if you have code such as tracking, but you can add
Google Analytics code to the entire site Header or Footer
○ You can ​hide​ the page from search engines, which you should do if it’s a test page that
you don’t want people to accidentally find.

Theme
● Change the​ theme​ any time and your content will remain.
● Change the​ fonts​ used throughout the site and other theme ​options ​(different themes have
different options)
● Edit HTML/CSS​ - only if you know how to adjust the code!

Store​ - if you add a store, there will be a Store tab

● Set up your store information, payments, shipping, taxes
● Check orders and abandoned carts
● Create coupons
● Product library, categories, gift cards, reviews
● Set up store emails
● Set up checkout, and other general info

Apps
● Extras you can add to your site, some by third parties

Settings
● General
○ Site Address​ - this is your URL, so change to your domain name when ready
 ○ Site Title​ - shows at the top of your pages
○ Site Category​ - Weebly probably provides examples relevant to what you choose, but
they also probably use this info for their own information
○ SSL​ - security technology for an encrypted link between a web server and browser so
the data passed between the two remain private.
○ Favicon​ - a small, square image that shows in the browser tab
○ Site Password ​- you can have a single password for your entire site, which will be
required for any pages that you chose “Site Password” in the page Visibility setting
○ Navigation​ - option if you’d like your menu tabs to show “more” or add rows of tabs
○ Archive​ - have your website sent to your email in a zip file for backup occasionally
○ SimpleChat ​- third party chat you can add to your site to chat with them live
○ Site Formatting​ - adjust your time and date settings
○ Cookie Notification ​- settings to notify your viewers that your site uses cookies
○ Un-Publish ​- if you’d like your site removed from the internet
● SEO ​- entire website
○ Site Description​ - add a description of your entire website in 2-3 sentences, will show
up in search engine results
○ Meta Keywords​ - add sitewide keywords, words that people might use to find your
website, these words should be relevant and used in your website
○ Footer Code​ - sitewide code such as Google Analytics
○ Header Code​ - for other sitewide code
○ 301 Redirects​ - to redirect viewers from one URL to another
● Editors -​ add email address of anyone you’d like to have access to edit your site.
● Members ​- allow people to create an account and log into your site.
● My Apps​ - if you have connected any apps for additional functionality of your site, you can
manage them here.
● Blog ​- if you have a blog on your site, this is where you can change the settings.

Publish
● Publishing makes your changes live on the internet! Your work is automatically saved as you
go, but you must publish for anyone else to see the changes.

When your website is live and ready to be seen...

● Add a link to your website from every place you can, such as your Facebook page, other social
media accounts, join clubs that posts a link, etc.
● Set up your Google My Business account and include your website.