Amender interface tour

Published: October 17, 2025By Sebastian

Become an Amender expert with this comprehensive tour of the interface. Learn how to edit text, HTML, CSS, and JavaScript interactivity on any WordPress page, no matter which theme or plugin generated the content. This video focuses on both visual and code editing. AI use cases will be explored in separate videos.

Note: the video runs 43 mins. Use the chapter links to skim read and hop around the video.

00:00 Introduction
0:33 Target elements using CSS selectors
1:06 Six default "action: aspect" change options
1:35 replace: text
2:22 Enable the rich text editor (optional)
2:36 Deleting edits restores original content
2:46 add: text
2:56 Leading / trailing space for rich text
3:23 Toggle paragraph wrapping in rich text
3:57 Clear / disable all fields using CHANGE icons
4:16 remove: html
4:23 Use "Enable removal" switch to activate
4:43 Use “serverHTMLReady” for faster rendering
5:50 Remove elements by screen size (responsive)
6:29 add: class
7:01 Add custom / utility classes anywhere
7:22 add: css
7:35 Pure code editing, no UI fields
7:48 Launch Microthemer from Amender sidebar
8:17 run: jsFunction
8:32 Name functions descriptively for clarity
8:56 Trigger JS via native or “inview” events
9:03 Click refresh icon to apply JS changes
10:08 Reusable snippets for consistent edits
11:02 Name snippets (optional)
11:26 Detach synced snippets for flexibility
11:32 Beautify code with the leaf icon
11:39 Create a new snippet (without overwriting)
12:09 GSAP usage is auto-detected
13:12 Built-in NPM package manager
13:25 Note: use trusted NPM packages only
14:40 Search and add packages easily
14:53 Choose CDN or local hosting
15:27 Modern ES module support for JS
16:06 Import maps simplify module names
16:26 Add dependencies via menus, not code
16:58 Edits apply to specific pages (folder logic)
17:29 View minified package size (KB)
17:35 Update JS packages via dropdown
17:42 Check docs for import syntax
19:08 See which packages are “in use”
19:34 Organising your settings
19:34 Search all settings via folder search
20:06 The selector field helps group related edits
22:44 Create custom action: aspect options
22:44 Add a change tab using the plus icon
22:56 insertAfter: html - add content after element
23:02 insertBefore: html - add before element
23:08 append: html - insert inside element (at end)
23:16 prepend: html - insert inside element (at start)
23:23 add: html - same as append: HTML
23:28 replace: html - replace entire element
23:55 replaceSubstring: html - regex replacements
24:22 lazyLoad: html - defer content loading
26:54 move: html - reposition elements
27:44 Solve structure-based CSS issues with "move"
28:45 Select elements precisely with HTML pane
29:28 "text" and "innerHTML" are interchangeable
30:18 add: js - include external module file
30:44 jsFunction supports execution order
31:22 add/remove parent and child containers
34:18 Target any HTML attribute (class, title, etc.)
34:30 Enable live Tailwind editing in Preferences
35:12 Customise default change options
35:24 Coders may prefer innerHTML over text
35:34 Amender review panel
35:40 Temporarily disable Amender edits
36:04 Monitor and debug edits
36:17 Check server-side performance
36:47 Check total added CSS/JS weight
37:37 Inspect active modifications on page
38:17 Solve layout shifts with serverHTMLReady
39:29 Performance tips and caching
40:30 Pricing model
40:30 Free to test indefinitely
41:06 Lifetime security fixes, renew for new features
41:54 AI example prompts showcase capabilities
Tags: amender,
Close