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 Image Page: App launch screen
  • STEP 1. Create an image page
  • STEP 2. Creating an Image Page
  • STEP.3 Applying an Image Page to Your App
  • STEP.4 Image Page Creator – Applying the Tooltip
  • STEP.5 Editing the Image Page (How to Modify)
Edit on GitHub
  1. Manual
  2. App production manual (V3)
  3. STEP3 Page

Page Design - Image Page

Last updated 1 year ago

What is an image page?

Image page is a custom editor tool that you can use to create an image for your app.

You can edit an image by applying a link and tooltip to it.

The ability to apply a variety of links to images can be useful when building apps.

Utilization Tip

  1. When multiple web links need to be applied to one image ex) Applicable to multiple links instead of one, such as homepage and blog.

  2. When applying multiple bulletin board links to one image ex) Bulletin board links such as notice boards and free bulletin boards can be applied.

  3. If you want to put a more detailed description of the image, you can apply the tooltip so that the message appears.

  4. Can work on a banner – Create an image in banner style and specify the area to apply the link.

If you want to put an image full on your home screen when creating an image page, you can work with the mobile screen resolution standard of 1080px horizontally and 1980-2200px vertically.

★To fit the horizontal size, the vertical length is adjusted according to the screen of the phone.

So depending on what prototype you applied to the portrait and the type of phone you have, it may be a little longer or shorter in length.

Because it is fixed horizontally and vertically changes depending on the mobile environment, not all phones can show the same screen.

Please refer to it when using it~


Apply Image Page: App launch screen


*Swing2App Official App – Image Page Application Screen

*This is the image page screen applied to the official Swing2App app.

​

- I selected an area above the image and linked the page to each of the banner areas.

-When launching the app, you can select a specific banner in the image and make it go to the linked page.


User App) Example App Image Page Application Screen

STEP 1. Create an image page

You can create a page template on the App MakerV3 screen.

1)Go to the STEP3 Page

2)Under the Page Design option-> Click on the [Image Map] feature

3) Click on the [+] button.

You'll get redirected to the Image Page editor Tool screen.

Below we'll show you how to create an image page and how to apply that page to your app after it's built.


STEP 2. Creating an Image Page

In this editor tool screen, you can easily create an image page.

1.Register an image

Be the first to register your image.

Select the [Upload Image] button or the [New] button to select the image you want to register.

*Since the image page is a function to put a banner such as a link on top of the designed image, you need to upload it as a finished image!

If this is the first time you are working, please select the [New] button to do the work.

If you need to re-upload a modified image in addition to what you have already done, you may want to use the [Upload Image] button!


2. Modify the image page

Modification process of the image page:

All you need to do is check the 'Shape Tool' which sets the banner area on top of the image, the 'Link Action' which allows you to link to the area, and the 'Default Style' which sets the area style.

★Default style

-Background Color: You can color the area you set with the tool.

-Background Opacity: You can specify the transparency of the area set by the tool.

If you don't want the tool to be visible when you select the mouse, you can set the transparency to '0'**.**


3. Shape Tools – Check your style

Tool shapes are available in dot shapes, squares, ellipses, and polygons.

- When using a dot shape, clicking the mouse cursor over the image creates a point.

-When using a rectangular or oval shape, simply place the mouse cursor over the image and drag it from the left to create an area.

- For polygons, dotting multiple areas, and then dotting back to where you originally dotted creates a polygon area.

â–¶ Please check how to set the area through the image that you are receiving.


4. Apply the link

Once you've set up a shape, let's see how to apply a link inside the shape zone you set.

For links, please select the [Link Action] option provided on the right side settings screen.

1) Mouse hover: This is a menu that applies how it works when you touch the mouse.

Select [Do nothing] because you will only apply the [View: Do Nothing, Show Tooltips] link.

2) Click Action: This is a menu that applies how it works when the mouse is clicked.

Select [Move Link] because you need to go to the link when selecting [View: Do Nothing, Show Tooltip, Move Link].

3) Link Wizard: A tool that allows you to select the app menu, web link, etc. page to be linked.

When you select the Link Wizard button, the 'Link Wizard' window will pop up as shown in the image above.

Here, when you have selected the banner, you can select the menu you want to move.

In the manual, we chose the introductory banner for the image, so we'll choose the 'HOMEPAGE' template that we've worked on beforehand.

You can select [Reflect].

*Precautions

The menus and content within the app need to be completed.

