ヘルプセンター

【Avada】余白を調整するには

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

 
本マニュアルはContainer、Column、Element(Separator)を利用して余白を調整する方法について記載しています。 

 

b_simple_122_2M.png 

 

 構成要素と余白について

 構成要素(各エレメントの関係性)とは

ContainerはColumn(の組み合わせ)で構成されます。
Columnには、テキスト・画像・動画などの具体的な機能であるElementを複数含むことができます。
各エレメントの関係は以下の図の通りです。
cce.png


Elementは色々な機能をもつ要素であり、様々な種類のElementが存在します。
今回は余白を設定する方法のひとつとして、Elementの種類のひとつであるSeparatorについても説明します。


 

 余白とは

本ページで言う余白とは、各構成要素の間にできる、文字や画像等が何も書かれていない部分のことを意味します。
余白には二つの種類があります。

  • padding
    要素の内側にできる余白。設定した分要素の持つブロック(エリア)自体が増えます。

  • margin
    要素の外側にできる、要素間の余白

cce2.png

 

b_simple_122_2M.png 

 Containerでの余白設定

  1. 余白を設定したいContainer右上の cc_icon07.pngアイコンをクリックします。
    cce_container01.png

  2. 設定画面が表示されるので、Designタブをクリックします。
    cce_container02.png

  3. DesignタブのMarginおよびPaddingで設定したい余白を設定し、「SAVE」をクリックします。
    cce_container03.png

  4. 余白が設定されました。

    表示例:
    ※各Containerともに薄い色がContainerの背景色で、濃い色がContainerに含まれるColumnの背景色です。

    余白設定なし
    cce_container04.png

    Container:Margin「↓50px」設定あり
    cce_container05.png

    Container:Padding「↑50px」「→50px」「↓50px」「←50px」設定あり
    cce_container06.png

 

b_simple_122_2M.png 

 Columnでの余白設定

  1. 余白を設定したいColumn右上の cc_icon08.pngアイコンをクリックします。
    cce_column01.png

  2. 設定画面が表示されるので、Designタブをクリックします。
    cce_column02.png

  3. DesignタブのMarginおよびPaddingで設定したい余白を設定し、「SAVE」をクリックします。
    cce_column03.png

  4. 余白が設定されました。

    表示例:
    ※背景色のうち黄色は余白を調整したColumnの背景色、水色はContainerの背景色です。

    余白設定なし
    cce_column04.png

    Container:Margin「↑30px」「↓30px」設定あり
    cce_column06.png

    Container:Padding「↑50px」「→50px」「↓50px」「←50px」設定あり
    cce_column05.png

 

b_simple_122_2M.png 

 Element(Separator)での余白設定

  1. 余白を設定したい箇所があるColumn下の「+Element」をクリックします。
    cce_element01.png

  2. Select Element画面が表示されるので、「Separator」をクリックします。
    cce_element02.png

  3. 設定画面が表示されるので、Styleは「No Style」のままでDesignタブをクリックします。
    cce_element03.png

  4. DesignタブのMarginで余白を設定し、「SAVE」をクリックします。
    cce_element04.png

    Separatorが作成されました。
    cce_element05.png


  5. 作成されたSeparatorにカーソルを合わせ、余白を入れたい位置にドラッグ&ドロップします。
    (移動方法の詳細は【Avada】エレメンツの配置替え方法をご覧ください)
    cce_element06.png


  6. 移動した位置に余白が挿入されました。
    cce_element07.png

    表示例:

    余白設定なし
    cce_element08.png

    Margin「↑100px」設定あり
    cce_element09.png


 

 

 

 

 

他にご質問がございましたら、 CMSサポートへお問い合わせください

コメント

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