Lightningで全幅デザイン

これはLTG全幅見出しです。 簡単に全幅コンテンツを作ることができます。 ウィジェットを全幅にカスタマイズしなくても、この全幅見出しを交互に挟むと 全幅風にすることもできます。

3PR エリア1 タイトル

a1a57b48edf84854c570d55d184bf888_m

わかりやすくアピールポイントを表示することができます。
リンク出来るので、気になった情報があったら詳しい情報のページを見に行ってもらうことができます

3PR エリア2 タイトル

8ff465e5a619e17e8e2ab233bfe82d83_m

自分でHTMLを書くのはハードルが高いという人や、なるべく簡単に短時間でサイトを完成させたいという人は
テーマやプラグインのこのようなシンプルな機能を使うのが良いでしょう。

3PR エリア3 タイトル

98e6bcadbaee811206d5c750b673a40a_l

後で内容を変えたいときに、簡単に変えられるのもメリットです。
画像の大きさだけは揃えるように気をつけましょう。

文字が見えづらいときは背景に色を重ねます

他のコンテンツを全幅にしなくても全幅パララックスが作れます。 ただし、タイトルとサブタイトルしか付けられないので、ボタンなど他のコンテンツを入れたい場合には向きません。 背景色はページ全体に設定しましょう。 コンテナの中に入るのでコンテンツの幅は見やすい範囲までになります。

サービス紹介

ウィジェットでも3PRブロックは追加できます。

会社案内

画像とFontAwesomアイコンのどちらかを選べます

採用情報

このようなウィジェットと自分で書いたコードを表示させるウィジェットを組み合わせて使えます。

会員登録

スマホでは縦並びになるので、パララックス風にする際には長くなり過ぎないよう注意が必要です。

画面幅いっぱい使って見出しサンプル①シンプルな全幅見出し

簡単に今風の全幅デザインができる

背景に色を付けたり背景画像を付けたりして、内容のかたまりごとに分かれたデザインが作れる

見出しで内容を分けるよりもわかりやすい!

2カラムデザインよりも今風

画面幅いっぱい使って見出しサンプル②斜めに傾いた全幅見出し

お気軽にお問合せください。

a要素を使って、クリックするとスマホなどからすぐにメールや電話できるようになっています。

画面幅いっぱい使って見出しサンプル③ギザギザに切り取られた全幅見出し

画像をアップロード

ブロックも入れられる

ブロックの外側をHTMLで全幅にするdivで囲えば
どんなブロックでも全幅背景で使えます。
containerを入れなければ、画面いっぱいの幅で表示することも可能

PAGE TOP
MENU