横浜のデザインとwebと動画屋さん | 日本一店長のアイシープ

日本一店長のチラシデザインと動画&ホームページ制作屋さん

【最新版】wordpressテーマ「Divi」TIPS集

, …
2190 views
約4分
【最新版】wordpressテーマ「Divi」TIPS集

現在wordpressテーマのグローバルスタンダードは「Divi」でしょう。
日本語テーマが使いやすかったり、スピードが速かったりとメリットはあるのですが、やはり長く使用するテーマになると誰しもが使用しているものがいいのです。
なんと言っても情報が多いからです。
、、、ということでテーマ「Divi」のよく使うTIPSを備忘録として書き留めておきます。

Divi TIPS

サイドバーの左右設定

Diviのテーマオプションでサイドバー左右を設定してもうまくいきません。
一度クラシックエディターにして各固定ページでサイドバー設定ができます。

Diviテーマオプション→ビルダー→詳細設定→クラシックエディタを有効にする
それで改めて設定しましょう。

保存設定

Diviで保存がうまくできない時があります
どうやらサーバーがロリポップなのが原因のようです。

サイドバーのレスポンシブ設定

サイドバーを設定するとレスポンシブでサイドバー情報が先にスクロールしてしまうことがあるので
「その他のモジュール設定」→「Go To Layer」で下へ持っていく

Diviライブラリーで共通更新がラクに

HP作成って複数のページで同じ箇所を使っていますよね。
そういう時に1箇所づつ更新はダルイです。
Diviライブラリーに「グローバル」保存しましょう。
そうすると一箇所変更すれば全部変更されます。

スマホ表示だとモジュールが崩れる

モジュール設定>デザイン>サイズ変更
デスクトップ、タブレット、スマホ別で調整
余白、テキストでも調整

突然画面に変なテクスチャーが、、、

Diviのアップデートでレイアウトが崩れるという情報はゲットしていますが、今回の場合は、、、、
モジュールの背景でテクスチャを使ってしまったら他の箇所にも勝手にテクスチャが挿入されていました。
今回のアップデートで新たにテクスチャの設定ができるようになったのが不具合の原因でしょう。
とりあえず前のバージョンに戻しましょう。

スクロール時にエフェクトを

「スクロールエフェクト」でスクロール時にエフェクトをかけて時差効果を。
モジュール設定の「Scroll Effects」で動きをつけましょう。

GoogleAnalyticsトラッキングコードを

Google Analyticsはよりに入れた方がいいみたいです。

ウィジェットが表示されない

いつからか外観→「ウィジェット」が表示されなくなりました。
アップデートでクラシックウィジェットは必要なくなったのかもしれません。
、ということでプラグインから「Classic Widgets」をインストール→有効化して使えるようになりました。

サイドバーの幅を広くする

Diviは、サイドバーの幅(幅)はデフォルトで20.875%で、左側のコンテンツ領域は79.125%に設定されています。
基本的なページ/記事のサイドバーは、デフォルトで固定されているのです。
この場合、次のCSSコードを追加して、右のサイドバーの幅を変更することができます。

#left-area{width: 66.67%;}
#sidebar{width: 33.33%;}
.et_right_sidebar #main-content .container::before {
right: 33.33% !important;
}

Diviを使った国内サイト事例集

こちらのページにDiviを使ったサイトがあります。
「こんなこともできるんだ〜」って思っちゃいますよね。
つ〜か、どのテーマでもほとんどのことはカンタンにできるようになりましたね!