Swing2App Manual
Help CenterFAQContact UsBuild an app
  • Swing2App
  • Swing2App Update
  • FAQ
    • FAQ(Frequently Asked Questions)
      • Frequently Asked Questions (FAQ)
      • App Creation FAQ
      • App Operations & Features FAQ
      • App installation and download FAQ
      • Registration and Login FAQ
      • App Preview FAQ
      • Swing Shop FAQ
      • Billing FAQs
      • Paid App Passes & Tickets FAQ
      • Paid usage and uploading FAQ
      • Unlimited Usage and Package FAQ
      • Push sending FAQs
      • PlayStore FAQ
      • App Store FAQ
      • AdMob FAQ
      • Affiliate Program FAQ
      • Customization FAQ
  • Manual
    • App production manual (V3)
      • Start App Creation With MakerV3 Screen
      • Manual on How to Create an App In MakerV3 Screen
      • STEP1 Basic Information
      • STEP2 Prototype
      • STEP3 Page
        • How to Create a Home Screen For an App
        • Registering a menu icon image
        • How to use: Menu Exposure Settings
        • Set menu settings: Access permissions
        • Page Design - UI KIT
        • Page Design - eStore Page
        • Page Design - eStore Deals
        • Page Design - Product Category
        • Page Design- Page Templates
        • Page Design - Image Page
        • Page Design - HTML Editor
        • Page Design - Sign Up, login & Settings Page.
        • Page Design - Search Posts Page
        • Page Design - View Favorite Page
        • Page Design - View Coupons Page
        • Page Design - Share Your App Function
        • Page Design - App Introduction Page
        • Page Design - Admin Chat Page
        • Page Design - Chat List Page
        • Page Design - Surveys Page
        • Page Design - View My Posts Page
        • Page Design - Attendance Check Page
        • Page Design- Web Link
      • STEP4 Complete App Creation
        • How to create an additional app
        • How to update an app
        • App launch screen by update type
    • App production manual(V2)
      • App basics
        • Guide to create an app
        • App Update Type And Method
        • App Launch Screen Update Type
        • Push or WebView version creation method (super simple app creation)
        • WebView App Manual(production and operation)
        • Push App Manual(production and operation)
        • Remove Push App Toolbar
        • App Production
        • Guide to create App Icon Image
        • Guide to Create an Idle Screen Image
        • Image Editing Tool
      • Design Theme
        • Prototype UI Design
        • App Main Design Style
        • App Navigation Styles
        • Applying Slide Prototype
      • Page Menu
        • Page Menu – Main Menu Management
        • Creating an App Home Screen
        • How to use Web Link
        • Home screen: Applying App Introduction Page
        • How to use file attachment
        • How to use the image attachment
        • How to use Product category
        • How to use Weblink-linkeditor
        • How to use User Page
        • How to create an Image Page
        • How to create a web template page
        • How to create HTML editor page
        • Swing2App Page – Signup, Login, Settings
        • Swing2App Page – Search Post
        • Swing2App Page – View Favorites
        • Swing2App Page – View Coupon
        • Swing2App Page – Share App
        • Swing2App Page – App Introduction
        • Swing2App Page – Admin Chat
        • Swing2App Page – How to read my article
        • Swing2App Page - Survey
    • App Production Application TIP
      • Sending a push using the push API
      • Insert GIF image
      • Create a Flash style home screen
      • Change App Loading Icon
      • Set device mode (switch app screens)
      • How to use the app review button
    • App operation manual
      • Bulletin board management
        • Create a bulletin board
        • Bulletin board type, design style
        • Bulletin Board – How to Enter Posts
        • Bulletin Board – Post Schedule Settings
        • Set post detail options
        • Bulletin Board – How to Attach Files
        • Register video post(how to register a video)
        • Bulletin Board – How to Attach Music Files
        • How to enter post comments and comments
        • How to set up Bulletin Board Permission
        • Bulletin board authority setting
        • How to create a Form in Bulletin Board
        • How to write a bulletin board
        • How to use the list screen and creation screen
        • How to set up a bulletin board post alarm
        • Set Up a Board Administrator
        • Google Map Bulletin Board
        • Google Map Bulletin Board Advanced setting
        • HTML Editor Writing
        • Report and manage posts
        • Block posts
        • Create bulletin board by membership level
        • Bulletin board thumbnail image registration
        • Search Post Functions
        • Post Management Options
        • How to use the bulk registration bulletin board
        • Copy Bulletin Board
        • Copy Post
        • Move a post
        • How to delete bulk posts
        • Group Chat
        • Create a Secret Bulletin Board (1:1 Customer Service)
        • Create a link for a post
        • How to Use Calendar
        • Calendar Application - How To Use
        • How to create and register a stamp
        • Stamp application: Issue coupons upon completion of stamps
        • How to use the bulletin board header
        • Using 2 hash-tags Options
        • How to use hashtag search option
        • Download Posts
      • Service management
        • How to use Pop-up
        • Check-ins
        • Surveys
        • Resource Management – Capacity Management
        • Coupon Management: Create and Issue Coupon
        • How to use Admin Chat [1:1 Chat]
        • Chat Administrator Page – Chat List
        • Chat Administrator page – Chat settings
        • How to use chat list
        • Unified Notification Settings
        • App Policy Management – App Subscription Policy
        • App Terms of Use And Privacy Policy
        • App Policy Management-Membership Form
        • App policy management – How to set up a membership completion message
        • Membership Form-ID Setting
        • App Terms and Conditions, Privacy Policy
        • Create a Private App
        • App string management
        • Link Wizard
      • Push & Member Menu
        • Send push
        • Send Push from Push Version App
        • Push Posts
        • Display messages after getting push notifications
        • Delete or Mark as Read Push Notifications
        • Push history
        • Member Inquiry - Check Member Information
        • Member Inquiry - Setting up an Associate Administrator
        • Member Inquiry - Create User Account
        • Setting up an App Administrator
        • Permission Group Settings-Membership Rating
        • Admin Screen: Change App member's name
        • How to use Push device management
      • Analytics
      • Version control
        • Version management-App production and market registration history
        • How to apply for App Store Upload
        • How to apply for Google Play Store Upload
        • How to apply for a mobile web upload
      • Payment
        • Introduction of paid products and payment methods
        • Payment-How to use my payment status
        • How to Use 1000 SMS Tickets
        • WebView Lifetime Paid App
        • PushOnly Lifetime Paid App
        • How to use mobile web registration
        • Budget package
        • AdMob Power Package
        • Large Storage Packages
        • Online Stores – Coupon
      • Full Search Function
    • SwingShop
      • Apply for Swing Store
      • Swing Store Product Type
      • Introduction of pages provided by Swing Shop
      • How to Apply a Swing Store Menu to your App
      • Swing Shop - Shopping Mall Main Page How to Use
      • Shopping Mall Main Page Slide Image
      • Store Management - Basic Information Settings
      • Store Management - Shipping Management
      • Product Management - Set how to receive goods
      • Product Management - Product Category Registration
      • Store Management-Policy Settings
      • Product Management - Physical Product Registration
      • Product Management - Digital Products: PDF File Registration
      • Product Management - Digital Products: Video Files Registration
      • Product Management-Digital Products: Authorized Sales
      • Product Management-Digital Products: Coupon Registration
      • Product Management-Reservation system product registration
      • Product management - Reservation system, Time reservation product registration
      • Product management-Reservation System Operation TIP
      • Product Management - Product Post Management
      • Product Management- Product Inquiry, Reservation Product Inquiry
      • Product Management - Product Exposure Management
      • Order Management
      • Reservation Order Management
      • Store Statistics
      • Swing2App Page-shopinfo
      • Swing2App Page-Search
      • Swing2App Page - Category List
      • Swing2App Page-mypage
      • Swing2App Page - Cart
      • Swing2App Page-digital products
      • Product Modification - Modify a registered product
    • Affiliate program
      • How to apply for affiliate program
  • Web App - Webview, Push
    • Web App - Webview, Push
      • Swing2App WebView App
      • Swing2App Push App
      • webview app manual
      • Pushapp manual
      • How to create a push app or webview app easily
      • Push-app toolbar
      • How to use the first run address in webview and push app
      • WebviewApp basic settings and advanced setting options
      • Push App Toolbar - Introduction: How to Use and Functions
      • Registering a Push Notification Icon Image
      • Progress Bar Color Settings
      • Remove progress bar (not in use)
  • App Guide
    • How to use Swing2App Preview
    • Application operation
      • How to convert and use paid apps.
      • How to install APK file on your phone
      • How to install apps by sharing
      • Free app conversion method after Paid period ends/expires
      • Download the app after accessing the mobile Swing2App site
      • Download the app using the app installation link address
      • If you can not install the free version of the app (APK file), please check!
      • If you can not install the paid version app (APK file), please check!
      • Find App Password
      • Registering and changing your app profile picture
      • How to re-register with the same ID after leaving the app
      • Share app
      • App – Share your Bulletin Board Posts
      • How to use the App Administrator menu
      • App Administrator menu: Chat
      • App Administrator Menu: Registering Stamp
      • App Administrator Menu: Use Coupon
  • STORE
    • Play Store
      • How to create a Google Developer Account
      • Create a Google Developer - Business Account
      • Google Developer Account Identity Verification
      • Launching Play Store App
      • Setting up Play Store app auto-updates
      • Transfer your app to another developer account on the Play Store
      • How to change the name of Play Store Developer
      • Delete Play Store app
      • How to use Google Help Center
      • Issuing Google Maps API Key
      • Invite a Play Store Developer Account
      • How to get app updates released on the Play Store
      • Launch the Play Store Private App (Alpha release)
      • Check Play Store App Installs
      • Reply to Play Store app reviews
      • Play Store Developer Page
      • Play Store prior notice
      • Linking Play Store Privacy Links
      • Play Store App Search TIP
      • How to restore Play Store app
      • Update the Play Store App
    • App Store
      • App Store Apple Developer Account Registration
      • Check app store app downloads
      • How to use the App Store Customer Center
      • Delete apps from the App Store
      • AppStore App Rejection Cases
      • App Store TestFlight
      • How to invite Swing2App account on App Store Connect and share information on App Store Upload form
    • AdMob (Google AdMob Ads)
      • Admob Banner Ad Frequency Settings
      • Admob Operation Precautions
      • How to apply AdMob plug-in
      • AdMob Plug-in check
      • What is AdMob plugin setting?
      • How to join AdMobs, create an Ad Unit ID
  • Developer Document
    • Server Side API Specifications
      • Sending a push notification By API
    • Webview (Webview, Push only) Development tool
      • Implementing Google and Facebook Login in WebView
      • Website Member Integration Guide
        • Wix Website User Integration Guide
        • WordPress Website Member Integration Guide
      • Javascript API Documentation
  • Policy
    • Store Policy
    • Limit on the Number of Devices for Free User
    • Swing Store Terms and Conditions
