Dividerエレメントの追加.
ページを明確なセクションに分ける、すっきりした水平線を設置できます。視覚的な区切りが必要なとき、テキスト、画像、その他のエレメントの間に使います。
ディバイダーの追加
ログインした状態でページを開きます。コンテンツエリアにカーソルを合わせると、ビルダーのコントロールが表示されます。基本操作は最初のページをご覧ください。
- カラムにカーソルを合わせ、コントロールバーの+をクリックします。空のページではAdd Elementsをクリックします。Contentタブを開き、Dividerをクリックします。ダイアログなしでカラムの一番上に追加されます。移動するには、コントロールバーのハンドルでドラッグします。
- 線は細いため、線自体にカーソルを合わせてコントロールバーを表示します。Moreをクリックし、Settingsを選んでColorを決めます。
- 太さ設定はThicknessでCustom thicknessを選びます。
- 線の太さはThicknessスライダーで設定します。ここでは6 pxにします。
- 長さ設定はLengthでCustom widthを選びます。
- 線の長さはWidthスライダーで設定します。ここでは300 pxにします。
- 配置はAlignをCenterにします。
- ダイアログのSaveをクリックします。次に、コンテンツエリア上部のツールバーにあるSaveをクリックして、ページを保存します。
表示内容
選んだ色・太さ・長さの水平線がカラムを横切ります。動画では太さ6 px、長さ300 pxの中央寄せです。ページを保存して公開すると、訪問者に表示されます。
ディバイダーの設定
エレメントにカーソルを合わせ、コントロールバーのMore > Settingsを開きます。設定項目は次のとおりです。
- Color: 線の色。空にするとテーマの色になります。
- Thickness: Theme defaultまたはCustom thickness。Customを選ぶと、0から20 pxのThicknessスライダーが付きます。
- Length: Theme defaultまたはCustom width。幅いっぱいの線にはLengthをTheme defaultのままにします。Customを選ぶと、0から500 pxのWidthスライダーが付きます。
- Align: Left、Center、Right。Custom widthでのみ表示されます。
表示されない場合
- ContentタブにDividerがない。 ユーザープロファイルで非表示になっています。管理者に依頼して、SeparatorにElementsのUser Profilesでチェックを付けてもらいます。
- 再読み込み後に消えている。 ページが保存されていません。追加し直し、コンテンツエリア上部のツールバーにあるSaveをクリックします。
- ディバイダーがコンテンツより上にある。 新しいエレメントはカラムの一番上に追加されます。線にカーソルを合わせてハンドルでドラッグするか、More > Move Downを開きます。
- 線が見えない。 Colorがページの背景色と同じです。エレメントにカーソルを合わせ、コントロールバーのMore > Settingsを開き、コントラストのある色を選びます。
- 線が幅いっぱいにならない。 LengthがCustom widthになっています。エレメントにカーソルを合わせ、コントロールバーのMore > Settingsを開き、LengthをTheme defaultに戻します。
次のステップ
Styleタブでディバイダーまわりの間隔を変更します。