First
Read the preparation section
Gather the information, files, and access you will need.
Start Here/Overview
Begin here
Use this guide one section at a time.
Read the overview first, prepare what you need, and then follow Steps 1 through 3. Every section stays inside this page, and the guide remembers where you stopped.
Next
Follow the numbered instructions
Complete Steps 1, 2, and 3 in order for the cleanest result.
Later
Return without losing your place
The active section and unfinished question are saved automatically.
How the guide works
Move forward when each section is complete.
The main tabs divide the guide into stages. The smaller tabs show the instructions inside each stage. You can use the browser Back button, refresh the page, or share the exact section you are viewing.
Choose a main section
Use the tabs across the top to open preparation, instructions, examples, or help.
Read the smaller instruction pages
Use the left-side menu to move through the current section.
Continue from the saved location
Refresh the browser or return later. The same instruction will reopen.
Tip
Share a specific instruction by copying its full browser address.
Before you begin
Gather the materials needed for the instructions.
Replace this sample list with the exact information, files, or permissions a visitor should have before starting.
Important notes
Read these points before making changes.
Keep the existing page IDs
The internal IDs preserve current links such as #/home/welcome.
Change labels before changing routes
Visible names can be rewritten without breaking saved or shared addresses.
Test after every major edit
Open several tabs, refresh the page, and use Back and Forward before publishing.
Do not remove the navigation logic
Replace the sample content, but preserve the tab, hash-routing, and local-storage functions unless you intentionally redesign them.
Step 1
Open the section you want to edit.
Start with one panel. Make a small change, save it, and confirm that the page still opens correctly before continuing.
Open the page editor
Locate the page file or visual editor that controls this single-page guide.
Find the matching panel
Use the visible heading or the route ID to identify the section you are viewing.
Replace only the sample content
Edit headings, paragraphs, images, and links without removing the navigation wrapper.
Step 2
Customize the labels and written instructions.
Change the visible names to match your subject. Keep the underlying IDs unless you are also prepared to update every route reference.
Rename the main tabs
Edit the label values in the navigation list.
Rename the smaller tabs
Update each child label so visitors understand the order.
Write direct instructions
Begin sentences with clear actions such as “Open,” “Choose,” “Enter,” “Review,” and “Save.”
Add examples after the instruction
Keep examples separate so the main direction remains easy to scan.
Step 3
Test the guide before publishing.
Complete each check below. A working page should preserve the current instruction after refresh.
Visual guide
Place an image beside each difficult instruction.
Replace these placeholders with screenshots. Number each image so it matches the instruction that refers to it.
Demonstration
Show the complete process from beginning to end.
Add a short video that follows the same order as the written steps. Keep the written instructions available for visitors who cannot use video.
▶Instruction video goes hereRecommended: captions, chapter markers, and a transcript
Ask a question
Describe the step that is unclear.
Include the instruction number, what you expected to happen, and what appeared instead. Your unfinished message remains after refresh.
Contact details
Use one of the methods below for additional help.
Emailhello@example.com
Phone(000) 000-0000
Available hoursAdd days and times