bigpigeon.us webpage Home > Project Mgt - Public > Weebly Use, edited by RAC 3 Feb 2020.

.
The Weebly Use webpage contains information that should help the Big Pigeon website manager use the Weebly website development system in a safer and more-efficient manner. I have edited this page so it is safe to copy and give to any beginning Weebly user. Thus this file is not password-protected

Contents:
  • Part 1 -  Weebly
  • Part 2 - For an Inexperienced Weebly User
  • Part 3 - Weebly Passwords
  • Part 4 - Backup Via Weebly’s Copy Site and Archive Features
  • Part 5 - Programing in Weebly
  • Part 6 - Weebly Trouble Log
  • Part 7 - Weebly Page Headers
  • Part 7 - Some Potentially Useful Information

Part 1 - Weebly.

Why Weebly:
  • In 2015 I chose Weebly to build my first websites because the major competitors, Wix and SquareSpace lacked features that I deemed important to my website design. I believe this is still the case.
  • An alternative to a web builder such as Weebly is an Open Space Software (OSS) system such as WordPress. I did not take this path because of the lengthy learning curve. For instance,  a book in our local Barnes and Noble bookstore is entitled WordPress Made Easy - How to Make a WordPress Website in 24 Hours. I was programming in Weebly, albeit clumsily, after one hour.

Big Pigeon Parameters:
  • In 2017 I built Big Pigeon on the framework of my first website, Kirsten Pedersen’s Relatives, at kirstenpedersen.weebly.com. I don’t know what template I used  to provide the basic color palette, fonts, and navigation menu. I don’t use most of the other template features. I used the Brisk template in my 2015 Danish Heritage website.
  • Weebly’s development environment consists of two main screens, the Site Dashboard and the Editor. During the past two years, several minor problems have arisen with the Weebly development environment, problems that seem to be independent of the version of Weebly. Weebly technical support has been good at providing workarounds, but Weebly has not fixed the underlying problems. I list these problems later.
  • With Weebly (and probably with other web builders) it is not possible to store an easy-to-use backup on the programmer’s computer or in the programmer’s cloud space. Consequently if your site in Weebly’s cloud-based storage, along with your copies in the cloud, all are deleted or became corrupted, you would have to contact Weebly for assistance in restoring. However, I provide a partial workaround later.

Part 2  - For an Inexperienced Weebly Developer.

Getting up to Speed with Weebly: I am an experienced programmer. Nevertheless, as a Weebly novice I trashed my test site more than once, necessitating either restarting from scratch or replacing with a copy.  Weebly is very unforgiving of carelessness. Thus I recommend an inexperienced developer first follow this procedure before working seriously with Weebly.
  1. Explore my website, bigpigeon.us, as a site visitor.
  2. Take some Weebly tutorials (accessible from the Weebly Help Center, hc.weeby.com; I have not found any printed Weebly materials.) In particular, the tutorials https://hc.weebly.com/hc/en-us/articles/210290578-The-Site-Dashboard and https://hc.weebly.com/hc/en-us/articles/211363488-Navigate-the-Editor might be appropriate.
  3. Get a free account from Weebly and build and experiment with a small test site.

The two main Weebly Screens:

A successful login to an existing Weebly account takes you to Weebly’s Site Dashboard, the entry point into Weebly’s development platform, which contains for the Weebly current in June 2017.
Across the top, in Weebly's high-level menu under the drop-down menu on the right-hand side:
  • Account allows you to change your password and to check your payment arrangement with Weebly.
  • Log-out. 
 In a band below the main menu:
  • The current site.
  • Viewable through a drop-down menu, a list of sites, namely one Pro site (this is the source version of Big Pigeon) and up to nine copies of the Pro site.
  • An Edit Site button.
  • To the right, by clicking on the three dots, options for copying and deleting the current site.
Below this band:
  • ​Access to site statistics.
  • Access to  contact form entries.

Clicking on the Edit Site button takes you to Weebly’s Editor, used for editing and several other functions.
Weebly’s Editor screen has three parts:
  • Across the top, a list of options.
  • On the left-hand side, a double column of palette items.
  • For the remainder of the screen, the current developer version of that page.  This is what the page will look like to a site visitor after you click the Publish button.
From top to bottom, a typical Weebly page has four parts:
  • Boilerplate - site title and navigation menu. 
  • Page header, with text matching or resembling the page name as shown in the navigation menu. In Big Pigeon I use customized 2-part or 3-part page headers.
  • Page content.
  • Boilerplate - page footer. Not yet implemented in Big Pigeon.

A Weebly developer uses the Editor to:
  • via Pages: Add pages to the site, and then subsequently rearrange the pages to control the site logic as reflected in the navigation menu.
  • via Build: Modify pages by manipulating a palette of elements, including text blocks, images and hotspots, through a drag-and-drop process.
  • via Theme: Globally make some changes to colors and fonts.  
The resulting program is an integrated collection of pages, with each page consisting of text, images, hotspots and other elements, each page appearing much as it will later to the website visitor. Thus the developer is working in a WYSIWYG (What You See Is What You Get) environment.  

When the developer is satisfied and presses the Publish button, Weekly saves the changes made since the previous Publish and produces an updated published version of the site. One returns to the Site Dashboard by clicking on the X in the upper-left corner of the Editor.
The published version is separate from the developer version.  All popular computer systems, including those on smartphones, understand the published version, whereupon the development version is understood only by the Weebly website builder.  
The published version is non-editable.  However, a site visitor can perform some functions such as copying text or images from the published version.

Part 3 - Weebly Passwords.

Its best to have the Weebly login password match the password of the associated E-Mail account. I use my AOL E-Mail for Big Pigeon. For AOL, passwords must be 8-16 characters; For G-Mail, password length >= 8.

A Weebly website manager uses a password in two contexts:

​1 - To access the Weebly development platform:
Go to weebly.com, click Log In in the upper right corner, enter the user name, which is the E-Mail address associated with the Weebly account (for Big Pigeon it is rachristia@aol.com), and enter the password.
You should see Weebly’s Site Dashboard, as described earlier.
To change the Weebly login password, access Account via the right-hand side of the Weebly main menu.

2 - To access the Big Pigeon Web Manager’s E-Mail, which is linked to the Big Pigeon development platform:
From your Web browser, access E-Mail account rachristia@aol.com.
Depending on recent activity, you may be asked for the password.
From rachristia@aol.com, you can do the following:
Answer E-Mails sent to the Web Manager via the Big Pigeon Contact Form.
Expand and store on your computer the current Weebly Pro site archive (see the following section).

The Big Pigeon Web Manager needs a different password for viewing private bigpigeon.us pages.  
Currently most of Pigeon Central's subpages are password-protected.

Part 4 - Backup Via Weebly’s Copy Site and Archive Features.

Warning: Weebly makes little effort to provide undo options.  A casual error can have catastrophic results for one who is less than super-vigilant. Copy the Pro site frequently!
 
Weebly provides Weebly developers with two methods of backup protection. I also use a third method shown below. 

1 - Weebly's first line of backup is the Copy Site feature. One can have as many as nine site copies parallel to the main Pro site. Copies are not time-stamped; it is up to you to name copies so the most-recent one can be located (e.g., “BP23Dec’16#1”). The Pro site and the copies are stored in Weebly’s cloud. 

2 - Archive Folders: As an alternative, Weebly can produce a Zip file containing site contents and send the Zip file to the E-Mail specified by the website manager for further processing on her part. Technically these are not backups, as they can't easily replace a defective Pro site.  To use this feature, you proceed thusly:
  • Edit the Pro site, click the Settings option in the top menu, scroll down, and at the Archive entry enter the E-Mail to which the archive will be sent (usually rachristia@aol.com) and click Email archive. 
  • After some minutes, Weebly produces a Zip file and sends this file to that E-Mail.
  • Check the E-Mail for the Zip file and click on the Zip file to expand.  After a few minutes, an archive folder with a cryptic name and odd time-stamp appears in the recipient's downloads folder.
  • Stamp the archive folder by prepending site and date info to the folder name. E.g., the resulting folder name might look like BP-7Dec'16-21120805825848c5a695b4f. Then move the archive folder to its hard-drive storage location. I use the folder FromWeb (Site Archives): Big Pigeon Weebly Archives on my MacBook Pro.  
  • See that the archive folder is copied onto backup media and into the cloud if you have cloud storage.  Archive folders are large, and you may want to delete the older archive folders from your hard-drive once they are safely on backup media.
  • Log the archive under Big Pigeon Archive Log in the Project Management page.
FYI - Each archive folder includes a .html file for each page in the site.  Generally, but not always, opening an .html file gives an accurate view of the page.  If it became necessary to move Big Pigeon to a different development system, one could copy text elements from such an .html file. 
FYI - If you should ever have to restore your Pro site and a suitable Copy Site backup is not available, first contact Weebly to see if there is a better way than using your most-recent archive folder.

3 - Page Image Files.