Powered by GitBook
On this page
  • Apply HTML Editor Page (app launch screen)
  • STEP.1 Creating an HTML Editor Page
  • STEP2. Creating an HTML Editor Page
  • STEP.3 Applying HTML Editor Page to App
  • STEP4. HTML Editor Page Creation TIP
  • STEP.5 Editing HTML Editor Pages (How to Modify**)**
Edit on GitHub
  1. Manual
  2. App production manual (V3)
  3. STEP3 Page

Page Design - HTML Editor

Last updated 1 year ago

What is an HTML Editor Page?

One of the features provided by the Swing2App user page is a menu that allows users to create their own web pages.

Just like typing a post on a blog or café, you are free to place and create articles and images.

You can apply a variety of web links, videos, text effects, and more.

The main feature is that the user is free to create whatever style they want.

Editor Page Styles:

HTML editor pages can be created in any style you want.

1) You can also insert an image and make it look like an image page.

2) Just like writing a blog post, you can freely place posts and images, and apply video or web link movement.

Therefore, if you think about how to build it in advance, and then work on it, it will be easier to use.

3) You can create an unlimited number of HTML editor pages!


Apply HTML Editor Page (app launch screen)

It's an HTML editor page applied to the official Swing2App app.

We'll refer to the editor page above to make the production the same style.

