ビルディングブロック

:ref:`ビルディングブロックをドラッグ&ドロップ <website/building_blocks/add>`してウェブサイトをデザインし、その後:ref:`編集 <website/building_blocks/edit>`してコンテンツとレイアウトのニーズに合わせることができます。

参照

Odoo Tutorial: Design your website: text and colors

ビルディングブロックを追加

ウェブサイトページ <../structure/pages>`にブロックを追加するには、ページにアクセスし、:guilabel:`編集`をクリックして、目的のビルディングブロックを適切な場所にドラッグ&ドロップします。2種類のビルディングブロックが利用可能です：:guilabel:`カテゴリ`と:guilabel:`内部コンテンツ。:guilabel:`内部コンテンツ`ビルディングブロックは:guilabel:`カテゴリ`ビルディングブロック内にのみ追加できます。

カテゴリブロックをクリックすると、ポップアップが表示され、各カテゴリの複数のテンプレートから選択できます。

ちなみに

検索バーを使用して、:guilabel:`ブロックを挿入`ポップアップで特定のブロックを検索します。

ポップアップブロック選択

カテゴリブロックが配置されたら、その中に:guilabel:`内部コンテンツ`ブロックをドラッグ&ドロップできます。:guilabel:`内部コンテンツ`ブロックを使用すると、既存のカテゴリブロック内に動画、画像、ソーシャルメディアボタンなどの要素を追加できます。

注釈

  • ログインページにビルディングブロックを追加することもできます。これを行うには、ウェブサイトのホームページに移動し、URLに`/web/login`を追加して`Enter`キーを押します。

  • 特定のブロックにアクセスするには、それぞれのアプリケーションまたはモジュールをインストールする必要があります(例::guilabel:`プロダクト`ブロックの場合はeコマース)。

Example

内部コンテンツ:guilabel:`ソーシャルメディア`ブロックを使用して、すべてのソーシャルメディアアカウントを1か所にまとめます。目的のプラットフォームの横のスイッチをオン/オフに切り替え、アカウントURLをコピー&ペーストします。

ソーシャルメディア内部コンテンツブロック

フォーム

:guilabel:`フォーム`ブロックは、ウェブサイト訪問者から情報を収集し、該当する場合はデータベースにレコードを作成するために使用されます。ウェブサイトページにフォームを追加するには、:guilabel:`連絡先&フォーム`カテゴリーのブロックをドラッグ&ドロップし、ポップアップでブロックを選択します。

フォームブロックの例

アクション

デフォルトでは、フォームが送信されると、訪問者が入力した情報を含むメールが自動的に送信されます。データベースにインストールされているアプリによっては、レコードを自動的に作成できる追加のアクションが利用可能になる場合があります。別のアクションを選択するには、:guilabel:`編集`をクリックし、フォームをクリックして:guilabel:`スタイル`タブに移動し、希望する:guilabel:`アクション`を選択します:

デフォルトでは、フォームを送信すると訪問者は*ありがとうございます*ページにリダイレクトされます。:guilabel:`URL`フィールドを使用して、別のページに送信することができます。または、:guilabel:`On Success`フィールドで:guilabel:`Nothing`または:guilabel:`Show Message`を選択することで、リダイレクトせずにフォームのページに留めることもできます。

フィールド

フォームに新しいフィールドを追加するには、:guilabel:`スタイル`タブに移動し、:guilabel:`フォーム`または:guilabel:`フィールド`セクションの横にある:guilabel:`+ フィールド`ボタンをクリックします。フォーム上の任意のフィールドを変更するには、フィールドを選択し、:guilabel:`スタイル`タブの:guilabel:`フィールド`セクションで利用可能なオプションを使用します。例えば、次のことができます:

  • :guilabel:`Type`フィールドを変更します。

    ちなみに

    データベースから:guilabel:`Existing Field`を選択し、そこに含まれるデータを使用することも可能です。使用可能なフィールドは、選択したアクションによって異なります。データベースに追加されたプロパティフィールドも使用できます。

    すべてのタイプのフォームフィールド

    一部のフィールドは見た目が似ていますが、入力されるデータは特定の形式に従う必要があります。

  • フィールドの:guilabel:`Label`を編集し、:guilabel:`Position`を調整します。

  • フィールド:guilabel:`説明`を有効にします。スイッチをオンにして、フォーム上のデフォルトの説明をクリックして変更します。

  • :guilabel:`Placeholder`または:guilabel:`Default value`を追加します。

  • フィールドが:guilabel:`Required`かどうかを指定します。

  • フィールドの:doc:`公開設定 <visibility>`を編集します。

  • :ref:`アニメーション <website/elements/animations>`を追加します。

必要な変更を行ったら、:guilabel:`Save`をクリックします。

Odoo以外のウェブサイトにOdooお問い合わせフォームを追加

iframeを使用して、別のウェブサイトにOdooお問い合わせフォームを表示できます。これを行うには、次の手順に従います:

  1. Prepare the Odoo form: Create a contact form on a page in Odoo Website and remove the header and footer. Make sure only the contact form remains on the page.

  2. 埋め込みコードを生成: OdooフォームページのURLをコピーし、`La Digitale.dev <https://ladigitale.dev/digitools/generateur-iframe>`_や`iFrame Generator <https://www.iframe-generator.com/>`_などのiframeジェネレーターに貼り付けます。適切に表示されるように幅と高さを調整します。

  3. Odoo以外のウェブサイトに埋め込みコードを追加: 関連ページのHTML(コードエディターまたはCMS内)を開き、フォームを表示する場所に埋め込みコードを挿入します。

Example

埋め込みコードの例:

<iframe src="https://example.com/odoo-form"
        style="border:0;"
        name="odooForm"
        scrolling="no"
        frameborder="0"
        marginheight="0"
        marginwidth="0"
        height="400px"
        width="600px"
        allowfullscreen>
 </iframe>

埋込コード

埋め込みコードを使用すると、YouTubeの動画、Googleマップの地図、Instagramのソーシャルメディア投稿など、サードパーティサービスのコンテンツをページに統合できます。

:guilabel:`内部コンテンツ`セクションから:guilabel:`埋め込みコード`ブロックをドラッグ&ドロップしてページに配置した後、ブロックをクリックし、:guilabel:`スタイル`タブに移動して:guilabel:`編集`をクリックします。プレースホルダーコードをカスタム埋め込みコードに置き換えます。

指定したい埋め込みコードへのリンクを追加します

警告

理解していないコードをコピー/ペーストしないでください。データが危険にさらされる可能性があります。

ビルディングブロックを移動、切り替え、複製、削除する

ブロックのターコイズの境界線を引っ張って、ブロックの上部または下部のスペースを縮小または拡大します。

:icon:`fa-chevron-up`（:guilabel:`chevron up`）または:icon:fa-chevron-down`（:guilabel:`chevron down）をクリックしてブロックの順序を変更し、）をクリックしてページ上でブロックを移動します。複数の:ref:列 <website/building_blocks/cols>`がある場合は、:icon:`fa-chevron-left`（:guilabel:`chevron left）または:icon:fa-chevron-right`（:guilabel:`chevron right）をクリックして列を左右に移動します。

ビルディングブロックを複製するには、)をクリックします。複製されると、新しいブロックは元のブロックの下のページに表示されます。

ちなみに

または、スタイル`タブの上部にある:icon:`fa-clone`(:guilabel:`複製)アイコンをクリックして、選択したブロックを複製します。

ブロックを削除するには、）をクリックします。

ビルディングブロックのマージンを拡張

ビルディングブロックを編集

ビルディングブロックのコンテンツを編集するには、それをクリックして:guilabel:`スタイル`タブに移動します。利用可能なカスタマイズオプションは、選択したブロックのタイプによって異なります。

参照

背景

ビルディングブロックの背景を変更するには、ブロックを選択し、:guilabel:`スタイル`タブに移動して、カラードットまたは別の:guilabel:`背景`オプションをクリックします。色を変更したり、画像、動画、図形を追加したりできます。図形を選択すると、図形をカスタマイズできる新しいフィールドが表示されます。

ちなみに

  • :guilabel:`最背面へ移動`または:guilabel:`最前面へ移動`アイコンを使用して、要素(画像、文字列など)を別の要素の背面または前面に配置します。

    ブロックの位置を変更

  • ブロックのサイズを変更するには、必要に応じてその端の周りにある点をクリックしてドラッグします。

    ブロックのサイズを調整

参照

一般的なテーマ

レイアウト: グリッドと列

ほとんどのビルディングブロックでは、:ref:`グリッド <website/building_blocks/grid>`または:ref:`カラム(cols) <website/building_blocks/cols>`の2つのレイアウトスタイルから選択できます。デフォルトのレイアウトスタイルを変更するには、ブロックをクリックして:guilabel:`スタイル`タブに移動し、:guilabel:`レイアウト`フィールドを:guilabel:`グリッド`または:guilabel:`カラム`に設定します。

グリッド

グリッド`レイアウトを使用すると、画像や文字列などの要素をドラッグドロップして配置やサイズ変更ができます。:guilabel:`グリッド`が選択されている場合、:guilabel:`画像、文字列、または:guilabel:`ボタン`をクリックして:guilabel:`要素を追加`する追加オプションが利用できます。

グリッドレイアウトが選択されている場合は、画像を選択して必要な場所にドラッグ&ドロップします。

Cols

:guilabel:`カラム`レイアウトを選択すると、ブロック内の1行あたりの要素数を決定できます。これを行うには、変更するブロックを選択し、:guilabel:`カラム`フィールドの横にあるドロップダウンをクリックして数値を調整します。その後、:guilabel:`スタイル`タブの:guilabel:`カラム`セクションのオプションを使用して、特定のカラムの設定を変更できます。

注釈

デフォルトでは、モバイルデバイス <visibility>`では、小さな画面でもコンテンツが読みやすく、アクセスしやすい状態を保つため、1行あたり1つの要素(列)のみが表示されます。値を調整するには、ウェブサイトエディターの上部にある:icon:`fa-mobile`(:guilabel:`モバイルアイコン)をクリックして、列数を調整します。図形はモバイルではデフォルトで非表示になります。

カスタムビルディングブロックを保存

カスタマイズしたビルディングブロックを保存して、他の場所で再利用できます。これを行うには、それを選択し、スタイル`タブに移動して、:icon:`fa-floppy-o`(:guilabel:`フロッピーディスク)アイコンをクリックします。ポップアップで:guilabel:`保存`ボタンをクリックして、カスタムブロックの保存を確定します。

保存したビルディングブロックをページに追加するには、:guilabel:`ブロック`タブに移動し、:guilabel:`カテゴリ`セクションから:guilabel:`カスタム`ブロックをドラッグ&ドロップします。開いたポップアップで、:guilabel:`カスタム`カテゴリ内の目的のブロックをクリックします。

ちなみに

ブロックを挿入`ポップアップで、:icon:`fa-pencil`(:guilabel:`編集)をクリックしてカスタムブロックの名前を変更するか、)をクリックして削除します。