Edit the text, images and pages of your website

Customizing your website starts with replacing the template's text and photos with your own, then adjusting the structure: adding a section, creating a page, changing a color. In Upkyo Studio, everything happens directly on the website preview, with no code. This guide walks through each kind of change. To open the editor and get to know its interface, start with Open and edit your website.

Before you start

• Open the editor from My services, then Upkyo Studio and Edit my website.
• Choose the page to edit in the Page shown list at the top of the screen.
• Keep your photos handy, ideally as JPEG or WebP files, already cropped.

Edit a text step by step

1. Click the text in the preview: a blue frame appears around it, along with the cursor.
2. Type your new text. Text pasted from another document arrives without its formatting, to keep the website consistent.
3. Use the bar that appears above the text to make it bold, italic or underlined, add a link, or change the color, alignment or size.
4. For a link, first select the words, click the link icon, then type a web address (https://…), a page of the website (/contact/) or an email address, and press Enter.
5. Click elsewhere to finish. The change is saved automatically.

Replace an image

1. Click the image in the preview. The Choose an image window opens.
2. Click Upload a photo and pick a JPEG, PNG, WebP or GIF file from your computer.
3. You can also paste the address of an image online and click Use, or pick a royalty-free photo when the photo library is offered.
4. In the right-hand panel, fill in Image description: a short sentence saying what the photo shows. It is used by screen readers and by Google.

To remove an image, open the same window and click Remove the image. The logo and the browser tab icon are changed in the Business panel.

Add, move or delete a section

A section is a horizontal block of the page: header with a big headline, services, gallery, reviews, FAQ, contact…

• Add: click Add a section in the right-hand panel, or right-click a section and choose Add a section below. The window shows real previews in your website's colors, sorted by category, with a search box.
• Move: right-click, then Move up, Move down or Move (to the top, to the bottom). The Layers panel also lets you reorder sections by drag and drop.
• Duplicate or Delete: from the same right-click menu. Hide the section hides it without deleting it.
• Reuse: Save to my sections keeps a section so you can add it elsewhere, from the My sections category.

When you click a section, the right-hand panel shows its settings: Layout, Background, images, buttons, spacing, alignment, background image, entrance animation, and Hide the section on mobile or desktop. The + and − buttons under Content add or remove items (cards, photos, questions).

Add or rename a page

1. Open the Pages panel.
2. Click Add, type the Page name and click Create.
3. Set the Name in the menu and the Page address (for example pricing).
4. Tick or untick Show in the menu.
5. Use the arrows to change the order of pages in the menu, or the bin icon to delete a page. The home page cannot be deleted.

If you change the address of a page that is already live, Studio creates a redirect from the old address to the new one, so visitors and Google never land on a missing page.

Change colors, fonts and style

The Theme panel applies to every page at once:

• Starting style: a consistent set of colors, fonts and corner rounding;
• Colors: main color, text, background, secondary background and dark background;
• Fonts: font pairings for headings and body text;
• Corners and Look: button shape, size of large headlines, content animation.

The Business panel handles the information reused across the website: name, logo, address, phone, email, opening hours, social networks, plus the header (logo position, style, button).

Best practices for effective pages

• A clear headline at the top of each page: your trade and your city, for example "Plumber in Brooklyn".
• Short sentences: your visitors mostly read on phones. Check every page in Mobile mode.
• Your real photos: your team, your premises and your work build more trust than a generic image.
• One call to action per section: call, request a quote, book.

Frequently asked questions

How do I change my website's font?

Open the Theme panel, go to Fonts, and click the pairing you like. The change applies to every page at the same time.

What image size should I use for my website?

A width of 1600 to 2000 pixels is enough for a full-width photo, and 800 to 1200 pixels for a photo in a column. Prefer JPEG or WebP, which are lighter than PNG for photos.

Why doesn't my change show on my website?

Changes are saved in the editor but only become visible after publishing. Click Publish, then Update the website (see Publish your website on your domain).

Can I hide a section on mobile only?

Yes. Select the section, then under Hide the section on, choose Mobile. The section stays visible on desktop.