admin

1 エレメントパネルで Flexible Grid を選択し、ページにドラッグ＆ドロップします。フレキシブルグリッドは通常のグリッドと異なり、デスクトップ、タブレット、モバイルで別々のレイアウトを設定でき、異なる画面サイズに自動で調整されます。 2 各ビュー（デスクトップ、タブレット、モバイル）で Columns と Gap を調整します。 これにより、各デバイスでのレイアウト表示をコントロールし、レスポンシブでバランスの取れたデザインを実現できます。 3 まずデスクトップビューで Columns (Desktop) と Gap (Desktop) を設定します。 ●　Columns (Desktop) – デスクトップレイアウトの合計列数 (最大 12)。セルが均等に収まる数を選択します。例: 12 列で 3 つの同等セル (4+4+4)、2 セル (6+6)、または大きなアイテムをハイライト (8+4) する場合など、バランスを保てます。 ●　Gap (Desktop) – セル間の間隔。大きくするとスペースが広がり、小さくすると詰まったレイアウトになります。 4 Columns (Desktop) と Gap (Desktop) を設定したら、セルを編集します。+ ボタンをクリックしてセルを追加します。 各セルにはテキスト、画像、ボタンを配置可能で、グリッド構造に従います。 5 各セルの Column Span (Desktop) を設定し、幅をコントロールします。 例：Columns (Desktop) = 12 の場合、均等配置なら4セルを span 3 に設定。spanを大きくするとセルが次の行に回り、レイアウトバランスが崩れることがあります。 6 タブレットビューに切り替え、画面サイズが小さい場合のレイアウトを調整します: ●　Columns (Tablet) – 最大 12 まで設定可能ですが、セルを読みやすく比率を保つために 4 を推奨。ハイライトは 2～3 列、その他の小さいアイテムは 1 列。 ※3 列または 6 列も用途に応じて設定可能です。 ●　Gap (Tablet) – セル間の間隔を調整し、列数が少なくてもバランスを維持します。 7 各セルの Column Span (Tablet) を入力します。 現在のビューで正確にプレビューできるように、各セルの span を割り当てます。 Columns (Tablet) = 4 の場合、最もバランスが良いのは 4 セルそれぞれ span 1。span を 1 より大きく設定すると、余分なセルが次の行に回り、レイアウトが不均衡になります。 8 モバイルビューに切り替え、次を調整します: ●　Columns (Mobile) = […]

1 エレメントパネルで Container をクリックし、ページにドラッグします。 ● Container はコンテンツを標準的な枠内に収め、画面端にはみ出さないようにします。 ● デスクトップ、タブレット、モバイルすべてで要素を中央に整列させ、一貫したレイアウトを実現します。 ● ページ全体のデザインがより整然とし、バランスが取れ、プロフェッショナルに見えるようになります。 2 Container の中に Text、Image、Flexible Grid などの要素を追加します。 これにより、それらの要素に組み込みの余白がなくても、Container が左右に均等なマージンを適用し、ページ全体が常にきれいに整います。 3 ページを Container あり・なしでプレビューします。 デスクトップ、タブレット、モバイルでの表示を確認してください。 Container がない場合、要素が画面全幅に広がり、バランスが悪く見えることがあります。 4 公開後の比較イメージです。 ●　Container を使うと、コンテンツは中央に配置され、標準枠内できれいに整います。 ●　Container を使わないと、コンテンツが全幅に広がり、ページがアンバランスで読みづらくなります。

1 エレメントパネルで Space をクリックし、ページ内にドラッグ＆ドロップします。 Space エレメントは、要素同士の間に余白を入れるためのシンプルな方法で、マージンを手動で調整する手間を省けます。 2 Space を選択し、heightを調整して要素間の間隔をコントロールします。 これにより、レイアウトが整い、見やすくバランスの取れたデザインになります。

1 ダッシュボードで ページ をクリックし、ページ一覧にアクセスします。 2 カスタマイズしたいページ（例：Home ページ）の横にある 編集ボタンをクリックします。 3 ページエディタで編集 をクリックして、ビジュアルエディタを開きます。 4 ボタンを追加するには、左側のメニューバーで Button エレメントをクリック＆ホールドし、追加したい位置にドラッグ＆ドロップします。 5 例えば、「View courses」ボタンの横にボタンを追加する場合などです。 6 ボタンを追加したら、右側のサイドバーで設定をカスタマイズできます。まず、textフィールドをクリックしてボタン名を変更します。 7 Variant をクリックして、ボタンの形状やスタイルを変更します。solid、outline、subtle、surface、ghost、plain などのスタイルから選択できます。 8 Size をクリックして、ボタンのサイズを変更します。 9 ボタンをクリックしたときに別ページへ遷移させたい場合は、href を設定します。href をクリックして、リンク先ページのスラッグ（例：home、sign-upなど）を入力します。 10 下書き をクリックし、続いて 下書きを保存 をクリックすると、公開せずに変更内容を保存できます。 11 変更を公開したい場合は 公開 をクリックします。

1 ダッシュボードで ページ をクリックし、ページ一覧にアクセスします。 2 カスタマイズしたいページ（例：Home ページ）の横にある 編集ボタン をクリックします。 3 ページエディタで編集 をクリックして、ビジュアルエディタを開きます。 4 画像を追加するには、左側のメニューバーで Image エレメントをクリック＆ホールドし、追加したい位置にドラッグ＆ドロップします。 5 Select Image をクリックして、選択した位置に画像を追加します。 6 ライブラリに画像がない場合は Upload をクリックしてアップロードします。または、デバイスから画像をドラッグ＆ドロップしてアップロードすることもできます。 7 使用したい画像（例：ourdemy.png）をクリックして選択します。 8 rounded をクリックして、画像の角丸を変更します。 9 下書き をクリックし、続いて 下書き保存 をクリックすると、公開せずに変更内容を保存できます。 10 変更を公開したい場合は 公開 をクリックします。

