The L&L Blog  /  Scrivener, Scapple

Planning and Organizing a Website Layout with Scapple and Scrivener

Wherein Rebeca explains how you can organize the layout and content of your website using Scapple and Scrivener

You might remember that my friend Joanna, the university professor, participated in NaNoWriMo almost two years ago. Before she started her first draft, she had asked me to show her how to use Scrivener to organize her novel. The outcome to that NaNoWriMo draft—after three revisions— turned out to be a contract with a literary agent. Shortly thereafter, Joanna’s novel was acquired by a big-name publisher that offered her a lucrative advance (she refused to disclose the sum because she was too embarrassed to tell me). 

After she read my last post, she called me to schedule a Zoom session. “The marketing people mentioned I should have a website. I was wondering can we use Scrivener to develop some sort of structure? Would you mind doing a tutorial via Zoom? I’ve been making somloi galuska. I can drop one off after our session as payment.”

Honestly I would have preferred hard-cold cash, but who can resist this Hungarian trifle? So I agreed to it, my mouth watering with anticipation for this extraordinary dessert, but also dreading it because I already had gained five pounds from my own baking adventures.

Once on Zoom, Joanna told me she had listed what she wanted to include on the website. However, she had difficulty envisioning the layout. 

“Have you played around with Scapple?” I asked. 

Her eyes narrowed. “Can’t we do it in Scrivener?” 

“We can, but Scapple will provide a good visual layout in creating the website. You can download it from the Literature and Latte site, and try out the free 30-day trial.

Within a few minutes, Scapple was installed on her computer. She opened it. “Oh, god, why am I already intimidated by this?”

“Just double-click on the screen. You’ll see a note appear,” I said. 

If you’ve done some simple mindmapping on a white board or sketchbook, Scapple operates in the same manner. It doesn’t have all the bells and whistles as other apps, but that’s the beauty of it because you’re not distracted by numerous features, For plotting out websites, or creating a map linking character relationships, Scapple is ideal. 

When you first open Scapple, you'll see a board like the one below.

What I like to do, before I start creating notes, is review the Quick Start Guide which can be found Under Help->Quick Start Guide. Once that’s been perused, I go to the menubar and click on View->Show Inspector.

The inspector has a number of features for the note’s format, borders, styles, text appearance and so on. 

Once you have that first note on the board, type in your text. Because we’re creating a website centering on Joanna’s book, we went back and forth whether it should be the title or her name. We decided that it should be under her name should she have other books in the future (She will. She has a three book deal with the publisher). 

“Okay, the note is clunk in the middle of the page. Can I move it around?"Joanna asked.

To move notes, place your cursor on the note, click and drag it to where you want to position it. 

Our next step was to create a menu of pages for the Wordpress website—this took a lot of convincing because Joanna wanted to slap something together fast, while I argued about the benefits of Wordpress’s design flexibility, the number of plug-ins, and let’s face it, you know who will be creating the site for her (that’s a lot of dinners and desserts in the near future). 

The menu headers included: 

  • About No. 15 Kiraly Street
  • Dr. Joanna Berkmann
  • Blog
  • Hungary 1920-1956
  • News and Events
  • Contact

“Is that it? Seems a little plain. Should I have more information and submenus?"

To add a submenu, create a note and drag it to connect it with the main note. Notice when you drag the note, the one you want to connect it to will darken and a dotted connector between the two notes will appear. Another way to create a connection is by going to Notes->New Connected Note from there you can select the positioning or if you want it to appear like an arrow. To align the text,  go to Note Body in the inspector or go to Format->Alignment. My preference is center alignment. Once you’ve created all notes and sub-notes, you’ll need to fine-tune the alignment by moving the notes here and there either by dragging or go to Edit->Arrow Keys Move Notes.

“That seems straight forward. But how do I pretty it up?” 

To add a border to each note, either click on Cmd+A, or press the Shift key and click on the notes you want to change. Once they’re highlighted, go to the Borders panel in the inspector and select the border color, thickness, and style of your preference. I selected a square and black, fine border. With all the notes selected, you can also change the text appearance and color. 

If you want to enclose your notes within a background shape (it’s like a large container that can hold other containers) go to Notes->New Background Shape. 

Once you have all your notes as you want them, go to File->Prevent Editing. This will keep the notes locked in place. Note: At the footer you’ll see a little lock on the far left, the number of notes and the Zoom slider

After you have created the visual layout of the website’s menus and submenus, you  can either export this as a PDF, PNG, or an Outline Markup. 

“Wow. That’s really impressive, but how will this translate into Scrivener?”

“You’ll be creating all your content in Scrivener so the process is a little different than when you were writing your novel. But the best approach is to select a blank template in Scrivener and set up the binder in a similar fashion as this map.”

