Can You Build a Family Tree in EverWeb? Let’s Find Out!

All About iWeb recently sported a question on the EverWeb User Forum which posed the question: Can you build a Family Tree in a website? It’s a good questions as there are many websites out there dedicated to researching family history and genealogy. So we asked ourselves, can you do this and if so, how easy is it to do?

Dedicated Genealogy Websites and Products
There are plenty of genealogy apps on the market such as Ancestry, Family Tree Maker, and Legacy Family Tree to name but a few. These apps are great for discovering and researching your family history and for building a family tree. The downside, though, is that the family tree that you build is not easily exportable in a format that can be used in other apps.

So if you want to add or build a family tree in your website, how can you do it?

Building Your Family Tree In Your Website
It certainly is possible to build a family tree in your website. However, there are a couple of things to consider before you start. First of all, building your Family Tree will be a manual task as there are not (as at the time of this blog post) any widgets available that are dedicated to this task. So if you have a large family tree this could take quite a bit of time and effort to build. Updating the tree may also take you time as you might have to move and resize objects on the page to accommodate additions and/or changes to the tree.

The second thing to think about is the page layout type that you’re going to be using. For this task, you will be better off using a fixed width Center Aligned Page Layout rather than using a responsive page layout.

Creating Your Family Tree Design
Typically, a family tree design will have the following components:

• An image, or placeholder image, for each person
• The name of each person
• The birth and death date, or year, of each person
• Lines connecting family members together. These lines can be of different colors, and use different styles e.g. dashed lines and solid lines.
• Joining pieces e.g. an ‘=’ sign to indicate when two people are married or in a relationship.

Using a center aligned page layout gives you the free form page layout that works best for building a family tree. You can easily place photos and text together to create a profile for each person in the tree. Once you have added your photo and text for each person, you can style them. For the photo you can add a border using the Picture Frame option in the Stroke section of the Shape Options tab. For the text, you may want to add a hyperlink that takes the visitor to a separate page relating to the person they have clicked upon.

Once you have added your photo (or placeholder picture) and your text for the person, you might want to group these objects together so it is easy to move the person’s complete ‘profile’ around if needed. Select all of the objects you want to group together, then use the Arrange-> Group menu to group the objects. This will make it easier to move one person’s profile around the Editor Window rather than having to always select all of the objects relating to the person, then moving them.

Using Widgets
There is an easier way to keep one person’s details together and that’s by using either everWeb’s built in Text Section Widget or FlexBox widget. Using either widget will enable you to keep all of the information about one person in one place. There’s no need to group objects together, as you will only have one object to deal with rather than a separate image and one or more TextBoxes. Using a FlexBox or Text Section widget will also mean that you easy apply a background color to the person’s profile using color Fill in the Shape Options tab. You can also save you time and effort by creating then duplicating styles and themes in your family tree e.g. you can select a number of FlexBox widgets and apply the same background color to them using the Fill section of the Shape Options tab.

Linking Family Members Together
To link family members together, you will need to create line shapes using the line style from the Shapes button in the Toolbar. Once you have added a line to your page, you can customize it using the Shape Options tab. Here, in the Stroke section you can choose the line type e.g. dashed, dotted or just a regular line. You can also change the line thickness, color and angle.

To make an equals sign to denote marriage or relationships between people, create a TexBox then add an equals sign from the keyboard. Once you have added the equals sign to the TextBox, adjust its size using the Fonts button in the Toolbar, or use the Command+T shortcuts key on macOS or Ctrl+T if using Windows. Next go to the Text Inspector and set the Vertical and Horizontal alignment buttons to ‘Middle’ and ‘Center’ respectively. Set the After Paragraph value to zero. These actions will center the equals sign within the TextBox.

Your Family Tree and Privacy
One thing that you may be keenly aware of is privacy. Having your family tree accessible from your website is a great idea, but the downside of this is that anyone can see it. To limit access as to who can see your family tree and details about its members, you may want to consider password protecting certain pages of your site, or the site itself, and giving logins to family members so that they access the tree. If you have an EverWeb+Hosting account this is easy to do.Just put your family tree pages within a directory then password protect the directory using the Password Protection section of the Page Settings tab in the Inspector Window. To password protect the whole site, make the Home Page in to a directory and put all of your site’s pages within that directory. Password protect the Homepage Directory.

Conclusion
Having tried out building a family tree for ourselves it clearly is possible in EverWeb to do so. Whilst it’s relatively easy to do, be careful. As the size of the tree grows, there will be a limit as to how wide the tree can be before you have to shink down family members details. It is possible that each person’s details copied become too small to read. Therefore, at some point if you have a big family, you may need to rescale the objects on the page, or use other pages for different parts of your family tree. You may also need to reduce line thicknesses of the connections between family members as your tree grows. This should be easy as you can select multiple lines all at one and change the thickness in one go from the Shape Options tab.