I keep a collection of .rtf files on my hard drive in the folder Big Pigeon:Big Pigeon Site Areas. This collection is organized so each webpage corresponds to a .rtf file and folder organization corresponds to page layout as given by the Big Pigeon navigation menu. When editing, I then have the option of either editing the webpage via Weebly  and then updating the .rtf file or editing the .rtf file via TextEdit and then updating the Weebly page. With either approach, the usual copy and paste method works.

This is not an ideal system. For it to work at all, one should be aware of the following.
  • There must always be current identification (page name and date of last update) at the top of the first text element in a page.
  • This system does not work as well for pages with more than one element following the header.

Part 5 - Programming in Weebly.

Programming an Existing Weeby Site - Overview:

The developer uses the Weebly Editor to:
  • Add pages to the site, and then subsequently rearrange the pages.
  • Modify pages by manipulating elements such as text blocks, images and hotspots through a drag-and-drop process.  Element options appears in two columns on the left-hand side of the Editor. To add a new element: Drag an element of the desired type from the left-hand side palette into the desired insertion point. Then edit the new element. This takes practice!
  • Change the look of the site by manipulating parameters accessed via the Theme option on the top of the Site Dashboard.
The resulting program is an integrated collection of pages, where each page consists of text, images, hotspots and other elements. Each page appears much as it will later to the website visitor.  Thus the developer is programming in a WYSIWYG (What You See Is What You Get) environment.  
When the developer presses the Publish button, Weekly copies the source code in the development version of your program into a published version, accessible from the associated website through site visitors’ web browsers.

 Weebly Programming Session:

This example:
  • Uses only the Build feature of Edit.
  • Edits from within Weebly. Then updates the affected page image file(s).

1 - Clarify the intended website changes (If I were making major change to a page, I would probably edit the page image file instead of editing within weebly).
2 - Access Weebly’s Site Dashboard by logging in from your browser (I’m a Mac user and generally use Safari).
3 - For each substantial change (or for a number of minor changes):
3a - Copy the Pro site and rename the copy.
3b - Click the Pro site’s Edit button to access the Weebly Editor.  Within the Editor, make the desired changes.
3c - Click the Publish button in the upper right-hand corner of the Editor.
3d - Access the website from your browser and view the published changes. (If the website is already open, refresh first).
3e - Repeat 3b, 3c, 3d until satisfied (i.e., reedit, republish, and review).
3f - Click X in the upper left-hand corner of the Editor to return to the Dashboard.
3g - Copy the Pro site and rename the copy.
3h - Delete older copies to allow creation of two copies during the next round.
4 - If you are doing more editing: Repeat Steps 3b-3h. 
​4 - If you’re done: Copy text elements altered to the effected page image files; then Log out.
5 - Note substantial changes in the Change Log section of the Project Management page.

Part 6 - Weebly Trouble Log.
(observed with the version of Weebly I found in Jun 2015)
Dec ’16: I was informed that at some unknown date a file being uploading from my computer to a private page in Danish Heritage was copied by a bot. Thus I recommend that extremely sensitive data, such as passwords, not be kept in private pages. 
Nov ’16: Progress bar when doing Copy Site quit working.
2016: Statistics graphs sometimes don’t appear.  This isn’t a Weebly problem, but rather due to Safari using Adobe Flash to display the statistics graphs. To rectify on Bob’s Mac:
    - First try clearing history and rebooting.
    - If problem persists, go to adobe.com and reinstall the Flash Player.
12 Feb ’16: Weebly ran extremely slow for several hours, especially on the development end but also on the run-time end.  This is the only incident of this sort I have observed.
2016: Copy Site feature in the Site Dashboard began dropping developer-assigned sitenames.  Weebly staff gave clumsy workaround: After Copy Site finishes, Edit the new copy, click on the Settings menu, enter the desired site title, and save. 
5 Nov ’15: Weebly Editor became unusable as page being edited drifted over element menu columns - Weebly staff gave workaround. (As of Mar ’17, I noted this problem recurring.)
1 Oct ’15: Weebly introduced Carbon, which I call Weebly 3, making major changes to its development platform and run-time environment, catching many users off-guard.  Intense user complaints caused some user blogs to disappear.  I remained with what I called Weebly 2 until around March 2017.

Part 7 - Weebly Page Headers.

For a number of reasons that I won't go into here, I am adverse to using Weebly's headers. Thus I specify no header when I create a new page, and add a custom header later.

I wrote this part with my Big Pigeon website in mind. You can make the obvious adjustments for use on any Weebly site supported by a Mac computer.

