Diviで作ってみたシリーズ1『カフェのレイアウト』

Diviでカフェのレイアウトを作ってみた

こんにちはナオミです!今日はちょっと時間があったので、Diviでカフェのレイアウトを作ってみました。

ワードプレスのDiviテーマでカフェのレイアウトを作ってみた。

こんな感じのレイアウトを作りました。クリックすると拡大できます。

レイアウトはここからダウンロードできます。

このビデオで0からこのレイアウトを作っています。ほんの15分のビデオです。

このレイアウトを作るのに使ったDiviのモジュール

このレイアウトに使ったモジュールは上から順に

  • テキストモジュール
  • ギャラリーモジュール
  • 広告モジュール
  • アクション呼び出しモジュール
  • ソーシャルシェアリングのモジュール

です。

ポイント

行に半透明な背景を設定

Diviの行に半透明な背景を設定

まず、この白い半透明の部分は行で作りました。

ちなみに背景は、rgba(255,255,255,0.9)にセットしてあります。

境界オプションで角を丸く

Diviの行の境界を設定

行の境界設定で、角を丸くしています。

広告モジュールのアイコンを左寄りに

Diviの広告モジュールの設定

これも簡単に設定から変えれます。

Diviの広告モジュールのアイコンの一の設定

Diviならこんな簡単に速く複雑なレイアウトを作れるビジュアルビルダー

動画をみていただければ、わかると思いますが、Diviのビジュアルビルダーなら15分ほどで、このくらいのレイアウトなら作成できます。

ぜひ色々なレイアウトのデザインに挑戦してみてください!

Diviをまだ試してない人は、30日以内ならお金が戻ってきますので、こちらからどうぞ。

レイアウトはここからダウンロードできます。

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です