Page Design - Image Page
Last updated
Last updated
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
When multiple web links need to be applied to one image ex) Applicable to multiple links instead of one, such as homepage and blog.
When applying multiple bulletin board links to one image ex) Bulletin board links such as notice boards and free bulletin boards can be applied.
If you want to put a more detailed description of the image, you can apply the tooltip so that the message appears.
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~
*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
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.
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!!
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.
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
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
