Cargo is a site builder for designers and artists. We are interested in two main things: helping creative people secure jobs/clients through showing work and displaying work, generally. As well, we host a network of peers to show great sites and work. This is Cargo’s passion and purpose.
Cargo is designed to meet the various needs of creative professionals. There is (of course) single portfolio type use — but you can also design and publish a whole group of sites, each with its own purpose. Simultaneously publish a portfolio, client presentations, idea boards, a profile site, a shop — basically any kind of site you need — all with a single account. We have developed it this way with the budgets of artists and designers in mind.
There is only one price for Cargo: $14/mo (when billed yearly, or $19/mo when billed monthly).
Cargo Commerce enables a site to have shopping functionality — to sell and receive payments for goods (whether physical or digital). Commerce is free to try, privately, for any duration. To receive actual payments, purchase an add-on: $5.50/mo when billed yearly or $9/mo when billed monthly.
Cargo does not charge per-transaction fees.
Cargo offers free use to all students (as well as teachers and related administrators). To get started, we require the email of a professor or administrator. The email must be attached to an official domain, like “.edu”. This is for clerical smoothness, and clear registration. If you are an individual student, please have your professor or school administrator send us an email to request membership to the program. Professors and administrators can apply for their school or department via email.
When you are logged into cargo.site, you're in the Workspace. The first thing you will see is an overview of your sites, where you manage your activities: add and remove sites, duplicate sites, add and remove collaborators, organize sites into folders, and manage your account settings.
All Cargo accounts allow for having multiple public sites. There is no change in price whether you have 12 sites or 1 site. We hope that it is understood that the decision to develop Cargo this way, is (sincerely) to give artists and designers (and their studios) more power to represent themselves. Being artists and designers ourselves we know that single site representation is simply not enough. Most of us need a portfolio, as well as client presentation sites, idea boards, shops, etc.
Sites are represented by screenshots; these images are generated automatically from your current/live home page. These screenshots update each time a site is published.
In the Workspace, folders appear in the pane on the left. The “All” folder automatically contains every site in the account, and each account starts with a default folder called “Folder 01.” Additional folders can be created as needed, and folders can also contain subfolders. To add a site to a folder, drag it into the folder, or right-click the site and select the folder from the “Add to folder” dropdown menu. To remove a site from a folder, right-click the site, go to the “Add to folder” menu, and deselect the folder it is currently in. Sites cannot be removed from a folder by dragging them out.
To make a new folder, hover over the folders area and click the new folder icon. Folders can be rearranged by dragging, and renamed or removed by right-clicking. When you remove a folder, any sites inside that folder will stay intact, and can be found in the “All” folder.
Folders can be shared with others: right-click a folder and enable “public viewing.” This makes the folder truly public: viewers do not need a Cargo account to see them. (By default, all folders are private.)
To delete a site, right-click and select “Move to Trash” — sites in the trash will be permanently deleted after 30 days. To restore a site, go to the Trash (via the green user icon), right-click a site, and choose “Restore.” (Note that Cargo 2 sites cannot be restored: they can only be permanently deleted.)
Though Cargo sites can not be edited on the phone, you can manage many activities. Simply log into Cargo on a mobile device. Here you can:
Changes made to your site are automatically saved as a draft version — but not published to the live site. The live site is not affected by your changes until you choose to publish: open Publish Settings (in the right menu bar) and click “Publish Changes” or press ⌘P
Exiting edit mode and working on other sites does not affect a site’s draft: any changes will be saved. Once you publish, your changes are committed to the live site. When changes are made after publishing, the site is in draft mode again. There is no time limit on how long you can keep a site in draft mode; you can publish whenever you’re ready, or at any step along the way.
Publishing a site makes your changes live, while a subscription is required for your sites to become public (sites can be made private or password-protected in their Publish Settings.)
Click the pointer-finger icon at the top-right and choose “Preview Draft”. This allows for seeing and browsing a site without leaving edit mode; so you can see your current draft as a regular visitor would: links can be clicked — functions such as galleries, audio players, and commerce are active. Press Esc to exit Preview mode.
Tip: Press ⌘\ to toggle Preview mode on & off. To quickly edit different pages on a site, enter Preview mode, navigate to another page, then exit Preview mode to edit the page you are on.
You can undo & redo — ⌘Z & ⌘⇧Z — any changes you make during an editing session. Undo history is interrupted in the following scenarios: exiting edit mode, reloading the browser, publishing changes, or discarding changes. (Changes by other users can only be undone by those users themselves.)
A site’s draft can be discarded so that any unpublished changes are removed and the site goes back to its “live” state when it was last published. Go to Publish Settings and click the “···” button, then choose Discard Changes.
You can save a site’s draft as a new site: go to Publish Settings and click the “···” button, then choose Save as new site. This publishes the draft on the new site.
A site can be built/edited/updated solo, or with (pretty much) any amount of collaborators. That is, you can build/edit/update a site with members of your studio/team or with a client or whomever. All in real-time (think Google Docs with all the design possibilities of Cargo).
Invite others to your site via the Users panel at the bottom-right when editing a site, or in Your Sites by right-clicking a site and choosing Users. When you send an invite, the recipient will receive an email with a screenshot of the site and a link to join. Once joined, users see each other’s changes in real-time when editing the site.
Admins have full access to the site; they are allowed the same capabilities as the primary owner/creator.
Editors can do most things Admins can, except for:
The Viewer role is intended for showing someone a site that is in-progress, without access to editing. A viewer can look at a site when it is not public — even if a site has unpublished changes.
“Viewer access” is helpful for keeping clients or friends aware of a site’s progress — for feedback and/or approval (without having to commit to publish your changes).
Viewers see changes being made in real-time, just as Editors and Admins do, but they only have access to the “Site Preview” mode, and are unable to make changes to the site themselves.
To manage your account settings and payments, go to your Workspace (cargo.site — login if needed), open the user menu (the green circle at the top-left), and choose “Account Settings.”
Here you can:
Cargo 3 does not affect Cargo 2. Cargo 2 is a 100% active, fully functional site builder. Cargo 2 sites will not be discontinued. Cargo 3 was designed to have more advanced features than Cargo 2.
Cargo 3 has introduced unlimited public sites using “cargo.site” domains under one subscription (as in: site1.cargo.site, site2.cargo.site, etc.) — if you are currently paying for Cargo 2, this will apply to any Cargo 3 sites you make. There is nothing you need to do to access this: if Cargo detects an active payment, any Cargo 3 sites you make will be public when using the “cargo.site” domain.
If you’ve made a new Cargo 3 site and want to transfer your Cargo 2 payment to Cargo 3, in order to make it public, you can do so from within your Cargo 3 site. Go to Publish Settings (in the right menu bar) and click Make this site public. You’ll see an option to transfer your Cargo 2 payment. Make sure that you are logged into the account that contains both the upgraded Cargo 2 site as well as the new Cargo 3 site. Note that transferring the payment will make your Cargo 2 site private, and that you will no longer be paying for it.
NB: In Cargo 2, a payment is called an “Upgrade”; in Cargo 3, it is called a “Subscription.” A Cargo 2 Upgrade applies to a single site and allows it to be public. A Cargo 3 Subscription includes one custom domain connection, with additional custom domain connections available at a lower cost. When a Cargo 2 Upgrade is transferred to Cargo 3, it is converted into a Subscription. A Cargo 2 Upgrade cannot be transferred if a Cargo 3 Subscription has already been purchased.
If you want to use a domain that is currently connected to a Cargo 2 site and connect it to a Cargo 3 site, you can do so from within your Cargo 3 site: go to Publish Settings and click Add a domain, and then Use an existing Domain. All domains associated with your Cargo account, whether 2 or 3, are listed here.
Domains registered with another registrar cannot be transferred to Cargo.
To use a promo code, open the site editor for the site you want to apply it to. Then open Publish Settings and click “Make this site public.” If the site is already public, click “Add a domain” instead. In the payment window, click the gray “promo code” link at the bottom of the window.
An image caption is text that is attached to the image itself. If the image is moved elsewhere on the page — by dragging, copy-pasting, placing it inside a Gallery, Columns, or other layout elements — the caption will move with it. To add a caption, right-click the image (or click the white circle with the three dots that appears when hovering over the image) and choose “Caption”.
Go to Account Settings → Invoices — find the invoice you want, click the three-dot (⋯) menu on the right side of that invoice and Select Download PDF.
If you purchased your domain through Cargo, it can be transferred to another domain registrar. A member of our Support team can help you with the transfer. If you purchased your domain elsewhere, it cannot be transferred to Cargo. You can still point it to your Cargo site by updating its DNS settings with your current registrar.
Purchasing a subscription automatically makes your site public, unless you have explicitly set it to Private. A subscription also makes any other sites under your account public under the cargo.site domain (for example: site1.cargo.site). Your subscription includes one custom domain connection (for example: site1.com). Additional custom domain connections are available for $2/month when billed yearly or $3/month when billed monthly.
No. Cargo automatically provisions and manages SSL certificates for all connected domains.
Yes. Set the page to 100% height, then open the Local Page Settings and expand the Inset menu. Set the Bottom Inset to the desired value (for example, 3) to reduce the page height.
Cargo does not have a hard requirement for the size of the images you upload. The ideal dimensions depend on how the images will be used. As a general guideline, upload images that are at least as large as they will be displayed on screen, but avoid files that are unnecessarily large, as they will take longer to upload and process. For most websites, images between 2000 and 3000 pixels on their longest side provide a good balance between quality and performance. When exporting JPEGs, using moderate compression (around 70–85% quality in most image editors) typically provides an excellent balance between image quality and file size. If an image file is unusually large (for example, 10 MB or more), it is often worth reducing its dimensions or increasing the compression before uploading. If the images are very large and cause a site to load slowly, we suggest converting them to WebP and/or AVIF, which can meaningfully reduce file size without sacrificing quality.
We recommend creating a new Text Style for this. Open Text Styles and choose New Style (or Duplicate) from the “···” menu. Set the desired text color and link color for the new style. Then, on the page where you want the different colors, select the text and apply the new Text Style using the Text Style dropdown in the top menu bar. Using a Text Style allows you to control both the text color and the link color, whereas Local Text Color only affects the text color.
You can email us at support@cargo.site
You can cancel your Subscription in Account Settings at any time
The text may belong to a different page that is pinned. To edit its contents, click the yellow page label that appears in the top-left corner when you hover over the text. You can also select the page from the Pages menu.
You can change your site name and Cargo URL in Publish Settings.
You can add optional details like this under Invoices by clicking Customize “Billed To”. Enter your text, then click-out to save & close.
It's not possible to customize the 404 page, sorry about that.
If you’ve purchased domains from Cargo, they will remain registered to you and will automatically renew each year. Your domains are separate from your Subscription. If you’d also like to cancel them, you can do so individually in Account Settings → Domain Names. Click on the “···” icon next to the domain you want to cancel and choose Cancel Domain.
You can cancel your Commerce add-on in your Account Settings → Subscriptions at any time by clicking on the “···” next to that specific Add-on.
Make sure one of your pages is set as a “Homepage”. If you don’t see a page with the “home” icon, right-click the page you’d like to set and choose “Set as Homepage”.
The only customization currently supported is the appearance: Light, Dark, or Auto (based on visitor). You can set this in Publish Settings → Contact Form.
The only customization currently supported is the appearance: Light, Dark, or Auto (based on visitor). You can set this in Commerce Settings → Checkout Customizations.
To disconnect a custom domain from a site, edit the site and open Publish Settings (the globe icon in the right menu bar). Click the three-dot “···” button next to the domain name, then select “Disconnect Domain.” The custom domain will be disconnected, and the site will remain accessible via its Cargo URL (e.g. 12345.cargo.site).
You can also do this from the Workspace at cargo.site without opening the site: right-click the site and choose "Disconnect Domain," then confirm. This is the way to go when the domain isn't loading and the editor redirects to it. The site stays reachable at its Cargo URL, and "Add a Domain" in the same menu reconnects it later.
Yes. Once a custom domain is connected, the site's cargo.site URL and any links to it automatically redirect visitors to the custom domain. Any cargo.site links shared before connecting the custom domain will continue to work.
We usually recommend making a product with a price of 0 or a very low amount, and putting its Add to Cart button on a password-protected page to test checkout.
You can implement a third-party newsletter signup form (like Mailchimp):
Your friend can invite you via the Users panel (at the bottom-right while editing the site, or by right-clicking the site in the Workspace and selecting Users). You will then receive an email invitation to join.
In Publish Settings, click Meta Tags and paste this code: <meta name="keywords" content="keyword one, keyword two, keyword three">. Change keyword one, etc. to your own keywords.
Selections for the Newsletter and Community page do not happen by submission — they are arrived at organically by staff.
In the site editor, open Publish Settings and click “Make this site public.” This will bring up the payment form to purchase a Subscription.
To make a new site, go to cargo.site/templates. Once you’ve chosen a template, click on the “Start with this template” button while previewing it (or right-click a template thumbnail and select “Duplicate”). You can also save a template to revisit later by clicking the star icon — it will then appear in the “Saved” collection on the templates page. Once duplicated, right-click the site in your Workspace and select “Edit.”
A page’s direct URL is determined by its title. To go to a page’s direct link, right-click the page in the Pages menu and select “Direct Link”. Note that the site must be published for the page URL to become available.
To paste clean text without inheriting its formatting, use “Paste and Match Style”. On MacOS, the shortcut is ⌥⇧⌘V. (Option-Shift-Command-V).
To connect a Cloudflare domain, use this method:
@ with the value domain.cargo.sitewww with the value domain.cargo.siteWhen pages (or sets) have the same title, each additional one with that title will get a number appended to the URL. (i.e., a page titled "Projects" gets /projects, a second page titled "Projects" gets /projects-1, a third gets /projects-2, and so on.) Here's how to ensure the URL isn't used by another page, and then have your page occupy it: In the Page List, change all identical page titles to something else temporarily (for example, “Projects” → “Projects xyz”) — double-click a title to rename it. Then, rename your pages as desired, making sure your new titles are unique, and publish these changes (Note: You'll have to reset any links that should lead to the renamed pages.)
When a page title is changed, links to that page which you've added won't automatically update. You'll have to reset these: Select a link to the renamed page, and open the Link menu ⌘K. Then, choose the correct page with the “Link to Page” function.
In your Account Settings → Subscriptions, click the “···” button next to the subscription you want to change the payment method for, and select “Change payment method”.
We don’t have a method in place for transferring payments from Cargo 1 to Cargo 3 — a separate subscription for Cargo 3 sites is required. You can let us know when you purchase a subscription, and we'll extend the time to match the remainder of your Cargo 1 site upgrade.
To connect your domain, go to your domain host and edit your domain's DNS to use Cargo’s nameservers (and remove any other nameservers listed here):
ns1.cargo.site
ns2.cargo.siteYou can cancel your subscription in your Account Settings by clicking the three-dot “···” button next to the subscription. When you’re ready to take your site online again, you can select “Renew” in that same menu.
When your Cargo site loads, the main font files associated with your text styles are loaded first, so that text can render as quickly as possible. An italic variation of a font is typically a separate font file, which is loaded only when it’s needed. This avoids loading unnecessary font data and helps keep the site light and fast. When the browser encounters italic text, it may need to fetch that additional font file before it can render the text in the correct typeface. This is why italic text can sometimes take a little longer to appear.
You can remove unused payment methods here.
Only one domain can be connected to a site at a time, however you can redirect another domain to the domain that is connected by adding an HTTPRED record. First go to Account Settings → Domains, click the three-dot “···” icon to the right of the domain not connected to your site, and select Edit DNS. Add a new ‘HTTPRED’ record and add the url of the domain already connected in the “Redirect url” field. Redirecting a domain to another one does not require a Domain Add-on.
By default, font sizes are set to rem units which scale proportionally with browser size. You can try other units instead: enter a pixel value 16px into the Font Size scrubber in the respective Text Style — this will keep the text the same size in any situation. (Supported units are: %, cm, mm, Q, in, pc, pt, px, em, ex, ch, rem, lh, vw, vh, vmin, vmax and fr.)
Open the Publish Settings of the new site, click Add a domain, and then choose Use an existing Domain.
You’ll need to complete your Commerce Settings before orders can be placed (if you see this icon: ⚠️ that means that your Settings are incomplete.)
You can change your Cargo URL (12345.cargo.site) in your site’s Publish Settings: click the Cargo URL button and enter a new URL. If the Cargo URL you want is currently being used by another site you own, first change the Cargo URL of that site to free it up. You can then use the URL for your new site.
Open the CSS Editor by clicking the “CSS / HTML” button at the bottom of Site Settings and search for media-item .caption. Try adjusting any margin values (typically something like margin-top: 2em is already place), or adding something like text-align: center here. If you're not seeing any changes, search for .caption and look for other styles already applied.
There’s no option to automatically move your content between templates. To use a different template, create a new site with the template you want from cargo.site/templates, then add your content to the new site.
Yes. You can copy individual pages from a template and paste them into your own site. When previewing a template from cargo.site/templates, click “Copy page” at the top right, select the page you want to copy, return to your site, and paste (⌘V). (You can also copy pages between your own sites by right-clicking a page in the Pages menu and selecting “Copy”.)
Each text style has an option to define a hover color for links — it requires modifying a small bit of CSS. Open the Text Styles window and select the style you want to apply the link hover color to. At the bottom of the window, click the “</>” icon to open the CSS snippet for that style. In the a:hover selector, add a color value, for example: color: red;
If you’ve just deleted the page and haven’t yet published, you can undo this (by pressing ⌘Z), or you can discard changes (go to Publish Settings and click the “···” button) to bring back the page. (Note: Discarding changes means you'll lose any other changes made since the site was last published.)
To remove a Backdrop, open the Backdrop window and click the “Remove Backdrop” link at the bottom left.
There is no dropdown feature on Cargo sites. It's possible to implement these with custom code. However, providing guidance on this is outside the scope of our support.
Columns and Galleries are page elements similar to images and text, and can be moved around the page in the same way (by copy-pasting, for example). To add more room above or below a set of Columns or a Gallery, use line breaks: click in front or behind the element, and press return a few times.
Since a Subscription is unique to a user, it’s recommended to have your client create their own account and manage the Subscription themselves — do this by first Inviting your client to the site as an “Admin” via the Users panel. Since Subscriptions cannot be transferred, you’ll need to cancel yours and wait for it to expire. Once your Subscription expires, your client should briefly disconnect the domain and then add it back right away (Publish Settings → Add a Domain → Use an Existing Domain). This will prompt them to purchase their own Subscription. Note that domain names can’t be transferred between Cargo users — if you purchased the domain name, you’ll continue to manage and pay for it from your account.
We do not offer an export option at this time.
This is done in the “Horizontal Rule” menu in Site Settings.
Click below the Horizontal Rule, and press Backspace or Delete on your keyboard.
On the Templates page, select “Blank Template” — it’s the first option in the “Blank Templates” section.
Borders cannot be added to Columns. However, specific content within columns can be selected and given a border from the Effects menu: select the content → Effects → Border. Use the “Width” scrubber to set the border size.
Yes. Disable “Display: Block” in the “More Options” menu of the corresponding Text Style. (Note that this option is not available for Bodycopy and Caption.)
Click the back arrow at the top-left of this window, then click the list icon to see previous conversations.
New sites can only be made on the newest version of Cargo. To make a new site, choose a template from the templates page.
You can subscribe to the Cargo Newsletter on this page: cargo.site/company-writing — click "sign up here" at the top and enter your email address.
Cargo is based in the United States, so all prices and invoices are in US Dollars (USD). Any conversion to your local currency is handled by your credit card company.
Some fonts include alternate glyphs for certain characters. These buttons let you choose between those alternate forms. To see all available alternates and other font options, open “More Options” and select “Type Settings & Glyphs.”
Beyond the built-in Contact Form, Cargo does not provide functionality for creating forms with custom fields. For more customized forms, a third-party form service can be embedded into a Cargo page. tally.so or typeform.com are good options.
Sorry, we’re not able to provide a template or write this message on your professor’s behalf. The professor should contact Cargo directly in their own words.
You can create an image gallery and link each image to a Page:
Repeat this for each image you want to link.
You can achieve this by using pinned pages.
This will create three independently scrolling pages.
Layout is controlled by two menus: Default Page Settings and Local Page Settings. Default Page Settings apply to all pages on a site; Local Settings override Default Settings for individual pages.
Default Page Settings apply to all pages, including new pages, unless a page has local settings applied.
Local Page Settings apply to the current page only and override Default Page Settings. Duplicating a page with local settings retains these.
When a setting is modified locally, a diamond symbol (⬥) indicates that it deviates from the default. To reset, click the diamond.
This controls the width of pages. The value is the percentage of the available width. The three buttons to the right of this setting align the page horizontally to the left, center or right within the available width.
Padding controls the spacing around a page’s content. To adjust the padding on each side individually, click the “···” button to expand the menu. Set the padding in the Default Page Settings menu to something appropriate for most pages on your site and override it for pages that don’t follow a repeatable convention (like Pinned or Overlay pages).
This sets the alignment of content on the page to the left (default), center or right. (Separately, to align a specific piece of content within a page; select the text or media and find the Text Alignment option in the top menu bar.)
Inset adds spacing outside a page’s edges. It is particularly useful when the Content Background color is set on a page, to offset the position of the page’s edges. Click the “···” button to adjust the Inset of each individual side.
This option gives a page the full height of the browser window, at minimum. The three buttons to the right of this setting align the page’s content vertically to the top, center or bottom within the available height.
There are various ways of controlling background colors in both default and local settings. Page Background controls the background color of the entire page (which can be overridden on individual pages) and Content Background sets the background color of just the area that the Page Width is set to. Content Background sits on top of Page Background, so that the two can interact when the color opacity is changed.
To add a grain texture to a Background color, open the color picker for any Page or Content Background and find the Noise option at the bottom. Change the grain size with the S/M/L buttons. Noise is available in Default Page Settings, Local Page Settings, Site Settings, and on Gradient and Wallpaper backdrops.
As with all these settings: the Background option in Default Page Settings applies to every page on the site, and the Background option in Local Page Settings applies to the current page only. To remove a background color, open the color picker and click on the checkered square with the diagonal line.
Borders can be applied on a site-level as well as on a page-level. And here again these can be overridden locally, on individual pages. The Page Border adds a border to each page individually, including pages that are visible next to other pages (when Pinned or Stacked), the Site Border applies to the site as a whole, and sits “around” all the pages on the site.
Each border menu has options for Width, Color and Radius. Click the “···” icon to adjust the Top, Right, Bottom, and Left properties individually.
This puts a visible shadow around a page’s content. There are controls for offset (click the “···” button to adjust individual horizontal & vertical offset values), blur, spread, color, and a checkbox for inset (which will position the shadow inside the page’s content).
The Layering Effects menu (in Local Page Settings) contains modifications that change how a page visually interacts with pages below it, and can be used on pages that are pinned, overlaid, or have a Backdrop or background color.
If 100% Height is enabled and a Content Background color is selected, this checkbox becomes available. When turned on, instead of extending to 100% of the available height, the Content Background will be limited to the height of content present on the page.
Additional site-wide options can be found in the “Site Settings” menu.
The Image Settings menu contains options to change the way images are displayed by default (which can in turn be overridden for individual images).
Images are, in most cases, not allowed to grow beyond the width of their container. This container is always a column, gallery, or page. So if the page width is 100%, the image will be too. When an image is added to a set of columns or a gallery, it will scale to the width as dictated by each function’s configuration. Scale by Width — Images are limited to a chosen width and will be an arbitrary height. Scale by Height — Images grow to the width of their container, but are limited to a chosen height, useful for smaller images like logos or icons. Scale to Fit — Images are scaled to a percentage of the available viewport size.
Other image effects like Border and Drop Shadow can also be applied (and in turn overridden for individual images by right-clicking an image and opening the Effects menu).
When “Click to Zoom” is enabled in Image Settings, the appearance & behavior of the Image Zoom is controlled by the Quick View feature.
When text links are used for site navigation, these can be styled to indicate the currently active page. Choose a color or click the “</>” icon to add other styles, like font-weight: bold;, text-decoration: underline;, etc. By default links to “Home” are excluded from this, but can be included by checking the “Apply to Home link” option.
To insert lines into the contents of a page, use a horizontal rule. The line will extend to the width of its container. There are settings (found in Site Settings → Horizontal Rule) for their height, color and margin (click the “···” button to expand the menu to adjust the top and bottom margins separately). To use a horizontal rule on a page, click the horizontal line icon in the top menu bar.
The Site Border is applied once, around all visible pages. There are settings for width, color, radius and inset (the spacing between the border and the viewport edges). Click the “···” icon to adjust the top, right, bottom, and left properties individually.
Adds a color overlay that applies to all site contents: images, text, videos, etc. This can be used to subtly adjust your overall color scheme: soften, intensify, invert or make monochromatic.
This is the base background color for the entire site.
Customize your site’s CSS and add custom HTML, scripts, and other code.
This uses the browser’s built-in spelling and grammar checker to highlight spelling and grammar mistakes.
A site is made up of a collection of pages with links to navigate between them. Sets are used to organize pages. To view, edit, and make new pages and Sets, open the Pages menu at the top-right.
When a new page is added, it exists in the site’s “draft,” and is not publicly accessible until the site is published. Once the site is published, the page becomes publicly accessible under its direct url, which is determined by its title (example.cargo.site/page-title).
When someone visits your site, the first thing they see is the page that you’ve set as your “home page.” To set a home page, right-click a page and choose “Set as Homepage”. Here you can indicate whether you want to set it for desktop or mobile, or both — you can use one page to cover both, or use individual pages: one that shows for desktop only, and one that shows for mobile only.
Sets are used to organize pages. You may want to simply visually arrange your pages into Sets so that they are easier to see and manage, and on a structural level, Sets can be used to create site sections. For example, you can pin a title page or navigation menu inside a Set, which will show only on the pages that are within that Set (this also works for Sets within Sets). Another use of Sets is when displaying a thumbnail index, which can be configured to show thumbnails of pages of a specific Set. Another use is to link to a “stacked” Set (right-click a Set and choose Stack Pages) which will display the pages in that Set as a scrolling feed.
Instead of using a single page as the home page, you can also use a Set as the homepage. This will automatically “stack” the Set: all pages in the Set (unless Pinned) are displayed as a scrolling feed. And just like with pages, you can do this this just for desktop or just for mobile, or both. One use of this is where a regular page is used for the homepage for desktop, and a scrolling Set of pages is used for mobile.
When you duplicate a page, or a Set of pages (right-click in the page list and choose Duplicate, or hold option while dragging) a copy is made that includes everything that is part of the original page(s): text, images, galleries, Backdrop, custom code, and all local settings like width, background color, padding, border, etc.
A page can be “pinned,” which makes it visible on every other page of the site, or on every other page within a Set. Right-click a page in the page list and choose Pin. This is used to create a navigation menu, a footer, a fixed logo, etc. Learn more about Pinning here.
Pages that are set to “Overlay” load above all other contents of a site and can be linked-to from the Link menu. To use, right-click a page in the Pages menu and choose “Overlay”. Overlays can be used to make things like a site menu, a popup window, an information panel, or to display the contents of any page on top of other pages.
When pages are “stacked,” they’re displayed as a continuous scroll. You can stack individual Sets of pages, or an entire site. To stack a Set, right-click the Set’s name and choose Stack Pages. To stack the site, click the three-dot “···” icon at the top of the Pages menu, and choose Stack Pages.
Adding tags to a page allows it to be indexed and displayed when included in a Thumbnail Index, or when linking to a tag from the Link menu. To add tags to a page, right-click the page title and go to Settings.
Pages on a site are publicly accessible by default, via their direct url (example.cargo.site/page-title) or when added to a navigation menu, or to a Thumbnail Index. Pages are also subject to being indexed by search engines, so that page content can show up in search results. To prevent a page from being publicly accessible in any way, including search engines, add a password.
The page thumbnail is used when a page is included in a Thumbnail Index, as well as for the “preview image” which is used when a page is posted on social media and platforms like Slack, Apple Messages, etc. This link preview is sometimes referred to as “unfurling.” If no thumbnail is added, the link preview uses the Site Preview Image (in Publish Settings), which in turn defaults to the site screenshot, unless a custom image is added. To add a page thumbnail, right-click the page in the Pages menu and go to Settings.
Pages can be password-protected: right-click a page in the Pages menu and go to Settings. When the direct link to a page is visited, it will display a password field. Password-protected pages are also excluded from being indexed by search engines, so in order to prevent content on specific pages from showing up in Google and other search engines, add a password. Currently the password styles cannot be customized.
To copy a page for use in another site, right-click the page in the Pages menu and choose “Copy”. This can then be pasted into another site by pressing ⌘V. The pasted page includes everything that is part of the original page: text, images, galleries, Backdrop, custom Text Styles, custom code, and all local settings like width, background color, padding, border, etc. Note that pages that are not yet published cannot be copied.
Text is styled using Text Styles. Most Templates come with four predefined styles: Bodycopy, Heading 1, Heading 2, and Caption, but there is no limit to how many text styles can be added.
By default, text on a page is styled according to the Bodycopy text style. To use a different style, select the text and click on the Text Style name in the top menu bar. To manage these, open the Text Style menu (the “Aa” icon in the right menu bar). Here you can change font properties such as Font Size, Line Height, Letter Spacing and variable font settings when applicable. To add or edit properties that are not part of the interface, click on the "</>" icon at the bottom. To create New styles, as well as Duplicate, Rename and Remove existing ones, click the “···” button at the top-right.
It’s possible to change certain text properties locally without making changes to the Text Style itself: select some text and open the Text Options menu (the “Tt” icon in the top menu bar). Here you can specify basic formatting: Bold, Italic, Small Caps, Superscript, Subscript, Underline, Strikethrough, and No Wrap, as well as color, font scale, and line height.
The "Scale to fit width" option scales the size of selected text to fit the available width of its container (the page or the column where the text is located).
Tip: to exit a style, press return twice quickly. To add multiple line breaks within a Text Style, press return more slowly.
To format text as a Bulleted List, a Numbered List, or Lineated, select the text and open the Lists menu (the bulleted list icon in the top menu bar). The Lineated option indents a line of text when it soft-breaks, as is often seen in poetry. To change the properties of these list options, open the CSS menu (under Site Settings) and search for ol, ul, or ul.lineated.
The Text Styles menu also offers a number of “Effects” that can be applied, like Border and Drop Shadow. Find these in the More Options menu when editing a text style (it is not possible to apply these to Bodycopy). Additional Effects can be applied locally: select some text and open the Effects menu (in the top menu bar) — Rotation, Border, Drop Shadow, Blink, Eyeroll, Draggable.
Cargo comes with a variety of pre-made button styles: open the “Add...” menu, go to More..., and choose *Button... These Button styles function as a kind of shortcut for what can be done manually as well, by adding Borders, Background, Color, etc.* to text. When making a button with text already selected, the button style will copy the Text Style that the selected text is part of. If a button is added without text selected, the Bodycopy Text Style is copied for the new button style.
It’s possible to change the font size and color of the different Text Styles on mobile: go into Mobile Preview (the phone icon in the top menu bar) and in the Mobile Settings window, choose the Text Style you want to change (the keyboard shortcut for toggling Mobile Preview is ⇧⌘X).
This provides access to “contextual alternates” (a feature that, if available in the selected font, automatically swaps letters for a different version), “font feature settings,” and contains a glyph palette with every character that the selected font contains (click a glyph to copy it to the clipboard). The font feature settings include: Access All Alternates, Contextual Alternates, Case-Sensitive Forms, Denominators, Fractions, Standard Ligatures, Localized Forms, Numerators, Ordinals, Proportional Figures, Required Ligatures, Stylistic Alternates, Scientific Inferiors, Subscript, Superscript, Tabular Figures, Slashed Zero.
The Type Settings & Glyphs menu is located in the “More Options” menu at the bottom of the Text Styles window.
Controls the color of Linked text within the Text Style. If left untouched, the link color will match the text color. To reset a previously modified link color to its default, open the color picker and click the square with the red diagonal line. This setting is located in the “More Options” menu at the bottom of the Text Styles window.
Enable this setting to underline links within this text style. When enabled, the color of the underline can be controlled as well. This setting is located in the “More Options” menu at the bottom of the Text Styles window.
You can add fonts from other foundries and font services to Cargo’s font menu by uploading or embedding them.
Start by opening the Text Styles menu (in the right menu bar) and choosing a text style to associate your new font with. You can also duplicate an existing text style, or create a new one. Open the font menu, click on the “Custom” link at the top, and then on “Add Fonts”. Here you can drag & drop your font files or paste your embed code. Click OK to add the fonts to the font menu.
If you’re uploading fonts from your desktop, the font files will be added to your Files.
Although webfonts can come in multiple file formats, since WOFF or WOFF2 are well-supported on modern browsers, additional formats are generally not necessary.
Here are some tutorial videos that cover Adobe Fonts, Google Fonts, and custom/uploaded fonts.
A page can be “pinned,” which makes it visible on all pages of the site, or on all pages within a Set. This is used to create a navigation menu, a header or footer, a fixed logo, and a variety of site layouts.
To use, right-click a page in the Pages menu and choose “Pin”. A page cannot be both pinned and an Overlay: pinning an Overlay page turns its Overlay off.
Adjust other contents — The pinned page pushes other pages “out of the way” so that it does not overlap them.
Fixed in place — The pinned page stays in place when the site is scrolled. It will also scroll independently when its content overflows the available height (for instance, the height can be limited by the page’s Inset).
Overlay other contents — The pinned page does not push other content out of the way; it is layered over top. When combined with “Adjust other contents” it will push contents out of the way but still overlaps the other pages, so that it can sit on top of background colors, or Backdrops.
Pin at the top — The pinned page is displayed vertically above other pages, or at the top the browser window when also set to “Fixed in place”.
Pin at the bottom — The pinned page is displayed vertically below other pages, or at the bottom of the browser window when also set to “Fixed in place”.
Note: The “Overlay other contents” option is unrelated to Overlays.
A pinned page can be set to show only on Desktop or only on Mobile, or both. This can be used to show a different navigation menu on mobile devices. To show a link or icon that opens a navigation menu on the phone, pin a page, configure it to show on mobile only, then add a text link or icon to it, and link it to another page that contains your site menu.
To show a pinned page on certain pages only, put them together in a Set.
Make a header navigation — Configure a page to “Pin at the Top” as well as “Overlay other contents” and add text links. If you want the navigation to stay visible while the site is scrolled, set it to “Fixed in place”. If the contents of the page overlap with the site’s contents undesirably, you can enable “Adjust other contents” and the site’s other pages will be pushed out of the way to make room for the pinned page.
Make a left/right site layout — In the Default Page Settings (right menu bar), change “Width” to 50 and align to the right — this will make all pages in the site fill the right half. For the left side: pin a page and set it to be “Fixed in place” and in the Local Page Settings (top menu bar) align the page to the left and enable “100% Height”. You can add text links, or a Thumbnail Index which will be persistent when navigating through the site’s pages on the right. To make it stay visible while scrolling, enable “Fix in place” in the Pin Settings.
Make a Previous/Next arrow navigation — Insert some arrows into a page (via the Icons menu in the top menu bar) and link them to “Previous Page” and “Next Page” — then Pin the page and set it to “Overlay other contents” and “Fixed in place”.
Pages that are set to “Overlay” load above all other contents and can be linked-to from the Link menu. To use, right-click a page in the Pages menu and choose “Overlay.” A page cannot be both an Overlay and pinned: setting a pinned page to Overlay unpins it.
Use overlays for site menus, popup windows or information panels — generally, layering the contents of one page on top of another.
Next, set up a link to it. Select text, an icon, or an image on a different page of your site, open the Link menu ⌘K, and choose your overlaid page from the “Link to Page” menu. When the link is clicked, the overlay loads on top of the current page without affecting it. Clicking the link again closes the overlay.
Unlike links to regular pages, a link to an overlaid page doesn’t show its URL in the browser’s address bar. You can still share an overlay’s URL: visiting it directly opens the overlay on top of the page beneath it.
Overlays can be layered on top of each other, with the most recently opened one on top. There is no limit to the number of overlaid pages you can create. Overlaid pages will sit above all other pages on the site, including pinned pages.
Right-clicking a page and choosing “Overlay” opens Overlay Settings, where you choose how the page opens and closes:
Open on load — The overlay opens when the site first loads. If the overlay is inside a Set, it opens when any page in that Set is visited.
Close other Overlays — Opening this overlay closes any other open overlays.
Close on clickout — Clicking outside the overlay closes it.
Close on navigate — Going to another page, or using the browser’s back and forward buttons, closes the overlay.
Close self — The overlay closes by itself after the number of seconds set in “Delay”. This is useful for splash screens and announcements.
Close Overlay link — Select text or an icon inside the overlay, open the Link menu, and choose “Close Overlay” from the “Navigate” menu. Use it to make a close button (e.g. “×”).
Esc — Pressing Esc always closes the overlay on top.
By default, an overlay simply appears. To animate it, choose a “Transition”: Fade, Glide, Slide, Wipe, Grow, Shrink or Rotate. Pick a “Variation” (1–3) to go from subtle to more pronounced, and click “Preview” to see it.
Click “Customize” to set the open and close transitions separately. You can adjust speed, easing, fade, slide, wipe, grow and rotate. Click “Reset” to go back to the preset.
Overlays are a good way to make a menu which opens upon clicking a link. To make a persistent navigation menu that is visible alongside the other contents of a site, see Pinning.
Tip: Every overlay can scroll within itself; once the content overflows the height, it will scroll within its content bounds rather than scrolling with the rest of the site in the window. You can then use Inset to offset the location of the scrollable page.
Linking from one page to another is done using the Link menu ⌘K. Most things can be linked: text, images, icons, etc. For example, to create a persistent navigation menu you can Pin a page and use the Link to Page function to create links to your various pages.
This brings up a list of all pages on your site. When using a Stack of pages, you can choose to “Scroll to page in stack”, and the page will scroll into view.
The “Navigate” menu contains Cargo-specific functions related to site navigation:
Home — Loads whichever page (or Set) that is set as Home, whether desktop, mobile, or both. Read more about setting the Home page in Pages and Sets.
Previous Page — Loads the page before the current page in the page list.
Next Page — Loads the page after the current page in the page list.
Random Page — Loads a random page on the site.
(Note: The Next, Previous & Random Page functions exclude the Home page, Pinned pages, and Hidden pages. If these functions are used on a page that is within a Set, it is limited to pages within the Set. When using a Stack of pages, the upcoming page will scroll into view.)
Scroll to Top — Scrolls to the top of the site or the closest page. For example, add a Scroll to Top link to a pinned navigation page: clicking this either scrolls the rest of the site, or scrolls the navigation page itself (if it is scrollable.)
Tags — When Tags are added to pages, they can be linked to using this function. When a link to a Tag is clicked, pages containing this Tag (or Tags) will be loaded as a vertical scroll.
Contact Form — Opens Cargo’s built-in contact form. Messages submitted through this form are sent to the email address used by the site’s creator — it can be changed in the Contact Form menu found in the Publish Settings window.
Email — Used for adding “Mailto” links, which redirect to an email address instead of a link, and open the default email client on the visitor’s computer.
Quick View — This allows a direct url to be loaded inside the Quick View function, which will display it on top of the site, like Image Zoom. For example, you can link to a PDF, a video, another site, etc.
Add to Cart — If you are using shopping functionality, this is a way to enable your products to be added to the Cart. For full documentation on how to set up a shop, see Commerce.
View Cart — When shopping functionality is enabled, this will open the Cart.
To link offsite, use External links. These can be set to open in a new window by toggling the related icon to the right of the link field.
When text links are used for site navigation, these can be styled to indicate the currently active page. To change this, use the “Active Link” menu in Site Settings (see Site and Page Layout). Choose a color or click the “</>” icon to add other styles, like font-weight: bold;, text-decoration: underline;, etc. By default links to “Home” are excluded from this, but can be included by checking the “Apply to Home link” option.
Tags are a way to filter the contents of a site. Each page can be assigned Tags: right-click a page in the Pages menu and go to Settings. Here, enter one or more tags (separated by commas).
Once you’ve added Tags to your pages, you can add links to filter the contents of your site. For example, if you have a Pinned navigation, you could add text links like this: Tag 1, Tag 2, Tag 3 — select one of them and open the link menu, go to *Navigate... and then Tags...* Here you can enter which Tag(s) to link to. These should correspond exactly to the tags you’ve added to your pages. When a tag link is clicked, the pages that contain the tag(s) will be displayed in a vertical scroll. Linking to multiple tags will return pages that contain any of these.
Another use of Tags is when when displaying a Thumbnail Index — these can be configured to return thumbnails of pages with specific tags: in the “Add...” menu in the top menu bar, select Thumbnail Index, then after the index is added, click on the Thumbnail Index button to open the settings, and filter it by Tag.
Images can be added in a number of ways: by dragging directly from the desktop into a page; by dragging onto the images icon in the top menu bar; by opening the images menu and dragging into it; or by selecting image files by clicking “Upload”.
In the Images menu, hover over an item and click the “↗︎” button to open the original file in a new tab, or the “×” button to delete it. Click “Library” to view all images uploaded to the site. Note that files can’t be deleted directly from the Library — images are managed from the individual pages where they’re used.
Most any type or format is allowed. Formats that are not widely-supported by browsers, such as HEIC and TIFF, will be automatically converted to WEBP for display in-browser. Web-native formats such as JPEG, PNG, GIF, SVG, WEBP, AVIF will be served without conversion. File size limit is 25MB per image. Smaller videos (up to 25MB) can be added in the same way — accepted formats are MP4, MOV, and WebM. Larger videos (up to 250MB) can be uploaded to the File Library.
Tip: to replace an image in the page while keeping its local properties like link, sizing, border, rotation, etc., open the images menu and drag hold the new image onto the image you want to replace.
The Image Settings menu in Site Settings contains options to change the way images are displayed by default, and this can be overridden locally for individual images. Images are, in most cases, not allowed to grow beyond the width of their container. This container is always a column, gallery, or page.
Galleries have their own layout designs which dictate a specific height or width for a given image. These designs can be specified through a gallery's settings and often on an image-by-image basis. For example, a Grid gallery might have a three-column layout, and the images inside can be set to occupy one, two, or three columns.
Pages and Columns only limit the width of the images they contain, which can otherwise grow as tall as needed in proportion to their width. From there, the image settings can be used to refine the maximum size of each image, or change how their size is limited. The settings are as follows:
Scale by Width — A setting of 100 means that an image will scale to fit 100% of the width of its container at a maximum. A setting of 50 means that the image will scale to 50% of the width of its container, and so on. Different CSS units can be used: A setting of 400px will limit the image to 400px wide or the width of its container, whichever is smaller. This is useful when you want an image to be sized purely in relation to the width of its container, like a full-bleed header image that needs to reach both the left and right edges of the website. This sizing behavior is also relatively predictable, regardless of the dimensions of the browser window.
Scale by Height — A setting of 1 means that the image will be one base unit tall (one "rem" ). These units are the same used by Cargo elsewhere in the setting of font sizes, padding, borders, gutters and margins. Regardless of the specified height, it will not expand beyond the width of its container. This is useful for smaller images that need to keep a consistent relationship to surrounding text or design elements, like small icons, logos or inline graphics. Different CSS units can be used: A setting of 50% will limit the height of the image to 50% of the width of its container, and a setting of 80vh will limit the height of the image to 80% of the browser's viewport height.
Scale to Fit — For every page, a value that represents the maximum available uncropped height is calculated. This value is the height of the browser viewport minus the accumulated dimensions of all the surrounding margins, padding, borders and pinned pages. For example, if a page has 10px of padding on all sides and the browser window is 800px tall, that value would be equal to 780px. This value is fixed to a percentage: A setting of 100 means that the maximum height is 100% (780px) of that value, 50 is 50% (390px) and so on. This is useful when you want an image to fit entirely in the browser viewport, regardless of its aspect ratio or the width of the image's container.
Captions can be added to images and videos via the image settings menu: right-click an image or video and click on Caption..., which will insert “Lorem ipsum...” as a placeholder. Captions are styled according to the Caption text style, which can be edited in the Text Styles menu (the “Aa” icon in the right menu bar). It’s possible to apply different text styles to the caption, and captions can contain text formatting like bold and italic, as well links.
To change the positioning of the caption relative to the image or video, open the CSS Editor (the “</>” icon at the bottom of Site Settings) and search for .caption. To change how captions are displayed in Quick View, find .quick-view .caption.
When Image Zoom is enabled (open Site Settings, then Image Settings), clicking an image or video enters Zoom mode, which maximizes it to fit to the window size. The size and positioning is configured in Quick View Settings (in Site Settings). Read about Quick View here. It’s possible to locally exempt images and videos from Image Zoom in the Image Settings menu (right-click an image and Disable Zoom). When an image or video is linked, Image Zoom is inactive. To change the style of the navigation buttons when zoomed-in, open the CSS Editor and search for ::part(slideshow-nav).
When Scroll Animation is enabled (open Site Settings, then Image Settings), images respond to scrolling, through preset effects. These effects also apply to Videos, Image Galleries, and Thumbnail Indexes. When this option is enabled, it can be turned off locally for individual images or videos, in the Image Options menu.
A number of “Effects” can be applied to images globally — like Border and Drop Shadow — in the Site Settings menu. Additional Effects can be applied locally: right-click an image and click the Effects link in the image settings menu to add effects like Rotation, Blink, Eyeroll, and Draggable.
To apply a custom style to a specific image, right-click it and look for “HTML”. Here you can add a class attribute and target that from the CSS (the “</>” icon at the bottom of Site Settings). For example, if you’ve added a Border to all images in Site Settings but want to remove it from one image only, add a “no border” class in the CSS Editor:
media-item.no-border::part(media) { border: none; }
And then add the class to the image:
<media-item class="no-border" hash="I1370492670470899008647490175015"></media-item>
You can add ALT text to an image by right-clicking it, then clicking the “ALT” link in the image settings menu. ALT text is a short description of an image that helps people using screen readers understand what the image shows. It’s added to the image’s alt attribute and improves your site’s accessibility.
PNG, JPG, GIF, SVG, WEBP, AVIF, HEIC, HEIFF, TIFF
Apart from images and videos, it is possible to use and store other file types on your site — these can be uploaded to the Files menu: open “Images & Files” via the top menu bar, then click on the “Files” link at the top-right. Any file dropped into this window will be added into your file library. The size limit is 250MB per file.
Once a file has been uploaded, you can copy its URL. MP3 and MP4 files can be dragged directly from your library into the page to generate a pre-configured player.
Certain files can also be used as the destination for Quick View links; specifically URLs to MP4 video files, images, TXT or HTML files, and PDFs if the browser supports them.
Columns are a flexible and powerful tool for laying out text and images. To use, place the cursor where you’d like to insert a column set, go to the “Add...” menu (in the top menu bar) and choose Columns. You can also first select some content and then add columns: this will place the selected content inside the first column of the set.
Column sets are based on a 12-unit grid: The width of the page is divided up into 12 equal units, which are then distributed or combined inside the columns inside the column set. Gutters are placed between each column unit to allow for additional layout control.
For example: in a column set with three equally-sized columns, each column will be four units wide.
To edit the settings of a column set, hover over the set and click on the “Columns” button. From here, you can modify the number of columns or the width of the gutter between each column. The “-” and “+” buttons next to the “Columns” button can be used to quickly add or remove columns without opening the settings window.
Once you have the desired number of columns, you can modify the width of each column directly inside the editor: hover over the gutter that separates the two columns you’d like to change, then click and drag the dashed line to change the width of the columns.
To reset the column widths to be uniformly wide, click the “Reset” link in the column settings.
Columns cannot be nested. You cannot add a set of columns inside another set of columns.
Text inside columns is always aligned to the top; there are no vertical align options to align text to the bottom or the middle.
Move content (text, images, galleries, video) between columns by selecting it, then cutting and pasting it into another column (⌘X, ⌘V). To add space below a set of columns, click just below or to the right of the columns so that you see the cursor to their right, then press Return a few times to create new line breaks. To add space above, click just above or to the left of the columns so that you see the cursor to their left, then press Return.
By default, all sets of columns will collapse to a single vertical column when displayed in a mobile format. If you’d like to preserve the desktop formatting on mobile devices, activate Mobile Preview (click the phone icon in the top menu bar), then open the Column settings window by clicking the blue “Columns” button and deselect “Stack Columns Vertically”.
To display an index or sequence of images, Cargo offers several gallery layout modes — Grid, Columnized, Justify, Freeform, and Slideshow — each with extensive options.
To use, click the “Add...” button in the top menu bar and choose “Gallery”. If you have any images selected, they will be automatically added into the gallery. Galleries can also be created by selecting multiple images and opening the image settings window.
If you have no images selected, the gallery will be created with placeholder content; you can drag any item from your Images menu and hold it over a placeholder to replace that item inside the gallery. Aside from replacing the placeholder items, you can also add items into the gallery by dragging them from the Images Menu or your desktop.
Drag images within a gallery to change their order.
To delete a gallery, select and delete all of its contents or open its settings window and click the “Remove Gallery” link in the bottom left.
Move a gallery by selecting it (drag the cursor from the left of the Gallery to the right), then cutting and pasting it (⌘X, ⌘V) into the new location. To add space below a gallery, click just below or to the right of the gallery so that you see the cursor to the right, then press Return a few times to create new line breaks. To add space above, click just above or to the left of the gallery so that you see the cursor to the left, then press Return.
With the exception of the Slideshow gallery, each gallery mode adds layout-specific options to each of the images or videos it contains. These options are visible in the settings whenever an image or video is inside a gallery (right-click to open it).
Displays images in discrete rows and columns. Each row takes on the height of the tallest item in the row. Image size and position are determined by the Columns and Gutter settings. The Vertical Align option lets you control whether the items in each row are aligned to the top, bottom or center of the tallest item. Horizontal Align controls the horizontal position of incomplete rows. Right-click an image to change its Vertical Alignment or Column Span (each image occupies 1 column by default.)
Displays images in vertical columns with no identifiable horizontal pattern. Images are sorted into the column with the most available space below. Differently sized images distributed throughout the columns will create a ragged bottom edge; this space-filling behavior means the layout of the gallery can be unpredictable, and can change significantly depending on its contents and the size of the browser window. Image size and position are determined by the Columns and Gutter settings. Right-click an image to adjust its Column Span (each image occupies 1 column by default.)
Lays out images in rows of uniform height as if the images were words in a text document. There are four possible horizontal alignments: Left-, Right- and Center-aligned galleries prioritize a consistent row height, while the Justify alignment (signified by the “← →” icon) will allow for varied row heights in order to ensure that each row fills the entire width of the gallery. Image size and position are determined by the Row Height and Gutter settings.
By default, each row will end as soon as there is no longer room to place another item. To override this, right-click an image in the gallery and click “End Row Here” to designate that image as the final one in that row. Once the end of a row has been designated, the entire layout of the justify gallery is locked, and gallery items will not re-flow or change lines. You can unlock the layout by clicking the “Clear all Designated Rows” link in the bottom right corner of the gallery settings window.
The images can be dragged anywhere within the gallery area. To duplicate an image that is already in the gallery, Option-drag it. Dragging images outside the top or bottom borders of the gallery will expand the gallery to accommodate their new position. Use the “Shift”, "Fit to Width", and "Zoom" tools inside the gallery settings to move or scale all of the gallery items at once.
In addition, there is also a “Magnetic Snap” feature within the gallery settings to assist in making precise changes to your layout. With this setting active, gallery items will snap to each other and the edges of the gallery when they are dragged. Look for a gray outline behind the gallery item while dragging: it will highlight when the "snap" behavior is activated. A setting of 0% will let images snap directly next to each other; other percentages will force that distance (relative to the width of the gallery) between snapped edges, allowing for the appearance of precise gutters between gallery items. The position, scale and layering of images can also be modified without dragging: right-click an image to adjust the X & Y position, its Width, or click "Bring to Front" to put the image over others in the gallery.
The “Pop on Hover” option brings an image in front of the others when the cursor hovers over it, useful when multiple images overlap.
For Mobile, the Freeform Gallery offers the option to use Grid Gallery mode. Enabling this keeps the Freeform layout on desktop while using the Grid layout on Mobile.
Displays images in a timed cycle. The two transition modes are Fade and Slide. The timing of these transitions is controlled by the “Transition Speed” scrubber.
Four navigation options provide different ways to interact with a slideshow: “Cursor Zones” allows dragging and swiping, “None” makes the slideshow non-interactive, and “Single Advance” and “Buttons” provide straightforward single-click navigation. To modify the style of the navigation buttons, open the CSS Editor and search for ::part(slideshow-nav).
Click “Slides” at the bottom-right of Slideshow settings to enter Slides mode, which displays a thumbnail view of the slideshow’s contents. Drag images to reorder them, or select them and press Delete on your keyboard to remove them from the slideshow. Click outside the view to exit Slides mode.
To make the slideshow run automatically, enable “Autoplay”. The “Delay” setting controls the length of the pause between slides. “Pause on Hover” stops the slideshow from progressing while the viewer’s cursor is over it.
The scaling options control how the slideshow fits within its container (the page or a column): “Full Width”, “Scale: Height” (which accepts a size value), and “Fit”.
“Horizontal Align” and “Vertical Align” control where images are positioned within the bounds of the slideshow.
“Disable Zoom” disables the “Click to Zoom” function.
Enabling “Shuffle” randomizes the order of the slides.
Thumbnail Indexes are Galleries that are automatically filled with a linked selection of pages from your site. To add an index to a page, click the “Add...” button in the top menu bar and choose “Thumbnail Index”.
Because Indexes are Galleries, configuring them is mostly the same process but Indexes feature additional options for choosing and styling their contents.
In its default state, the Thumbnail Index will display all of the pages in your site. You can change which pages are displayed by opening the settings menu (click the Thumbnail Index button when hovering over the element) and choosing an option from the "Filter by" menu at the top. There are two main ways to filter pages:
Sets are created through the page list. After you create a Set, it will appear in the "Filter by" menu as an option for filtering the Index.
Tags allow for more complex collections of content. You can assign tags by right-clicking a page in the page list and choosing “Settings”. A page can have any number of tags and multiple tags can be collected into one Index.
If nothing matches the Thumbnail Index’s filter, it will display three square placeholders while you are editing, to indicate the presence of a Thumbnail Index.
To choose which image represents the page inside the thumbnail index, right-click a page in the Pages menu and open Settings. Use the “Thumbnail” menu to select or upload an image or video to represent that page in your Thumbnail Indexes. To hide a page from all Thumbnail Indexes while keeping it accessible, uncheck the checkbox next to the Thumbnail Menu.
In the settings menu for each Thumbnail Index, you can also choose to render the Title and the Tags inside the caption area of the gallery. Style them inside your CSS through .caption .page-title and .caption .tags / .caption .tags a.
The marquee function is used to insert a scrolling area of text or images. It can animate horizontally, vertically, or diagonally and contains a variety of settings.
To use, select text or images on a page and click the Marquee icon in the top menu bar. Content inside the marquee can be linked.
Click out of the marquee to preview, click back into it to edit. To change the settings, hover over the marquee and click the “Marquee” button.
When set to ‘Horizontal’, the direction of the marquee will go to the right when the ‘Speed’ scrubber is set to a positive value and will animate left when set to a negative value. When it is set to ‘Vertical’, a negative value will animate upwards and a positive value will go downwards.
The clock is a live-updated reference to the current time and date that can be placed anywhere in your site. To use, place the cursor where you’d like to insert a clock, go to the “Page Options” menu (in the top menu bar) and choose Clock.
By default, the clock will display “Local Time”: the time and date of the computer viewing the site. To have the clock display the time of a specific time zone, uncheck the “Local Time” option and enter the desired time zone identifier for your zone.
The clock features a number of classic preset formats like “15:23:17” or “11/05/26”, and you can customize it further through the use of templated keywords and text. To customize the clock face, open the clock settings window to edit the active template.
Example:
The {ordinal} of {month-name}, {year} → The thirty-first of December, 2026
Full list:
{roman-year} → MMXXVI (examples of Roman numerals){year} → 2026{ordinal} → thirty-first (example: “fifth” as opposed to “five”){day-of-month} → 31{month-name} → December{month} → 12{day} → Thursday{time-of-day} → late evening (Hours of the day subdivided into three-hour increments.){period} → PM{hour} → 11{minute} → 59{second} → 59{centisecond} → 99 (hundredths of a second)
Choose additional formatting options through the settings window, like whether to use a 12 or 24-hour clock. Change the “Add Leading Zero” values to pad single-digit values with an extra “0”: 3 → 03
CSS
The clock can be targeted through digital-clock in your CSS. Each keyword-determined section of the clock can be targeted with digital-clock::part(section), or individually by their keyword, e.g. digital-clock::part(month-name).
For example, the clock uses tabular lining numerals by default, if they are available in the active typeface. To switch to a different style of numerals in your clock, add this into your CSS:
digital-clock::part(section) {
font-variant: lining-nums;
}While this may look more desirable in certain circumstances, be aware that in non-monospace typefaces it may cause “jumping” in clocks that change or progress quickly.
Any non-numeric value can be customized through CSS variables, which is useful if you want to translate the various terms or write your own copy.
The below code reproduces all of the default text for the clock; paste it into your CSS and modify as needed. Each block of variables is headed by its corresponding keyword.
digital-clock {
/* {time-of-day} */
--0-3: "late night";
--3-6: "early morning";
--6-9: "morning";
--9-12: "late morning";
--12-15: "afternoon";
--15-18: "late afternoon";
--18-21: "evening";
--21-24: "late evening";
/* {period} */
--am: "AM";
--pm: "PM";
/* {day} */
--sunday: "Sunday";
--monday: "Monday";
--tuesday: "Tuesday";
--wednesday: "Wednesday";
--thursday: "Thursday";
--friday: "Friday";
--saturday: "Saturday";
/* {month-name} */
--january: "January";
--february: "February";
--march: "March";
--april: "April";
--may: "May";
--june: "June";
--july: "July";
--august: "August";
--september: "September";
--october: "October";
--november: "November";
--december: "December";
/* {ordinal} */
--ordinal-1: "first";
--ordinal-2: "second";
--ordinal-3: "third";
--ordinal-4: "fourth";
--ordinal-5: "fifth";
--ordinal-6: "sixth";
--ordinal-7: "seventh";
--ordinal-8: "eighth";
--ordinal-9: "ninth";
--ordinal-10: "tenth";
--ordinal-11: "eleventh";
--ordinal-12: "twelfth";
--ordinal-13: "thirteenth";
--ordinal-14: "fourteenth";
--ordinal-15: "fifteenth";
--ordinal-16: "sixteenth";
--ordinal-17: "seventeenth";
--ordinal-18: "eighteenth";
--ordinal-19: "nineteenth";
--ordinal-20: "twentieth";
--ordinal-21: "twenty-first";
--ordinal-22: "twenty-second";
--ordinal-23: "twenty-third";
--ordinal-24: "twenty-fourth";
--ordinal-25: "twenty-fifth";
--ordinal-26: "twenty-sixth";
--ordinal-27: "twenty-seventh";
--ordinal-28: "twenty-eighth";
--ordinal-29: "twenty-ninth";
--ordinal-30: "thirtieth";
--ordinal-31: "thirty-first";
}For example, the below CSS modifies the clock to display the current {time-of-day} as emoji:
digital-clock {
--0-3: "🌌🛌💤";
--3-6: "🥱📢🐓";
--6-9: "😪☕️📰";
--9-12: "🌳🏢🚙";
--12-15: "😋🥢🍱";
--15-18: "👩🏽💻👨💻👨🏾💻";
--18-21: "🍺😤🕺";
--21-24: "🏡😵💫🚕";
}The Effects menu contains a growing number of CSS-based modifications that can be applied to elements on your site. To use, select any content on a page, then open the Effects menu.
Allows a rotation to be applied to selected content, and has an option to animate the rotation with the ability to choose the rotation speed.
Adds a border around selected content and offers options for border width, color, radius and padding. If a border effect is already applied globally, via Default Page Settings, this menu will create a new instance separate from the default setting. For example: if in the Default Page Settings images have a border applied to them, this can be changed or disabled locally using this feature.
Adds a drop shadow to selected content with the ability to customize offset, blur, and color. If a drop shadow effect is already applied globally, via Default Page Settings, this menu will create a new instance separate from the default setting. For example: if in the Default Page Settings images have a drop shadow applied to them, this can be changed or disabled locally using this feature.
Adds a blink effect to selected content, with the ability to set speed and fade.
When enabling Eyeroll, selected contents will rotate in accord with the visitor’s cursor position. Try enabling it on a number of different elements in a page to see the various results & effects. (The name originates from a feature where eyes were made to follow the cursor around.)
When Draggable is enabled on selected content, visitors to the site will be able to move the content around. This is only visible to individual visitors and does not store the new location on the site. When a visitor leaves the site and comes back later, the position will be reset.
A growing selection of site enhancements that can be added to any page.
Make images fly across the screen, with controls for speed, scale, rotation speed and interval. To use, open the Page Options menu from the top menu bar, then open Flying Object and drop an image to start. To add it on top of other pages on the site, pin a page with the flying object in it.
The clock is a live-updated reference to the current time and date that can be placed anywhere in your site. To use, place the cursor where you’d like to insert a clock, go to the “Page Options” menu (in the top menu bar) and choose Clock.
Cargo offers a built-in commerce platform, enabling shopping functionality on a site. You can manage, sell and receive payments for goods (physical or digital). Demo Shop.
Commerce is free to try, privately, for any duration. To receive actual payments, purchase an Add-on: $5.50/mo when billed yearly or $9/mo when billed monthly. Cargo does not charge per-transaction fees.
To start, click on the bag icon in the right menu bar while editing your site.
There are step-by-step instructional videos here.
To add a product to a page on your site, edit the page, place the cursor in the location where you want to add the product, and click on the Add to Cart icon. This will add the price, a variant menu (if applicable), and an Add to Cart button. See example site. The text “Add to Cart” can be changed and the price can be hidden if desired. To change the style of the Add to Cart button, open the CSS Editor and search for shop-product. There’s also another way of creating Add to Cart links: select any text or image on your page, click the Link icon in the Formatting Toolbar, and choose “Add a Product to the Cart.”
You can add a Cart button to your site in the same way that you would make a navigation menu. Any text, icon, or image can be a Cart button: simply select it, click on the Link icon in the Formatting Toolbar, then choose View Cart. See example site.
“Append # of Items” will add “(1)” after your Cart link, indicating how many items are in a user’s Cart.
For example: you could Pin a navigation menu to your site and add a Cart link or icon to it.
There are a few ways the Cart can be customized during the checkout process. These options are located in the Commerce Settings tab.
There are three ways to handle shipping:
There are many video and audio formats that aspire to be web-compatible formats, but only H264-formatted MP4 video files and MP3 audio files are universally supported by contemporary web browsers.
Browser-compatible MP3 files can be generated by any number of different programs, like Audacity.
Video can be more complex. Even if a video has the correct MP4 file extension it may still not be using the correct video codec. If your video works in one browser but doesn’t play in others, it is likely not using the H264 codec. Additionally, many applications that generate correctly-formatted video files will make them overly large, causing slow loading and performance issues in your site. We recommend Handbrake for generating size-efficient and web-compatible videos. When in doubt, Handbrake’s default preset works well.
Autoplaying with audio is not supported by browsers: video can autoplay as long as it is muted.
To add audio into your site, drag an MP3 file into your page from your desktop or from a pre-existing file from within your File Library. This will place a configurable audio player into your page.
Look for audio-player inside your CSS to configure the fonts and styling of the player interface. You can use a number of CSS variables to control other aspects of the audio player.
For example, you can insert text into the play/pause button by changing text inside the --play-text and --pause-text variables. Increase the width of the button to accommodate that change:
audio-player::part(button) {
--icon-color: rgba(0, 0, 0, 0.85);
--icon-size: 32%;
--play-text: 'Play';
--pause-text: 'Pause';
width: 6em;
display: inline-flex;
justify-content: center;
cursor: pointer;
}Hide the default play and pause icons with a display property:
audio-player::part(play-icon) {
display:none;
}
audio-player::part(pause-icon) {
display:none;
}Or, if you want to keep the icon visible next to the text, add padding to the right side of the icon to add some distance between the two:
audio-player::part(play-icon) {
padding-right: 1em;
padding-left: 0.6em;
}
audio-player::part(pause-icon) {
padding-right: 1em;
padding-left: 0.6em;
}To add a video to your site, drag an MP4-formatted video into your page from your desktop, the File Library, or the page’s Images menu.
Shorter videos without an audio track will be muted, set to autoplay, and loop, much like an animated GIF. Longer videos will use the browser’s default video interface and play unmuted and without looping. These settings aren’t permanent—you can change them by right-clicking the video after adding it to the page.
Enabling “Default Controls” uses the browser’s default videoplayer interface, including a visible timeline. Disabling it makes the player interface as minimal as possible — the video will play, pause and resume when clicked.
If you choose a poster image, it will be displayed instead of the video before playback begins. If a video is set to autoplay, it will also be muted automatically, since browsers do not allow videos with audio to autoplay.
You can also embed Vimeo and YouTube videos by pasting their URL or embed code directly into the page. These will display their standard branded player interface when “Default Controls” is enabled in their settings.
You can add a Backdrop to any page through the “Backdrop” icon (in the top menu bar). Backdrops range from simple — gradients and still images — to the complex — slideshows, videos and interactive animations.
By default, the backdrop is rendered behind the active page. If that page has a Content Background color chosen through the page settings, that color will be displayed over the backdrop.
Use the “Split with page content” option to display the backdrop side-by-side with the page content, as if the browser viewport were a two-page editorial spread. Use the “Width” scrubber inside the settings to change the relative widths of the backdrop and page content. At mobile viewport dimensions, a split backdrop will display above the page content instead of next to it.
Use the “Clip when scrolling” option to fix the backdrop content to the browser viewport permanently. Instead of scrolling out of view when the page content does, the page content will instead “clip” the backdrop as it scrolls in or out of the viewport. This effect is most noticeable when used with stacked pages inside a set.
Each backdrop is controlled by several if not a dozen or more parameters; overcome this complexity to find a combination of settings that uniquely fits your site design.
To get started, use the Randomize button in the top right corner of the Backdrop Settings to discover the range of possibilities within a single backdrop. From there, experiment with the individual settings to see how each one interacts with the image you’ve chosen and the page as a whole.
With the exception of Gradient, all backdrops are image-based. Since each backdrop treats each image differently, an image that looks good in one backdrop will not necessarily work well in others.
All backdrops will crop and/or enlarge images so that they fill the entire surface area of the page. The Wallpaper backdrop also includes the option to "Set Focal Point", which allows you to pick a point in your image that will always be visible regardless of the size of the browser viewport. This is useful for ensuring a specific feature of an image will never be cropped out of view.
Wallpaper and Video backdrops start with the default setting "Fill Window". This can be switched to "Fit Window" which scales your media to fit the confines of the page layout, with no cropping.
A Wallpaper Backdrop set to “Display as Slideshow” offers the same settings and controls as a Slideshow Gallery, except for the scaling, alignment, pause, and zoom options. To change the style of the navigation buttons, open the CSS Editor and search for ::part(slideshow-nav). To exclude an image from the cycle, hover over its thumbnail in the Images menu at the top of the Backdrop settings and click the “–” icon. To include it again, click the “+” icon. This also applies to the Morph Backdrop when “Cycle Images” is enabled.
The Video backdrop requires a video URL. YouTube and Vimeo URLs are supported, as well as videos uploaded to your site. For an uploaded video, open the Images menu, hover over the video, and click the “↗︎” button to open it in a new tab. Copy the URL from the address bar and paste it into the “URL” field in the Backdrop panel. Videos over 25MB are uploaded to the Files menu instead. To get the URL, open the Files menu and click “Copy URL.” Videos in Backdrops autoplay and are muted.
The Layering Effects menu (in Local Page Settings) contains modifications that change how a page visually interacts with pages below it, and can be used on pages that are pinned, overlaid, or have a Backdrop or background color.
Allows blending of the page against pages beneath it, using mix-blend modes such as multiply, screen, overlay, difference, etc. The page must be Pinned or set as Overlay.
Allows blending of a page’s contents (the area that the page width is set to) against the page’s own Backdrop or background color.
Allows blurring everything that appears beneath the page’s contents (the area that the page width is set to). This is available for pages that are pinned, overlaid or use a Backdrop.
Allows blurring everything that appears beneath a page, available for pages that are pinned or overlaid.
Scroll Animation lets images respond to scrolling, through preset effects. To enable one, locate the menu within Image Settings and choose a preset. Once selected, animations will appear on all scrollable images (excluding Backdrops), including those inside Overlays with a Slide: ↑ Up or ↓ Down transition. If your site has no images, use the Demo Window to preview the effect.
Site Settings → Image Settings → Scroll Animations
Some presets subtly enhance a site’s design, while others stand out as a primary feature. There are two main types: Animation, for continuous motion, and Transition, for single-entry effects.
Types of Presets:
Animation — Continuously animating:
Transition — Animates only on entry:
Each preset can be intensified or softened with the Intensity setting: 1, 2, or 3. For more in-depth tweaking, click the </> button to access the CSS Snippet.
Each preset is powered by a set of @keyframes to be rewritten as you see fit. Use properties designed for animation like transform and filter, rather than layout properties like height:
@keyframes scrollAnimationHelix-3 {
0% { transform: perspective(2000px) rotateY(90deg) rotateZ(3deg); }
100% { transform: perspective(2000px) rotateY(-90deg) rotateZ(-3deg); }
}To change the transform-origin, incorporate it into your animation like this:
@keyframes scrollAnimationHelix-3 {
0% { transform-origin: top left; [...other properties] }
100% { transform-origin: top left; [...other properties] }
}Two variables determine the animation type and timing curve (cubic-bezier):
media-item {
--scroll-animation-mode: animation; // or 'transition'
--scroll-animation-timing: linear; // try 'ease' or 'cubic-bezier()'
}Note that custom keyframes and variables are overwritten once a new preset or intensity is selected.
To disable Scroll Animation for any particular image, right-click the image and select “Disable Scroll Animation”.
Quick View is a simple, straightforward way to view individual images and video in isolation. There are two ways to activate it: through the “Click to Zoom” feature and through dedicated “Quick View” links.
“Click to Zoom” can be controlled through the Site Settings. While this setting is active, clicking any image will display the clicked image in isolation in the Quick View overlay. When this option is active, it will automatically apply to all images and videos in the site. This functionality can then be disabled on a case-by-case basis through the image settings: right click the image and check the “Disable Zoom” option.
Quick View can only be triggered while Previewing or visiting your site (not while in edit mode).
Quick View links can be created through the Link feature. Choose “Quick View” from the Navigate menu in order to make a link activate the Quick View overlay. Videos and Images will be rendered as conventional media items inside the Quick View overlay; all other URLs will be rendered as iframes which embed the contents of that URL.
Customize Quick View in Site Settings → Quick View Settings. You can adjust Width, Height, Padding, Background Color, Background Blur, Close on Scroll, show or hide Captions, Navigation, and alignment. There are two alignment settings: Quick View Alignment controls the position of the Quick View overlay within the browser viewport when its Width or Height is less than 100%. Content Alignment controls the alignment of content within the Quick View overlay. To customize the navigation buttons, open the CSS Editor and search for ::part(slideshow-nav).
All Cargo sites are designed to handle the “landscape” orientation of a laptop and the “portrait” orientation of a mobile device.
Mobile settings can be adjusted in “Mobile Preview” — click the phone icon in the top menu bar or press ⇧⌘X to toggle between Desktop and Mobile Preview.
Scale — Proportionately adjusts the size of every element on the site.
Padding Offset — Proportionately adjusts the amount of padding applied to Pages, Columns and Galleries.
Fonts — Set a specific font size or color for any Text Style on the site.
Disable Borders — Eliminates Site Borders and Page Borders, for Default Page Settings as well as Local Page Settings.
Maximize Page Width — Forces the width of all pages on the site to 100%.
Maximize Image Width — Forces the width of all images on the site to 100%.
Each individual set of columns can be adjusted for mobile. While in Mobile Preview, hover over the columns and click on the blue “Columns” button to bring up the settings menu — here you can adjust the gutter size and toggle the “Stack Columns Vertically” option, which will stack each column in the set vertically.
Each Gallery and Thumbnail Index can be adjusted for mobile: while in Mobile Preview, hover over the element and click on the blue button to bring up the settings menu. Here you can adjust the mobile options for the various gallery modes, like the amount of columns, gutters, alignment, etc.
The “home page” is the first page that visitors see when coming to a site. You can specify whether you want to use the same page as the homepage for both desktop and mobile, or make individual pages for each case: right-click a page and go to “Set as Homepage”.
A page can be “pinned,” which makes it visible on all pages of the site, or on all pages within a Set. Pinned pages can be configured to show only on Desktop or only on Mobile, or both. This is useful for showing a different navigation menu on mobile devices. Read more about pinning.
A site menu is a page that overlays other site contents, containing a list of links and/or information to help visitors navigate your site. It uses two pages: the menu itself, and a pinned page with the link that opens it.
Cargo supports embedding third-party content and functionality, including (but not limited to): YouTube, Vimeo, Spotify, Apple Music, Typeform, Open Table, Bandsintown, Songkick, Twitter/X.
Embed codes can be pasted directly into a page, or using Code View.
Cargo offers visual interfaces to modify everything on a site, but for those that want to get more specific and work directly with code, it’s possible to do so in a number of ways.
Cargo sites contain a CSS Editor where you can modify every element on a site, as well as add your own selectors and classes. Under Site Settings, click “CSS/HTML”. When making changes, you’ll see your site update in real-time.
While it’s not possible to access the underlying HTML that runs a Cargo site, you can add your own custom scripts to include new functionality. Under Site Settings, click “CSS/HTML”, then on the “HTML” tab. When making changes, click the “Update” button at the top to apply and preview.
Each page has a “Code View” menu, which contains the HTML that renders your page content. Here you can make specific changes to the HTML code as well as add and remove code and content. Changes here do not update in real-time: click the “Update” button to see them, or close to apply. When a page has no content added to it, Code View will be empty.
To add CSS that applies to a specific page only, click on the “CSS” tab in the Code View menu (top menu bar). Note that any selectors you add specific to this page need to be prepended with the Page ID, which looks like this: [id="A1247988350"]. The Page ID can be found in the browser’s address bar while editing that page. For example: to target the bodycopy selector for a single page, create this selector:
[id="A1247988350"] bodycopy {
font-weight: 600;
}Various functions throughout the interface have a “</>” icon at the bottom, where you can quickly make changes to the default behavior. These “snippet windows” contain only the code relevant to the respective function; to access the full CSS, enter the CSS Editor.
To add Google Analytics to your Cargo site, sign into Analytics with your Google account and follow their instructions to generate a website tracking code.
Find your tracking code (in your Analytics account) in the Analytics admin section: Account → Property → Tracking Info. (For more help with this, see: how to find your tracking ID, and property number in your account).
Copy the entire tracking code and paste it into your Cargo site: under Site Settings, click “CSS/HTML”, then on the “HTML” tab. If you have multiple pages in your site, this will track all of them. The code will not work when pasted into individual pages.
Note that it can take up to 24 hours before Analytics begins to record activity for your website.
Cargo sites are optimized to run on the two most recent versions of the following browsers:
Each time a new version is released Cargo will support the update and discontinue support for the third-oldest version. Sites are likely to continue working in older versions, but you may experience bugs or other issues.
Many animated backdrops require WebGL to display correctly. Beta versions of browsers are not supported.
Supported mobile browsers are the two most recent versions of Chrome and Safari.
Making a Cargo site with the Editor requires a recent desktop version of Chrome or Safari.
If you want to add a domain to your site you can buy one directly from Cargo: Publish Settings → Add a Domain → Buy a new Domain
Once you’ve purchased a domain, it will take a little bit of time for the domain to propagate, after which it will be connected to your site automatically. You’ll receive an email when this is completed.
NB: domain name purchases are non-refundable, and are not included in a Cargo Subscription.
Cargo offers basic DNS editing capability; this allows you to link third-party services (such as filehosting or email) to your domain.
A domain purchased through Cargo renews automatically each year. If the renewal fails — for example, because of an expired card or canceled renewal — the domain expires on its registration date. The site and any email using the domain will stop working.
For a short period after expiration, the domain can still be renewed at the normal price from Account Settings → Domain Names.
After that, the domain enters “redemption.” During this period, the registrar is holding the domain for its owner, so nobody else can register it. The domain can still be recovered, but the registrar charges a redemption fee in addition to the regular renewal fee. This fee is typically much higher than the renewal cost and cannot be waived, since it is charged by the registrar rather than Cargo. Contact our Support team for help recovering a domain in redemption.
Once the redemption period ends, the domain may become publicly available again, be acquired by someone else, or go to auction. At that point, Cargo can no longer recover it.
If you’ve purchased a domain through a third-party domain host, you can connect it to your Cargo site by changing its DNS configuration.
Begin by adding it to your site: Publish Settings → Add a Domain → Use an existing Domain.
Then, go to your domain host and edit your domain’s DNS to use Cargo’s nameservers:
ns1.cargo.site
ns2.cargo.siteRemove any other nameservers listed here.
NB: this does not transfer the domain to Cargo, so you will need to keep up with the registration of the domain through your domain host. (Cargo does not currently support domain transfers.)
If you have email at your third-party domain, Cargo will attempt to maintain its required DNS settings. This includes MX and TXT records. Subdomains and CNAME records will not be transferred. If you are verifying your domain with CNAME Records, as with Google Workspace or Zoho, you will need to re-verify your domain after connecting it to Cargo, using Cargo’s DNS editor.
The user will receive an email notification when the domain has been connected.
Whether you purchased a domain from Cargo, or you connected a domain purchased elsewhere, you can set up subdomains for use on your Cargo sites.
A subdomain is a domain that is part of another domain. For example: if the domain is example.com, a subdomain would be test.example.com.
To add a subdomain to one of your Cargo sites, site, open Publish Settings (in the right menu bar), click on “Add a domain” and then on “Use a subdomain”. If you have a Cargo Subscription and are using a custom domain already, connecting a subdomain to another site does not require purchasing an additional domain add-on.
To connect a subdomain (e.g. name.example.com) of a domain that is not connected to Cargo, follow these steps:
subdomain.cargo.sitename.example.com)Cargo provides DNS-editing capability for your domains. This can be used for things like linking third-party services such as filehosting or email.
Workspace (cargo.site) → Profile icon → Account Settings → Domain Names
Click on the “···” icon next to the domain you want to edit and then choose Edit DNS.
“A” — An A record is commonly used to point your root domain to another location using an IP Address.
“CNAME” — Use CNAME records to link a subdomain of your domain to a different service.
“MX” — Email services such as Google Workspace will require you to add MX records in order to receive email at your domain.
“HTTPRED” — Used to redirect or “web forward” a domain or subdomain to another URL. This is useful, for example, if you've purchased two domains from Cargo and you’d like one of them to redirect to the other.
Other supported records: ANAME, SPF, SRV, and TXT.
Click Add Record and choose the record type in the left column. Note that after a domain’s DNS records are changed it can take some time for these to propagate across the Web. This can take up to 48 hours although it is typically much faster.
If you want to connect a domain from a third-party domain host but don’t want to edit your DNS settings yourself, Cargo can configure it for you. This requires sharing your domain host login information with Cargo.
Begin by adding the domain to your site:
Publish Settings → Add a Domain → Use an existing Domain
When you’ve added the domain, click on “Have Cargo configure this domain” and follow the prompts.
Please note: pointing your domain to Cargo can have unwanted consequences for services that are already linked to the domain, like FTP and email. If you think this may affect you, first contact your domain host to make sure that changing your domain’s DNS settings will not make associated services inaccessible.
To send and receive email from your own domain you will need to use a third-party email provider. To send and receive email from your own domain you will need to use a third-party email provider like Google Workspace.
Each email host will have their own process, and to set this up you will need to edit your domain’s MX records using Cargo’s DNS Editor:
Workspace → 🅐 → Account Settings → Domain Names. Then click on “···” next to the domain you want to edit and choose Edit DNS.
Click Add Record and choose MX in the record type column. Paste each record as provided by your email host.
NB: after a domain’s DNS records are changed it can take some time for these to propagate across the Web.
Social Sharing & SEO
Customize what a site looks like when it appears in search engines, social media, messaging platforms, and more — these options are found in Publish Settings.
A note about SEO: Search engines don’t rely on secret tricks or hacks — they rely on clear information. Most of what’s often called “SEO” is less about gaming an algorithm and more about publishing a site that’s structured and readable, both for people and for Google. A well-chosen title, a concise description, and a site preview image go a long way.
Cargo provides simple controls for this — Site Title, Site Description, and Site Preview Image — so your pages look good in search results and when shared on social platforms. Cargo also takes care of the fundamentals — fast loading times, mobile-friendly design, and accessible markup — which all help search engines understand and favor your site.
Beyond that, the best results come naturally from creating content people find useful and linking to it in ways that make sense.
Favicon
The “favicon” is a 16x16 pixel image that represents a website. It appears in places like browser tabs, bookmark bars, browser history, and search results. You can upload a JPG, PNG, or WebP file and Cargo will resize & convert it to the correct format.
Site Preview Image
The Site Preview Image is used when a site is posted on social media and platforms like Slack, Apple Messages, etc. This “link preview” is sometimes referred to as “unfurling.” By default the site screenshot is used, which updates each time a site is published. Other options are to upload a custom image, or to set it to “None”.
Site Description
The Site Description is a brief summary of your website’s content. This text description is used in conjunction with the Site Preview Image to create a content preview of your website when it is shared on social media.
Meta Tags
Meta Tags let you provide additional keywords and phrases that describe your site. These aren’t visible on the page, but search engines may use them as supporting context. Think of them as a way to include common terms people might use to find your work.
Choose words that are accurate and specific to your content. There’s no need to overload this field — a short list of clear, relevant terms is more effective than a long string of generic keywords.
Note: Search engines rely less on meta keywords than they used to. Your site title, description, and on-page content matter much more. Meta Tags are best treated as an optional supplement, not a primary SEO tool.