Professional Documents
Culture Documents
Submitted by :
JIMDO.com
Activity
1 of 32
Contents
All about Jimdo .. Getting Started .. Familiarizing the Jimdo Interface . Layout Style Settings . . . 7 10 14 15-32 2 3 7-14
Navigation . Elements .
Prepared by:
Reviewed by:
Approved by:
Application Software
Submitted by :
JIMDO.com
Activity
2 of 32
All About
What is Jimdo? Jimdo offers a free website creator that anyone can use on www.jimdo.com. In just a few minutes and without any technical knowledge, anyone can create a place on the Internet complete with online store, blog, photo galleries, YouTube videos and much more. How long has Jimdo existed? Jimdo has been around since February 2007. Whos behind Jimdo? Christian Springub (28), Fridtjof Detzner (28), and Matthias Henze (33) founded a company together in 2004, where they created an online software that is now the core of Jimdo originally only for businesses. After many requests from friends and family, they came up with the idea of the free JimdoPage. Where is Jimdo located? The main office is in Hamburg, Germany, but Jimdo has also opened offices in San Francisco, Tokyo, and Shanghai. What does Jimdo mean? Jimdo is short for Jim can do it, meaning, why make it complicated when it can be easy? That has been Jimdos motto from the beginning. How many users does Jimdo have? 10 weeks after launch, Jimdo had its first 10,000 users. In April 2008, there were 100,000 JimdoPages, over 500,000 in February 2009, and today there are more than 6 million... What is Jimdo planning in the future? The mission to bring Pages to the People is never over. Jimdo has been continuing to innovate and improve its website creator. As the internet continues to grow and change, Jimdo does too but always so that regular people can use it. Jimdos three founders dream and goal is for Jimdo to set the standard for simple yet professional website creation. Where can I find out more about Jimdo? http://www.jimdo.com/about-us/
Prepared by:
Reviewed by:
Approved by:
Application Software
Submitted by :
JIMDO.com
Activity
3 of 32
Getting Started
Before anything else, we have to create a free account at Jimdo.com. To do this we:
1. Open our available web browser (for this work instruction Im using Google Chrome)
2. Type at the URL box jimdo.com 3. Wait for the page to load, until it looks like this: See Figure 1
4. Make an account through the text input boxes found at the top right part of Jimdos homepage. See Figure 2 5. Fill in our chosen name of website through the Pick a name for your site text input box 6. Fill in our valid email address through the Your Email Address text input box 7. Lastly, we make sure that we click on the Yes, I have reviewed the fascinating check box 8. With all of our necessary information keyed in we click on Create my free site button to finish our account sign-up
Prepared by: Reviewed by: Approved by:
Application Software
Submitted by :
JIMDO.com
Activity
4 of 32
Getting Started
9. Completing step 8 might show a new window at Jimdo where it requires us to enter some text that it shows to us. Example of which is shown at Figure 3 10. No worries! We simply key in the text that it shows in the image that Jimdo had randomly generated for us through the Enter the two words: text input box. Failure to the get the words right in the first time is okay, simply wait for a new image to load then the repeat the same process. 11. Click on Create my free site! button again to finally complete the sign-up
Figure 3 New Window @ Jimdo
xxxxxxxxxxxx
12. Step 11 will again show a new window (See Figure 4) telling us that Jimdo Team has sent us an email containing our log-in info. 13. We then check our emails to view our message from Jimdo. The message should look like Figure 5
Application Software
Submitted by :
JIMDO.com
Activity
5 of 32
Message from Jimdo should disclose our: A. Website name (Mine is named baworkinstruction) B. Website URL C. Password D. Go to your new website button
Getting Started
B C
xxxxxxxxxxx
14. We then click on Go to your new website button 15. This would open up a new window. New window should essentially disclose to us our default jimdo homepage as seen in Figure 6
Application Software
Submitted by :
JIMDO.com
Activity
6 of 32
Getting Started
16. At our default webpage is our login link as seen in Figure 7. We click on that link so that we can formally get started.
17. Clicking on this link should spawn a new window as seen in Figure 8. In this new window, we ought to type in our password at the Your Password: text input box (Password to be typed here is the one that Jimdo automatically generated for us. It can be found in the email that we received from Jimdo)
18. We then click on the Login button. This redirects us to our website editor as seen in Figure 9. The next section discusses the new interface that we can find here.
Prepared by:
Reviewed by:
Approved by:
Application Software
Submitted by :
JIMDO.com
Activity
7 of 32
Layout
The Layout icon is accessed for us to change the layout settings to suit our preferences. Clicking on this icon produces Figure 11 as a new side-menu. Found here are the FREE, JIMDOPRO, JIMDOBUSINESS, CUSTOM, SPECIAL and SETTNGS tabs.
Prepared by:
Reviewed by:
Approved by:
Application Software
Submitted by :
JIMDO.com
Activity
8 of 32
The FREE Tab as shown in Figure 12 discloses all the available/free layouts that we can use including with them are their relative layout details. Layout details would then tell of our chosen layouts customizable components such as fonts, header height, background, alignment and colors. Boxed below is the link to access layout details.
Prepared by:
Reviewed by:
Approved by:
Application Software
Submitted by :
JIMDO.com
Activity
9 of 32
(1) Click on the thumbnails as shown in Figure 14. Highlighted thumbnail=layout selected OR (2) Click on Layout Details and then do the same as well for the Choose Layout button which appears only after clicking the Layout Details link. Choose Layout Button is boxed in Figure 15.
After Selecting a layout, (For simplicitys sake I have not changed Jimdos default layout) Jimdo will ask if us if we would like to accept the new layout. This notice is found at the top most section of our website editor page as shown in Figure 16.
Selecting the Yes button formally changes the layout. We can then click on No or back buttons if we are not satisfied with the layout chosen. Selecting the No button will then revert us back to our old layout. Selecting the back button will then bring us back to the Layout side -menu for us to choose another layout. From here, the same steps of selecting a layout as discussed earlier are applied and applied until we are satisfied with our layout.
Prepared by:
Reviewed by:
Approved by:
Application Software
Submitted by :
JIMDO.com
Activity
10 of 32
Similarly
JIMDOPRO and JIMDOBUSINESS Tabs shows all the exclusive layouts for the upgraded users. CUSTOM Tab allows advanced users to edit the layout extensively using their knowledge of CSS styles and such. SPECIAL Tabs shows all the available themed layouts to choose from.
Style
The Style icon is accessed if we want to change our websites font settings background settings and basically all the color schemes involved in our website. See Figure 17 to see all the tabs found in the Style side -menu.
Prepared by:
Reviewed by:
Approved by:
Application Software
Submitted by :
JIMDO.com
Activity
11 of 32
The FONT SETTINGS tab shows some Jimdo-generated font settings to choose from. These include settings for the common body text, various levels of heading, link colors and as well as horizontal line settings. See Figure 18 to learn of all the customizable options available in the FONT SETTINGS Tab. All of these can be changed to suit our preferences but for simplicitys sake, I chose not to alter any of the default settings.
Figure 18 Customizable-s found at the FONT SETTINGS Tab. From left to right: text settings, heading settings, link colors, horizontal line styles and colors
Found at the left is the instant preview of the heading. See Figure 19 for easy reference
Application Software
Submitted by :
JIMDO.com
Activity
12 of 32
The COLOR SCHEMES tab shows all the available color schemes to choose from. We select by allowing our pointer to hover over our chosen color scheme ( as boxed in Figure 20) and, then ultimately clicking it. For this instruction Im satisfied with my default color scheme hence, I need not change it.
Application Software
Submitted by :
JIMDO.com
Activity
13 of 32
The BACKGROUND PATTERN tab shows all background patterns that we can use for our site. Located at the left is another extensive color palette (as boxed red in Figure 22). For the purpose of this instruction we change it to the (second pattern as boxed green in Figure 22). We click on such pattern to change the background to that. Doing so will lead to a new confirmation window as seen in Figure 23
Selecting the Yes button will confirm the selection; selecting the No button will bring us back to our original background pattern; selecting back button will bring us back to the BACKGROUND PATTERN Tab. This is done for us to choose a new background pattern BACKGROUND IMAGE Tab lets us choose a background image for our website, again since this is limited to upgraded users, further discussion of such will not be given in this instruction. CUSTOM BACKGROUND Tab lets us use a background image uploaded from our own computers/laptops/etc. Relevant settings are also found here. BLOG STYLES Tab allows us to change all relevant customizable blog stylization.
Prepared by: Reviewed by: Approved by:
Application Software
Submitted by :
JIMDO.com
Activity
14 of 32
Settings
The Settings Icon is accessed to view and change any relevant settings of our website. We are all free to explore the settings found here but for simplicitys sake, we will only discuss the process of changing our Jimdo-generated password Boxed at Figure 24 the Password button, we select this button to start changing our password and doing so will show a new window (as seen in Figure 25)
In this new window we key in our old passwordthe one generated by Jimdo earlier in the Old Password: input text box. New password is typed and re typed for both the New password: and Repeat your entry: input text bo xes. After which we click on save. Now we have completely changed our password!
Prepared by: Reviewed by: Approved by:
Application Software
Submitted by :
JIMDO.com
Activity
15 of 32
Header
The Header is that part of the website located in the extreme top that remains constant throughout the entire navigation of the site. Usually this discloses the name of the site. See Figure 26 to learn more of the default Header provided by Jimdo.
Boxed in Figure 26 is the Edit Header pop-up which then appears as we hover over the header section. We click on that to edit Header through the pop-up Header menu as seen in Figure 27.
Application Software
Submitted by :
JIMDO.com
Activity
16 of 32
Photo Gallery Tab shows Jimdos very own public library of all the available images that we can use for our header. See Figure 28 to view this library. We simply click on our preferred image to set it as our header image. Also boxed in Figure 28 is the image that we will be using in this instruction.
Custom Photo Tab allows us to upload our own image that we wish to use as our header image. See Figure 29 to view the Custom Photo Tab.
Pattern Tab allows us to put a pattern (that is re-colorable) in place of a header image. Recoloring can be done through the extensive color palette found at the right (See boxed section in Figure 30). We stick with our image selected before; we do not select a pattern here.
Application Software
Submitted by :
JIMDO.com
Activity
17 of 32
Adjust Header Tab allows us to adjust our header height, zoom our header image, as well as, move our image horizontally and vertically, through sliders as seen in Figure 31. For this instruction we set our header height to 400 px. We also move our image vertically to 180 px. After making these adjustments we click on Save changes to formally save the changes that we have just made to our header.
Title Tab allows us to edit the title of our header. We can do this so by changing the name of the title itself, the font style used (as well as font size and color) and finally the position of the text itself. See Figure 31 to view the Title tab
Dropdown box used to change font styles Sliders used to change font size Input text box to change header title Sliders used to change horizontal and vertical positioning of header title
Application Software
Submitted by :
JIMDO.com
Activity
18 of 32
For this instruction we set the font style to Trebuchet MS, font size to 85 px, header title to buildings., font color to FFFFFF, horizontal position and vertical position to: 2% and 72% respectively. By making these adjustments we should end with something like the one on Figure 32.
The final tab is the Logo tab which then allows us to upload our own logo for the site. This is again a section that is limited to upgraded users; hence we omit any further discussion about this tab. This completes our discussion about the heading section. Up-next is the Navigation section
Prepared by:
Reviewed by:
Approved by:
Application Software
Submitted by :
JIMDO.com
Activity
19 of 32
Navigation
Navigation is for simply put the settings we use with which we navigate around our website. This usually discloses the navigable menus and submenus of our website. To edit Navigation we follow the steps below. (1) Navigation can be edited through the Edit Navigation button. This pop-up button appears as we hover over our menu section. Boxed in Figure 33 is the said menu section. *Jimdos default menu section includes Home as a page.
(2) Boxed in Figure 34 the pop-up Edit navigation button. We click on that to access a new window with which we can formally edit our sites navigation
Application Software
Submitted by :
JIMDO.com
Activity
20 of 32
(3) The new window mentioned in step 2 is found in Figure 35. It is through this window that we can add new pages to our site.
Button used to hide pages from the menu Buttons used to add new pages to the menu
For this instruction we will use only three menus. These are Home, Services and About respectively. Submenus are Past Projects Setting Up My Plan. Essentially these are submenus of Services menu. (4) We click on Add a new page button (as seen from Figure 35) to add new pages. We then edit the page title to Services by clicking the input text box generated from adding the new page earlier. We do this one more time to create the About page. We should now end up with something like Figure 36.
Application Software
Submitted by :
JIMDO.com
Activity
21 of 32
Boxed in Figure 37 are new icons that can be used to further edit navigation. Also disclosed in Figure 37 are the purposes of the new icons.
Changes the sequence of the pages specifically to move it up
(5) To add submenus to Services page we add new pages once again. In this instruction, these are Past Projects and Setting Up My Plan respectively. We then click the right arrow icons collinear to each supposedly submenus. We should now end up with something like Figure 38
Figure 38 Submenus
(6) We then ultimately click the save button (as boxed in Figure 38) to reflect all the changes.
Prepared by:
Reviewed by:
Approved by:
Application Software
Submitted by :
JIMDO.com
Activity
22 of 32
All the changes to the navigation should be now reflected as seen in Figure 39
Edited Menu
View link
Clicking on the View link as boxed in Figure 39 will let us open up our site in the view mode where it is not editable. This mode necessarily omits any editing options. In general this is how outsiders view our site. See Figure 40 to see the view mode of our site.
Prepared by:
Reviewed by:
Approved by:
Application Software
Submitted by :
JIMDO.com
Activity
23 of 32
Elements
The elements make up primarily the content of our site. Might it be pictures, texts, videos and such, these are all covered by the elements section. A VERY IMPORTANT NOTE: *This instruction will not teach you on how to produce the content itself. This instruction will instead discuss on how to put the content. Content production is beyond the objectives of this instruction.
Adding an element: (1) To add an element, we first select a page (the page that we wish to add elements on) from the pages that we have created in the navigation section. For this instruction, we use the Home Page There is one default element that was created beforehand by Jimdo for us and it is the Heading element (as boxed in Figure 41)
Prepared by:
Reviewed by:
Approved by:
Application Software
Submitted by :
JIMDO.com
Activity
24 of 32
Placing our mouse over the default heading element shows Figure 42 to us
(2) Shown in Figure 42 above is the button used to add an element. We click on this to show all the available elements that can be added. In the next page is Figure 43. This figure discusses the elements that we will be using in this instruction.
Prepared by:
Reviewed by:
Approved by:
Application Software
Submitted by :
JIMDO.com
Activity
25 of 32
Used to add spaces between elements Used to add headings/titles to our paragraphs
Used to add text as content Used to construct our contents into columns
Prepared by:
Reviewed by:
Approved by:
Application Software
Submitted by :
JIMDO.com
Activity
26 of 32
All other elements are necessarily omitted because they are either not regularly used or are rather complex for this instruction (3) From the new window found on Figure 42, we click on the element that we want to use. So for example in this instruction lets add the Text element. See Figure 43 below for easy reference
Essentially for every element there is a unique editor. This demands various settings from us and its job is to process such to make the element for us. Since we have chosen the Text element, we are simply demanded of font settings which we do alter and change according to our preferences. (4) Having chosen the Text element, we simply type the sentences that we want to place here but for this instruction we are going to use the sentence: The quick brown fox jumps over the lazy dog five times in creating our paragraph. We also give it a center alignment and by hitting on the Save button we should now end up with something like the one boxed in Figure 44.
Application Software
Submitted by :
JIMDO.com
Activity
27 of 32
Adding an element (whatever element it is) will always start from steps 1 and 2 which were both discussed earlier. Steps 3 and 4 are element dependent but in the severest abstraction, step 3 is mainly concerned with demanding settings from us (these are to be reflected on the element to be created) and step 4 on the other hand will always end up with clicking on the Save button. To demonstrate more about the elements, we will try to use more of them in a single page. Shown below are the steps that we do to accomplish that. (1) From where we left of, there would have been two elements found in our Home page by now. (These are the default Heading element and the new Text element that we have just added earlier). We create a new element once again through the Add new element button, and we select on the Spacing element. This should show the Spacing element editor as seen in Figure 44.
(2) Also boxed in Figure 44 is the size setting of the Spacing element. In this instruction, we set this to 150. We then hit the save button and we should have what now looks like Figure 45.
Application Software
Submitted by :
JIMDO.com
Activity
28 of 32
(3) We then add the Horizontal Line element by using the same steps in adding any element. This should let us create a horizontal line without changing any settings because Jimdo only allows customization of this element the Styes icon, which was discussed in the earliest part of this instruction, nevertheless adding a Horizontal Line element should give us Figure 46. *Horizontal line is now found at the bottom!
(4) We then add a Column element by using the same steps in adding any element. In the Column element editor (as seen in Figure 47), we will find two new add new element buttons. *Default Jimdo columns are set to two.
Button used to erase columns Button used to add new columns Button used to add content to columns
Prepared by:
Reviewed by:
Approved by:
Application Software
Submitted by :
JIMDO.com
Activity
29 of 32
(5) We introduce our first content to our column through the Add New Element button found at the left. We then add a Photo element. See Figure 48 to learn of the Photo element editor.
Used to introduce alignment to our photo
(6) It is through the Choose File button found on Figure 48 that we can upload the photo that we want to use, hence we click on that. After uploading we set the following settings for our photo, alignment center and subtitle a photo. After which we ultimately click on save. We should now have the one shown in Figure 49.
Figure 49 Edited Photo Element
Prepared by:
Reviewed by:
Approved by:
Application Software
Submitted by :
JIMDO.com
Activity
30 of 32
(7) Finally we add a new element for the second column through the remaining Add new element button. For this instruction we add another Text element. We may use any paragraph to use a as body of this element but this instruction will once again use the The quick brown fox jumps over the lazy fence over and over until it assumes a paragraph. Text element is then set to a justified alignment and by clicking save button we should now end up with something like Figure 50
(8) Since the text on the right column looks a bit misplaced, we introduce another element such as the Heading element to give it some direction. We add the Heading element by using the same steps as always. Boxed in Figure 51 to the Heading element editor.
Figure 51 Heading Element Editor
Prepared by:
Reviewed by:
Approved by:
Application Software
Submitted by :
JIMDO.com
Activity
31 of 32
(9) Using Figure 52 as reference, we change the heading name to A Photo Description, heading settings to Heading 2. We also move the element one step up through the up arrow (also seen from Figure 52). (10) By ultimately clicking on save button we should now have what looks like Figure 53
Application Software
Submitted by :
JIMDO.com
Activity
32 of 32
(11) To reflect all changes in the Column element that we just made, we click on the Save button (as boxed in Figure 53). Doing so will give us Figure 54.
Jimdos interface is very user friendly. By doing the steps just mentioned above, we can already get accustomed to how elements are placed, edited and saved. Further editing of the pages can also be easily facilitated because what these pages lack are just mere elements, therefore element discussion ends here.
Prepared by:
Reviewed by:
Approved by: