✨ What Is the Advanced Website Editor?
The Advanced Website Editor gives you complete creative control over your Time To Pet website. While the Simple Editor covers the basics, the Advanced Editor unlocks a full suite of design tools — custom layouts, animations, granular styling, and more — so you can build a site that truly reflects your brand.
🗂️ The Editor Interface
The Advanced Editor has three main areas:
Side Panel (left) — Your primary toolbox for navigation and settings
Canvas (center) — Where you build and design your site directly
Design Panel (right) — Appears when you select an element and shows its design settings
The Side Panel
The side panel gives you access to:
Option | What It Does |
Add | Add new elements, widgets, sections, or content |
Pages | Manage pages — add, reorder, and configure page settings |
Layers | See a hierarchical view of all elements on the current page |
Theme | Set global styles for text, colors, buttons, images, and spacing |
SEO/AEO | Manage SEO settings for pages, images, and links |
The Canvas
The canvas is the central editing area. You can click directly into text to edit it, drag elements to reposition them, swap images, edit buttons, and more. Your site is built from a header, footer, sections, and columns — every widget you add lives inside one of these structures.
The Design Panel
When you select an element on the canvas, the design panel appears on the right. It shows layout, sizing, alignment, animation, and background options specific to that element.
🧱 Sections and Columns
Sections
Sections are the horizontal building blocks of your page. All widgets and columns sit inside sections.
To configure a section, hover over the top-left of a row until the row button appears, then click Section. The section menu includes:
Design — Adjust layout, style, spacing, size, and animations/effects
Move row up / Move row down — Reorder sections on the page
Duplicate — Copy the entire section
Clear All Padding — Extend the section to the full edge of the site
Delete — Remove the section
Adding Sections
To add a new section:
Hover your mouse between two existing sections
Click + Add Section
Choose from:
Layouts — Basic structure you design yourself
Designed — Pre-built sections organized by content type (Intro, Features, About, Team, Testimonials, etc.)
AI-Generated — Describe what you want and the AI Section Assistant will build it
Columns
Columns sit inside sections and hold your widgets. Right-click a column to access:
Edit Design — Adjust the column's appearance within the section
Entrance Animation — Add an animation as the column scrolls into view
Hide From — Hide the column on desktop, tablet, or mobile
Copy — Duplicate the column
Set As Anchor / Edit Anchor — Link the column for page navigation
Delete — Remove the column
🔝 Header
The header appears at the top of every page on your site. It typically holds your logo and navigation.
Choosing a Header Layout
Hover over the header on the canvas
Click the orange Basic Header
Select from the available preset layouts
⚠️ Important: Once you switch to a flexible header layout, you cannot go back to a fixed layout — only between flexible layouts. Some layout changes will remove existing header content. Back up your site before switching.
Sticky Header
A sticky header stays visible at the top of the screen as visitors scroll.
Hover over the header and click Basic Header
Select the ellipsis (…) in the floating menu
Choose Set as Sticky Header
If the sticky header option isn't available, disable the Shrinking Header toggle first.
Shrinking Header
The shrinking (scroll-on) header condenses as visitors scroll down, keeping your logo and menu visible without taking up too much space. Compatible widgets include: logo, navigation, buttons, and social links.
If the shrinking effect isn't triggering, check that your page has enough content to scroll. A single-row page won't scroll, so the effect won't activate.
Hiding the Header
To hide on a specific device:
Hover over the bottom of the header and click Header
Select the ellipsis (…) in the floating menu
Click Hide from, then select the device
From the context menu:
Right-click the header
Select Hide on this device, then choose From this Page Only or From All Pages
From the Layers panel:
In the side panel, click Layers
Click the eye icon next to the header
To unhide: In the side panel, click the Unhide Elements icon, then click the hide icon on the header and select Yes.
Logo Behavior Across Devices
Headers are not automatically synced across devices. If you add a logo on desktop, you'll need to add it separately for tablet and mobile (except when using the top bar header layout on tablet, where desktop logo changes carry over).
🔻 Footer
The footer appears at the bottom of every page and is a great place for contact info, social links, and legal text (privacy policy, terms of service, copyright).
Editing the Footer Background
Hover over the top of the footer on the canvas
Click Footer
Select Edit Design and update the background color or image
Hiding the Footer
From the floating bar:
Click the footer to open the floating bar
Click Hide on Device, then select This page or All pages
From the context menu:
Right-click the footer
Click Hide on Device, then choose the scope
From the Layers panel:
In the side panel, click Layers
Click the eye icon next to the footer layer
Unhiding the Footer
From the side panel:
Click the Unhide Elements icon under Settings
Click the hide icon on the footer and select Yes
From the Layers panel:
Click Layers
Click the crossed-out eye icon next to the footer layer
🎨 Site Theme
The Site Theme panel lets you make sweeping visual changes that affect your entire website at once — fonts, colors, buttons, images, spacing, and backgrounds. It's the fastest way to keep your design consistent across all pages.
💡 Tip: Set your Site Theme first, then make individual element customizations. Element-level changes override the theme for that specific element only.
To open Site Theme: click Theme in the side panel. The canvas will zoom to 50% so you can see the full site while adjusting.
Text
Theme Text controls the fonts, sizes, and colors used across your site. Available text types:
Type | What It Controls |
DFLT | Default text for widgets not assigned a heading or paragraph style (e.g., navigation). Also controls link color and hover/click states. |
PAR | The paragraph text widget |
H1–H6 | Headings and subheadings. Font size can be set separately for desktop/tablet vs. mobile. |
When you manually change the styling of a specific element, that element's style is no longer controlled by the Site Theme for that property. Other properties on the same element still respond to the theme.
To reset an element back to the Site Theme style, click the text widget, open the context menu, click the heading dropdown, and select Update theme.
Fonts
Choose from the built-in font library, import from Google Fonts, or upload your own font files (TTF, OTF, EOT, WOFF, or WOFF2 — WOFF/WOFF2 recommended for performance).
Custom fonts are loaded from a CDN to maintain GDPR compliance.
Scale Text
Enable Scale Text for any text type to have it automatically resize based on its parent container width — useful for responsive designs across screen sizes.
Colors
Set up to 8 brand colors for your site theme.
Buttons
Standardize both primary and secondary button styles from the Theme tab. You can adjust:
Layout
Text
Background
Border
Icon
Hover State
Corners & Shadow
Width & Spacing
Set consistent spacing for pages, sections, and columns across your entire site — no need to adjust each one manually.
Images
Apply a universal image style across your site:
Border
Corner Radius
Shadow
Backgrounds
Set a default background (image or color) for the whole site, or customize the background per page.
How Theme Overrides Work
Site Theme sets the default for everything on your site
If you manually customize a specific element, that property is no longer controlled by the theme
Only the manually changed properties are overridden — all other properties still respond to the theme
📐 Snap to Grid
The Snap to Grid feature helps you place elements with precision by automatically aligning widgets horizontally and vertically within columns and rows. When moving or resizing an element, rulers appear and aligned elements are highlighted with a colored border. Works across desktop, tablet, and mobile views.
❓ FAQs
What's the difference between the Simple Editor and the Advanced Editor? The Simple Editor covers the most common edits — text, images, sections, and themes. The Advanced Editor gives you full design control, including custom layouts, column configuration, animations, granular spacing, and more.
Will my Simple Editor changes carry over to the Advanced Editor? Yes. Your site content and structure are the same — you're just using a more powerful set of tools to edit it.
Can I hide specific sections on mobile without removing them on desktop? Yes. The Hide From option on sections and columns lets you control visibility by device type independently.
What happens if I change the Site Theme after making individual element customizations? Theme changes only affect elements that haven't been manually overridden. Your custom-styled elements will stay as they are.
My shrinking header isn't working — what's going on? The shrinking effect requires a page long enough to scroll. If your page only has one or two rows, there may not be enough content to trigger it.
📣 Coming Soon
We're actively expanding the Advanced Website Editor. Stay tuned for updates in your dashboard and help center. Have a suggestion? Submit it directly to our Product Roadmap.