STEP.1 Creating an HTML Editor Page

HTML editor page can be created in the App MakerV3 screen.

1)Go to STEP3 Page

2)Under Page Design option, select [HTML Editor] feature.

3) Click on the [+] button

Clicking [+] Add new page button will redirect you to the HTML Editor Page editor Tool screen.

Below I'll show you how to create an editor page and how to apply it to your app after it's built.

STEP2. Creating an HTML Editor Page

***1.**HTML Editor Page Editor

The image above is the HTML Editor Page Maker screen.

HTML editor pages have the same style as the editor writing used to write posts.

It's the same as how you write a post, so you can use it without difficulty!

There's a screen where you can write like a blog or a bulletin board.

If you look at the top, you'll find a bar of different optional features for production and writing.

The page name is displayed as the page title on the app launch screen.

Attachments such as images and videos, regular files, and web links can all be attached.

And since you can customize the text, you can specify options such as font, color, etc.

In addition, you can apply a variety of styles through the editor option bar menu.

So let's work on it like the editor page of the official app shown above!

2. Register the video (enter YouTube URL)

1)For videos, please select the [Insert Video] icon button in the option bar.

2) Enter the video URL.

At this time, you can enter the video URL registered on YouTube and you can easily register it.

If you press the third video upload button, you can also attach it as a video file.

3)Press the insert button to complete the video registration in the text!!

Query!!

I entered the video using the above method, but when I look at it in the app, the video screen does not match the horizontal and vertical ratios.

See app launch)

So if you want to scale it to fit the screen, you can modify the video size in the following ways:

When you click on the registered video, you can directly modify the image size: landscape and portrait length.

Modified it to 380px wide and 200px vertical.

App launch screen)

By resizing the video, you can adjust the video thumbnail ratio on the app screen to fit the screen.

3. Image Registration