Header Specs:
  • For the World War II webarea: In May 2019, I am adding a fourth element as the first element in the page header. This will allow me to shorten page names. As of 6 May, the planned page header specs are: 1 - 190 x 100 sandbox w/ max four lines of text (e.g., World War II, 1939 - 1945, the German War, the Mediterranean Theater); 2 - 440 x 100 page name with brick background; 3 - image, preferably a photo to serve as click bait; 4 - one or more button hotspots. Note: a deepest sandbox will contain the same text as its parent.
  • Page name text within a brick box, whether the box is 640 x 100 or 440 x 100, will continue to be 65 Verbena bold. Sandbox text will be 60 Verbena bold.
  • Big Pigeon’s June 2017 brick custom page headers are each 640 pixels wide by 100 pixels high (640  x 100). 
  • Header text matches or contains the page title from the menu bar on a light background inside a box with a black border.  
  • The brick wall background was grabbed from the photograph of the Boomer Township Hall within Big Pigeon.
  • A hotspot button on the right side of each header area returns the visitor to the home page for high-level pages or to the parent page for subordinate pages.
  • Some pages have an image thumbnail between the header and the button. 
  • The home page has a header but no button.

Preparing Custom Page Headers - Hints:
  • Lax asset managment when preparing headers can cause nightmares due to the large number of files involved and the vagaries of the Preview application.
  • Prepare and store headers in a dedicated folder containing subfolders mimicing the website organization.
  • Work with TIFF files but use JPEG files as headers.

​To produce and add custom headers, proceed thusly:
  • Locate and open an appropriate background image (perhaps using the Grab application) and save as a TIFF file. Save with a name such as BricksTemplateOrig.
  • Then prepare a folder with a desciptive name such as Hdrs2017 Boomer Bricks. Within this folder prepare a subfolder such as Bricks640x100 for template-associated files such as the file chosen above. Prepare subfolders such as HdrsHome for each of the website’s areas.
  • Copy the file chosen above and prepare your template thusly: Double-click the copy to open Preview. Use Tools features such as rectanglular selection, Crop, and Adjust Size to produce a 640x100 file. Use Preview features to dim the image if ncesssary. Open the Markup toolbox and use the Shapes Style option to select a thick line. Use the Shapes option to produce a thick border (takes some practice).  
  • Click on File | Export…; use arrows in Format box to select JPEG; confirm that file will be saved in desired location; click on Save; close window with Command-W.
  • Copy this template into all area subfolders and save a copy.

Then for each area and for each webpage in that area...

Preparing a Custom Header:
  • Go to the appropriate subfolder in the headers folder (e.g., Hdrs2017 Boomer Bricks).
  • Copy the template and rename the copy to reflect the webpage name.
  • Double click the renamed copy to open Preview.
  • Within Preview: Open the Markup toolbox. If necessary, Use the right Text Style toolbox option option to set the font (with Boomer Bricks I chose Verdana 55). Use the sixth  from left Text option to add the page header text. Click on File | Export…. Use arrows in Format box to select JPEG. If necessary, set the export folder. Click on Save. Close window with Command-W.

Installing a Custom Header:
  • In Weebly, edit the page in question.
  • If the page already has a header, delete it.
  • Add a new image element where the header belongs.
  • Upload the header JPEG file to this image element.
  • Click on the header to access the default image editor.
  • Within the default image editor: Set LightBox. Decrease the upper margin to 0. Under Advanced, replace Picture in Alt Text with the header text.
  • Returning to the Weebly editor, stretch the header box by depressing shift while moving the vertical separation bar to the right.
  • Adjust the button link top margin.

Hint: If you’re skilled with Preview, its faster to use a batch process - first prepare a number of header files and then install them.

Part 8 - Some Potentially Useful Information.

Code Conversion:
Weebly translates the high-level object-oriented code one generates while in Edit mode to HTML (or a similar language) code.  This translated code is understood by most computers, including smartphones.  I don’t know how much of this code translation is done on the fly while one is editing and how much is done when one hits the Publish button.

Viewing the HTML (or similar language) website code:
I believe most computer systems provide a means wherein a website visitor can view the HTML code for that site.  For instance, on the Mac I configured my Safari browser so that Ctrl-Click invokes this capability.  As an example, if I visit the Museum of Danish America’s site, danishmuseum.org, clicking Ctrl-Click opens a menu of seven options, the last of which, Inspect Element, shows some code specific to that site. (I have no idea how to effectively use this capability).

Inserting HTML code into a Weebly site.
I once inserted HTML code so that clicking on a hotspot sent the visitor into the middle (rather than the beginning) of the long Danish Links page. This feature quit working when Weebly 3 (aka Carbon) appeared in the Fall of 2015. I have not experimented since.

Useful Internet Utilities:
http://www.isitdownrightnow.com/weebly.com.html reports current status of weebly.com.