1. Create a new magazine
Start by creating a new magazine on the landing page at neweditor.nextprint.io.
Give your magazine a fitting name, don’t worry it can be renamed later. After you’ve created your magazine click “Edit” to enter nextPrints editor.
2. Welcome to the catalog editor
This is the nextPrint editor.
On the left you have the BlockManager where you can pick blocks to build your magazine with.
On the right you have three primary menus; “Layers” , “Styles” and “Traits”.
Layers gives you an overview of the blocks currently in your magazine.
Styles lets you edit the styling of your currently selected block.
Traits contains extra fields for special blocks, for example the this is where you set the source for the Image block.
3. Start building your catalog
Let’s start by setting the size of our catalogs pages.
Select a page in the editor, or in Layers and go to styling to view the Width and Height of your page. Adjust the values manually by editing them in Styles, or resize the page by pulling on the tabs on sides of the selected block.
The catalog in this example has a Width of 1400px and Height of 720px. If you prefer percentages or rems you can change units by clicking the current unit “px” in Styles.
When we resize the selected page, all other pages conform since they all have a “pagesize” class, which can be seen at the bottom of the Styles tab.
We can give the frontpage a black background without applying it to the rest of the pages by removing the tick next to “pagesize”, click “Extra” and set “Background Color” to black. When we’re done we add the tick back to “pagesize”.
Let’s add an image by dragging an Image block from the blockmanager into the first page. To set the Images source, click on the Image and go to the Traits tab, and paste a link to the image you want to use. If you don’t already have an Image available somewhere you can upload it to nextPrints ImagesManager (Click here)
4. About saving
We haven’t saved our catalog so far, but the editor has. After a number of steps the editor will automatically save the catalog to our online storage, which means it’s available from anywhere as long as you’re logged in to your account, and it wont be lost.
Besides saving every time you’ve done a certain amount of work, the editor also saves periodically, and it’ll show a countdown since your last save in the bottom right corner if it’s been a while. This is also where you can manually trigger a save.
5. Adding layout
On the second page we want a more advanced layout so we’ll start by adding a Flexbox from layouts, which creates a box with two columns. Add a third column by clicking the plus on the toolbar when the flexbox element is selected.
Set the flexbox to a height of 100%, and then hold down shift while clicking the three columns inside the box, with all three columns selected set their height to 100% as well.
Add a flexstack inside the first column, resize it so the bottom row only takes up about 1/4 of the column, and then use ctrl c and ctrl v to copy paste and paste the flexstack into the other columns.
Next, add some content to the three top rows, and then add text to to the bottom rows. Add a class to every text element and change the fontsizes.
We can add a custom font with the Font button at the top of the right menu, by pasting a link to a google font, for example we could add the font Inter by inputing then following link https://fonts.google.com/specimen/Inter
Inter is now available as a selection in the Fonts dropdown menu under Styles.
6. Share your catalog
When you’re done editing, head to the magazine overview page and click View to get a link to your magazine.
Share this page with your customers/users, or use it in iframe to embed it on your website!