How to Use the Instructables Editor

by instructables in Circuits > Websites

62024 Views, 143 Favorites, 0 Comments

How to Use the Instructables Editor

Editor-cover.png

During 2021, we’ve been hard at work updating our project editor. We’ve made several improvements we think you’ll like, including a simplified layout and improved text and image editing.

Here is an updated guide for using the editor from start to finish.

Start a New Instructable

publish burron in nav.png
create page.png

To start a new Instructable, go to the publish button in the main navigation menu, then click "New Instructable". If you are logged in, there is also a button at the bottom of your user dropdown menu.

You need to be a member of Instructables to author projects. If you aren't already a member, sign up here! It’s completely free to join our community.

Name & Categorize

name-and-categorize.jpg

Once you begin, the first step is to name your Instructable. Simple, clear, descriptive names are best. If you want to get fancy and learn more about choosing titles for good SEO, learn more here.

Next, select a topic category and channel for your project. Categories help people find projects they’re interested in. Each project can only belong to one category so choose whichever category you think is the closest fit.

Finally, you can add a cover image now, or wait to do that at the very end. When you do add a cover image, our tool will allow you to reposition your image within the frame. Simply hover over the preview and drag to reposition.

Write an Introduction and Supplies List

empty intro and supplies.png

Use the introduction to briefly describe what you made and why. Be sure to add a photo of your finished project here so that others can see the end result and get excited about reading more.

The Supplies section is where you should summarize all of the tools and materials that you used so that others can recreate your project. Lists should be included of parts/materials/ingredients/tools used, with links to sources as needed, as well as links to references.

Note: Supplies used to be part of the Introduction, but we’ve separated it out into its own section because we think it’s so important. You aren’t required to add supplies to this section, but we highly encourage it. Adding a supplies list helps others plan and follow along.

Explain Step by Step

add step.gif
Screen Shot 2021-09-20 at 2.26.14 PM.png

Now it’s time to explain how you made your project using text, images, videos, and files. Use as many steps as you like to explain your project clearly. To add steps, click on the "Add New Step" button.

Steps can be reordered by clicking and holding on the drag icon in the upper right corner. Steps may be deleted by clicking on the trash can icon.

Projects should be broken into enough steps to be easy to follow, with sufficient photos and explanatory text to allow the reader to understand the process.

Uploading Images & Files

upload images.gif
images per step.gif
embed video.gif

You can add media in a number of different ways. If you like to add all of your media first and then organize later, click in the top file library tray to upload to your project library.

Or, if you like to add media step by step, you can alternatively upload photos directly to a particular step. Simply click in the grey bar below any step title.

Once you’ve arrived at the Upload modal, you’ll see tabs for different methods of adding content.

Use the Upload New tab to upload files directly from your computer. Use the Project Library tab to select a file that’s already been uploaded (the project library is now unique to each project, so it will always start out blank when you begin a new project).

Use the Embed URL tab to add media from another online source like YouTube or Vimeo. This is the best way to add a video to your Instructable.

Regardless of media type, remember that all images, files, and videos should be original content created by you.

Arranging Images & Files

rearranging.gif
rearrange.jpg

If you have files in the top file library tray, you’ll want to eventually drag and drop them into steps or use the Project Library tab in the Upload modal to put them where they belong. Anything in the top file library is not yet part of your actual Instructable.

You can move media between different steps by dragging and dropping. You can also use drag and drop to rearrange the order of media within a step. Dragging something to the area between two steps will insert a new step.

Files that are photos or media embeds will display at the top of your step as square image thumbnails. These images will be displayed in our mosaic grid above your step text. (To see what this looks like, use Preview).

Any other files are considered supporting files and will display below your step text as attachments.

To remove media from a step, drag items back to the top image tray, or click the "x" shown on hover. If you would like to delete the media from your Instructable entirely, click the Delete button on a file in the top tray.

Editing Images

edit image.gif
Screen Shot 2021-09-20 at 2.21.18 PM.png

Newsflash: You can rotate your photos! This long-anticipated update will save the day if you ever need to quickly rotate a photo. Simply hover over a thumbnail and click on the Edit (pencil) icon to begin. Our tool works in 90-degree increments moving clockwise.

If you would like to add additional information to your photos, or point out something specific on your image, you can add image notes. Click on the desired area of your photo and write your note. Hover over the note outline to move or resize the note area.

When you’re done rotating and adding notes, be sure to save your changes by clicking Done.

Writing Text

edit text.gif
Screen Shot 2021-09-20 at 2.20.08 PM.png

Our text editor is really easy– just click in a text area of any step and start typing. You no longer need to go to a different view to write out your steps. Instead, everything happens on the main page so you always have the full context of the rest of your Instructable.

When you’re actively in the text area, you’ll see a floating text edit bar appear above with your formatting controls. Here, you can change the text styles, add bullets or paragraphs, add text links, and even enter code view where you can edit the HTML.

Previewing Your Instructable

The "Preview" button allows you to see your Instructable as it will appear on the site, but without interactivity due to security reasons. Despite not being able to see videos or see additional images, it is useful to see how your media will appear in our mosaic layout and to read through your entire Instructable at once.

Publishing Your Instructable

When you are done authoring your Instructable, click Publish! From there, you will be directed to the publishing details screen to add some final information before your project goes live.

This final screen is an opportunity to review how your cover image and title will look, and to enter some keywords so people can find your awesome new project on the site.

You can also choose to enter one of our contests. If your Instructable is a good fit for one of the open contests, enter it! You can enter each project in one contest.

When you have added all the information for your Instructable, click "Publish Now"!

Published! & More Resources

ible-love.jpg
Screen Shot 2015-12-03 at 5.40.20 PM.jpg

Once you publish your instructable, you should see a success modal with a link to your published project. Please note, it will take some time for your project to index and show up live on the site.

This guide is solely intended to be a how-to for using the editor. However, now that you are an expert on how to use the tool, you may be interested in some additional resources for writing great Instructables.

1) We have an excellent guide for how to create an all-around great Instructable, found here.

2) Photos are one of the most important aspects of your Instructable. This Instructable is full of helpful tips and techniques to make your photos look their best.

3) Want to get your Instructable featured? Here's a list of what we look for to keep in mind when documenting your next project!

4) A collection full of additional photography, writing, SEO and other resources can be found here!

If you still have questions or need to report a bug with the new editor, please contact our support team at support@instructables.com.