{"id":975,"date":"2023-11-01T15:02:53","date_gmt":"2023-11-01T06:02:53","guid":{"rendered":"https:\/\/support.learningbox.online\/?post_type=how-to-use&p=975"},"modified":"2026-09-16T16:52:22","modified_gmt":"2026-09-16T07:52:22","slug":"login-page","status":"publish","type":"how-to-use","link":"https:\/\/support.learningbox.online\/en\/how-to-use\/login-page\/","title":{"rendered":"Login page"},"content":{"rendered":"

You can customize the login page.<\/p>\n\n\n\n

*Select \"Site customizer\" from the side menu and click on the Design tab.
Select the Login page tab.<\/p>\n\n\n\n

*Note that we cannot assist with issues arising from your use of Site customizer. For details on potential issues, click\u00a0here<\/a>.<\/p>\n\n\n\n

\n

Required<\/span><\/p>\n\n\n\n

Customization option, Site customizer, Management role of Co-admin<\/p>\n<\/div>\n\n\n\n

Edit page<\/span><\/h2>\n\n\n\n

You can customize the login page.
The preview will be displayed on the right.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n
\n
\u2003<\/span>Note 01: User interface on PC and smartphone<\/span><\/span><\/div>
\n

You can switch the interface on a PC and smartphone by clicking the tab.<\/p>\n<\/div><\/div>\n\n\n\n

\u2003<\/span>Note 2: Apply the settings to the login form<\/span><\/span><\/div>
\n

The preview follows the setttngs set in the Login form settings in the Basic settings page, and the following two items will also be applied.<\/p>\n\n\n\n

\u30fbLink to password reset
\u30fbUse of login authentication keys<\/p>\n\n\n\n

*For more details, refer to Login form settings<\/a>.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n

Editable content<\/span><\/h2>\n\n\n\n

You can set the background image and the login page.
 
*Make sure to click on the Save button at the buttom of the page before you leave.<\/p>\n\n\n\n

Background image<\/span><\/h3>\n\n\n\n

The following items can be customized.<\/p>\n\n\n\n

\u25bcBackground color\/image<\/strong>
For the background of the login page, you can choose whether to set a background color or an image.
Click on the box to select a color.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

To apply an image file, upload a file from \"Select image.\"<\/p>\n\n\n\n

\u25bcPosition of background image<\/strong>
When you choose an image, you can select where to display it.

\u25bcBackground image size<\/strong>
Select the size from full screen or original size.

\u25bc Repeat background image<\/strong>
When you select the original size, you can repeatedly display the image if needed.<\/p>\n\n\n\n

Customize interface on smartphones<\/span><\/h4>\n\n\n\n

Apart from the settings for the interface on PCs, you can customize the interface deiplayed on smartphones.
Tick the box to customize the interface displayed on a smartphone.
*For details of the settings, see \"PC display<\/a>.<\/p>\n\n\n\n

\u2003<\/span>Important<\/span><\/span><\/div>
\n

When you do not customize the interface displayed on smartphones, the one set for PCs will be applied.<\/p>\n<\/div><\/div>\n\n\n\n

Form<\/span><\/h3>\n\n\n\n

The following items can be customized.<\/p>\n\n\n\n

\u25bc Form position<\/strong>
Select the position of the login form from the list.
*This setting will not apply to smartphones.

\u25bc Background color<\/strong>
Select the background color of the login form.
Click on the box to select a color.

\u25bcBackground color transparency<\/strong>
Set the transparency of the background color.
Drag on the bar graph to adjust the value.

\u25bc Border color<\/strong>
Set the border color of the login form.
Click on the color box to select a color.

\u25bc Shadow<\/strong>
Set the shadow and the color of the login form.
Click on the color box to select a color.<\/p>\n\n\n\n

Header<\/span><\/h4>\n\n\n\n

Select text or logo for the header of the login page.
Customize the font color if needed.
Click on the color box to change the color.<\/p>\n\n\n\n

Login button<\/span><\/h4>\n\n\n\n

Select the font\/button color of the login button.
You can also choose a border color.
Click on the color box to select a color.<\/p>\n\n\n\n

Self-registration button<\/span><\/h4>\n\n\n\n

You can set the text color\/button color of the \"Register for free\" button.
You can also choose a border color.
Click on the color box to select a color.<\/p>\n\n\n\n

Text link<\/span><\/h4>\n\n\n\n

You can set the font color of text links in the login form.
Click on the color box to change the color.<\/p>","protected":false},"excerpt":{"rendered":"

\u30ed\u30b0\u30a4\u30f3\u753b\u9762\u306e\u5185\u5bb9\u3092\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3067\u304d\u307e\u3059\u3002 \u203b\u30b5\u30a4\u30c9\u30e1\u30cb\u30e5\u30fc\u306b\u3042\u308b\u300c\u30b5\u30a4\u30c8\u30ab\u30b9\u30bf\u30de\u30a4\u30b6\u30fc\u300d\u3092\u9078\u629e\u3057\u3001\u300c\u30c7\u30b6\u30a4\u30f3\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002\u3000\u300c\u30c7\u30b6\u30a4\u30f3\u300d\u753b\u9762\u306e\u300c\u30ed\u30b0\u30a4\u30f3\u753b\u9762\u300d\u306e\u30bf\u30d6\u3092\u958b\u3044\u3066\u304f\u3060\u3055\u3044\u3002 \u203b\u304a\u5ba2\u69d8\u304c\u30b5\u30a4\u30c8\u30ab\u30b9\u30bf\u30de\u30a4\u30b6 […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":104,"template":"","meta":{"_acf_changed":false,"content-type":"","swell_btn_cv_data":"","slim_seo":{"title":"Login Screen - How to Use learningBOX","description":"You can customize the login screen. *Select \u201cSite Customizer\u201d from the side menu and click \u201cDesign.\u201d Open the \u201cLogin Screen\u201d tab on the \u201cDesign\u201d screen. *Please note that we cannot assist with any issues that arise from your use of the Site Customizer. Potential issues that may occur..."},"_slim_seo_primary_term_category-how-to-use":82,"footnotes":""},"category-how-to-use":[82],"class_list":["post-975","how-to-use","type-how-to-use","status-publish","hentry","category-how-to-use-design-site-customizer"],"acf":[],"publishpress_future_action":{"enabled":false,"date":"2026-10-03 02:00:19","action":"change-status","newStatus":"draft","terms":[],"taxonomy":"category-how-to-use","extraData":[]},"publishpress_future_workflow_manual_trigger":{"enabledWorkflows":[]},"_links":{"self":[{"href":"https:\/\/support.learningbox.online\/en\/wp-json\/wp\/v2\/how-to-use\/975","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/support.learningbox.online\/en\/wp-json\/wp\/v2\/how-to-use"}],"about":[{"href":"https:\/\/support.learningbox.online\/en\/wp-json\/wp\/v2\/types\/how-to-use"}],"author":[{"embeddable":true,"href":"https:\/\/support.learningbox.online\/en\/wp-json\/wp\/v2\/users\/2"}],"version-history":[{"count":10,"href":"https:\/\/support.learningbox.online\/en\/wp-json\/wp\/v2\/how-to-use\/975\/revisions"}],"predecessor-version":[{"id":24186,"href":"https:\/\/support.learningbox.online\/en\/wp-json\/wp\/v2\/how-to-use\/975\/revisions\/24186"}],"wp:attachment":[{"href":"https:\/\/support.learningbox.online\/en\/wp-json\/wp\/v2\/media?parent=975"}],"wp:term":[{"taxonomy":"category-how-to-use","embeddable":true,"href":"https:\/\/support.learningbox.online\/en\/wp-json\/wp\/v2\/category-how-to-use?post=975"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}