Using weebly website
•Download as PPTX, PDF•
0 likes•167 views
This is a tutorial on how to make weebly pages and edit the website the IRSC way.
Recommended
More Related Content
More from Christopher Balbuena
Recently uploaded
Recently uploaded (20)
Using weebly website
- 1. Using Weebly Website by Christopher Balbuena
- 16. CREATING A PAGE By CHRISTOPHER BALBUENA
Editor's Notes
- Weebly let’s us make a website without thinking the nitty gritty of the programming language necessary to make one. You’ll design a website without any coding lesson. Just take the best design you can make, drag and drop the tools and you’re ready to roll your site!
- Weebly will either let you register a new account or be invited as one of the administrators of an existing website. If registered or became an administrator, like the picture you see, just hit “EDIT SITE” on the upper right-side of the site. Please note that you’ll immediately observe the statistics of your website even before you even make one. Please take note also that I have multiple inquiries in Sunshine 100 project, even I left the website for a year or 2 without editing.
- Upon entering the weebly site, you’ll notice 8 menu on the upper middle. These 8 menu are the important things to be able to edit and make the website usable. When you are on the BUILD menu, you’ll see on the left the tools you will use to insert different the visuals in a website. TITLE Insert a set of words with the biggest text size on the page. TEXT Insert a set of words with a normal text size. IMAGE Insert a still picture GALLERY Insert a set of pictures. You can choose different settings inside if the thumbnails of other images will be located below, beside or none at all with hovering capability inside the present image. SLIDESHOW Insert a set of pictures where you can see other images thru left and right arrows MAP Insert an image of a map with a location. CONTACT FORM Insert a set of questions then forwards the answers to an email address NEWSLETTER FORM Insert a BUTTON Insert a call-to-action (CTA) button to make an action of what you want the visitor to do. EMBED CODE Insert a special element in your website. An example would be a sound clip or an ebook which is viewable on the site itself. SECTION Insert a group of elements with an assorted templates to choose from so you don’t have to design the structure of the elements yourself. DIVIDER Insert a line that divides the elements horizontally or vertically. SPACER Insert a space between elements horizontally or vertically. There are other special apps that can be downloaded in the app store of weebly.
- Weebly let’s you make pages easy and managing them without any hassle. You’ll be amazed that it is so easy that all you have to do is click, drag and drop pages on the left. + Insert a page. On the next slide, I’ll show and explain what are the options when inserting a page. When you create a page, it will appear on the last of the left panel. Just drag the page to where you want to place it in the page. You can make the page become a menu, or just a page under a menu. What I mean is that the page you created can just be an option inside the HOME MENU which is also called a SIBLING PAGE. Just drag the created page to the right and under a MAIN MENU to make it a child page instead of a sibling page. MAIN MENU are the words you see on top of a website for a visitor to explore. Icons appearing on the right side of a page is just an indicator of what type of page is it. So what are the types of pages we have here?
- When you click the “+”, there will be 6 options to choose from of what kind of page you are creating. Standard Page Create a basic page with only one section on the page. Blog Page Create a page where you can have a set of posts inside the page. Category Page Create Product Page Create a page where you can insert different products you have on sale External Page Create a page where when clicked, directs the visitor to another site. Non-clickable Menu Create a page that is non-clickable in nature because it is just used as a menu to be hovered on. It will be visible but there will be no tangible action. POSTS are set of elements you put in ONE page. This means that you can put an article, an infographic, a video or anything but it will be visible on top of other elements you put. It’s like logging into your diary daily and the BLOG PAGE is your notebook.
- In THEME MENU, you can change the overall color scheme, font scheme, pictures and more for the visual representation of the site. CHANGE THEME Edit the overall arrangement, pictures, fonts and color of your website CHANGE FONTS Edit the font style, font color, font size you use THEME OPTIONS
- In THEME MENU, you can change the overall color scheme, font scheme, pictures and more for the visual representation of the site. CHANGE THEME Edit the overall arrangement, pictures, fonts and color of your website CHANGE FONTS Edit the font style, font color, font size you use THEME OPTIONS
- In THEME MENU, you can change the overall color scheme, font scheme, pictures and more for the visual representation of the site. CHANGE THEME Edit the overall arrangement, pictures, fonts and color of your website CHANGE FONTS Edit the font style, font color, font size you use THEME OPTIONS
- In THEME MENU, you can change the overall color scheme, font scheme, pictures and more for the visual representation of the site. CHANGE THEME Edit the overall arrangement, pictures, fonts and color of your website CHANGE FONTS Edit the font style, font color, font size you use THEME OPTIONS
- In THEME MENU, you can change the overall color scheme, font scheme, pictures and more for the visual representation of the site. CHANGE THEME Edit the overall arrangement, pictures, fonts and color of your website CHANGE FONTS Edit the font style, font color, font size you use THEME OPTIONS
- The App Center is the place where you can check out other applications you can use to easily edit your Weebly site.
- SETTINGS MENU is where you set the settings.
- To create a Page, just CLICK “PAGES” menu, write a Page Name (usually the name of the project with the Developer).
- From the Header Type “HEADER”, CHOOSE “Header” then edit the texts inside the actual Header. Put the following on the Header: Project Name on the first line, Location on the second line.
- CLICK “Drag Elements Here” to choose from the following: EDIT BACKGROUND Put a stunning background image, color or gradient for the first section of the page ADD LAYOUT Choose from a variety of template of element arrangements MOVE Move the section up and down the page (if there are other sections in the page)
- After clicking “ADD LAYOUT”, CHOOSE “Featured” then “New York in the Spring” template to input the three unit types in the project. If there are only two unit types, just delete the third set of elements (image, title and text). If there is only one unit type, try to check two or three different prices of the same unit type. If there are more than three unit types, just copy the elements and paste it below the first three unit types.
- Drag “Section” element on the left pane to the right to add another section. This section shall be the project details and pictures of the development.
- CHOOSE “Team” then “Meet Our Team” template for the Project images and details. Just remove the third column set (the Chief Architect) to leave you with just two columns.
- You can just copy other’s project details and paste it on your page.
- DRAG “Contact Form” icon to the right to insert the inquiry form. Put “Inquire us through the form below”. Just get the Name, Email Mobile # and Inquiry Message.