LearnWEB360
LearnWEB360StreamSoft WEB360 Builder help
Contents

How-To Portal

Build, publish and look after client websites

StreamSoft WEB360 Builder turns one master design into a finished website for each client. You fill in the client's details, shape the pages on screen, build the site, and publish it to the client's hosting. This portal walks you through every process from start to finish.

The journey of a client website

Every site goes through the same seven stages. Each stage links to its full guide.

  1. Set uponce, on a new PC
  2. New clientwizard, 5 minutes
  3. Detailsbusiness, services, photos
  4. Designshape the pages
  5. Buildcheck and generate
  6. Go liveconnect and publish
  7. Back upkeep a safe copy

Process guides

Process guide

First-time setup

About 3 minutesWizard: First-run setup

The first time the app starts, the First-run setup wizard opens. You can run it again at any time from Help ▾ → Run a wizard → First-run setup.

  1. WelcomeA short explanation of how the builder works: one master design, one project folder per client, a build step that makes the finished site, and publishing to the client's hosting.
  2. Choose your foldersThree places, each with a Browse… button:
    • Clients: one folder per client with its details and photos (default Documents\StreamSoft WEB360 Builder\Clients).
    • Finished sites: where each client's website is built (default Documents\StreamSoft WEB360 Builder\Sites).
    • Backups: where backups of live sites go (default Documents\StreamSoft WEB360 Builder\Backups).
    Put Clients and Backups somewhere your normal PC backup or OneDrive covers. (Installs from before the rename to WEB360 Builder keep using Documents\StreamSoft Web Builder.)
  3. Tour of the screenFour cards show the header, the section list on the left, the form, and the live preview with the connection status.
  4. Get startedChoose to start the New client wizard straight away, create a practice client filled with sample details, or just close the wizard.
Tip

A practice client is a normal client. Delete its folder in Clients when you no longer need it.

Back to the portal

Process guide

Create a client website

About 5 minutesWizard: New client

Click New client in the header (or the New client card on the welcome screen). The wizard collects just enough to produce a complete first draft; everything can be changed later.

  1. The businessBusiness name (required), tagline, owner and the kind of business, from 36 grouped choices (Building & home, Beauty & wellness, Food & events, Motor & transport, Professional & other) with Other business at the end. Each one sets a starting look to suit it — a nail salon gets soft sage & blush with an elegant serif and a gallery-led layout, an electrician graphite & safety yellow with strong condensed headings — plus its wording, page loader, logo mark, Google business type and the services ticked on the next step. See Kinds of business.
  2. Where they workTown, the wider service area and the domain (for example tineirenovations.co.za).
  3. ContactPhone (required), WhatsApp (blank uses the phone number), email (required, this is where enquiries go), street address and opening hours. Untick Show the street address for home-based businesses.
  4. ServicesOver 100 ready-written services in 14 categories (click a category to open it). The kind of business ticks its usual services and opens their categories; tick or untick anything. Each service arrives with a card description, a detail heading, an intro and bullet points you can edit later.
  5. LookA live preview at the top shows the colours (a mini header, hero and buttons, plus the full palette) and the fonts (a heading, lead and paragraph in the chosen pair) as they'll look on the site. Below it, pick a ready-made colour pair (the kind of business chooses one to start with) or two custom colours, a font pair and, if you have one, the client's logo. The contrast checker warns you if white text won't be readable on the main colour. The preview needs an internet connection to show the Google Fonts exactly.
  6. PhotosAdd the client's photos (JPG, PNG, BMP, GIF or TIFF; convert iPhone HEIC photos to JPG first). Copies are kept in the client's folder, so the originals can be moved or deleted afterwards.
  7. LayoutChoose one of ten whole-site layouts, for example Classic, Photo-first, Story-led, Gallery showcase, Reviews-led or Compact. The kind of business picks one to start with.
  8. Review and createCheck the summary and click Create website. The client opens with a live preview.
Result

A new folder in Clients (for example Clients\tinei-renovations) with site.json and a media folder, open in the editor.

Back to the portal

Process guide

Fill in the client's details

About 15 minutes

The section list on the left holds everything that changes from one client to the next. Work down the list; the preview updates about a second after you stop typing.

  1. BusinessName, tagline, owner, business type for Google, how the name splits in the header, domain, town, service area and the short description Google shows. See Business.
  2. ContactPhones, email, address, hours, Facebook and Instagram. See Contact.
  3. BrandingColours, fonts, corner and button style, header style, logo, generated mark and page loader. See Branding.
  4. ServicesAdd from the trade list or blank, reorder, and edit each service's texts, icon and photo. See Services.
  5. PhotosAdd photos, order them, give each a gallery group, tag, caption and alt text, and choose the Home and About photos. See Photos.
  6. WordingHeadlines and paragraphs shared across the site, with tokens such as {Town} filled in automatically. See Wording.
  7. Pages & formWhich pages exist, the price list, extra pages, how the contact form sends email, footer credits and photo quality. See Pages & form.
Tip

Turn on Settings ▾ → Descriptors and click any text on the page: the builder tells you where it's stored and what else uses it.

Back to the portal

Process guide

Design the pages visually

About 10 minutes
  1. Pick a pageUse the Page picker above the preview, or click a menu link in the preview.
  2. Start from a layoutThe Layout picker replaces the page's arrangement with a ready-made one. ▣ Whole site layouts rearrange every page at once. Your wording and photos stay; Ctrl+Z undoes it.
  3. Add sectionsDrag a part from Elements onto the page, or click it to add it below the selected section.
  4. RearrangePress and drag any section, item or photo. Sections swap places; items (tick points, steps, reviews) reorder within their list; text and photos move slightly up or down. Esc cancels a drag.
  5. Edit on the pageClick text to select it, click again (or double-click, or press Enter) to type. Double-click a photo to change it.
  6. Fine-tune in the right panelPick the section's layout variant, background, spacing, alignment, which devices it shows on, and its anchor.
  7. Check every deviceSwitch between phone, tablet and desktop, and use the zoom control at the bottom right of the preview.

Full detail: The page editor and Layouts.

Back to the portal

Process guide

Build and check the site

About 3 minutes
  1. Open BuildClick Build in the section list. The output folder defaults to Sites\<Business> Site.
  2. CheckClick Check. Errors (for example a missing phone number) stop the build; warnings (for example photos without captions) don't. Double-click a line to jump to the right section.
  3. Build siteClick Build site (or Build in the header). Photos are resized to the chosen longest side and saved without location data.
  4. Look at itOpen in browser opens the built home page; Open folder shows the files.
Safe rebuilds

A rebuild only replaces files the builder made itself (listed in .webbuilder.json). A .git folder, a CHANGELOG or anything else you add is left alone. Building into a folder that holds a site the builder didn't make asks first.

Back to the portal

Process guide

Put a site online

About 10 minutesWizard: Go live

You need the hosting's FTP or SFTP details: host name, username, password, and which folder the website goes in. Hosting control panels (cPanel, DirectAdmin) list them under FTP accounts.

  1. Before you startOpen the wizard from Help ▾ → Run a wizard → Go live, or click the red status next to Site Manager when the client has no live site yet. The first page lists what to have ready and says whether the client has been built (publishing builds it anyway).
  2. Connection detailsChoose the protocol (FTP over TLS explicit is the most common; SFTP if the host offers SSH), then host, port (0 = the default), username and password. Plain FTP works but sends the password unencrypted.
  3. Test and trustTest connection logs in. If the host's certificate isn't one Windows already trusts (common on shared hosting), you see its fingerprint and decide once; the answer is remembered for this site.
  4. Website folderBrowse the server and pick the folder the website lives in, usually /public_html or /domains/example.co.za/public_html. Publishing into / asks first, because most hosts don't show files there.
  5. Live address and linkEnter the site's address (for example https://tineirenovations.co.za/) and finish. The site is saved in the Site Manager, linked to this client and connected; the status next to Site Manager turns green.
  6. PublishThe wizard offers to publish straight away: it builds, uploads everything the first time, and offers Open live site.
Check the folder

If the live address still shows the host's placeholder page after publishing, the website folder is wrong. Open the Site Manager, Browse server…, pick the right folder and publish again.

Full detail: Site Manager, Connection status, Publishing.

Back to the portal

Process guide

Publish changes

About 2 minutes
  1. ConnectThe status next to Site Manager must be green (Connected). If it's red, click it to connect. Publish is disabled until it is.
  2. PublishClick Publish. Keep Build the site first, Upload only files that changed and Remove files this builder uploaded before ticked.
  3. Watch itThe progress bar and log show every file. Cancel stops after the current file; publishing again continues where it stopped.
  4. CheckOpen live site opens the address saved in the Site Manager. If you don't see the change, refresh with Ctrl+F5; browsers keep old copies.
What gets touched

Only the builder's own files go up, and only files the builder uploaded earlier are ever removed. The host's own files, email settings and anything else on the server are never changed.

Back to the portal

Process guide

Back up a live site

About 3 minutesWizard: Backup & restore
  1. Choose the siteAny site in the Site Manager; the open client's site is picked for you. The wizard tells you whether the client project will be included; that needs a client linked to the site.
  2. Check the foldersThe server folder (usually the website folder) and where backups are saved. Each backup gets its own dated folder, for example Backups\Tinei live\2026-09-27 1100.
  3. Back upFolders are listed first, so the progress bar shows a real total, then every file is downloaded, hidden files such as .htaccess included. Nothing on the server is changed.
  4. DoneOpen backup folder shows the result.

What's inside a backup

ItemWhat it is
website\The live site's files, exactly as downloaded.
project\A copy of the client's project (site.json and the media folder). Only when a client is linked to the site.
webbuilder-backup.jsonWhat the backup is, where it came from, when, and a checksum of every project file. It never contains a password.
backup log.txtFiles, folders, anything skipped and anything that failed.

Back to the portal

Process guide

Open a client from a backup

About 3 minutesWizard: Backup & restore
  1. Choose the backupOpen ▾ → Open from backup…, the welcome screen card, or the wizard. Pick the dated backup folder.
  2. It's checkedOnly a WEB360 Builder backup with a client project opens. Every project file is compared with its checksum; a changed or damaged backup is refused with the list of problems.
  3. ConfirmYou see the client, the live site and the backup date.
  4. It opens as a new clientIn your Clients folder, named for example tinei-renovations-from-backup-2026-09-27. Existing clients are never overwritten. It builds into its own "(restored …)" site folder and stays linked to the same live site.
On another PC

If the live site isn't in that PC's Site Manager, it's added for you without its password. Open the Site Manager and type the password once.

Back to the portal

Process guide

Make the contact form email the client

About 5 minutes

By default the contact and quote forms open the visitor's own email app, addressed to the client. That works on any hosting. To have the website send the email itself:

  1. Create a mailboxIn the hosting control panel, create a mailbox on the site's domain, for example contact@tineirenovations.co.za.
  2. Switch it onIn Pages & form, tick Email enquiries through the website.
  3. Enter the mailbox detailsSMTP server (often mail.<domain>), security (SSL on port 465, or STARTTLS on 587), mailbox user and password. Deliver to is blank to use the contact email.
  4. Build and publishThe build writes contact.php and private/mail-config.php. The password is stored encrypted for your Windows account and only written into mail-config.php when you build; it never appears in the preview.
  5. Test itSend an enquiry from the live site and check the client's inbox and spam folder.
Needs PHP

If the hosting has no PHP, the form falls back to the visitor's email app.

Back to the portal

Process guide

Move to another PC

About 4 minutes
  1. Copy the Clients folderEach client folder is complete on its own. Copy it into the new PC's Clients folder and open it with Open ▾ → Open client…, or restore from a backup instead.
  2. Add the live sites againSaved sites live in your Windows profile. A restored backup re-adds its site without the password; otherwise add it in the Site Manager.
  3. Type the passwords againFTP, SFTP and SMTP passwords are encrypted for one Windows account and can't be read on another PC. Enter them again in the Site Manager and in Pages & form.
  4. Trust the servers againThe first connection asks you to accept each host's certificate again, unless it came with a restored backup.

Back to the portal

Quick How-To

Common tasks in a few steps

Short answers for everyday jobs. Each links to the manual for the full picture.

Change the colours

  1. Open Branding.
  2. Choose a ready-made pair, or click a colour swatch and pick.
  3. Check the contrast notes under the colours.

Branding in the manual

Swap the main photo

  1. Double-click the big photo in the preview.
  2. Pick another photo from the client's photos.

Or set Home page, main photo in Photos.

Edit text on the page

  1. Click the text to select it.
  2. Click again, double-click or press Enter.
  3. Type, then press Enter or click elsewhere. Esc cancels.

Move a section up or down

  1. Press on the section and drag.
  2. Drop where the line shows.

Or select it and press Ctrl+↑ / Ctrl+↓.

Nudge text or a photo

  1. Select it.
  2. Drag it up or down, or press Alt+↑/↓ (add Shift for bigger steps).
  3. Reset puts it back.

Add a section

  1. Open Elements left of the preview.
  2. Drag a part onto the page, or click it to add it below the selected section.

Copy a section to another page

  1. Select it and press Ctrl+C.
  2. Switch page, select a section and press Ctrl+V. It's pasted below.

Hide a section on phones

  1. Select the section.
  2. In the right panel set Show on to Desktop & tablet only.

Try a different layout

  1. Open the Layout picker above the preview.
  2. Pick a page layout, or a ▣ Whole site layout for every page.
  3. Ctrl+Z if you don't like it.

Add a page

  1. More ▾ → Add a page… above the preview.
  2. Name it. It starts with a simple layout and appears in the menu.

Add a service

  1. Open Services.
  2. Add from trade list… or Add blank.
  3. Edit its name, texts, bullets and photo.

Sort photos into groups

  1. Photos tab → Photo wizard….
  2. Tick the groups (services are suggested), then select thumbnails and click a group, or press its number.
  3. Choose the Home and About photos, then Apply.

Move a client to another PC

  1. Export ▾ → Client project (.web360)… and save the file.
  2. On the other PC: Open ▾ → Import client (.web360)….
  3. Type the contact form's mailbox password again if it uses one.

Tidy the recent clients list

  1. On the welcome screen, click the × on a row, or Clear all.

Only the list changes; the clients' files stay where they are.

Add photos with captions

  1. Open Photos and click Add photos….
  2. Select a photo and fill in its group, tag, caption and alt text.
  3. ◀ Earlier / Later ▶ change the order.

Show a price list

  1. In Pages & form tick Pricing page.
  2. Type the list: # Group, then Item | Price | Note lines.

Rename the quote button

  1. Open Wording, Contact & quote.
  2. Change Quote button label, for example to "Book now".

Turn off the page loader

  1. Open Branding, Page loader.
  2. Set Animation to No loader.

Undo a change

  1. Press Ctrl+Z (redo: Ctrl+Y), or use the arrows above the preview.

Undo covers layouts, moves, edits and deletions.

Preview on a phone

  1. Click the phone, tablet or desktop icon above the preview.
  2. To see it in landscape, click the round arrow left of the phone or tablet.
  3. Use the zoom slider, Fit, or Ctrl + mouse wheel.

See what a text is linked to

  1. Settings ▾ → Descriptors.
  2. Click text on the page. The bar shows where it's stored and what else it changes.

Connect or disconnect

  1. Click the status next to Site Manager.
  2. Green means connected; click again to disconnect.

Publish the latest changes

  1. Make sure the status is green.
  2. Click Publish, then Publish in the window.

Back up now

  1. Click Backup in the header.
  2. Check the site and folder, then Back up.

Open a backup

  1. Open ▾ → Open from backup…
  2. Choose the dated backup folder and confirm.

Activate the app

  1. Click Enter license key…, or Help ▾ → Licensing….
  2. Type the key and click Activate.

R399 per month, everything included, unlimited websites. License in the manual

Close a client

  1. Click Close next to Open.

It saves first and disconnects the live site.

Manual

StreamSoft WEB360 Builder manual

Everything the app does, chapter by chapter. Press F1 in the app to open the chapter for the screen you're on.

1. How the builder works

Most small-business websites need the same pages and the same building blocks. The builder keeps one master design and asks only for what changes per client.

PieceWhat it isWhere it lives
Client projectThe client's details, wording, page arrangements and a copy of every photo and logo.Clients\<client>\site.json and media\
PreviewThe site as you edit it, rendered live inside the app.A temporary folder; never published.
Built siteThe finished website: HTML pages, styles, scripts and resized photos.Sites\<Business> Site\
Live siteThe built site on the client's hosting.The website folder on the server, for example /public_html
BackupA dated copy of the live site plus the client project.Backups\<site>\<date time>\

Every site has Home, Services, About and Contact; Gallery, Quote and Pricing are optional, and you can add your own pages. Each page is a list of sections (hero, service cards, reviews, a map, and so on) that you arrange visually.

2. The screen

Header

  • Logo and client name on the left. A dot after the name means unsaved changes (the app saves automatically about a second after you stop typing).
  • New client, Open ▾ (open a client, open from backup, recent clients), Close, Save (Ctrl+S) and Settings ▾.
  • On the right: Build, Publish, Backup, Site Manager and the connection status.
  • In a narrow window the buttons show only their icons; hover to see what each does.

Section list (left)

Business, Contact, Branding, Services, Photos, Wording, Pages & form and Build. Use the mouse, or Tab into the list and move with ↑/↓.

Form panel

The fields for the selected section, grouped in cards. Drag the divider to make it wider; the width is remembered. The panel button at the left of the preview bar hides it for more room.

Preview

The bar above the preview holds the page picker, the layout picker, the phone / tablet / desktop switch, undo and redo, and More ▾ (refresh with F5, open the page in your browser, add a page). Left of the page are Elements and Outline; right of it are the settings for the selected section or page.

Status bar

The last thing that happened: saved, built, published, preview updated.

3. Clients

New client

New client opens the New client wizard (see the guide). The client is created in your Clients folder in a folder named after the business, for example tinei-renovations.

Kinds of business

The kind of business chosen in the New client wizard sets the starting look, layout and services. Everything can be changed afterwards.

KindStarting lookLayoutServices ticked
Building & home
Builder / constructionStrong slate & orange, bold condensed headingsLocal tradesmanConstruction & building, Renovations, Plastering, Paving
Renovations & interiorsWarm charcoal & copper, photo-led pagesPhoto-firstRenovations, Kitchens & built-in cupboards, Bathroom renovations, Tiling, Painting
Painter & decoratorFresh navy & teal, friendly rounded headingsLocal tradesmanPainting, Waterproofing, Plastering, Ceilings & drywall
RoofingMidnight & amber, reviews up frontTrust & reviewsRoofing, Roof trusses & timber, Gutters & fascias, Waterproofing
PlumberClean blues, modern typeLocal tradesmanPlumbing, Geysers, Drains & blockages, Leak detection, Bathroom renovations
ElectricianGraphite & safety yellow, industrial typeLocal tradesmanElectrical, Electrical compliance (CoC), Lighting, Solar & backup power
Solar, backup power & air-conInk & sky blue, clean and technicalTrust & reviewsSolar & backup power, Air-conditioning, Electrical
Landscaping & garden servicesPine & lime greens, gallery-ledGallery showcaseLandscaping & gardens, Garden services, Irrigation, Paving
Pool servicesOcean blue & coral, short and simpleCompactPool services, Irrigation
Cleaning servicesFresh emerald & mint, reviews firstReviews-ledCleaning, Carpet & upholstery cleaning, Window cleaning
Pest controlOlive & terracotta, trust-firstTrust & reviewsPest control
Handyman & maintenanceOlive & terracotta, compact pagesCompactMaintenance & handyman, Carpentry & doors, Painting, Plumbing
Security & gate automationSteel & signal red, strong and reassuringTrust & reviewsAlarms & CCTV, Gate & garage motors, Electric fencing, Locksmith
Removals & transportMidnight & amber, reviews firstReviews-ledRemovals & moving, Courier & deliveries
Beauty & wellness
Nail salonSoft sage & blush, elegant serif, gallery-ledGallery showcaseManicures, Pedicures, Gel nails, Acrylic nails, Nail art
Hair salonBlack & rose gold, elegant serifGallery showcaseHaircuts, Hair colour, Styling & treatments, Braids, weaves & extensions
BarberBlack & gold, bold condensed typeCompactBarber cuts, Beard trims & shaves, Kids' cuts
Beauty salon & spaPlum & rose, warm serif, story-ledStory-ledFacials & skincare, Massage, Waxing, Lashes & brows, Make-up
Lashes & browsSoft sage & blush, elegant serifGallery showcaseLashes & brows, Waxing, Make-up
Personal trainer & fitnessEnergetic indigo & violet, bold headingsReviews-ledPersonal training, Group classes, Nutrition coaching
Yoga & Pilates studioCalm sage & blush, light typeStory-ledYoga & Pilates, Group classes
Food & events
Bakery & cakesEspresso & caramel, warm serif, gallery-ledGallery showcaseCelebration cakes, Baked goods
CateringBurgundy & sand, elegant serifPhoto-firstCatering, Private chef & meal prep, Event décor & hire
Restaurant & caféBrick & sand, warm and invitingPhoto-firstDine-in, Takeaways & delivery, Functions & venue
Events & décorPlum & rose, elegant serif, gallery-ledGallery showcaseEvent planning, Event décor & hire, Catering
Motor & transport
Motor mechanicSteel & signal red, strong headingsLocal tradesmanVehicle services, Brakes, clutch & suspension, Diagnostics & repairs, Tyres & alignment
Panel beaterGraphite & yellow, before-and-after galleryGallery showcasePanel beating & spray painting, Valet & detailing
Car wash & valetOcean blue & coral, short and simpleCompactCar wash, Valet & detailing
Professional & other
Accounting & bookkeepingTrustworthy navy & teal, classic serifStory-ledBookkeeping & accounting, Tax returns, Payroll, Business advice
ConsultingIndigo & violet, warm serif, story-ledStory-ledConsulting, Training & workshops, Business advice
IT & web servicesInk & sky blue, modern typeReviews-ledIT support, Websites & digital, Alarms & CCTV
Photography & videoBlack & gold, light type, big photosGallery showcasePhotography, Videography
Graphic design & printIndigo & violet, friendly type, gallery-ledGallery showcaseGraphic design, Websites & digital, Photography
Tutoring & educationFresh emerald & mint, friendly typeStory-ledTutoring, Exam preparation
Pet grooming & careOcean blue & coral, playful and friendlyGallery showcasePet grooming, Dog walking, Pet sitting & boarding
Other businessNavy & teal, modern type — pick your own servicesClassicnone (choose your own)

