Page Design- Page Templates
Last updated
Last updated
What is a template page?
It is a web page creation tool provided by the user page- it is a design template creation tool for each industry.
Users can create a web page by inputting only text and images according to the guidelines on the page where the design is applied.
Users can create pages more easily by providing templates for each style and industry for web pages that are difficult to create directly in terms of design.
This is the screen where I launched the Swing Hotel sample app.
From the home screen, each menu was applied to the app using the Hotel03 template page provided by the web template.
Go to see the template styles by industry
http://wp.swing2app.co.kr/template-page/
You can create a page template on the App MakerV3 screen.
1)On the MakerV3 page – Go to STEP3 Page
2)Under the Page Design option, select the [Page Template] option.
3)Click on the [+] Add new page-> to open the template editor screen.
Below we'll show you how to build a template and how to apply it to your app after it's built.
Select the [Add] button at the bottom of the site to open the ‘New Page‘ window.
Select a template from here and start modifying your template as per your requirement.
I'll tell you how to use it in detail below~!
1)Select the [+New] button on the left side of the Template production screen.
2) Click on the page type to check various page styles.
*The Swing2App is constantly updated and available on industry-specific pages.
*Users can select a page with the desired design.
3) Select the page and press the [Add] button.
4) You can see the template page added to the Template editor screen like this.
If you look at the right side of the screen, you can modify and use each of them.
*The [Copy] and [Delete] buttons are available at the bottom left of the screen.
*The [Default] button is a button that reverts back to the template style that was originally set.
Please check how to use it~!
-The page name at the top is the page name that will be displayed in the app, so please modify it accordingly.
- Each area of the page is designed to be editable
-Text: Both the text size and color can be specified, and the title area is provided to adjust the margins.
- Both adding and deleting template buttons are possible.
- You can link pages by using the [Link Wizard] feature.
-Menu tab: If you don't want the header area in your template, check the 'Disable' button to Deactivate it.
*Note: The area will be deleted from the template, you can get back it by clicking on the 'Enable' option.
**** Create a different style template page
5) The templates in different styles follow the same process of modification. When you select a page, it will appear on the screen.
If you look at the settings provided on the, you can modify and apply them one by one in the areas that can be modified.
6) To attach an image, you can register the desired image by pressing the image button.
Each template has an image size that lists the images. It's good if you fit the image according to the size.
Even if the size has not been modified, pressing the Edit Image button will open the [Image Editing Tools] window.
Here you can register by adjusting it to the size of the image.
7) The Link Wizard refers to the feature, by which links can be applied to each banner (button).
If you select the [Link Wizard] button, you can select the page, feature, or link that you want to link with as shown in the image above.
In addition to the regular website web links, the Swing2App app can integrate all the features used within the app.
8) When all the work is done, be sure to press the [Save] button.
You need to press the [Save] button to save the page perfectly!!
Items are reflected on the page as soon as they are modified.
When all is done, press the [Save] button, and the page is finished saving as you are working.
On the App MakerV3 screen
1)Go to the STEP3 page.
2)Home Screen –> Select HOME
3)Enter the menu name (the name that will be shown at the top of the home screen)
4)Select [Page template] from the page design.
5)Select the 'Refresh' button on the right to see the template you have created.
6) Click on the [Apply] button. (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 template page, but I can apply it to the menu in addition to the home screen?
You can also apply a template 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 production phase, Menu settings are not applicable to HOME and are not required.
**** App launch screen) Template Page
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.
Template modifications don't have a separate page.
You'll get redirected to the Template editor page-> Modify your old template easily.
