ここに並ぶボックスは、
①カスタマイズ>詳細設定>追加CSSの編集
②HTMLタグ
で実現してます。レスポンシブデザインです。
HTMLタグは、 div class="box-name" テキスト /div です。(カギ括弧< >を省略)
例えば、box-nameにbox1と入れると、次のようなボックス(囲み枠)になります。
BOX1
ボックス1 線は使わずに背景を塗りつぶすだけにしてみました。背景色は好みで変えてください。テキストの数でボックスの高さは変わります。1行だけなら、タイトルライン(見出し)に使えますね。
BOX2
ここにタイトル
ここに文章 ボックス2
BOX3
ここにタイトル
ボックス3 ラベルをボックス内の角に入れてみました。CSSの「left:~」という部分を「right:~」に書き換えればラベルを右上に配置することができます。
BOX4
ここにタイトル
ボックス4 タイトルラベルがボックスからはみ出るようなデザインです。重要なポイントなどを強調したいときに使うのがおすすめです。
BOX5
ボックス5 こちらは上にだけ線をつけてみた場合です。背景と線/文字の色を全体的に同系統色でまとめるのがポイントです。