She squinted and bit her bottom lip. “Hmm… I’m not visualizing it. Would you please show me.”

To create the structure for the website in Scrivener's binder,  you’ll create a number of folders and subfolders that represents a page on the website. Each folder will have at least one document with that page’s copy. The easiest way to accomplish this is to import the Outline Markup into Scrivener, which will show all the notes as documents. Convert the documents into folders and then move them into their respective master folder. 

If you have trouble aligning the folders and subfolders by dragging and dropping, you can use is the Move feature found in Edit->Move. In that submenu, you’ll be able to position the folder up, down, to the left or to the right. 

“Can I export the Scapple project as an image or PDF file and keep it in the research section?”

“Yes, absolutely. In fact, you can drag the .scap file right into Scrivener. It will display in the editor like a PDF. You can use the Open in External Editor button to change it on the fly if you need to. [Note: this feature is only available on Scrivener for Mac].

“Okay, I see how you can plan this out for a website and then write the copy in Scrivener, but let’s go back to Scapple. Could I import images into a Scapple project. For example, each page has its own header image? Also can I link a submenu to a folder of all my Arrow Cross research? I know I can do that in Bookmarks in Scrivener, but is that possible in Scapple?”

You can either copy and paste or import and image in Scapple, and it acts like a note that you can connect to another note. However, if you want to add text, you’ll need to add a background shape around the image note, and then create a note inside the background shape. It takes a little finagling, but Scapple has a Bring Forward and Send to Back function found in the Notes menu.

If you want to add a link to your note, simply select the text and then go to Edit-> Add link, a dialogue box will open that lets you add the URL. To add internal links, type in file:// and then drag and drop the file from Finder into the dialogue box. 

“That 's nifty. I have all these images I used for inspiration in my first draft of the book in my Scrivener project can I drag them into my Scapple board?” Joanna asked. 

In Scrivener, select the folder that has the images. Switch to corkboard view and then switch to freeform mode. From there, simply select the images you want to import into Scapple and drag them onto the Scapple board. 

“Last question, can I print it?”

To print, go to File->Print. Like most applications, you’ll have all the options provided to print it on different paper sizes, include a header and footer, change the orientation to landscape and scale it to fit the page. 

She was silent as she studied the shared screen. “You know, when the semester starts in August, we’ll all be teaching remotely. I usually plan out the year by creating my own mindmap on a sketch pad, and tape it on a whiteboard. I can create my syllabus, and link a lot of the required reading that’s online. This simplifies my life. Thank you. Now I’m off to bake. I owe you at least four somloi galuskas.”



Tom  /  25 SEPTEMBER 2020

This must be the most bizarre way of doing (or rather not doing) a webpage I have ever seen. After all this effort, you still have not a single HTML file, but you managed to print the internet. And then, apparently, you type it up in Wordpress.

And this is supposed to help web developers... how exactly? I'm asking because I am your target audience and I immediately see a lot of reasons why what you did here is a bad idea and why Scrivener is most certainly not helpful in this task.

Let's start with the fact that the way Scrivener handles files is utterly unhelpful. You are using old-school RTF files, then grandfathered in some features that native RTF doesn't even support, effectively creating a proprietary format. All that, when you could have been using standard HTML. At the same time you are using proprietary file formats for your meta data and related project information. File formats, that don't sync well at all in GIT or any other modern software that is capable of tracking changes. Scrivener at this stage also doesn't play well with external programs at all due to some unnecessary vendor lock in - something that is an immediate show-stopper to any web designer I ever came across.

In other words: You have a ton of work that needs to be done to have Scrivener fulfill even the bare minimum requirements web designers have for any software.


B  /  11 OCTOBER 2020

I thought the post was about how to combine Scapple and Scrivener to organize and prepare content. I never thought it was meant to let us know to build a website. I may need to read it again.


IanFJ  /  13 OCTOBER 2020

I personally found this article very helpful. As a web developer, no, I would not use Scrivener to design webpages. However, as a writer, the combination of Scapple and Scrivener is very helpful —I wish I had thought of this sooner. The combination helps to plan, or 'map out', the content of a website.

Reading this article, I immediately saw the usefulness of being able to see my article titles under content categories. I can easily rearrange my topics and articles as I write them.

Thank you for this article and your style in presenting it.


Rickster  /  14 OCTOBER 2020

Although I can understand Tom's concerns, I really enjoyed this article and found it useful. I basically agree with IanFJ.

"You can either copy and paste or import and image in Scapple, and it acts like a note that you can connect to another note. However, if you want to add text, you’ll need to add a background shape around the image note, and then create a note inside the background shape. It takes a little finagling, but Scapple has a Bring Forward and Send to Back function found in the Notes menu."

Wow, that had never occurred to me. I'm going to try it out.

Add your comment here...

Keep up to date