> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.fotostudio.io/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # The Fotostudio website builder # 🖥️ The Fotostudio website builder ## Introduction The website builder lets you build your website directly in Fotostudio. What makes it special: it is **connected to your CRM**. Your service catalogues, your galleries, your contact forms, online booking and gift vouchers show on your website without entering anything twice. Change a price in the CRM and it changes on the website, without republishing. --- ## Where to find the website builder In the menu, go to **Website** > **My website**. The same menu gives access to **Domains** (your website's address) and **Widgets for your website** (if you keep your current website). --- ## What your plan includes | | Launch plan | Pro plan and above | |---|---|---| | **Websites** | 1 | Up to 10 | | **Pages** | 8 per language | Unlimited | | **Languages** | 1 | Several | | **Address** | Fotostudio address (`mystudio.fotostudio.io`) | Fotostudio address and your own domain | | **Image library** | 1 GB | Unlimited | | **“Powered by Fotostudio” mention** | Always shown | Can be hidden | **What counts towards the 8 pages:** pages, landing pages, bio link pages and blogs. Legal pages, blog posts, submenus, links and client area pages don't count. > 💡 If you move to a lower plan, you keep your existing websites, languages and domains, but you can no longer add new ones. --- ## Creating your website When you create it, there are two steps: 1. **Colours and fonts**: start from one of your visual identities, or from a theme's palette. Everything stays adjustable afterwards. 2. **Pages to create**: choose a theme, whose pages are filled with your data (phone, address, email, Instagram, booking links), or **Empty site** to build it yourself, block by block. ### Themes | Category | Theme | Style | Pages created | |---|---|---|---| | **Full websites** | Aria | Elegant and airy, for a studio that tells stories | Home, About, Portfolio, Services, Contact | | | Onyx | Dark and full-bleed, photos first | 5 pages | | | Sienna | Warm and rounded, for families | 5 pages | | **Portfolios** | Berlin | Black and white, the grid above all | Home, About, Contact | | | Linen | Soft and classic, full page | 3 pages | | | Nord | Crisp and calm, for landscapes | 3 pages | | **One-page site** | Mono | Understated, all on one page | 1 page | | | Sable | Light and round, all on one page | 1 page | | | Kyoto | Natural and steady, all on one page | 1 page | Each website is also created with **Legal notice** and **Privacy policy** pages, pre-filled with your company's details. Complete the parts marked **[to complete]**. > 💡 You can change theme later (**Design** tab > **Choose a theme**). A theme changes the look and adds any missing pages: it never changes an existing page. Your website starts as a **draft**: nobody can see it until you publish it. --- ## The editor The editor has a panel on the left, with four tabs (**Pages**, **Design**, **Stats**, **Settings**), and the preview of your website on the right. The **Desktop**, **Tablet** and **Phone** buttons change the width of the preview. ### Page types Click **New page** and choose a type: | Type | What it's for | |---|---| | **Page** | Content, made of blocks | | **Submenu** | Groups pages together in the menu | | **Link** | Leads elsewhere (another address, your shop...) | | **Client area** | Online booking, mini sessions, gift vouchers or a catalogue, in your website's design | | **Blog** | Dated posts, from newest to oldest | | **Bio links** | A column of buttons, for your Instagram or TikTok bio | | **Landing page** | A page with no menu or footer, for an offer or an ad | Templates are offered for each page (Home, About, Portfolio, Services, Contact, Blog, Post...), or **Blank page**. ### The menu Your website's menu is the page tree in the **Pages** tab. Drag and drop pages to reorder them or put them in a submenu. A page can also be **hidden from the menu** while staying reachable through its link. Each page has an editable **URL**. If you change it, the old address automatically redirects to the new one. ### Blocks A page is made of blocks, added with **Add a block**. Search for a block by name, and mark your favourites with a star to find them in **Favourites**. | Category | Blocks | |---|---| | **Text and images** | Text, Image, Gallery, Image and text, Cards, Slideshow, Banner | | **Galleries** | Linked gallery 🔗, Portfolio 🔗 | | **Pricing** | Pricing (entered by hand), Catalogue 🔗 | | **Testimonials and FAQ** | Quote, Testimonials, FAQ | | **Links** | Button, Image links | | **Forms** | Contact form 🔗, Newsletter signup 🔗 | | **Video** | Video, Video and text (YouTube, Vimeo) | | **Social** | Social links, Instagram wall | | **Other** | Partners, Contact details, Location (map) | | **Blog** | List of posts, Latest posts | | **Layout** | Spacer, Divider | 🔗 = block connected to your CRM: | Block | What it shows | |---|---| | **Catalogue** | One of your service catalogues. Prices stay managed in the CRM: a change there shows on the website without republishing. The visitor can choose a service, or the catalogue can serve as a showcase only. | | **Linked gallery** | The photos from one of your public galleries (12, 24 or 60 photos). A photo added to the gallery shows on the website without republishing. | | **Portfolio** | The galleries you have marked as portfolio in Galleries. | | **Contact form** | One of your contact forms. Each submission creates a lead in Fotostudio, as usual. The fields are set up in **Contact forms**. | | **Newsletter signup** | The new subscriber becomes a contact in your CRM, with their consent recorded. | > ⚠️ The **Testimonials**, **FAQ** and **Pricing** blocks are filled in by hand. The photos in the **Instagram wall** are chosen by hand: it isn't an automatic feed. **Settings for each block:** layout, **Color scheme** (Light, Light accent, Accent, Dark accent, Dark), **Spacing** (Compact, Normal, Large) and **Hide on mobile**. Blocks are duplicated, moved and deleted from their toolbar. ### Design The **Design** tab sets the look of the whole website: | Section | Settings | |---|---| | **Colors** | Ready-made palettes (Natural, Black and white, Sand, Forest, Ocean, Blush, Terracotta, Night), your visual identities or custom colours | | **Header** | Layout, height, action button (for example “Book”), client area button, sticky header, uppercase links | | **Logos** | Main logo and light logo (for dark backgrounds) | | **Tab icon** | The square icon shown in the browser tab and in bookmarks | | **Fonts** | One font for headings, one for text | | **Buttons, widths, corners** | Button style and size, content width, corner radius | | **Animations** | None, Fade, Slide up, Scale up, Scale down, Reveal | | **Footer** | A text and up to 12 links | ### Images Images are managed in the **Library**. You can also import a photo from your galleries (**My galleries** tab) and crop each image. - Accepted formats: **JPEG, PNG, WebP** (SVG is not accepted) - Maximum size: **15 MB** per image - **Image protection**: makes copying harder, on images only or on the whole page. It's a deterrent, not real security. --- ## Publishing your website Every change is saved in your **draft**. As long as the draft differs from the live version, the button shows **Unpublished changes**. Click **Publish** to put your website online. - **Preview**: see the draft as a visitor would, before publishing. - **Take offline**: the website is no longer visible, but nothing is lost. The client area, quotes and bookings keep working at your address. **Publish** puts it back online. - **Only one website online at a time**: if you publish another website, the previous one goes offline and your address serves the new one. ### History In **Settings** > **History**, each publication creates a version. You can also **Save a version** and give it a name (for example “Before redesign”). | Action | Effect | |---|---| | **Restore the whole site** / **Restore this page** | Replaces your draft with the old version. The live website only changes at the next publication. | | **Put back online** | Puts the old version online directly, without touching your draft. | Fotostudio keeps the last 20 versions, plus all the ones you have named. --- ## A website in several languages *Available from the Pro plan.* In **Settings** > **Languages**, click **Add** and choose a language (French, English, German, Dutch, Spanish, Italian, Portuguese, with regional variants). Your pages are copied and **automatically translated** in a few moments. - Each language has its own pages, which you can edit freely. - The addresses of the other languages have a prefix: `/en/...`, `/de/...`. The default language has none. - When you edit the original page, the translation is flagged “The original changed since this translation”. Use **Retranslate from the original** to update it. - Visitors see a banner offering them the version in their language. > ⚠️ **Remove this language** deletes all the pages in that language. --- ## The blog Add a page of type **Blog**, then create your posts with **New post**. Each post has a publication date, a cover image, an intro and up to 10 tags. | Status | Meaning | |---|---| | **Draft** | No publication date: the post is never online | | **Scheduled** | With a future date: the post appears on its own on that date, once the website is published | | **Online** | Visible on your website | The blog page lists the posts (6, 9 or 12 per page) with a filter by tag. The **Latest posts** block highlights your 3, 4 or 6 latest posts on any page. An RSS feed is available at `/blog/feed.xml`. --- ## Your website's address Your website needs an address to be published. Two options, in **Website** > **Domains**: - a **Fotostudio address** (`mystudio.fotostudio.io`), ready straight away and included in all plans; - **your own domain** (`www.mystudio.com`), from the Pro plan. All the details are in the article “Managing your website's domains”. --- ## SEO and statistics ### SEO In **Settings** > **SEO**: the home page title, the description and the sharing image (shown when someone shares your website on social networks). Each page can have its own; left empty, a field falls back to the site setting. The **Local SEO** section gives Google your studio's name, address and phone number. Fotostudio automatically generates the sitemap (`sitemap.xml`), the `robots.txt` file and the tags search engines need. Landing pages and client area pages are not indexed. In **Settings**, you can also add your Google Analytics ID or your Meta pixel (**Audience measurement**), and turn on a **Cookie banner**. ### Statistics The **Stats** tab shows, over 7 days, 30 days or 12 months: visitors, page views, the most viewed pages, where visitors come from (Google, Instagram, Facebook, Pinterest, TikTok...) and the buttons pressed. > 💡 Visits are counted without cookies, directly on the server: nothing is asked of the visitor, and bots are not counted. --- ## The client area on your website In **Design** > **Header**, turn on the **Client area button in the menu**. Your clients enter their email address there, receive a six-digit code and find their quotes, invoices, galleries and sessions, in your website's design. The links in your emails (quotes, invoices, galleries) also open at your website's address. --- ## Editing your website with Claude If you have connected Claude to Fotostudio, you can ask it to create or edit your website in plain language: “add a Weddings page with my prices”, “change the colours to something warmer”... Claude **always works in your draft**. It only publishes if you explicitly ask it to. Your website must have been created beforehand in **Website** > **My website**. --- ## Frequently asked questions **I already have a website on WordPress or Wix. Do I need to switch?** No. You can keep your website and add booking, gift vouchers or your forms to it with widgets (**Website** > **Widgets for your website**). **I change my prices in the CRM. Do I need to republish the website?** No, for the **Catalogue**, **Linked gallery** and **Portfolio** blocks: they always show up-to-date data. However, the **Pricing** block is entered by hand and updates when you republish. **Why is the “New website” button greyed out?** With the Launch plan, you have a single website. Several websites are available from the Pro plan. **The message “You have reached the 8 page limit of the Launch plan” appears.** The Launch plan includes 8 pages per language. Legal pages, blog posts, submenus and links don't count. For unlimited pages, upgrade to the Pro plan. **My image is rejected.** Check its format (JPEG, PNG or WebP) and its size (15 MB maximum). SVG files are not accepted. **How do I delete a website?** A live website can't be deleted: take it offline first. Your last website can't be deleted. **I made a mistake and published. Can I go back?** Yes: in **Settings** > **History**, choose the previous version and click **Put back online**. **What happens if my subscription ends?** Your visitors see a holding page until renewal. Your website is not deleted.