Open

  • Open ▾ → Open client…: choose the client's site.json.
  • Open ▾ → Open from backup…: see Opening a backup.
  • Open ▾ → Import client (.web360)…: opens a client exported with Export ▾, as a new client (an existing one is never overwritten). The file is checked first; a damaged or edited export is refused.
  • The last ten clients are listed under Recent clients in the Open menu and on the welcome screen. The × on a row (or Delete) takes it off the list; Clear all empties the list. Only the list changes: no client folders or files are deleted.

Close

Close saves the client, disconnects its live site and returns to the welcome screen. Close, Save and Build are only available while a client is open.

Saving

Changes save automatically shortly after you stop typing, when you switch client, and when you close the app. Save saves immediately. Undo and redo cover everything since the client was opened.

Export

  • Export ▾ → Client project (.web360)…: the whole client in one file (details, pages, wording and every photo), to move it to another PC, send it to a colleague or keep a copy. Passwords are never included: after importing, type the contact form's mailbox password again (Pages & form).
  • Export ▾ → Built website (.zip)…: the finished website files (builds first if needed), for a manual upload or hand-over. If the PHP contact form is on, the zip includes private/mail-config.php with the mailbox password the live site needs — share it with care.

4. Business

FieldUsed for
Business name (required)Header, page titles, footer, search engine details and the {Name} token.
TaglineThe small line under the name in the header, for example "Construction & Renovations".
OwnerAbout page and the {Owner} token.
Business type (Google)Tells search engines what kind of business it is (for example General contractor).
Header brand textHow the name is split in the header: the second part is bold in the accent colour. Leave both blank to split before the last word.
DomainThe site's address without https://, used for links and the sitemap.
Town, Service areaWording tokens {Town} and {Area}, the Where we work section and search details.
Short descriptionThe sentence Google shows under the site name. Tokens work here.

5. Contact

  • Phone (required) and Second phone: click-to-call buttons and the contact page.
  • WhatsApp: the WhatsApp button; blank uses the phone number.
  • Email (required): where enquiries go.
  • Street, Town / city: the contact page and map. Untick Show the street address for home-based businesses; only the town is shown.
  • Hours: Mon–Fri, Saturday and Sunday. A blank line is not shown.
  • Facebook, Instagram: social links in the footer and contact page.

6. Branding

Colours

Two colours make the whole palette: a dark main colour (header text, dark sections, footer) and an accent (buttons, highlights). Every other shade is worked out from these two. The notes underneath warn if the main colour is too light for white text, and say whether buttons will use white or dark text.

Ready-made pairs: Charcoal & copper, Forest & gold, Slate & orange, Navy & teal, Deep blue & sky, Midnight & amber, Graphite & safety yellow, Olive & terracotta, Burgundy & sand, Plum & rose, Black & rose gold, Emerald & mint, Ocean & coral, Espresso & caramel, Steel & signal red, Pine & lime, Indigo & violet, Charcoal & teal, Ink & sky, Brick & sand, Sage & blush, Black & gold (22).

Fonts

Sora + Inter (modern, the default), Montserrat + Source Sans (bold, classic), Oswald + Roboto (industrial), Playfair Display + Lato (elegant, for salons and boutiques), Poppins + Open Sans (friendly), Barlow Condensed + Barlow (strong, for trades), Raleway + Nunito Sans (light, stylish), Merriweather + Source Sans (trustworthy), Fraunces + DM Sans (warm, upmarket), Cormorant Garamond + Montserrat (luxury).

Style

Corners (soft, sharp, very round), buttons (pill, rounded, square), text size (15–19 px), section spacing (70–140 %), a light or dark header bar, and whether the header stays visible while scrolling. Custom CSS is added at the end of the site's stylesheet for anything else.

Logo

Pick the client's logo (and optionally a light version for the dark footer). Without a logo the site uses a generated mark: a glyph on a rounded square in the client's colours. Marks: double roofline, house, sunrise, bolt, drop, leaf, paint roller, sparkle, initials.

Page loader

A short animation the first time a visitor opens the site, with three status lines you can reword: house being built, brick wall going up, paint roller strokes, floor laid row by row, roof truss assembling, circle and tick, or no loader.

7. Services

Each service becomes a card on the Home page and a full section on the Services page.

  • Add from trade list… adds ready-written services — over 100 in 14 categories (see the table below). Add blank starts an empty one.
  • ▲ Up / ▼ Down change the order everywhere; Remove deletes one.
  • Per service: name, short name (footer), icon, home card text, Services-page heading and intro, bullet points (one per line) and the photo beside it. Auto uses the first photo tagged with the service's name.
CategoryReady-written services
Building & renovationConstruction & building, Renovations, Plastering, Groundworks & excavation, Carpentry & doors, Kitchens & built-in cupboards, Bathroom renovations, Welding & steelwork, Aluminium windows & doors
Finishes & floorsPainting, Tiling, Flooring, Epoxy flooring, Ceilings & drywall, Partitions & drywalling
Roofing & waterproofingRoofing, Roof trusses & timber, Gutters & fascias, Waterproofing
Plumbing, electrical & energyPlumbing, Geysers, Drains & blockages, Leak detection, Electrical, Electrical compliance (CoC), Lighting, Solar & backup power, Air-conditioning
Outdoor & gardenLandscaping & gardens, Garden services, Irrigation, Tree felling & pruning, Pool services, Paving, Boundary walls & fencing
Cleaning & home servicesCleaning, Carpet & upholstery cleaning, Window cleaning, Pest control, Maintenance & handyman, Removals & moving
SecurityAlarms & CCTV, Gate & garage motors, Electric fencing, Locksmith
Nails & beautyManicures, Pedicures, Gel nails, Acrylic nails, Nail art, Lashes & brows, Waxing, Facials & skincare, Massage, Make-up, Spray tanning
Hair & barberHaircuts, Hair colour, Braids, weaves & extensions, Styling & treatments, Barber cuts, Beard trims & shaves, Kids' cuts
Health & fitnessPersonal training, Group classes, Yoga & Pilates, Nutrition coaching
Food & eventsCelebration cakes, Baked goods, Catering, Private chef & meal prep, Event décor & hire, Event planning, Dine-in, Takeaways & delivery, Functions & venue
Motor & transportVehicle services, Brakes, clutch & suspension, Diagnostics & repairs, Tyres & alignment, Panel beating & spray painting, Car wash, Valet & detailing, Courier & deliveries
Professional servicesBookkeeping & accounting, Tax returns, Payroll, Business advice, Consulting, Training & workshops, IT support, Websites & digital, Photography, Videography, Graphic design, Tutoring, Exam preparation
PetsPet grooming, Dog walking, Pet sitting & boarding

8. Photos

  • Photo wizard… (first button on the Photos tab): add photos, choose the gallery groups (the services are suggested), sort photos into groups by selecting thumbnails and clicking a group or pressing its number (1–9; 0 = no group), label photos with services, choose the Home and About photos, fill empty captions with the group name. Nothing changes until Apply, and Ctrl+Z undoes it.
  • Add photos… copies photos into the client's folder. Phone photos are turned upright automatically.
  • ◀ Earlier / Later ▶ change the gallery order; Select all and Remove work on several at once.
  • For the selected photo: gallery group, tag (usually the service), caption, alt text (for Google and screen readers; blank uses the caption) and Show in the gallery.
  • Gallery groups: the gallery page shows one section per group, with filter buttons when there's more than one.
  • Which photo goes where: the Home page main photo, the Home "why us" photo and the About page photo. Blank picks one automatically.
Accessibility

Give every gallery photo a caption or alt text. The Build check warns about photos without one.

9. Wording

All the site's headlines and paragraphs, grouped by page. Lists are one item per line; paired lists are written Title | Text. The picker at the top replaces all wording with a pack (Building, renovation & trades, or Other service business); this can't be combined with your own edits, so it asks first.

Tokens

Tokens in curly brackets are filled in from the client's details when the site is built:

TokenBecomesExample
{Name}Business nameTinei Renovations
{Owner}OwnerTinei Chimanga
{Town}TownStrand
{Area}Service areaStrand, the Helderberg and greater Cape Town
{Phone}Phone081 427 0046
{Tagline}TaglineConstruction & Renovations
{ShortDescription}Short description(the whole sentence)
{ServiceList} / {ServiceListCap}Services as a sentence, lower-case / capitalisedpainting, tiling and flooring
{ServiceCount} / {ServiceCountWord}Number of services, as digits / as a word6 / six

Shared wording and own text

Sections normally use the shared wording, so a change shows everywhere that text appears. In the page editor a section can switch to Use own text on this section, which gives it a private copy; Share wording again goes back.

10. Pages & form

  • Pages: Home, Services, About and Contact are always included. Tick Gallery, Quote / booking (otherwise the quote button goes to Contact) and Pricing.
  • Price list: a line starting with # starts a group; every other line is Item | Price | Note. Prices are shown as typed, for example "from R1 200".
  • Extra pages: one per line, Title | file-name | hidden. hidden leaves the page out of the menu. Easier: More ▾ → Add a page….
  • Contact & quote forms: see Make the contact form email the client.
  • Footer: the "Want a Website? Click Here to get Web360" link and the "Designed by StreamSoft" credit.
  • Photos: the longest side of built photos (800–3000 px, default 1600) and JPEG quality (50–95, default 82).

11. The page editor

Selecting

Hover shows what you'd grab. A click selects a section (blue), an item such as a tick point or review (purple), or a piece of text or a photo (amber). The selected thing gets a small toolbar.

Editing

  • Text: click to select, click again, double-click or Enter to type. Enter finishes; Esc cancels.
  • Photos: double-click (or Change photo…) to choose another of the client's photos.

Moving

  • Press and drag anything; the drag starts after a few pixels, so a plain click still selects. A line shows where it will land and the page scrolls near the edges.
  • Sections: Ctrl+↑/↓. Text and photos: Alt+↑/↓ nudge (with Shift for bigger steps).

Right-click menu

Edit text, change photo, reset position, move, duplicate, add or delete an item, move the section, duplicate, copy, paste, hide or show, delete.

Section settings (right panel)

SettingChoices
LayoutThe variants of that section, for example a centred hero or a full-photo hero.
BackgroundAutomatic, white, light tint, dark (main colour), accent colour, or a photo with adjustable darkening.
SpacingNormal, compact, roomy, no space.
Text alignmentAutomatic, left, centred.
Show onAll devices, desktop & tablet only, phones only.
AnchorA name so links can jump to the section, for example #reviews.
Extra CSS classFor custom CSS in Branding.

Page settings

With no section selected, the right panel shows the page's title and description for search engines. Blank uses a sensible automatic text.

Building blocks

Page parts: hero, page header, services cards, service sections, how it works, why us, where we work, our story, values, FAQ, call to action. Content: price list, text block, photo + text, numbers, customer reviews, button, spacer / line, custom HTML. Media: photo gallery, photo banner, photo row, video. Contact: contact summary, contact details + form, quote / booking form, contact bar, map.

12. Layouts

  • Page layouts: each page has several, for example Home (16): Classic, Photo-first, Services-led, Minimal, Trust-first, Gallery showcase, Story-led, Local tradesman, Bold banner, One-page, Reviews-led, Services & gallery, Video intro, Numbers first, Questions answered and Compact.
  • Whole-site layouts (▣ Whole site in the picker): Classic, Photo-first, Minimal, Trust & reviews, Bold banners, Local tradesman, Story-led, Gallery showcase, Reviews-led and Compact. Every page is rearranged after you confirm.
  • Saved layouts: Save this page's layout… keeps the arrangement (not the wording) for use on any page, for any client. Saved layouts are marked ★.

Applying a layout keeps all wording and photos; Ctrl+Z undoes it.

13. Devices, zoom and descriptors

  • The phone, tablet and desktop icons show the page at that device's real size inside a device frame.
  • Phone and tablet can be turned sideways: click the round arrow button left of the device. It rotates like the real thing and the page reflows at the landscape width (844 px on the phone, 1180 px on the tablet). Click it again to turn back. Each device remembers its orientation.
  • Zoom at the bottom right of the preview: −, slider (25–200 %), +, and Fit. Ctrl + mouse wheel zooms too. The zoom is remembered.
  • Settings ▾ → Descriptors: click text or a photo to see where it's stored, what else it changes and which parts are filled in automatically.

14. Building

  • Output folder: where the finished site is written. Defaults to Sites\<Business> Site.
  • Check: lists errors (must be fixed) and warnings (worth fixing). Double-click a line to jump to its section.
  • Build site: writes every page, the stylesheet, scripts, resized photos, robots.txt, sitemap.xml, a README.md, and contact.php when website email is on.
  • Rebuild safety: the folder gets a .webbuilder.json list of the builder's files. Rebuilds only replace or remove files on that list. Building into a folder holding someone else's site asks before overwriting.
  • Unchanged photos are reused instead of resized again, so rebuilds are quick.

15. Site Manager

Saved live sites, like FileZilla's Site Manager. Sites are saved for your Windows account, with passwords encrypted.

FieldNotes
ProtocolFTP over TLS (explicit), FTP over TLS (implicit, usually port 990), SFTP (SSH, usually port 22), or plain FTP (not encrypted).
Host, PortFrom the hosting control panel. Port 0 uses the protocol's default.
Username, PasswordThe FTP or SSH account. Show reveals the password while you type.
Website folderWhere the website goes. Browse server… lists the server's folders; double-click to open one and Use this folder to pick it.
Passive modeLeave it on unless the host says otherwise (FTP only).
Live addressThe site's address, for Open live site after publishing.
SecurityThe fingerprint of the certificate or host key you accepted.

Buttons: Test connection, Use for this client (links the site to the open client, marked ●), Publish now… (only for the connected site), New site, Duplicate, Delete (nothing on the server is touched).

Certificates and host keys

When a server presents a certificate Windows doesn't trust, or an SSH key seen for the first time, you're shown why and its fingerprint, and asked once (the default answer is No). The choice is remembered for that site. Changing the host or protocol forgets it.

16. Connection status

The pill next to Site Manager shows the connection to the open client's linked site.

ShowsMeansClick to
● Connected — siteLogged in and kept open with a keep-alive every minute.Disconnect
● Connecting — site…Logging in.(wait)
● Disconnected — siteYou disconnected it. It won't reconnect by itself.Connect
● Connection lost — siteIt dropped and one silent reconnect failed.Reconnect
● Not connectedNo site linked, details incomplete, or the login failed (hover for the reason).Connect; with no live site yet, set one up (Go-live wizard) or choose a saved one

A client connects automatically when you open it, unless you disconnected it. Publish is only available while the status is green.

17. Publishing

  • Publishing goes to the connected site only; the site can't be changed in the Publish window.
  • Build the site first publishes exactly what the preview shows.
  • Upload only files that changed compares each file with what was last sent to this site and folder. The record is kept in .webbuilder-publish.json in the site folder (never uploaded).
  • Remove files this builder uploaded before deletes files the builder uploaded earlier that the site no longer has, for example a deleted photo. Files the builder never uploaded are never removed.
  • README.md, .gitignore, CHANGELOG.md and the builder's own records are never uploaded.
  • A failed file is listed and retried on the next publish; Cancel stops after the current file.

18. Backups

  • Download any saved site's folder, including sub-folders, empty folders and hidden files. Read-only on the server.
  • Each backup gets its own folder: <backups folder>\<site name>\<yyyy-MM-dd HHmm>. A second backup in the same minute adds " (2)".
  • When a client is linked to the site, the client project is copied into the backup first, so it can be opened later.
  • For safety, symbolic links are never followed and file names that could escape the backup folder, or that Windows can't store, are skipped and listed in the log.
  • The backups folder can be changed in the Backup window and is remembered.

19. Opening a backup

  • Only WEB360 Builder backups open, and only when they contain a client project. Older backups (from before this feature) hold only website files.
  • Every project file is checked against the checksum in webbuilder-backup.json. Missing or changed files stop the restore.
  • The client always opens as a new client, builds into its own "(restored …)" folder and stays linked to the same live site.
  • If the site isn't in the Site Manager, it's added without its password.

20. Wizards

WizardOpens fromDoes
First-run setupFirst start; Help ▾ → Run a wizardFolders, a screen tour, first client.
New clientNew client; welcome screenBusiness, contact, services, look, photos, layout → a complete draft.
Go liveHelp ▾ → Run a wizard; the red status when the client has no live site yetHosting details, trusted connection, website folder, link and first publish.
Backup & restoreHelp ▾ → Run a wizardGuided backup, or guided opening of a backup.
Photo wizardPhotos tab → Photo wizard…; Help ▾ → Run a wizardPhotos, gallery groups, sorting into groups, service labels, which photo goes where, captions.

