Studio.Store templates come with pre-set page layouts, color schemes, and fonts. You can publish a website with minimal effort, building on an already-designed template.
This article explains how to make the following types of edits while keeping the template's design intact.
Note: When you download a template, a new project is automatically created with that template applied. You can't apply a template to an existing project afterward.
Before you start editing
Before editing a template, let's review the basic operations in the design editor.
Select a box and edit it in the right panel
Studio.Design pages are built by combining "boxes," such as images and text. When you select the box you want to edit, its editing options appear in the right panel.
Image box: Use [Image] to replace the image.
Text box: Use [Text] to edit the text content or font.
If the panel is closed, open the right panel. For more about box types and how they're combined, see Studio.Design layout basics (box layout).
If a box is highlighted in purple or light blue and can't be edited, see When a box is highlighted in purple or light blue.
Selecting the box you want from overlapping boxes
Studio.Design layouts are built by stacking multiple boxes in a parent-child hierarchy. Because of this, clicking the box you want may instead select its parent box.
If you can't select an inner box, try one of the following methods.
Select from the Layers panel: Open the Layers panel in the left panel, and click the layer for the box you want to select.
Use direct selection: Hold down the ⌘ key on Mac, or the Ctrl key on Windows, while clicking a box to select the inner box directly (see Shortcuts).
Your edits are saved automatically
Edits you make in the design editor are always saved automatically. There's no need to save manually.
However, to apply your changes to your published site, you'll need to update the site separately.
For details, see Applying your changes to the published site.
1. Replace images and text
Replace the template's images and text with your own site's content.
1-1. Replace an image
You can replace images using the upload & replace panel.
Select the image box you want to edit.
Open the [Image] tab in the right panel. If the panel is closed, open the right panel.
Click the image thumbnail shown in the right panel.
Tip: You can also open the upload & replace panel by double-clicking the image box directly on the screen.
In the [Upload & Replace] panel that appears in the left panel, choose the image you want to use.
Select the [Upload] tab to use your own image file.
Select the [Stock] tab to use free, commercially licensed stock images.
Related articles:
1-2. Replace text
Select the text box you want to edit.
Open the [Text] tab in the right panel. If the panel is closed, open the right panel.
Tip: You can also double-click the text box directly on the screen to edit the text right there.
Edit the content in the [Text] field.
Related articles:
Note: If you can't edit text directly (rich text box)
If selecting a box's text shows [Content] instead of [Text] at the far left of the right panel, that box is a rich text box.
If the rich text box is displaying "Body" or "Title" content from Studio CMS, you'll need to edit the text in Studio CMS instead. For details, see Edit content managed by Studio CMS.
1-3. Replace images in a slideshow (carousel)
If a template's slideshow is built as a carousel, its images are managed through data connected to the carousel, rather than through individual image boxes.
You can check where this data is managed by selecting the entire carousel and opening the [Data] tab in the right panel.
If [Connect data] is shown: Replace the image in the property management table within the design editor. For steps, see Carousels linked to list properties > Editing properties.
If a connected data name is shown: Replace the image on the data side, such as in Studio CMS. If it's Studio CMS, see CMS lists: Editing properties like images, text, and links.
Related articles:
2. Change colors and fonts
You can change a template's colors and text design all at once using styles, or change them individually for each element.
2-1. Change colors and fonts all at once with "styles"
Styles are a feature that let you register design settings—like text and color—in advance and reuse them repeatedly throughout a project.
A template's colors and text design are sometimes registered as "text styles" or "color styles." When you edit a registered style, the change is applied to every element using that style.
Type | What can be changed at once | Example use case |
Font, size, weight, line height, spacing, etc. (color isn't included) | Changing the heading font across the entire site | |
Colors you use repeatedly, such as background or text colors | Changing the main color to match your brand color |
You can view and edit registered styles in the Styles panel, which you can open from the [Styles] icon in the left navigation. For editing steps, see the following articles.
Note: If you want to change only some elements
Editing a style changes every element the style is applied to. If you want to change only some elements, first remove the style from those elements, then edit them individually.
2-2. Change the font for individual elements
If you want to change the font for only specific text, change it box by box.
Select the text box or rich text box whose font you want to change.
Open [Text] in the right panel. For a rich text box, open [Content] instead. If the panel is closed, open the right panel.
Choose the font you want from [Font].
Note: If there's no font setting field in the right panel, the text has a text style applied to it.
Either edit the text style, or remove the style first, then change the font.
Related articles:
3. Add a section
You can add a section to a template by either duplicating an existing section or adding a section part.
3-1. Duplicate an existing section
If you want to add a section with the same design as the template, duplicate an existing section and replace its content. This lets you add a section that matches the template's design.
In the Layers panel, select the section you want to duplicate.
Copy it (⌘ + C on Mac, Ctrl + C on Windows), then paste it (⌘ + V on Mac, Ctrl + V on Windows). A new section is added directly below the copied section.
Replace the images and text in the newly added section.
Related article: Copying and pasting boxes
3-2. Add a section part
If you want to add a layout that isn't in the template, you can add a ready-made section part.
Open the [Add] panel from the left navigation.
Click [Section].
Choose the category of the section part you want to add, then click [View All].
Click the part you want to add, or drag it onto the screen to place it.
Edit the images, text, and colors. Applying the template's colors and fonts styles helps keep the design consistent.
Note: Changing the size of boxes included in a section part may break its existing responsive settings.
Related article: Sections and section parts
4. Set up links and forms
Set your buttons' link destinations, and your maps and forms, to match your own site.
4-1. Set a link
You can set a link destination to a page or anchor within your project, or to an external URL.
Select the box you want to set a link for. To set a link on a button element that contains text, select the parent box that forms the button's background, not the child element (text box).
Open the [Settings] tab in the right panel. If the panel is closed, open the right panel.
Enter a URL in the [Link] field. To set a link to another page within your site, choose the page from the list that appears.
Related articles:
4-2. Add or change a Google Maps embed
You can change the location shown in a Google Maps embed. If the template you chose doesn't include one, or if you'd like to add more maps, you can add them as needed.
For details, see Embedding Google Maps.
Adding Google Maps
Open the Add panel from the left navigation.
Open the [Basic] tab.
From the [Embed] box group, select the [Map] embed box and place it.
Changing Google Maps location information
You can change the location shown in an existing Google Maps embed using the following steps.
Click the Google Maps box.
Open the [Embed] tab in the right panel. If the panel is closed, open the right panel.
Under [Embed Code], click [Open Editor].
In the editing area shown on the left of the [Edit Embed Code] screen, delete the existing text, paste the link you copied from Google Maps, and click [Save].
4-3. Add a field to a form
Forms are made up of multiple boxes, and you can edit their design the same way you would for regular boxes.
Select the form.
Open the [Add] panel from the left navigation.
From [Basic] > [Form Parts], select the form part you want to add.
Drag the newly added part, which appears directly below the selected form, to the position you want within the form.
Related article: Changing a form's field content or design
4-4. Set the form's notification email address
You can set the email address that receives form responses from the Form Dashboard.
Select the form.
Open [Form] in the right panel. If the panel is closed, open the right panel.
Click [Notification Settings/Results]. This takes you to the Form Dashboard.
Click [Settings] at the top right of the screen.
On the [Form Settings] screen, choose the form you want from [General Settings] or [Individual Settings] on the left, and register the notification email address.
To go back to the design editor, click [Design Editor] at the top right of the screen.
Related article: Setting the notification email address
5. Set up your site title and favicon
Projects started from a template include placeholder information for the site title, description, favicon, and so on. Since these appear in search results and elsewhere, be sure to update them to match your actual site.
6. Edit content managed by Studio CMS
Template pages such as announcements or case studies may use Studio CMS. In that case, edit the text and images in the CMS Dashboard rather than in the design editor.
Good to know: What is Studio CMS?
Studio CMS is a Content Management System (CMS) feature available within Studio.Design.
For more about how it works and an overview, see the following help articles.
6-1. Check whether the page is connected to Studio CMS
An article page connected to Studio CMS has the page type "dynamic page." Follow these steps to check a page's type.
Open the Pages panel and select the article page you want to check.
With no box selected, open the right panel.
Open [Page].
If [Type] shows "Dynamic Page" and [CMS Model] shows a model name, the page is connected to Studio CMS.
6-2. Find and edit the property you want to change
Before editing in the CMS Dashboard, check which property controls the text or image you want to change.
Select the box you want to change.
Open [Data] in the right panel. If the panel is closed, open the right panel.
Hover over each property (Title, Cover, etc.) under [Data]. Check which property shows a blue connector line to the box you selected.
Click [Edit CMS] to go to the CMS Dashboard.
Select the item you want to edit, and update the property you identified in step 3.
Set the item's status to published.
Boxes without a connector line, as well as design elements like spacing and font size, are shared across all items. Edit these directly in the design editor.
Related article: Studio CMS: From creating an article to publishing it
Applying your changes to the published site
Changes made in the design editor apply at different times for the live preview versus the published site.
Live preview: Reflects the current state of the design editor instantly. Use this to check your edits as you work.
Published site: Shows the state from the last time you published or updated the site.
If you've edited a site that's already published, use the publish panel at the top right of the editor to update your site. Your changes won't appear on the published site until you do this.
When a box is highlighted in purple or light blue
While editing a template, selecting a box may highlight it in purple or light blue, preventing you from editing it directly. Here's what each highlight color means and how to handle it.
When a box is highlighted in purple (component)
If you notice the following behavior when selecting a box, that box has been turned into a component.
The box's outline is purple
The entire box is highlighted in purple
A component icon
/ 
appears at the top left of the selected box, or next to the layer name in the Layers panel
Components are a feature for managing elements that are shared across pages, like headers and footers. To prevent accidental edits, you can't edit a component just by selecting it. To make it editable, press Enter after selecting it, or double-click it.
Note: Editing one component applies the change to every instance of that component, including those on other pages.
For details, including how to vary the display for each instance of a component, see the Components article.
When a box is highlighted in light blue (list)
If you notice the following behavior when selecting a box, that box has been turned into a list.
The box's outline is light blue
The entire box is highlighted in light blue
A list icon
/ 
, or a carousel icon 
appears at the top left of the selected box, or next to the layer name in the Layers panel
Lists are a feature for managing elements that share the same design but have different content—like a card-based list.
If you edit a box inside a list directly on the screen, the change applies to every item in the list. To change the image or text for an individual item, edit it in the data connected to the list instead.
Static lists: Edit these in the property management table found under [Data] in the design editor.
Dynamic lists: Edit these on the connected data side, such as in Studio CMS.
You can determine which type of list it is by selecting the list and opening [Data] in the right panel. For details on telling them apart and editing each type, see How to tell list/carousel types apart.
Related articles:
Contact the template's designer with questions
Templates are created by Studio.Design users who work as template designers. Since the features and structure used can vary from template to template, please contact the template's designer directly with any questions specific to that template.
Go to Studio.Store.
Open the detail page for the template in question.
Click the template designer's icon at the top left of the detail page.
Click [Send Message] at the top left of the template designer's profile page.
Write your message, then click [Send Message to Designer].
