Websites

Build your website the same way you make a story in Atavist. Our new website features let you construct a website with blocks, themes, navigation, and more. Within the Website editor, you can:

• Control your website’s layout: Display projects on your homepage beautifully using Stories and Website blocks, such as grids, lists, rotating heros, and a splash.
  
• Make stories easy to discover: With menus, category tags, and search, readers will be able to find what they want, and need, to read on your site.
  
• Design every detail: Play with themes, title designs, menu and navigation options, and templates to make your website memorable.
  

And, the features are currently still in beta, so let us know what you think! We hope you enjoy.

To access your website features, head to the Projects page, and click on the globe icon:

You’ll enter a space that looks pretty similar to where you write and create stories, but the graph paper indicates that this is where you design your website.

You can view your live website at any time by clicking the link in the gray project flap:

Once you have made changes, click Preview to see your work. To make work live, click Publish. Warning: unlike projects, the Website editor will publish right away (in projects, there is one additional screen).

This document will walk you through all the parts of a website. Or, click on the project below to learn how Atavist built our Help Docs step-by-step:

If you have any questions, write support@atavist.com.

The first time you click on the Website icon (whether you’re a new or returning user), you’ll be asked to select a template for your website. You will only need to do this once.

A template will automatically set up several website features including your theme, site navigation, a layout of story blocks, and additional pages connected to your site. Templates correspond with our plan levels: Creative, Small Publisher, Medium Publisher, and Large Publisher. Plus, we made a Portfolio template, for good measure.

Flip through the options and select by clicking the Install button:

And if at any time you want to pick another, or revert to the original settings, head to the gray bar and click Template. Careful: selecting a new Template will revert the website completely to the “factory settings” of the template, and you will lose previous work.

Blocks are still the fundamental unit of anything you do in Atavist. In projects, there are a variety of blocks that allow you to upload all kinds of media, including images, videos, maps, embeds, and more. Now, with the Website features, you can use Stories and Website blocks to boldly display projects on your Website pages. All kinds of blocks work on Website pages.

To add a Stories and Website block, go to the block picker within the Website editor. The filter at the top will automatically limit the list initially to the website blocks, but you can still search for and add any kind of block you wish.

Stories and Website blocks include:

• List
  
• Splash
  
• Squares
  
• Hero
  
• Grid
  
• Cards
  
• Bio
• Authors
• Subscribe

Take a look:

As you upgrade, more blocks become available. Read more about Stories and Website blocks here: https://docs.atavist.com/stories-and-website-blocks

Finally, though you cannot type within the Website Editor, you can drop in text using Layout and Graphics blocks, like Pullquote and Sidebar:

One of the things we considered when we made the tool was that users will want to be able to see what their website will look like with stories, even if the stories aren’t yet published. Or, for example, say you have already published a website, where you regularly post stories, but you have a big special series coming up and you’ll want to add Stories blocks to feature the new pieces, but you want to wait to make it live. How is this possible?

In the Website editor, in Compose you’re able to see published and unpublished projects. This allows you to add Stories and Website blocks containing unpublished projects, so you can anticipate what a website page will look like live. Then, in Preview, you will see an orange band, indicating that a project is not yet live.

To learn more about how this work, check out our doc about Previewing and Publishing.

Themes in the Website Editor behave similarly to Themes in projects. An Atavist page’s font, style, and display settings are controlled by its Theme. You can find themes in the gray editor flap.

The Theme will determine how text appears on the page, in Stories blocks, within Navigation, and more. Choose from the available Atavist themes, or upgrade to Small Publisher for Custom Themes: atavist.com/plans.

Next, select a Navigation type for the website: https://docs.atavist.com/website-navigation-menus. Navigation helps controls the header and footer of the page, and is also where you can include menus, links, and branding.

Access Navigation in the gray editor flap:

There are three main kinds of navigation available:

• Centered - available with the Creative plan and above
  
• Flag Navigation - available at Small Publisher and above
  
• Banner Navigation - available at Medium Publisher and above
  

Menus

Let’s look a little more closely at menus, which are available in all the navigation types. Familiarize yourself with how to make and add Categories in projects, and you’ll be in good shape to start making menus. When you open up either a navigation type, you’ll see the option to start making a menu. You’ll see an empty space for a label and a Menu Item Type dropdown menu. Additionally, it’s good to note the Delete button and how you can make more menu items by clicking “+ Add Menu Item.”

Click Menu Item Type and the dropdown will reveal several choices for what will be linked to, depending on your plan (some pages and features, like the Subscribe page, only become available at higher plan levels). Your Menu Item Type options include:

• Project: Link directly to any project within your publication
  
• Category: Select a Category to feature
  
• Author: Send readers to a particular author’s page
  
• Category Dropdown: Display a selection of your Categories
  
• Masthead: Link to your Masthead page to show off your staff
  
• Subscribe: Selling subscriptions? Funnel customers to the page
  
• Login/Account: Selling work? Let users log in and read
  
• External URL: This is a helpful option if you have a store at another URL, a different website you want to feature, etc.
  

Build out your Atavist website with different kinds of Pages: https://docs.atavist.com/website-pages. As your website gets more complicated (with more content, more authors, etc.), we recommend adding these different types of pages to help map and organize your content.

Atavist plans are scaled to release different pages as you upgrade. If you do not have access to a page, it will be grayed out. To add the page, click on the icon, and an Upgrade screen will appear.

Our Stories and Website blocks are built to pull information from a project’s Title Design, so this includes the main image the title, subtitle, byline, and description (if there is one). However, some of our users pick title designs without images (such as Simple or Bold) or instead choose to have a video cover. In these cases, the block either doesn’t have an image to pull (and will appear gray instead) or it pulls a still from the video (which is sometimes lacking in quality). If you want greater control over the image that is paired with your block, upload a Custom Share Image instead.

This workaround is a step from our Promote doc, as a Custom Share Image is what you would upload to have the story have an image in Facebook posts. Head within a project, then to Publish, then to Promote. Scroll down to the bottom of the page and upload an image.

This image will now appear in your Stories block to represent this project.

Elsewhere, in Advanced Settings, you can further customize and control your website.

Here, you can control what loads at your homepage (if, for example, you want something besides your homepage to load, like a project or an outside site), custom your publication date format, and select to use projects’ ledes (the start of a story, journalism term) instead of the description (our automatic setting).

Additionally, if you scroll down, you’ll see something called Project Preferences. These set “global preferences” for your projects. This is helpful if you want the same theme for every project.

For more information, check out these related articles: