What are Layouts?

Layouts are an advanced feature that allows you to create multiple cards based on the same information, but presented in different ways.

What are Layouts used for?

The most common use for layouts is to create one set of flashcards that presents your information Front-to-Back, and one set that presents the same information, but Back-to-Front. Because this case is so common, it's built right in to AnkiApp. Every deck you create comes with a Layout called "Front-to-Back" and one called "Back-to-Front".

How do you use Layouts?

By default, the Front-to-Back layout is selected, but you can change that in the layouts section of the deck screen (see screenshot above).

How do you view, create, and edit Layouts?

The Layouts option on the Deck screen menu will show you all of the Layouts in your current deck, and allow you to create or edit new ones. Be forewarned: creating and editing layouts requires knowledge of HTML and CSS, so if you don't know what those terms mean, you may find the Layout screen confusing.

To view all the Layouts in a deck, and create or edit existing layouts, use the "Layouts" menu item on the Deck screen. It brings you to the Layouts screen, shown below.

To create a new Layout, use the New button. That takes you to the Layout screen, shown below.

There's a lot going on, on this screen, so you'll need to scroll down to see all the available options.

The Layout screen has 6 sections:

Name
Fields
Front (HTML)
Back (HTML)
Style (CSS)
Preview

Name allows you to edit the Layout's name.

Fields are the elements of information that will be inserted into your template's for the front and back side of each card, to form the final card you see.

Front (HTML) is the template for the front side of cards in this Layout. You can enter HTML, interspersed with text of the form {{field}}, to insert the value of a field (named "field" in this case) at that point. In the screenshot above, you can see that the front template includes the field named "code".

Back (HTML) is the same thing as Front (HTML), only it defines the template for the back side of cards in this Layout. In the back template, you can use the special syntax {{FrontSide}} to include all of the contents of the front side of the card, on the back (this is done in the screenshot above).

Style (CSS) can be used to apply styling to the HTML in the front and back template.

The Preview, on the right side of the screenshots above, shows an approximation of what the final card will look like, when actual content has been entered into the fields.