ヘルプセンター

【Avada】エレメンツ(Container、Column、Element)の設定画面について

Wordpressテンプレートの一つであるAvadaついてご説明します。
(本マニュアルは Avada 5.0.6を元に作成しております)

Avadaマニュアルでは「エレメンツ」という用語をContainer、Column、Elementの総称として使用しています。

本マニュアルは以下の内容について記載しています。

 

b_simple_122_2M.png 

 

エレメンツ(Container、Column、Element)とは

Container、Columnともにページレイアウトに関する機能です。

 Container
Columnや、Columnに含まれるElementを収容するためのコンテンツエリアです。(図の水色枠)


 Column
Elementを配置できる枠で、何列表示にするかを設定できます。(図の緑色枠)

cc_both01.png

 

 Element
ページを構成するもののうち、個別の機能を有する個々の要素のことで、Column内に位置します。
例えば
elm_about02.png
上記画像の状態の場合、左Columnに含まれる「Image Frame」と、右Columnに含まれる「Button」「Text Block」がそれぞれElementとなります。

 

 

b_simple_122_2M.png 

 

Containerの基本的な操作方法

 

 【Container】設定画面について

  1.  設定したいContainer右上のcc_icon10.pngをクリックします。
    cc_container15.png


  2. Container画面が表示されるので、必要な箇所を設定・変更し、「SAVE」をクリックします。
    cc_container16.png

    Generalタブ
    幅、高さ、アンカーなどを設定できます。

    Backbroundタブ
    Containerの背景色や背景画像、背景動画を設定できます。

    Designタブ
    枠線の太さ、余白を設定できます。余白の設定方法は【Avada】余白を調整するにはをご覧ください。


  3. 設定した内容でContinerが更新されました。

     

 【Container】タイトルの付け方

  1.  画面上のContainer左上にカーソルを合わせます。
    cc_container10.pngcc_container11.png


  2. クリックするとカーソルが表示されるので、付けたいタイトルを入力してEnterを押下します。
    cc_container12.pngcc_container13.png


  3. 入力した内容でタイトルが設定されました。
    cc_container14.png

 

 

b_simple_122_2M.png

 

Columnの基本的な操作方法

 【Column】設定画面について

  1. 設定したいColumn左上のcc_icon11.pngをクリックします。
    cc_column14.png


  2. Column画面が表示されるので、必要な箇所を設定・変更し、「SAVE」をクリックします。
    cc_column15.png

    Generalタブ
    次のColumnとの間隔、内容の位置、Hover時の挙動、Columnに対するリンクなどを設定できます。

    Designタブ
    Columnの背景色や背景画像、枠線、余白を設定できます。余白の設定方法は【Avada】余白を調整するにはをご覧ください。

    Animationタブ
    アニメーションタイプを設定できます。


  3. 設定した内容でColumnが更新されました。

 

 【Column】幅の変更方法

  1. レイアウトを変更したいColumn左上のカラム値(1/3など)をクリックします。
    cc_column04.png 


  2. 現在の値+変更可能な値が表示されるので、変更したい値を選択します。(今回は1/5を選択します)
    cc_column05.png ⇒ cc_column06.png

  3. 選択したColumnが選択したレイアウト(今回は1/5)に変更されました。
    cc_column07.png



b_simple_122_2M.png

 

Elementの基本的な操作方法

 【Element】設定画面について

  1. 設定したいElementにカーソルを合わせ、cc_icon11.pngをクリックします。
    cc_element01.png


  2. Element画面が表示されるので、必要な箇所を設定・変更し、「SAVE」をクリックします。
    ※表示内容はElementによって異なります
    cc_element02.png


  3. 設定した内容でElementが更新されました。
他にご質問がございましたら、 CMSサポートへお問い合わせください

コメント

株式会社シーエムエスエス
CMSサポート
Tel : 03-6869-0379(月~金/10:00~18:00)
Powered by Zendesk