If you don't have a bulletin board or user page at all, you won't have a menu to choose from in the Link Wizard, right?

So, when you're done creating all the content that will go into your app, use the Link Wizard on the Images page.

Of course~ in the Link Wizard, you can apply it to all other menus in addition to the above menus.

For example, if you select a banner and you want it to go to your blog, you can select [Link Wizard] and then in [Weblink] – enter the blog site address URL and reflect it


You can use the mouse over style to color the Background Color.

If you set it to '0' in Background Opacity, you can also set the banner to be transparent.


Let me give you a TIP.

If you use the **[Duplicate Style button]** in the list, you can get the same area style and the default style.

All you have to do is change the link settings, which makes it a little easier!

5. Complete Production

The image page has been applied

Finally, please enter the page name. (When applied to the app, the page name will appear in the menu.)

Press the [Save] button and you're done.

So let's go back to the app creation page and apply that image page to the app!!


STEP.3 Applying an Image Page to Your App

Go to the MakerV3 screen

1) Click on the STEP3 page

2)Home Screen – Select HOME

3)You do not need to change the menu name.

*The image page is the name saved by the Image Page Creator and is displayed at the top of the home screen.

4) Select [Image Map] from the page design.

5)Select the 'Refresh' button on the right to see the template 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 pages to menus.

*Image pages are subject to the 'Page Name' entered in the Page Maker as the home screen name.

*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.


STEP.4 Image Page Creator – Applying the Tooltip

In addition to linking a link banner to an image page, I'll also show you how to apply the tooltip.

What is a tooltip?

The tooltip is used as a way to attach a message window-shaped icon above the image and provide an additional description.

Example of applying tooltips)

1. Image Page - How to Apply Tooltips

Select the [New] button in the Image Page Creation Tool and import the image.

1)Select the area where you want to apply the tooltip over the image by dragging the area to the tool menu.

—Let me explain the menu types for you to use in the right menu bar—

2) Link Action

The link action is a menu that applies how the area to which you applied the tooltip will look.

(1) Mouseover action: This is a menu that applies how it works when the mouse is pressed. Select [Do nothing].

(2) Click Action: This is a menu that applies how it works when the mouse is clicked.

Since the tooltip should be shown when touched, select [Show tooltip] from the click action.

*Utilize TIP. You can create using both the tooltip menu and the 2 weblink menus.

3)Basic style

It's a tool area style. Check the options only for background color and background transparency.

If you want the tooltip to show the area where it will be shown, please add color and transparency.

If you want to make the area invisible, set the Background Opacity to '0'.

4) Tooltip style

It's a menu where you enter the tooltip style. - > box area design with message visible

You can modify the horizontal and vertical size, set the color, tooltip position, transparency, and degree of area rounding.

*Caution* When modifying the size, please make sure that the horizontal length does not exceed 330. (up to 330px)

5) Text Style

Text Style is a menu where you can modify the text color, font size, tooltip box size, etc. created in the tooltip.

You can edit it by dividing the title area and the body area.

6) Tooltip content

Enter what you want to enter in the tooltip box. The tooltip is divided into a title (title) and a text (body) to create the content.

7) Enter the page name *Enter the page name after saving all the contents.

8) After completion, press the [Save] button.

​

9) Select [Preview] to see the tooltip box applied over the image.

2. Apply the tooltip to the Image Page app

Image pages created with the tooltip can also be applied to your app.

The method for applying it to your app is the same as the one we showed you above.

Go to the MakerV3 screen

1) Click on the STEP3 page

2)Home Screen – Select HOME

3)You do not need to change the menu name.

*The image page is the name saved by the Image Page Creator and is displayed at the top of the home screen.

4) Select [Image Map] from the page design.

5)Select the 'Refresh' button on the right to see the template 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 pages to menus.

*Image pages are subject to the 'Page Name' entered in the Page Maker as the home screen name.

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

*After the page is applied, you can page appearance in the app through the virtual machine.

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

​

3. App launch screen) Image Page Tooltip


STEP.5 Editing the Image Page (How to Modify)

Modifying a template is the same as going to the App MakerV3 – Select [Page Templates] under the Page design option-> When you hover your mouse cursor over the template page, you'll see different buttons-> Click on [More] button-> Click on [Update] button.

Modifying the image page doesn't mean you have a separate page.

You'll get redirected to the Template editor page-> Modify your old template easily.

Check out how to create an image page with help of video

Creating Image Pages TIP