ログインページを作成する

ページをクローンして作成する

新規ページを作成する場合で、既存のページと似たようなレイアウトのページを作成する場合は、既存ページをクローンして編集していくと効率的に構築できます。

ログインページは新規会員登録ページとよく似たレイアウトのため、ページをクローンして作成しましょう。

ビジュアルエディタからページ一覧を表示し、「Add a new page…」をクリックします。

ポップアップでPage nameを「login」とし、Clone fromに「signup」を選択します。

「CREATE」をクリックするとページが複製されます。 singupと同じ内容が表示されていることが確認できます。ワークフローを設定していた場合は、ワークフローも複製されます。

ページ、エレメントのスタイル等の設定もそのままコピーされます。

要素を配置する

ページをクローンしたので、不要なエレメントを削除し、必要なエレメントを追加しましょう。

不要なエレメントを削除する

新規登録ページの「username」はログインページに不要なので、Group Usernameを選択した状態で右クリックし、メニューからDeleteをクリックしてエレメントを削除します。

必要なエレメントを追加する

新規会員登録ページの「ログインはこちら」というリンクをコピーし、Linkエレメントをもう一つ追加します。

Link Loginを選択した状態で右クリックし、メニューから「Copy」をクリックします。再度右クリックし、メニューから「Paste」をクリックします。

エレメントの位置がバラバラになっているので、Figmaを参考に位置を調整します。

Group Signupの高さも、内部のエレメントの高さに合わせておきます。

各エレメントの名前を変更する

エレメントの名称は変更しなくても問題ありませんが、ワークフロー内で利用する時にわかりづらくなるので、それぞれ以下のように変更しておきます。

表示テキストの内容を変更する

ログインページに合わせて、エレメントの表示テキストを変更します。

これでログインページのレイアウトは完成です。