A Step-by-Step Beginner’s Guide to Using Sigil
Back to Sigil Main Guide
T
his is a thorough, step-by-step guide to navigating and using Sigil for the first time, written for version 2.0.2! It is intended to be user-friendly for folks with no prior design skills, but it does assume that you have a basic understanding of HTML and CSS. If you do not, then see W3 School's literacy guides for HTML and CSS respectively. While we are specifically guiding you through the process of formatting a novel in this program, it should be applicable for other texts too, such as poetry books or short stories.
If you want more abbreviated guides targeted at using specific tools and windows in Sigil, head back to our Sigil hub. (Note: said abbreviated guides are not available yet.) And if you want a guide to how to structure a completed novel before formatting it, then we’ll have information on that in our eBook guide hub. (Also not available yet. We are one person with an awful lot to do!)
Ready to begin? Okay! Get out your “graphic design is my passion” memes and let’s get started.
The first step is to install Sigil! We should have a working link to it both in the sidebar and right here; this is Sigil’s download page. There should be four green download buttons at the top of the page. Grab the one that corresponds to your system type (unfortunately no Linux options.) Also feel free to click around Sigil’s site for more information if you feel like it too.
Once you have it all set up on your computer, opening the program should greet you with this lovely blank canvas of possibilities;
Seem intimidating? Don’t worry, it’s not as complicated as it appears.
Setting Up Your Document
Setting Up Your Document
So, Sigil automatically opens up on a blank file for you to start tinkeing on. This file is an EPUB2 file. The program also lets you make EPUB3 files, but we find that EPUB2 is easier on beginners, so we’re going to go ahead and start with what we’ve been handed. It’s also worth noting here that Sigil can only have one project open at a time; opening a new project closes the current one down. If the project has been edited since its last save, the program gives you the option to save before switching over. Nifty.
But your first thought might be more along the lines of “what the hell is this and where do I start with the novel-making.” Why don’t we get familiar with our situation before we try copy-pasting anything in? Our opening layout can be roughly broken down into three panels and two bars.
1. File Browser
Like many web pages, an ebook is basically a bunch of different files strung together via HTML and CSS code, intended to be experienced through a flexible viewing interface. Sigil automatically gives you folders for different classes of files. The top folder (“Text”) is for the main HTML files of your book. This is where your cover page, copyright page, table of contents, chapters, author about, and various other metaphorical book pages go. Generally speaking, every section of your front matter and back matter should go on a different HTML page, and every chapter of the book will also get its own HTML page.
The second folder (“Styles”) is essentially where your CSS sheets will go. Most stories will work just fine with only one CSS sheet, but if you decide you need more, you can add in as many as you want. Remember to connect your HTML sheets to the right CSS sheet for your purposes!
The third folder (“Images”) quite obviously hosts any images you need for your story. The bare minimum you will want will be one, that being your cover. If you’re like us, though, you will want other images for decoration. Header and footer decoration, fancy dividers, and author photos are all possibilities we will explore.
The fourth folder (“Fonts”) will be the place where you host any font files that you want to use for your project. Remember that just putting a font in here is NOT enough to get it to show up in the HTML files; you will also need to make sure that the retrieval of those files is specified in your CSS code. Again, this is functionally similar to the process of embedding fonts in an HTML website.
The fifth and sixth folders (“Audio” and “Video”) are also pretty self-explanatory. We will not be touching on audio or video in this tutorial, as we don’t geneally place these in our novels. Those features tend to go better into instructional books.
The final folder (“Misc”) is where you can put anything that doesn't fit into the above categories.
2. Text Editor
This general area is the editor which you will use to edit the text of your HTML and CSS files. Right now what we have is header specifying document type, an empty title for our text file, and a body with the character entity for a non-breaking space, which is invisible in our preview panel. Notice the ampersand in that string? If you have an ampersand in your book, you are going to have to replace it with the character entity for an ampersand (can be found here).
3. ToC & Preview Panel
This panel will show you two different things depending on which tab you have selected. Firstly, it can show what the internal table of contents for your story looks like (not to be confused with the table of contents page we will be making later). Secondly, it can display a preview of your current selected HTML page. This panel is great because you can drag the edge to change the width. This feature will let you get a better idea of what your story looks like in different display sizes.
This panel mostly looks empty in our opening example, because our current HTML page has no content to display; if we were on the ToC tab, it would also be empty, because we have not generated an interior table of contents yet.
Bar A: Big Buttons!
The topmost bar (aside from the dropdown menus above it) has a lot of quick-access buttons. If you hover over them, each will tell you what they do; we will go over individual button as they become relevant to our tutorial.
Bar B: Inline Insertions
The buttons on this bar are all for text editing. If you highlight some text, you can click these buttons to quickly insert tags for text elements like headers, old text, italics, underlining, and more.
What's the bar below the other two, you ask? The ones with little crane arms? That one runs automate lists. We don't use it because we're amateur techies who do not understand what all automate lists can do. You'll have to seek out somebody smarter than us for more information on that.
And here’s where we cut off for now, because we’re still working on the rest of this guide! See ya when we next update. We’re gonna teach you all sorts of fun things to do with this program. Just very, very slowly.