1 セクション内の追加したい位置までスクロールし、Feature ブロックをドラッグ＆ドロップします。 2 title をクリックして、フィーチャーのタイトルを設定します。 3 text をクリックして、フィーチャーの説明文を入力します。 4 左側のフィーチャー設定パネルで Select Image をクリックし、フィーチャーの説明用画像を追加します。 5 デバイスから新しい画像をアップロードするか、ライブラリから既存の画像を選択します。画像は高解像度で、デザインに合うものを使用してください。 6 使用したい画像をクリックして選択します。 7 Image size で画像のサイズを調整します。 8 horizontalAlignment を使ってフィーチャーの配置位置を設定します。 9 bordered をオンにすると、フィーチャー全体に枠線を付けることができます。 10 titleSize を使ってタイトルの文字サイズを変更します。 11 下書き をクリックし、続いて 下書きを保存 をクリックすると、公開せずに変更内容を保存できます。 12 公開 をクリックすると、変更内容をサイトに反映して公開します。

1 セクション内の追加したい位置までスクロールし、Links ブロックをドラッグ＆ドロップします。 2 左側のリンク設定パネルを開き、Layout セクションで Vertical または Horizontal を選択して、ページ上でのリンクの表示方向を設定します。 3 Gap (px) をクリックして、リンク同士の間隔を調整します。 4 items をクリックして、リンクの詳細情報を設定します。 5 Link Text をクリックし、リンクの名前を入力します。 6 URL セクションで、ページのスラッグ（例：home、sign-up、privacy-policy など）を追加するか、外部リンクを貼り付けます。 7 新しいリンクを追加したい場合は、+ アイコンをクリックします。 8 不要なリンクを削除したい場合は、trash アイコンをクリックします。 9 ページ上でのリンクの位置を調整したい場合は、alignment で配置を設定します。 10 下書き をクリックし、続いて 下書きを保存 をクリックすると、変更内容を公開せずに保存できます。 11 公開 をクリックすると、変更内容がサイト上に反映されます。

1 YouTube や Vimeo などの外部動画を埋め込みたい場合は、まず Box ブロックをドラッグして、希望する位置に配置します。次に、その中に Embed ブロックをドラッグ＆ドロップします。こうすることで、埋め込んだ動画の位置を簡単に調整できます。 2 例として YouTube 動画を埋め込む場合、埋め込みたい動画画面で Share（共有） をクリックして、動画のコードを取得します。 3 Embed（埋め込み） をクリックし、埋め込みコードが表示される画面を開きます。 4 コード画面が開いたら、コード全体を選択して Copy（コピー） をクリックします。 5 Ourdemy の管理画面に戻り、Embed code フィールドにコピーしたコードを貼り付けます。 6 システムでは、デスクトップ／タブレット／モバイルの 3 種類の表示モードでカスタマイズが可能です。上部ツールバーの対応アイコンをクリックして表示モードを切り替え、それぞれの画面サイズに合わせて Embed code 内でサイズを調整します。 7 動画の幅や高さを変更したい場合は、該当箇所をクリックして設定を調整します。 8 Box をクリックして、画面上での動画の位置調整を開始します。 9 Flex Display をオンにして、レイアウト調整を有効にします。 10 Justify content の設定を使って、動画の配置（左寄せ・中央・右寄せなど）を調整します。 11 下書き をクリックし、続けて 下書きを保存 をクリックすると、公開せずに変更を保存できます。 12 公開 をクリックすると、変更内容がサイト上に公開されます。

1 ページに SNS リンクを追加するには、まず左のメニューから SNS をドラッグし、リンクを表示したいセクションにドロップします。 2 Gap between icons (px) をクリックして、アイコン同士の間隔を調整します。 3 Icon Size (px) をクリックして、アイコンのサイズを変更します。 4 URL 欄に、それぞれの SNS ページのリンクを貼り付けます。これで設定が完了します。 5 他の SNS（例：Twitter／X、Instagram、YouTube、TikTok、LinkedIn）についても同様に設定を行います。 6 下書き をクリックし、続けて 下書きを保存 をクリックすると、公開せずに変更を保存できます。 7 公開 をクリックすると、変更内容がサイト上に公開されます。

1 エレメントパネルでFormを選択します。 この要素を使うと、ユーザーから情報を簡単に収集できるフォームを追加できます。 フォームを追加したい位置、またはフォーム専用の新しいページにドラッグ＆ドロップしてください。 2 Select a form to displayをクリックし、作成済みのフォームライブラリから表示したいフォームを選択します。 ※注意：この操作を行う前に、フォームを作成しておく必要があります。 フォームの作成方法については、別途提供している手順書を参照してください。 3 作成済みフォームの一覧が表示されます。このページに表示したいフォーム（例：お申し込みフォーム）をクリックすると、設定が完了します。 4 フォームのタイトルと説明文は、Show Form Title と Show Form Description の設定で表示・非表示を切り替えることができます。 5 送信ボタンのテキストは、Submit Button Text でカスタマイズできます。（例：送信） 6 変更内容を保存してユーザーに公開しない場合は、下書きを保存 をクリックします。 7 すべての設定が完了したら、公開 をクリックしてフォームを保存し、公開します。