Every wizard shows its steps on the left. Back and Next move between them; nothing is created until the last step.

21. Keyboard shortcuts

KeysDoes
F1Help for the current screen
Ctrl+SSave
Ctrl+Z / Ctrl+YUndo / redo
F5Refresh the preview
EnterEdit the selected text; finish editing
EscCancel editing or a drag
Ctrl+C / Ctrl+VCopy / paste a section
Ctrl+DDuplicate the selected section
DeleteDelete the selected section or item
Ctrl+↑ / ↓Move the selected section or item
Alt+↑ / ↓Nudge text or a photo (Shift: bigger steps)
Ctrl + mouse wheelZoom the preview
↑ / ↓ in the section listSwitch sections

22. Command line

For scripts and automation. --new and --build need an active license (see License and subscription).

CommandDoes
StreamSoft_WEB360_Builder.exe "<client folder>"Opens the client in the app.
--wizard first-run|new-client|go-live|backup|restore|photos (optionally with a client folder)Opens the app straight into that wizard, for example for a desktop shortcut.
--new "<folder>" --name "Business" [--type nails|plumber|…] [--pack trades|services] [--trades painting,tiling] [--scheme 1-22] [--photos "<folder>"]Creates a client without the app.
--build "<client folder>" [--out "<folder>"] [--force]Builds the site. Exit codes: 0 built, 1 errors, 2 folder holds someone else's site (use --force), 3 usage or unexpected error, 4 not licensed.

23. Files and folders

WhatWhere
App settings (folders, recent clients, saved layouts)%APPDATA%\StreamSoft\WebBuilder\settings.json
Saved live sites%APPDATA%\StreamSoft\WebBuilder\sites.json (passwords encrypted)
ClientsDocuments\StreamSoft WEB360 Builder\Clients\ (changeable)
Built sitesDocuments\StreamSoft WEB360 Builder\Sites\ (changeable per client)
BackupsDocuments\StreamSoft WEB360 Builder\Backups\ (changeable)
Exports (.web360 clients, website .zip)Documents\StreamSoft WEB360 Builder\Exports\ (suggested; save them anywhere)
Installs from before the product was renamed (StreamSoft Web Builder) keep using Documents\StreamSoft Web Builder\; nothing is moved.
Preview filesA temporary folder, recreated as needed

24. Security and privacy

  • FTP, SFTP and SMTP passwords are encrypted for your Windows account (Windows DPAPI). Another Windows account or PC can't read them.
  • Backups and their manifests never contain passwords.
  • Server certificates and SSH host keys are checked; unknown ones need your approval once, and a changed one asks again.
  • Plain FTP sends the password unencrypted; the Site Manager and Publish window warn about it.
  • Photos are saved without location or camera data when the site is built.
  • The SMTP password is only written to private/mail-config.php in the built site (listed in its .gitignore), never into the preview.

25. Troubleshooting

The login is refused

Check the username and password in the Site Manager. Many hosts use the full email-style FTP username, for example web@example.co.za.

The host name can't be found

Check the spelling. Some hosts give an IP address instead of a name; that works too.

Timed out or connection refused

Check the protocol and port. FTP over TLS usually uses 21 (explicit) or 990 (implicit), SFTP uses 22. Some networks block FTP; try another connection.

"The secure (TLS) connection couldn't be set up"

Try the other FTP over TLS option, or plain FTP if the host has no TLS. If you declined a certificate, run Test connection and accept it.

The status stays red after opening a client

Hover over it for the reason. "Certificate hasn't been accepted" means: Site Manager → Test connection → accept.

Publish is greyed out

The client's live site isn't connected. Click the status to connect, or link a site in the Site Manager.

The live site doesn't show my changes

Refresh with Ctrl+F5. If the site shows the host's default page, the website folder is wrong.

Enquiries don't arrive

Check the client's spam folder, the SMTP server, port, security and mailbox password, and that the hosting runs PHP.

A backup won't open

Only WEB360 Builder backups with a client project open. The message lists missing or changed files; use an earlier backup if the project was damaged.

26. License and subscription

The WEB360 Builder needs an active StreamSoft license on each PC, like every StreamSoft app. Until it has one, the window shows Activate StreamSoft WEB360 Builder and nothing else works.

  1. Click Enter license key… (or Help ▾ → Licensing…).
  2. Type the key and click Activate. The key is checked with StreamSoft's license server.
  3. The window unlocks straight away; the status bar shows your subscription (click it to open Licensing again).

One plan: R399 per month, monthly subscription. Everything is included (the visual editor and preview, layouts, Build site, the Site Manager, Publish, Backup and restore, and the command line), and there's no limit on the number of websites you create.

The license is re-checked every few minutes; if the server can't be reached, the app keeps working for up to 30 days. Validate in Licensing always asks the server first and only falls back to the offline grace if the server can't be reached (it tells you why); a key the server rejects is never covered by the grace. To move the license to another PC, Deactivate it in Licensing first, then activate on the new PC.

Glossary

Accent colour
The bright brand colour for buttons and highlights.
Alt text
A description of a photo for screen readers and search engines.
Anchor
A name for a section so a link can jump to it, for example #reviews.
Build
Turning the client project into the finished website files.
Fingerprint
A short code that identifies a server's certificate or SSH key.
FTP / FTPS / SFTP
Ways of sending files to hosting. FTPS is FTP with encryption; SFTP runs over SSH.
Manifest
A list the builder keeps of its own files, so it never touches anything else.
Section
One block of a page, such as the hero or the reviews.
Token
A placeholder like {Town} that becomes the client's real detail.
Website folder
The folder on the server that visitors see, usually public_html.