1) Select the [Insert Image] icon button in the option bar.

2)Drag & drop the image or click to register the image file in the attachment box.

When you register, the image is applied directly to your screen.

*At this time, the image will be automatically modified to a horizontal size of 300px regardless of the actual image size.

​The image that is displayed on the web page is adjusted to fit the horizontal surface of the phone, so I have it sized to 300px horizontally.

So the image size is adjusted.

You can edit the image size again!!

11) When you click on the image, an options window will open below. Select the [Resize] button here.

2)Please put the size in the width (horizontal) field.

*If you only add the horizontal length, the height (vertical) will be automatically adjusted to the landscape.

3)Press the Update button.

Conversely, you can modify the image to the original image size significantly.

On the actual app screen, it will appear full to fit the landscape, so you can use it in the auto-size of 300px, or you can use it in its original size.

Instead, if the image needs to appear smaller on the screen, you can modify the size of the image to be smaller, just like I did.

4. Registration of text articles

You can input text when you hold the mouse cursor in the body.

From the top options bar, you can select font, size, color, etc, and modify it to the style you want.

5. Insert a web link

If you look at the Swing2App Official App Editor page for a moment, tap on the image and you'll be taken to a new page!!

On the editor page, you can also insert a web link to each image, text, etc.

Since you can link a web link to the image, you can touch it to go to the page you want.

1) When you click on the image, an options window will open below. Select the [Insert Link] button here.

2)Enter URL Options window will open anew. Enter the URL (web link address) in the appropriate field.

*Important!** You need to select [Open in New Tab] to make it run a little more reliably, so be sure to check it!**

3)Select the Insert button, and the link to the image will be finished linking.

★ One minute!

- I don't want to link to a website, but I want to make the image go to a specific bulletin board created by the app!

- I want to go to the image page!

-It's a shopping mall app, so I want to make you go to the product page!!

If you want to link to a page created by an app rather than an external web link like this, there's a way!!

Please check the details below.

1) When you click on the image, an options window will open below. Select the [Insert Link] button here.

2)Enter URL Options window will open.

Select the 2nd icon [Link Wizard] button here.

3)The Link Wizard pop-up window will open. You can select from the left menu and add the swing function you want.

- If you want to put an image page, you can select the user page and apply it.

-If you want to include a bulletin board, please select a bulletin board and apply it.

- If you want to go to a specific post, after selecting the post – you can apply it by searching for posts.

In addition to the regular website links, the [Link Wizard] allows you to go to the pages used within the app!!

6. Press the Save button when you finish the production.

When the editor page is finished creating, press the Save button and exit.


STEP.3 Applying HTML Editor Page to App

Go to the MakerV3 screen.

1)Go to the STEP3 page

2)Home Screen – Select HOME

3)Enter the menu name

4) Select [HTML Editor] from the page design.

5) Select the 'Refresh' button on the right to see the page you have created.

6) Select [Apply]. (Hover the mouse cursor over the page and the Apply button opens)

7)Press the [Save] button at the top of the screen to apply it to the app.

*I have selected the home screen and applied the page, but I can apply it to the menu in addition to the home screen.

You can also apply a page to a menu.

*Select the Preview button to see how the page will look with a web preview (virtual machine).

*After the page is applied, you can also check how the page is applied to the app through the virtual machine.

*Menu icon during the editing phase, Menu settings are not applicable to HOME and are not required.


STEP4. HTML Editor Page Creation TIP

Here are a few more features you need to create!

1. Horizontal Line

As you write, there are times when you need something to differentiate between the two topics.

It's usually called a divider line.

If you press the Insert Horizontal Line button in the option bar, the divider is applied to the body.

2. Full Screen

As you work on the page, the content gets long and the page goes down.

As the page scrolls down, the top options bar disappears from the work view.

At this time! If you select the [Full Screen] button, which is the last button on the option bar, the screen is moved to the full screen, and this inconvenience disappears.

The options bar is right at the top!! Since it is fixed, no matter how many pages are turned down, it does not disappear from the view of the work, and it is possible to work comfortably ^^

​

3. Quick Insertion

If you look at the left side of the body screen, there is a [+] shaped button.

With the Quick Insert button, selecting it gives you quick access to frequently used options such as inserting images, inserting videos, and inserting horizontal lines.



STEP.5 Editing HTML Editor Pages (How to Modify**)**

The same can be done by going into the App MakerV3 screen– HTML Editor [Modify] button.

Hover your mouse cursor over the editor page and there is a [Edit] button.

Select the [Edit] button and then select the [Modify] button →.

Go to the HTML Editor Page Editor Tool screen.

Editing the editor page doesn't mean that there is a separate page.

You can update it by going in the same way as the creation page and making changes.

Using the Link Wizard