Capítulo 4 - Customization, Part II

カスタム背景図形を作成

図形は背景や画像に適用できる装飾要素です。SVGファイルで、異なる色でアニメーションやカスタマイズが可能です。

  1. ウェブサイトの希望する雰囲気に合わせるために、クライアントが異なるブロックで再利用できるカスタムの背景形状を作成します。

    次の設定を使用して、カスタムシェイプを作成します。

    • シェイプを宣言します。オリジナルの SVG シェイプは にあります。

    • テーマの緑色にシェイプのベースカラーを設定し、利用可能なシェイプのリストに追加します。

関連項目

:ref:`カスタム背景図形 <website_themes/shapes/bg/custom> ` を追加する方法については、リファレンスドキュメントを参照してください。

../../../_images/shape.png

ちなみに

注意してください トリックがあります！
SVG ファイルの形式では、デフォルトの Odoo パレットの色を使用する必要があります。
ここでは、プライマリカラー1(#CEF8A1)に合わせたいと思います。 そのため、SVG ファイルでは、Odoo のデフォルトパレットの color 3 (#3AADAA) を使用する必要があります。

解決策を見つけるには、以下の例をご覧ください:

  1. 防護デザインに基づいて、ホームページの Text-Image ビルディングブロックに追加した図形を適用します。

    • 形状が正しい位置にあることを確認します。

    • テーマのライトブルーに色を設定します。

関連項目

:ref:`背景図形 <website_themes/shapes/bg/custom/use> ` の使用方法については、リファレンスドキュメントを参照してください。

../../../_images/shape-section.png

ちなみに

標準の Odoo 形状とは異なり、セクションにカスタム形状を適用する場合は、 web_editor をシェイプクラスの イラストレーション に置き換えます。

/website_airproof/data/pages/home.xml
<!-- Text-image block & Background shape -->
<section class="s_text_image o_cc o_cc3 o_colored_level pt120 pb96"
data-snippet="s_image_text" data-name="Image - Text" style="background-color: rgb(41, 128,
187);" data-oe-shape-data="{'shape': 'illustration/airproof/waves', 'colors': {'c1': '#BBE1FA'},
'flip': ['x']}">
   <div class="o_we_shape o_illustration_airproof_waves o_we_flip_x" style="background-image:
   url('/web_editor/shape/illustration%2Fairproof%2Fwaves.svg?c2=%23BBE1FA');
   background-position: 100% 100%;"/>
   [...]
</section>

グラデーションを追加

「最新製品」ブロックにカスタムの背景グラデーションを適用し、青色の rgb(11, 142, 230) から濃い青色の rgb(41, 128, 187) に移行します。

関連項目

Gradients の使用方法については、リファレンスドキュメントを参照してください。

/website_airproof/data/pages/home.xml
<!-- Latest products section -->
<section class="s_parallax o_colored_level o_cc o_cc5 s_parallax_no_overflow_hidden pt40 pb32"
data-scroll-background-ratio="0" data-snippet="s_parallax" data-name="Parallax"
style="background-image: linear-gradient(0deg, rgb(41, 128, 187) 0%, rgb(11, 142, 230) 100%)
!important;">
   [...]
</section>

アニメーション

クライアントは全体的なデザインを気に入っていますが、静的なページが見つかります。 fade-in、rotate、`bounce`などのアニメーションとのページインタラクティブ性を向上させます。これらは列、画像、テキスト、ボタン…

防気設計に基づいて、次の要素をアニメーション化します。

  • カルーセルの最初のスライドのテキストです

  • 最初のスライドからのドローンのステッカーと写真

  • アイコン付きの4つの列。

アニメーションの遅延を調整してスムーズなトランジションを実現します。

関連項目

アニメーション の適用方法については、リファレンスドキュメントを参照してください。

../../../_images/animations.gif

home.xml の解決策を見つけます。

画像アニメーション
<img src="/web/image/website_airproof.img_sticker" class="img img-fluid position-absolute
x_sticker o_animate o_anim_rotate_in o_visible" style="animation-delay: 0.8s;
--wanim-intensity: 30;"/>

<img src="/web/image/website_airproof.img_drone" class="img img-fluid o_animate
o_anim_zoom_out o_visible" alt="Drone"/>
テキストアニメーション
<span class="o_animated_text o_animate o_anim_fade_in o_anim_from_bottom o_visible">One
step</span>
列アニメーション
<div class="o_grid_item o_colored_level g-height-7 g-col-lg-3 col-lg-3 text-center
o_anim_fade_in o_animate o_anim_from_bottom o_visible" style="z-index: 2;
grid-area: 6 / 1 / 12 / 4; --wanim-intensity: 15;">
</div>

フォーム

Odooのフォームは非常に強力です. 彼らは個人的な受信トレイに直接電子メールを送信するか、他のOdooアプリケーションと直接統合することができます. これは素晴らしいです, あなたのクライアントの主な優先事項の一つとしてアフターサービスです. したがって、コンタクトフォームが正しく構成されている必要があります.

防御設計に基づいて、コンタクトページを作成します。デフォルトのページを無効にし、メニューに新しいページリンクを追加することを忘れないでください。 コンタクトフォームへのリクエストは次のとおりです:

  • *名前*と*メールアドレス*フィールド。

  • 会社名 フィールド

  • 会社名*が記入されている場合にのみ表示される条件付きVAT フィールド。

  • *会社名*を除き、すべてのフィールドは必須です。

  • フォーム送信はメールをトリガーする必要があります。

  • フォームを送信すると、連絡先ページに「感謝メッセージ」が表示されたままになります。

関連項目

次の方法についてのリファレンスドキュメントを参照してください:

  • :ref:`defaultページ <website_themes/pages/default> `を無効にします。

  • create a new page,

  • add a menu item,

  • :doc:`フォーム </developer/howtos/website_themes/forms> `を作成します。

ちなみに

フォームの正しいコードを決定するには:

  • ウェブサイトビルダーを介してテストページを作成します。
    興味のあるBuilding Blockをドラッグ&ドロップして、適切なデザインを適用します。
    Editor HTML/SCSS で生成されたコードを使用してください。

  • odoo/addons/website/views/snippets/s_website_form.xml でオリジナルのBuilding Blockコードを見つけることもできます。

contact.xml の解決策を確認します。