Section 1: How to Take Screenshots of Your Website

Section 2: How to Download your Bookmark Assets

Section 3: Locating and Documenting Your Color Pallette

Section 4: Locating and Downloading Google Fonts

Section 5: Exporting your Customer List

Section 6: Setting Up a 404 or Construction Page

The best way to save your work is to have a visual representation of it that you can rebuild in another website builder. To do this, you need any tool that can take a screenshot. Depending on the computer you are using there can be different screenshot tools.

Another great tool is FireShot. See reference below.

Once FireShot is installed, you just need to locate it as a browser extension and click on “Capture entire page”. Click here for information on how to install extensions.

If you are a designer that is using Figma, you can download any Figma plugin that can transform HTML to Figma. Some examples: HTML to Design, Builder.io. With these plugins you can easily make mockups of your websites and have them ready in Figma for documentation or for rebuilding on a different website builder.

Please note that Bookmark has no affiliation with any screenshot, snapshot or any other tools that are not accessible through Bookmark.com. Please do your own research about snapshot tools’ security.

To export the basic html of your website go to the Websites page of your Bookmark profile. From there, click the cog icon beside the website card to open the dropdown menu.

On the dropdown menu, click the ‘Export Site’ button, and the basic html of your website will download to your computer

Another way to export the website is to select Dashboard. You will see the Dashboard panel in the website builder. Go to Site Action and select Export Website.

Log into your Bookmark account by following this link. If you are already logged in, skip this step.

Once you have located your website, click on the “Edit Site” button.

In the builder editor, click on “My Drive”. A window with all your assets will open.

In “My Drive” you will see all of your files, organized in the following way:

Once you see the assets in “My Drive”, you will notice that hovering on each file will show action icons. Click on the download icon shown below to download each asset.

Each file on your website will have to be downloaded individually. To make it easier for yourself to use the files on your next website builder, create a central folder on your computer and add your files there in the following organization manner:

Main Folder: Websites

Continue like this until you create folders for all your websites and all your assets.

Go to Design

Go to “Website Style”. This is where you will find which style you are using for your website.

Find your style. The style you are using for your website will have a thick red border around it. For example, in the image below, the website is using Style 7.

Find your color palette below.

Note that if you manually selected a color for a section or a module, your selected color will override the Bookmark predefined colors by style. See below how to find which color you are using for colors you selected.

Go to Design

Under General, locate Menu Navigation and select it.

Scroll to see which colors you have selected for your menu navigation links

In the builder, select the module or section where you would like to inspect a color. In the example below, we are inspecting the colors of a button.

Choose the color selector for that specific element (module or section). When you see an icon that has an eye dropper icon in it, that means that you are editing something that has to do with the color.

Eye Dropper Icon

Some modules are made of more than one element. For example, a button will have a text color and a background color. In this case, you will need to determine which color is the one you need to save.

In the example below, we are inspecting the background color of a button.

If it’s a Default Color

Default colors are simply pre-made color swatches that you can pick from. However, the 6-symbol hex code is not specified, so it is hard to determine which color that is.

There are two ways in which you can find out the color:

In the example below, we took a screenshot of the red button and uploaded it to Canva.

We now know that the red color is Monarch red with a hex code #8A061D.

Custom colors have a 6-symbol hex code. This is the code you need to save in order to transfer your color to your new website builder. The best way to do this is to create a document and copy and paste it in your document as plain text.

Sections can only have a background color, otherwise each element inside a section is a module which will follow the module example. Default and Custom colors in a section work the same way as in a module.

Go to Design

Under General, locate Text/Title Fonts

Check which font is selected. Selected fonts will be highlighted in gray and will have red text. Your fonts can be under Basic or Advanced.

*In this example, the selected fonts are AMATIC SC for titles and Andika for text.

To download your fonts, go to https://fonts.google.com/.

Type in your desired font in the search field.

If your search results in more than one font, locate the font that matches your website and then click on that font. This may look hard at first but if you look at the letters closely, you will notice that there is a difference in how far the letters are from each other, how bulky or light they are, and how wide or narrow they are.

You will be taken to a screen with all the different font styles that belong to this font family. You can either download each font style individually or the whole font family. To be sure you have all the information you need to your next website, we recommend that you download the whole font family.

This will give you a zip file that you can upload to another website building platform.

Go to Design

Go to “Website Style”. This is where you will find which style you are using for your website.

Find your style. The style you are using for your website will have a thick red border around it. For example, in the image below, the website is using Style 7.

Find your fonts per style below:

Style 1, 2, 3, 4, 5, 6, 7, 8, 9, 11, 12, 16, 17, 18 have a paragraph font size of 16px

Style 13, 14, 15, 19, 20 have a paragraph font size of 18px

Go to Design

Under General, locate Text/Title Fonts

Select Advanced

Find your font paragraph size. The selected font will be highlighted in red. In the example below, our paragraph font size is 16px.

To locate the Menu Navigation Font Size

Go to Design

Under General, locate Menu Navigation and select it.

Find your font size. The selected font will be highlighted in red. In the example below, our menu navigation font size is 16px.

You can reference this guide for exporting lists from form submissions:

You can reference these guides for more information on how to set up a 404 or Under Construction Page while if you need downtime while transferring your website: