This article covers: Adding and removing blocks, changing text and images on a page, and saving as a front-end layout.
For creating a new page, see How to Add a Page and Publish. For previewing and going live, see Blocks, Preview, and Publish.
There are two levels of editing for pages, please clarify first:
| Level | Location | Common Actions |
|---|---|---|
| Page Details | Under a specific page in /admin/pages/ | Title, URL slug, detailed fields, SEO, publish |
| Full-Screen Block Editor | Bottom bar of details Open Page Editor | Add/remove/reorder page blocks (main visual, text and image, list, etc.), what you see is close to the front-end |
Not all templates provide a full-screen block editor; if the button does not appear, the page is not a "customizable block" template, please maintain content in the details page.
Who can use it?
By default, only owners (and elevated tech assistants) can open and save.
If website editors do not see the entry or are prompted with no permission when saving, please have the owner revise or adjust the collaboration method.
Open and Save (Owner)
- Page Management Click on the page you want to edit.
- At the bottom, click Open Page Editor.
- After entering fullscreen:
- Add from Block Library...: Open the block library and select a block to insert.
- Click on the block, and in the sidebar, modify text, images, and buttons. You can insert Dynamic Fields next to text and custom URLs: website name/slogan, Contact and Social are pre-filled, as well as (when member login, e-commerce, or subscription is enabled) login/register/forgot password paths. Registration will link to the frontend
/signup. - Gear Block Settings: Background, display conditions, etc. (varies by block).
- Section Navigation Points: There is a collapsible 'Section Navigation Points' panel at the top of the block list (the switch on the right can be toggled to open directly). After opening, expand the panel, check the Display in Section Navigation for each block within the same section, and fill in the navigation label (separate from anchor ID, not in individual block settings). You can choose left or right alignment, whether the label should always be displayed, dot/short capsule/short dash, and Primary Color or Accent Color (all follow Website Style). The sidebar will only appear on the frontend when the computer width is sufficient and at least two blocks are checked.
- Background: Optional none / solid color strip / photo. For solid color strips, except for light background, white, dark reverse, and brand color wash, you can choose custom color (click the color block to open the color palette or input
#RRGGBB). - Photo Mask: You can click the default color swatches, or similarly customize the mask color using the color palette / color code. The colors in the swatches for Primary Color and Accent Color will follow the colors of the Website Style; if you later change the website style, the mask will change accordingly. Image masks (such as the mask color in Hero image text columns or dual-column image text) also have these two color swatches.
- Timeline / Timeline (Entry List) / Path Flow: In the gear settings, you can toggle Scroll Progress Animation (enabled by default). When enabled, as visitors scroll down, the connecting lines will fill with the accent color; if the timeline exceeds the width horizontally, it will fill color while sliding left and right. When disabled, it will maintain the original track without filling color. During reduced motion (system 'Reduce Motion') or in editor preview, it will fill completely at once.
- Timeline / Timeline (Entry List): In the gear settings, you can change the Arrangement (vertical or horizontal). When horizontal, multiple entries can be visible at once; if the items exceed the width, left and right arrows will appear, and you can also slide along the track without disrupting the sequence.
- Drag to adjust the order of blocks up and down.
- You can collapse cards to avoid expanding too many at once.
- Click Save Block in the bottom bar (it will show 'Saving...' while saving). Upon success, it may prompt 'Block settings saved'.
- If there are unsaved changes, you will be reminded when leaving—please save before closing.
Unsaved changes will not appear in the preview or frontend.
What to select from the block library? (High frequency)
The actual selectable types vary by site and enabled modules. First, recognize these names (consistent with block library labels):
| Block Name | Purpose |
|---|---|
| Latest News (Automatic) | Automatically lists published news. You can set the number of items, layout (card / horizontal / button list), sorting, and pagination. The cover is fixed at 4:3. When displaying categories is enabled, the category label appears above the title (not overlaid on the cover image). Visitors can filter by category, and also add "title and summary" (display method selected as "keyword search"): keywords will match the title and summary, translations in other languages also count. If there are no matching articles, the block and filters will remain, showing no matches. For a complete list page, please insert this block on an independent page; "more" can point to that page. |
| Custom Content List (Automatic) | Automatically lists published entries of a specific custom content type. You must select Content Type; you can also set cover image fields, summary fields (can choose built-in "summary" or custom text/multi-line text/rich text), tag fields (displayed above the title; dropdown/single choice/multiple choice will show option names), additional information fields (can select multiple fields, displayed line by line below the summary, e.g., "Region: Taipei City" "Expertise: Civil, Family"; can change to display only values), and filters. Static filters can select Content Relations: after locking the corresponding CPT entry, only items linked to it will be listed (see How to set content relations). Visitors can filter by category or custom fields, and also add "title and summary" (display method selected as "keyword search"): keywords match the entry title and built-in summary, translations in other languages also count, but do not match text saved in custom fields. When there are 0 entries for visitor filters, the block and filters are still retained. Block settings can toggle Entry Button: when off, the entire card can be clicked; when on, only the button can be clicked. If the entry has "internal page link" turned off, you can fill in list link and optional button text (when button text is filled, the list will display that button). |
| Contact Form (Embedded) | Displays a form within the page. You must select the form to use. See How to embed a page. |
| Contact Information (Automatic) | Reads the rows from Contact and Social. You can check which items to display; if none are checked, all filled content rows will be displayed. |
| Contact Information and Form | Desktop has a two-column layout: one side for contact information, the other for the form. Block settings can change the position of contact information to left or right. On mobile, contact information is on top, and the form is below. |
| Booking Form (Embedded) | You must select Booking Item. See How to add booking items. Some buttons can set Open Booking Popup. |
| Video | Place a centered video (YouTube, Vimeo, or MP4 URL) in the middle of the page, with options for title, description, small text below the video, and buttons. See the "Video" section below. |
| Timeline | Lists milestones in chronological order (icons, dates, titles, descriptions). Block settings can switch between vertical or horizontal; when horizontal exceeds width, use left/right arrows or swipe to view. You can also toggle Scroll Progress Animation (default on). Entry data can also select Timeline (Entry List). |
| Path Flow | Connects steps with numbers to explain the process, without card borders. Horizontal on computer, vertical on mobile. Suitable to follow service cards, avoiding stacking another row of cards. You can add a primary button and a secondary button, and the gear can toggle scroll progress animation (default on). |
| Process Steps | Presents steps in numbered cards horizontally, adjustable for the number of columns on desktop. If the previous block is already a card, using Path Flow is less repetitive. |
| Foreclosure Case List | Selected foreclosure list. For complete filtering, please link to /foreclosure. See Foreclosure Overview. |
| Product List (Automatic) | Automatically lists published products. You can filter by category, number of items, and layout. For a complete store, please use /shop. |
| Product Categories | Automatically lists store category cards (cover can be selected). Clicking a card will lead to the store list of that category. Display range can be selected as only main categories, only subcategories, or all; block settings can enable load more/page number pagination. See How to manage product categories. |
| Product Category First Screen | Three independent cards close to full width (with margins on the sides): left column for main and subcategories (all expanded, can display category icons), middle for a carousel (hovering over a category on desktop will list product names by subcategory, clicking names leads to the single product page), and right side for custom quick links. On mobile, there is no hover preview; clicking a category will directly enter the store. See How to manage product categories. |
Many blocks have kickers and block titles; leaving them empty will not display that row on the frontend.
List-type blocks, automatic entry blocks, and galleries can add a "more" link next to the title: both the "more" text and link fields must be filled for it to display. Featured Cards and Image Service Cards add a centered "more" button below the card, and similarly, both fields must be filled for it to display.
The number of columns on desktop (1/2/3/4) only affects the desktop view. The number of columns is fixed according to settings and will not automatically decrease if there is only one entry.
For any block that can adjust the number of columns on desktop, there is also mobile/tablet arrangement, with the default being standard (1 column on mobile, up to 2 columns on tablet). When changed to compact, mobile changes to 2 columns, tablet changes to 3 columns, and will not exceed the number of desktop columns. Card grids and horizontal lists can be adjusted; button lists do not have this option. Partner Lists are set to compact by default. Data Highlights do not have a desktop column count, and you can add or remove number rows (up to 8 sets); with 3 sets, the tablet remains at 3 columns, and with 4 sets or more, the desktop displays 4 columns in a row, and the tablet up to 2 columns. The same option only changes for mobile: standard 1 column, compact 2 columns. Galleries in a carousel and automatically scrolling partner lists will not show this option.
For blocks using the horizontal list layout (latest news, custom content list, related content list, foreclosure case list, product list, card (item list)), you can also adjust the number of columns on desktop in the block settings, with a default of 1 column (same as before). When set to 2 or more columns, each entry will still display with the image on the left and text on the right, and the image will automatically resize according to the column width. The number of columns for card grids and horizontal lists is recorded separately, and switching layouts will not affect each other; the card grid for foreclosure case lists and product lists can now also adjust the number of columns (default is 3 columns).
The review carousel and review carousel (item list) can also adjust the number of columns on desktop in the block settings, with a default of 1 column (same as before, displaying one centered at a time). When set to 2 or more columns, multiple reviews will display side by side on desktop, scrolling one at a time; on mobile, it will still display one at a time, and on tablets, a maximum of two. If the number of reviews does not exceed the number of columns (for example, 3 reviews with 3 columns), they will display side by side without scrolling.
The partner list can also adjust the number of columns on desktop in the block settings, with a default of 4 columns. For static display, there is also a mobile/tablet arrangement, defaulting to compact (2 columns on mobile, 3 columns on tablet, and not exceeding the desktop column count); the more columns there are, the smaller each logo will be. When automatically scrolling horizontally, this option will not be displayed, and 4 columns will maintain their original size; changing to 1-3 columns will enlarge the logos. You can also toggle the logo names: when disabled, text will not be displayed below the images; when enabled, each logo will show image description, and you can also fill in a display name (if a display name is provided, it will be used; otherwise, the image description will be used).
Blocks related to modules (products, foreclosures, reservations, etc.) are more meaningful only when that functionality is enabled, and the block library may also hide according to the module.
Image
Prioritize selecting or uploading from the media library, see Upload and Select from Media Library. Pay attention to the suggested dimensions next to the fields. Logos with transparent backgrounds are harder to blend on colored backgrounds.
Double-column image text, featured image text column, Hero image text column, data image text column: You can adjust the media size (smaller image/equal size/larger image) just below the 'media ratio'. This refers to the width of the image column on desktop, not the aspect ratios like 4:3 or 16:9. If the media is placed below the text in Hero, the size will change to the maximum width of the image. Mobile will still be a single column full width.
In double-column image text and featured image text column, in addition to the main button, you can also add a secondary button: fill in the secondary button text below the main button field, then select a link, form popup, or reservation popup. If the text is left blank, it will not be displayed. The two buttons will be arranged in the same row, and if the screen is not wide enough, they will automatically wrap.
To display an image or video on one side and list key points with icons on the other, select Featured Image and Text Columns from the block library. The layout is the same as the two-column image and text format (media can be on the left or right, and can be changed to a video). You can add multiple icon + title + description entries on the text side; this is different from the Featured Cards in the full-page grid, as the featured row will follow the same block as the image and text.
Hero Image and Text Columns: Image aligned to the edge of the screen.
The default image is placed within a card layout with rounded corners and an outer frame. To extend the image to the edge of the screen and fill the entire height of the hero section, click the gear icon Block Settings → Media Presentation, and select Align to Screen Edge (Full Height).
| Device | Frontend Effect |
|---|---|
| Computer | The image aligns to the left or right edge of the screen (depending on Media Position), from the top to the bottom of the hero section, with right angles and no outer frame; text remains aligned to the layout. Media Size still controls the image width. Media Ratio determines the minimum height of the hero section: for example, selecting 4:3 means the hero section height is at least 3/4 of the image width; vertical ratios (2:3, 4:5) will make the hero section very tall. If the text is taller than the image, the hero section will adjust to the text height, cropping the image to fill. |
- When Media Position is set to Below, it does not take effect and maintains the card.
- When the media type is a YouTube or Vimeo video, it does not take effect (videos cannot be cropped, and there will be black edges at the sides); directly uploaded video files can align to the edges.
- The image will be cropped to the height of the hero section, so please place important subjects in the center of the frame and avoid placing them too close to the edges.
Image gallery, image carousel: Click on the image to preview or link to another page.
These three blocks are set to display only by default (clicking the image will not trigger any action). To allow visitors to click on the image, please enable it in the editor; the same image cannot have both 'preview' and 'link' activated at the same time.
| Block Name | Where to Set | Frontend Effect |
|---|---|---|
| Gallery | Each image's click image | No action (default) / Open image preview (pop-up large image, can switch left and right) / Link to page/URL (link field will appear, can choose internal page or custom URL) |
| Gallery (Item) | Block's click image to open preview | Off (default) / On. Images come from the 'Gallery' section of the item or page, cannot set a link for a single image. See How to Design Detail Page Layout for details. |
| Image Carousel | Each image's click image | No action (default) / Open image preview. The buttons below the image (link page, form pop-up, appointment pop-up) can still be used simultaneously. |
| Image and Text Carousel (Item List) | Block's click image to open preview | Off (default) / On. Images come from the repeated list of items or pages (image and text cards), buttons/links below the image can still be used simultaneously. |
The preview window is similar to product pages or foreclosure case images: can switch left and right, and close. When the preview is open, the carousel will pause automatic playback.
Hero Carousel does not have 'click the entire image to preview'; please use the buttons overlaying the screen to link to other pages.
If an image in the gallery of an old page already has a link filled in, it will maintain the clickable link and will not suddenly change to preview. If changed to 'no action' or 'open image preview', it will no longer follow the old link.
Gallery, Gallery (Item): Title below the image
Both gallery blocks can display a line of title below each image. The grid will show below the image on the card, and the carousel will show below the image frame (following the currently displayed image). When the image preview is opened, it will also display below the large image.
| Block Name | Where to Set | Description |
|---|---|---|
| Gallery | Each image's Image Title (optional) | Directly input the text to be displayed; leave blank to not display. For multilingual sites, you can fill in each language tab separately. |
| Gallery (Item) | Gear Block Settings's Image Title | Not displayed (default) / Display gallery's alternative text. The title comes from the Alt text of each image in the gallery, and the same text will be displayed in all places using this image. |
Image Library (Entry) Notes:
- When uploading images, the Alt text will automatically be populated with the file name (e.g.,
IMG_1234). Please change the Alt text to the desired title in the image library window during Upload and Select from Library, otherwise the file name will appear on the frontend. - Alt text is not language-specific; each language on a multilingual site will display the same text.
- If an image does not have Alt text, the title will not be displayed below that image.
Content Tabs, Image and Text Carousel: Images on the left or right
The following sections are set by default with text on top and images below (for carousels, images are on top and text is below). To change to side-by-side, click the gear for Block Settings:
| Block Name | Setting Name | Options |
|---|---|---|
| Content Tabs, Tabs (Entry List) | Tab Image Position | Text Below (default) / Image on Left / Image on Right |
| Image Carousel, Image and Text Carousel (Entry List) | Image and Text Position | Text Below Image (default) / Image on Left, Text on Right / Image on Right, Text on Left |
- Side-by-side only takes effect on tablet and desktop widths; on mobile, images are always on top and text is below.
- When a page contains only images or only text, that page will automatically be arranged in a single column.
- In a carousel, if there is at least one image with a title, description, or button filled in, the previous/next buttons will move outside the image: when the image is on top, they will be placed to the left and right of the text, and when side by side, they will be positioned at the far left and right of the entire row; the page number dots will be centered below the text (when side by side, they will be centered below the entire block). On mobile, the buttons will be placed on either side of the page number dots. The Button Position setting in the block (top/middle/bottom) will determine the alignment of the buttons to the top, middle, or bottom of that row.
- When all images in the carousel have no text (pure image carousel), it will maintain a single column, and the buttons will still overlap the images.
- If the image is only half-width, a 21:9 ratio will appear very flat. When changing to side by side, it is recommended to adjust the image ratio to 16:9 or 4:3.
Content Pages each have a Content Title (optional): displayed at the top of the page content, separate from the tab's 'Page Title'. Page (Item List) must display the content title, and the repeated list must have a text field with the code heading, see How to Design Detail Page Layout.
Video
If you want the video to take center stage (product introduction, customer interviews, event records), select Video from the block library. The video will be displayed in the center, with a small title, heading, and description above, and a line of small text and buttons below. To have images and text side by side, use Two-Column Text and Image or Featured Text and Image Columns, and set the Media Type in the settings to video; to have the entire hero section as a video background, use Hero Video Background.
- Paste the YouTube, Vimeo video URL, or the URL of an MP4 file in the Video URL field. YouTube Shorts URLs are also acceptable.
- Select a cover image as needed. YouTube will automatically use the video thumbnail if no cover is selected; for Vimeo and MP4, only the play button will be visible before playback.
- The title, description, small text below the video, and buttons can be left blank; the front end will not display the blank row.
- Click the gear for Block Settings to adjust the layout:
| Setting | Options |
|---|---|
| Video Width | Narrow / Medium (default) / Wide (same width as content) |
| Video Ratio | 16:9 (default) / 4:3 / 1:1 / 9:16 (vertical / Shorts) |
| Text Alignment | Center (default) / Left |
| Autoplay | Off (user clicks play) (default) / On (autoplay muted) |
| Show Control Bar | Show (default) / Hide |
- By default, the YouTube/Vimeo player will only load and play (with sound) when the visitor clicks the play button, making the page load faster. When autoplay is enabled, the video will play muted when it enters the screen; browsers require autoplay to be muted.
- When 9:16 is selected, regardless of the video width setting, the video will maintain the vertical width for mobile, preventing it from becoming excessively tall on computers.
- When the video URL is not filled in, the editor preview will show a prompt box; the front end will not display the entire block (title, small text, and buttons will also be hidden) until the URL is filled in and saved.
The video modes for Two-column Image and Text and Featured Image and Text Columns are the same, showing the cover and play button first, loading the player only after clicking. The previously set cover, autoplay, and control bar settings remain unchanged.
Secondary button color
The second button (secondary button) is set to the outline style by default. To change it to a solid color, such as LINE green with white text, find Secondary button color below the text and link fields of the secondary button.
| Block Name | Where to Set |
|---|---|
| Hero Image and Text、Hero Video Background、CTA Banner、Two-column Image and Text、Featured Image and Text、Video | Below the secondary button field in the block content |
| Hero Plain Text | Same as above; appears only when Action Bar is set to Button |
| Hero Carousel | Each slide can be set individually, allowing for different colors on each. |
| Option | Frontend Effect |
|---|---|
| Default (Outline) | No setting, retains the original outline button |
| Primary Color / Accent Color | Follows the color of Website Style; if the website style changes, the button will change accordingly |
| LINE Green | LINE official green background with white text |
| Black / White | The white button will automatically have a light-colored outline to avoid being invisible on a white background |
| Custom Color Code | Click the color palette or enter #RRGGBB; the button text will automatically use black or white depending on the background color's darkness. |
Difference with 'Synced Blocks/Templates'.
When you want to share or copy a complete set of blocks across multiple pages, see Overview of Synced Blocks and Templates. For daily changes to a specific page, simply add from the block library and select Block Type.
How to verify.
- After saving the block, preview it to check both desktop and mobile widths.
- Open the published page without traces, ensuring the block order matches the content.
- Dynamic list: Corresponding messages/items must be published, and the blocks must be categorized or typed correctly.
- Form block: Try submitting one entry, it should be visible in the inbox.
Common Issues
| Situation | What to do |
|---|---|
| No "Open Page Editor" | Not a customizable template, or not the owner. |
| Save failed / No permission | Editors cannot save in full-screen editor. Please have the owner operate. |
| Block library has no messages / product list / product categories | Module not enabled, or the block is not applicable to this page role. |
| List block is empty | No published content yet, wrong category/type selected, or filters are too strict. |
| Changes not reflected on the front end | The page is still a draft; or viewing a different site/cache. See Published front end still shows old version. |
| Click image does not open preview | The image is still set to "no action" (default). For galleries, change "Click image" to "Open image preview"; for galleries (items) or image-text carousels (item lists), enable "Click image to open preview". Images set with a "link" will redirect instead of opening a preview. |
| Gallery (item) title shows as filename | Title is taken from the gallery's Alt text, which defaults to the filename upon upload. Please change the Alt text of the image in the gallery window to the desired title. |
| Video block completely missing on front end | Video URL not filled in. The entire block will be hidden without a video URL; please paste the full URL (e.g., https://www.youtube.com/watch?v=…), save, and refresh. |
| Video has no cover, only play button | Vimeo and MP4 do not automatically fetch thumbnails; please select an image for Cover Image. |
| Cannot find image link field | For galleries, first change "Click image" to "Link to page/URL" for the link field to appear. After selecting the link, you can fill in the internal page or URL (no need to fill in the URL first to select the link). |
For instructions on uploading PDF/ZIP in the download area, see Blocks, Preview, and Publish.