ヘルプセンター

【Avada】ボタンを追加する方法

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

本マニュアルは、ButtonというElementを使用したボタンの追加・操作方法について記載しています。

b_simple_122_2M.png



 ボタンの追加方法

ボタンは、「Button」Elementを使用することで追加できます。

    1. ボタンを追加したいColumn内の「+Element」をクリックします。
      img_imgf00.png

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

    3. Button画面が表示されます。
      btn_btn02.png

    4. 一般的な情報を設定します。(詳細はButtonの設定方法をご覧ください)

    5. 「SAVE」をクリックします。

    6. ボタンが作成されました。
      btn_btn04.png





b_simple_122_2M.png

 

 ボタンの設定方法

ボタンメニュー内でボタンの表示内容やレイアウトを設定できます。
以下では代表的な機能について説明します。

  1. 設定・編集したいボタンのimg_imgcico01.pngをクリックします。
    btn_btn05.png


  2. Button画面が表示されるので、必要な箇所を設定します。

    • Generalタブ
      Generalタブでは、ボタン上の文字やURLなどの一般的な設定を行えます。
      btn_btn06_1.png

      • Button URL
        ボタンをクリックすると表示されるURL(リンク先 )です。

      • Button Text
        ボタン上に表示される文字列です。入力した内容がボタンに反映されます。
        btn_btn03_2-1.png

        btn_btn03_2-2.png


      • Button Title Attribute
        ボタンリンクにタイトル属性を設定できます。
        ボタンにマウスカーソルを合わせると、入力した内容がチップ表示されます。
        btn_btn03_2-3.png

        btn_btn03_2-4.png

      • Button Target
        ボタンクリック時のリンク先をどう開くかを設定できます。
        • _self:ButtonURLで入力したアドレスを同じウィンドウで開きます
        • _blank:ButtonURLで入力したアドレスを新規ウィンドウで開きます


      • Alignment
        ボタンの位置を設定できます。
        • Text Flow
          btn_btn03_3-1.png

        • Left
          btn_btn03_3-2.png

        • Center
          btn_btn03_3-3.png

        • Right
          btn_btn03_3-4.png


      • Designタブ
        ボタンのデザインを設定できます。
        btn_btn06_2.png

        • Button Style
          ボタンの色を選択できます。

        • Button Type
          ボタンの見た目を平面か立体か選択できます。
          btn_btn03_4-1.png
        • Button Size
          ボタンの大きさを選択できます。

        • Button Span
          ボタンの幅がContainer(Column)の幅いっぱいに広がるかを設定できます。
          btn_btn03_4-2.png

        • Button Shape
          ボタンの形を設定できます。
          btn_btn03_4-3.png

        • Icon
          ボタンに挿入するアイコンを選択できます。(下記画像だと「★」)
          さらに追加で表示される「Icon Position」でアイコンの位置(Left/Right)を、「Icon Divider」でアイコンとテキストの間に仕切りを入れるかどうか(Yes/No)を設定できます。
          btn_btn03_4-4.png



      • Animationタブ
        ボタンのアニメーションを設定できます。
        btn_btn06_3.png

  3. 「SAVE」をクリックします。
  4. 設定した内容に更新されました。

 

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

コメント

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