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

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

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

この記事では実際にDiviでページを制作していく手順について解説します。

それでは始めましょう!

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

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

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

このビデオで0からこのレイアウトを作っています。ほんの15分のビデオですので、参考にしてみてください。

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

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

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

です。

ポイント

基本的にモジュールを設置して、設定していけば今回のレイアウトは完成するのですが、デザイン的に少しこだわっている部分があるので、こだわりポイントを解説します。

行に半透明な背景を設定

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

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

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

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

Diviの行の境界を設定

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

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

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

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

広告モジュール>デザイン>画像/アイコンの配置

の設定を”左”に変更するだけです。

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

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

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

モジュールを置いていくだけでもそれなりの見た目になりますが、少しアクセントを加えるとよりかっこよくなりますね!

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

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

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

いかがでしたか?

今回はDiviで1からWEBページをデザインしてみましたが、テンプレートを活用すればより早く制作することもできます。
どのテンプレートもクオリティが高くて少しいじれば簡単にかっこいいWEBサイトができるようになります。
テンプレートの使い方についてはこちらの記事で解説しています。

Diviの無料テンプレートからサイトを高速で作る方法【1300を超えるレイアウトの数】

Diviの実際の使用例

これらの記事ではの記事では、Diviを実際に使用してお仕事しているWEB制作者の声実際にDiviを使用して製作されたサイトを紹介しています。

Diviを使って実際にフリーランスしてる方にインタビューしてみました

Diviで作られた日本のウェブサイト13選

Diviのことをもっと深く知りたい方は、Diviの使い方完全ガイドをご覧ください。

コードを書かないウェブ制作を目指すコミュニティ『TOFUラボ』

Diviの最新情報を知りたいなら、ノーコードでWEBサイト制作を支援するサロン『TOFUラボ』に参加しませんか?
私が運営してるノーコードでWEBサイト制作を支援するのコミュニティです。

最新情報だけではなく技術的な質問も飛び交っています。

また、デザインやSEOなどWEBサイト制作に関する様々な勉強会も開催されています。

『TOFUラボ』の紹介はこちらです

興味があれば、是非参加してくださいね。
入会してから7日間は無料で合わないなと思えばいつでもキャンセル可能です。

こんにちは、ナオミです!

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴18年です。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントを残す

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

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通