Page Overview
In Solodev, you can update any page on your website under the www folder. You can build a page from scratch using a layout template and a drag-and-drop component palette, directly edit an existing page using in-line editing tools with a visual preview, or access the underlying code for each div on your page.
In this article, you will learn how to build a new page from a layout template and the component palette, access an existing page in your www folder, modify it using the editing options available in your CMS, and update your page's meta information and details.
The page above was built entirely with the process in this article: a
Prerequisites
- You will need to add a website to your CMS.
- You will need to add a page to your website.
Using STML files
The most important assets in your www folder are STML files (.stml), the individual website files that are served in a browser when a user visits your website. STML files are built with templates using dynamic divs. A template imports common elements to a page such as the header and footer, while dynamic divs allow you to include unique page content, such as text, images, and more. In raw markup, a dynamic div is just <div class="dynamicDiv"></div> -- the connecting point between your HTML/.tpl files and an STML page.
Building a page
When you add a page, the Layouts picker determines what you start with:
The Base, Homepage, Sectional, and Content layouts are built-in Bootstrap system templates — a faster starting point than Blank Template if your page fits one of those common shapes.
Adding content with the component palette
A page you're editing has a vertical icon rail on its left edge. Each icon is a draggable component type — drag one onto an empty region of the page canvas to insert it:
Every picker (except Dynamic Div, which has none) shares the same layout: a searchable list on the left with a + Add shortcut if you need to create a new one on the spot, and a preview pane on the right showing the selected item's details before you commit.
Tip:
Drop directly onto an empty dynamic div, not just anywhere on the canvas. If the File you drop is itself a template with its own dynamic div inside (like base-template.tpl), that inner div becomes a new drop target — you can keep nesting components inside it the same way, building up a full page like header → Module → footer.
Note:
Dropping a component updates the page in your browser immediately, but it isn't saved yet. Use Publish, Stage, or Draft once you're done to save your changes — the same as any other file.
Viewing your page
The Solodev editing experience is highly visual and provides a fully rendered preview of your page’s template elements, graphics, and text.
Using the toolbar at the top of the screen, you can instantly view your page in a desktop, tablet, and smartphone format to test responsiveness and make in-line edits. You can also highlight divs, open a tab to your live page, and expand the window to maximize your viewable area.
In-line editing
You can directly edit a page on your website using Solodev’s in-line editing features. Click on a div or content block to access the editing features, make changes, and save your updates.
Note:
This low-code method is ideal for making quick changes to your content like updating text or modifying links. More complex changes will require editing the code on your page.
Step 1: Open the www folder in the left-hand menu and select a page to edit. Remember to click on the triangle graphic to the left of each folder to access its contents.
Step 2: On your selected page, click on the section you wish to edit to access the dynamic div. A small flag with a pencil icon and text will appear in the upper left corner. Click on the icon to directly edit the page.
Step 3: Once activated, an editing toolbar will appear in your div, allowing you to select text and update your page directly. You can apply styles for bold, italic, and underlined text and change the heading styles. You can also apply numbering, bullets, and links to your content.
Note:
The editing pane will only apply styling that is based on your website’s CSS.
Step 4: After updating your content, use the Draft, Stage, or Publish buttons in the editing toolbar to save your changes for review or to push live directly.
Note:
You can also use the tab in the upper right corner of the Metadata panel to Draft, Stage, or Publish your changes.
Accessing your code from a page
In addition to in-line editing, you can access the code to update a div or .tpl on your page.
Step 1: Open the www folder in the left-hand menu and select a page to edit. Remember to click on the triangle graphic to the left of each folder to access its contents.
Step 2: On your selected page, click on the section you wish to edit to access the dynamic div. A small flag with a pencil icon and text will appear in the upper left corner. Click on the text to access the code for the div.
Step 3: Once the code appears, you can make any desired modifications by accessing the menu on the right side panel.
Step 4: After updating your content, use the Draft, Stage, or Publish buttons in the editing pane to save your changes for review or to push live directly.
Note:
In addition to Draft, Stage, and Publish, the editing pane offers additional features listed in the table below.
Manage meta information with the Metadata panel
When updating a page using in-line editing, you can view and manage your meta information using the Metadata panel at the right side of the page preview.
The Metadata panel provides quick access to details such as the page ID, which team member made the last update, and the page's location in your website structure. It also provides editable components for page name, description, keywords, and more.
Note:
The Metadata panel can be collapsed using the small “>” icon in the upper left of the window.
Unfurling Preview
The Metadata panel also previews how the page will unfurl in search results and other applications like Slack.
Advanced
Customize your page's behavior, appearance, and functionality with granular settings to add social media images, control rank, manage header code, and more.
