How to Use the Editor
How to Use the Editor
INFO Video↓↓↓
The order and content differ slightly from the text, but we provide content recommended for beginners.
INFO Text↓↓↓
Changing Text
Text Editing
When you click on the text element you want to change, "Text Change" will appear in the toolbar. You can edit the text directly on this screen.
You can change the text of copy and CTA buttons to verify conversion rates.
Style Editing
Click the "Style Edit" icon in the toolbar to change the following:
Element size
Font, font size, weight, and font color
Line spacing, alignment
Decorations such as underline, italics, and strikethrough
Background color, border color, thickness, and padding of the selected element
Changing Images
Replacing Images
Basic Steps 🖼️
Select the element Click the image element you want to change
Toolbar display "Change Image" option appears in the toolbar
Upload image Upload your image file
Replace image The uploaded image automatically replaces the original image
DANGER Important Notes
This function is applicable only to images created with img tags.
It cannot be used for background images or images specified in CSS.
Supported image formats and limits 📁
Supported formats: JPEG, PNG, GIF, AVIF, WebP, ICO, SVG
Maximum file size: 6 megabytes
You can change eyecatch and banner images to verify their effectiveness.
Similar to text editing, you can adjust size and padding from style editing.
Image Settings (Alternative Text)
When you select an image element, the "Image Settings" icon appears in the toolbar. You can set alternative text (Alt) for the selected image.
For more details on alternative text, please refer to Web Accessibility Support.
Inserting and Editing Videos
You can insert new videos into the page or edit existing videos. Both YouTube videos and direct-link videos (MP4/WebM, etc.) are supported.
Inserting Videos 🎬
Basic Steps
Select an element
Click on a content element near where you want to insert the video.
Click "Add Content"
Select the insertion position (before, after, inside, etc.).
Select "Video"
Choose "Video" from the content type list in Add Content.
Enter the video URL
Enter a YouTube video link or a direct URL to a video file.
Set playback options and size, then click "OK"
Supported Video Formats
YouTube
https://www.youtube.com/watch?v=xxxxx
Direct link video
MP4, WebM, etc.
The video URL must start with http:// or https://. Please enter a valid link address.
Playback Options
In the "Playback Settings" section of the video insertion dialog, you can configure the following options:
Autoplay: Automatically starts playing when the page loads.
Mute: Turns off the video audio. Automatically enabled when autoplay is turned on.
Loop: Automatically replays the video after it ends.
Hide controls: Hides the playback controls such as the progress bar.
Size Settings
In "Display Settings", you can set the width and height of the video:
Pixel specification: Enter only numbers (e.g.,
380).Percentage specification: Enter numbers followed by
%(e.g.,100%).Click the 🔒 icon to lock the aspect ratio.
Editing Videos
Inserted video elements can be re-edited from the toolbar.
Steps
Click the video element
The "Edit Video" button will appear in the toolbar.
Click "Edit Video"
The video editing dialog opens with the current settings automatically filled in.
Modify the settings and click "OK"
You can modify the video link, playback options, and size separately.
Adding Content and Adjusting Position
Adding Content
With content addition, you can add new content such as text, images, and videos.
(Examples)
Add text such as "7-day return guarantee" near the "Add to cart" button
Add an image banner for links to new articles
Add important CTA in the middle of the page
Steps to add content
Click on the content near where you want to add content. Use the layer selection feature displayed in green to select the appropriate layer. We recommend selecting the parent layer.
WARNING Note: There are some points to consider when adding content and adjusting styles.
For details, please also see "Tips for adding content".
Click "Add Content" and select where you want to add the content.
You can add the following 5 types of content:
Heading text
Body text
Image
Button
HTML
WARNING There are some points to consider when adding content and adjusting styles.
For details, please also see "Selecting the appropriate layer".
The added content can be edited from the toolbar in the same way.
Duplicating and pasting content
If you want to add the same content as existing content, you can copy it from the "Create copy" icon in the toolbar.
Then, click the "Paste" icon to paste the copied content to another location on the page.
The pasted content can also be edited from the toolbar in the same way.
Deleting content
Select the content you want to delete and click the trash icon on the far right of the toolbar to delete it.
Adjusting content position
Select the content you want to move and click the following icon in the toolbar.
The following popup appears.
Click the destination and click the move button.
Select the specific position.
💡 Depending on your site's structure, you may be able to move it successfully. For details, please refer to here.
Editing Links
From the link icon, you can edit "Enable click action" and "Enable event measurement".
Elements with no links have "Enable click action" turned OFF by default. Please slide it ON and configure the click action.
If a link is already set, please edit the contents of the toolbox.
The same applies to event measurement.
Enabling click action
This is a feature to set links to elements. You can specify the action after clicking from the action type.
Action type
Link transition: Navigates to the specified URL
Open LINE Official Account: Enter the LINE Official Account URL to navigate to the page
Make a call: Calls the specified phone number (Example: 03-1234-5678 *15 character limit)
Copy text or URL: Copies the specified string to the clipboard (Example: coupon code, etc.)
File download: Downloads the file specified by URL
Execute code: Executes the specified JavaScript code. If the input field is small when configuring JavaScript code, you can expand it using the arrow in the bottom right.
For use cases of click actions, please also refer to related articles.
Enabling event measurement
When you turn ON "Enable event measurement", you can measure clicks on the target element as events. You can either add to an existing event or create a new event.
Steps to configure events
Turn ON "Enable event measurement"
Select or create a new event If you are already measuring events in Ptengine Insight, you can select from the dropdown (Note: it will not be linked to Experience if the measurement count is less than 1). If you want to set a new event, click Create New. Events set here will be measured regardless of device.
If you want to set the created event as an evaluation metric for the experience, you can register it separately as a goal in Experience.
WARNING Experience goals are aggregated on a UU (unique user) basis, while Insight events are aggregated on a session basis, so the numbers may not always match.
When creating new
About event name New events require an event name of your choice. If you set the same event name that is already set in Insight, the current measurement target will be added to that event.
About linking to Insight Events created here can also be checked in the Insight event analysis screen. You can check the list of configured events in "Coding Events" on the event settings screen.
About modification/deletion
Even while delivering the experience, you can stop event measurement by turning OFF "Enable event measurement". If you want to delete events by name, please contact chat support with [Request to delete events created in the experience] and provide the target event name.
When using existing events
If there is an action in an existing event that you want to add to the measurement, select the event name from the dropdown. Events created in Insight will be linked to Experience if the measurement count is 1 or more. If the existing event name is not displayed, please check the measurement count in the Insight event analysis screen.
SUCCESS Events created through this action measurement can be used not only as goals or delivery user groups for experiences, but are also linked to Ptengine Insight, allowing them to be used for numerical verification and as segment conditions.
Preview
During creative creation, use the preview feature to confirm proper display.
You can preview within the editor.
Other Features
Editing HTML
If you want to edit with more freedom, you can edit the source code from the "Edit HTML" icon in the toolbar or "Code mode" in the menu bar. For details, please see "Configure experience in code mode".
▼Toolbar
▼Menu bar
Page Edit History
All page edit history can be checked from "Edit History" in the menu bar. When clicked, the content changes and additions are displayed in a list on the left, and you can compare the differences before and after on the right.
Clicking on each change history will guide you to the changed location (excluding deleted content).
Also, by clicking the delete icon, you can undo that change and return to the original.
Screen operation mode
If you want to edit content in accordion menus (interactive content) that only display when clicked on the page, use "Screen operation mode".
After switching to screen operation mode, when you click to display the content, you can "return to edit mode", so you can continue editing the page.
最終更新