Diviのモジュール
Diviに初めから入っているモジュールを実際に使ってみる。
お問い合わせフォーム
基本的なことは出来るみたい。
条件付きロジックがあるので、例えば下のフォームの「選択してください。」の「その他」を選択すると内容を記述するフォームが出てきます。
reCAPTCHA v3も使用できます。
ただ、自動返信メールが出来ないみたい。これは結構致命的。
問い合わせタイトル
アクションの呼び出し
下には説明文の個所に画像を入れているが、当然無くても大丈夫。
ボタンはリンクURL（#でも良いが）を設定しないと出ない。
あなたのタイトルはここに入ります
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
アコーディオン
FAQとかに使うやつ。
ただ、全部閉じた状態とか出来ないみたい。あと、隙間の調節ってないのかなあ？「行」の「使用カスタム溝幅」を１にすると隙間はなくなるけどね。
いまいち使いにくそう。
すべて閉じた状態にしたければモジュール「トグル」を使う方が良さそう。
あなたのタイトルはここに入ります
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
あなたのタイトルはここに入ります
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
あなたのタイトルはここに入ります
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
あなたのタイトルはここに入ります
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
オーディオ
恐らく使うことはない。
Memories
カウントダウンタイマー
ランディングページでたまに使うやつ。ただ、日本語が変。日(s)って何？
直すにはjavascriptを書く必要があるみたい。
Diviを使う人なら一度は見る人、根本耕輔さんがコードを公開してくださってます。いつもありがとうございます。
こちらのぺーじです。
あなたのタイトルはここに入ります
日(s)
:
時間(s)
:
分)
:
(S)
ギャラリー
その他にスライダースタイルの表示もあります。
1ページに表示できる画像の数は決められますが、驚いたことに列数は４列のみで他の選択肢は無しです。タブレットでは３列でスマホは１列。やはり選択肢無。
う～ん。これは不満が残りますね。
ギャラリープラグインはいろいろありますが、今回入れたのは「Modula」。
有料版もありますが、私は無料版でも大丈夫っぽい。
プラグインを新規追加して有効化したら、wordpressのダッシュボードの「Modula」を選び、「Add New」をクリック。
分かりやすいタイトルを入力し、「Upload image files」か「Select from Library」で画像を選ぶ。あとはギャラリータイプや隙間などを選び、「Save Gallery」をクリックすれば作成されます。
その後diviのモジュール追加に項目が追加されているので、作成したギャラリーを入れるだけ。
ショートコードも作成されているので、それをページに挿入してもよい。
↓は 「Gallery Type」を「Masonry」にしたもの。
タブレットやスマホでも良い感じに表示されていた。これは楽で良い。
ただ、LightBoxはよいのだけど、「×」をクリックでしか画像が消えないのはちょっと不満。
画面の何もない所をクリックでも消えて欲しい。
サークルカウンター
なかなか良い感じ。
%
あなたのタイトルはここに入ります
スライダー
２枚目のスライダーに画像を入れたけど、画像や動画はそこに入るのね。
場所を自由に選びたいね。
背景画像とかは良い感じだし、テキストの背景にオーバーレイ出来るのは良い点。
あと、２枚目の背景に背景パターンを設定したけど、良い感じ。
３枚目には背景マスクを設定。これらはelementorには無かったと思う。良い感じ。
AutoPlayが無いな～って思ったけど、ありました。
「デザイン」の一番下、「アニメーション」→「自動アニメーション」で設定できます。
スライダーを投稿する
Diviを使っていると酷い日本語に慣れてきます。
これは「投稿をスライダーする」が正解？
いや、違う気がする。
とにかく投稿をスライダーで表示するモジュールです。
ソーシャルメディアのフォロー
シンプルだけど、使いやすそう。
個別で角丸の丸みを調節できるので、〇にも出来る。色や大きさも変更可能。
タブ
良さげなんだけど、アクティブタブの下に薄っすら線があるのが少し不満。
調べたら「ul.et_pb_tabs_controls:after」に「border-top: 1px solid #d9d9d9;」があった。
これを「border-top:none;」にするとアクティブタブの下線も消えるけど、非アクティブの下線も消える。
それに、カスタムCSSに「ul.et_pb_tabs_controls:after」が無いし、テーマカスタマイザーの追加css？
う～ん、そこまでする様なものでも無いか。。
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
テキスト
テキストを入れるモジュール。一つのモジュールの中でH1～H6、Pを選べる。「ビジュアル」と「テキスト」のタブを切り替えて、「ビジュアル」ではより視覚的に入力でき、「テキスト」ではタグが使えて慣れている人はこちらの方が良さそう。
恐らく一番使うモジュール。
Diviやelementorを使う人なら、必ず見る人、NoCodeWebのナオミさんが、YOUTUBEで探すのに苦労するモジュールです。
ここはH2を使う
ここからまた<p>に戻る。
こんな風に使えます。
また、あたりまえですが、cssが使えたらこんな感じも出来ますね。
↓タグを使って改行のテスト。
PCでは改行される
PC以外ではされない。
サンプルテキスト
あと、面白いのは「ボディ」でモバイルを選択して文字を書くと、モバイルでだけ表示されるテキストが作れる点です。
試しにこれを767px以下のスクリーンサイズで見てください。
青字の文字が表れるはずです。
ディバイダー
境界線を入れるモジュール。テキストやアイコンは使えない。非表示に出来るオプションがある。
トグル
アコーディオンより、こちらの方がFAQに使えそうかな。
最初の状態→「開く」「閉じる」を選択できます。
例ではトグルとトグルの間がありませんが、「行」の設定→「デザイン」→「サイズ変更」で「使用カスタム溝幅」を１に設定しているからです。
また、細かいですが、上２つのトグルは境界線を上と右と左だけ設定しています。
※下の境界線を設定すると、下のトグルの上の境界線とダブって少しだけ太くなるため
あなたのタイトルはここに入ります
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
あなたのタイトルはここに入ります
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
あなたのタイトルはここに入ります
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
バーカウンター
下の例では余白を10px取っているので少しバーが太くなっています。
また、一番上のバーだけ角丸を設定しています。
- あなたのタイトルはここに入ります 50%
- あなたのタイトルはここに入ります 75%
- あなたのタイトルはここに入ります 30%
ブログ
グリッド表示とリスト表示があります。
メタ情報の選択、「続きを読む」を表示するかしないかの選択などあります。
日付はY年m月d日に直す必要あり。
sortの方法が選択できない。（新しい順だけで、古い順がない）
高さが揃ってない。
いまいち使いづらい。
※Elementorの無料版ではそもそもポストリストが無かったけど、elementor の無料プラグインで追加できるものの方が使いやすい。
サイト移行方法
出来たwordpressサイトを移行する手順の覚書です。 自分の場合は、初期設定済みのサイトを移行して、それを土台にサイトを構築していくので、手順を忘れないためのものです。■Duplicatorを使う方法はたくさんあると思いますが、プラグインのDuplicatorを使って移行作業をしていきます。 hidari Duplicatorをインストール→移行元サイトをバックアップ プラグイン新規追加から「Duplicator」をインストールし有効化する...
Diviのテーマカスタマイザー
テーマカスタマイザーの設定wordpressのダッシュボード→「Divi」→「テーマカスタマイザー」 一般設定 「サイトアイデンティティ」で「サイトのタイトル」と「キャッチフレーズ」を（決まっていなければ）設定、「サイトアイコンを設定」でfaviconをアップロードする。※faviconは512×512以上のpngファイルをアップロードすればOK...
wordpressでDiviを使うときのプラグイン
入れておくプラグイン Really Simple SSL http:// にアクセスした際に https:// に飛ばすために入れる。 プラグインを新規追加して有効化すると、ポップアップが出るので、「SSLを有効化」をクリック。 そのまま「管理画面へ」をクリックすると、http:// にアクセスした際に https:// に飛ばす設定は完了している。 Edit Author Slug URL末尾に「?author=1」を入れるとログインIDが見えてしまうのでそれを隠すプラグイン プラグインを新規追加して有効化する。...
wordpressの初期設定
wordpressダッシュボードの「設定」 ※必要な項目のみ抜粋 一般設定 「サイトのタイトル」や「キャッチフレーズ」を確認 「WordPress アドレス (URL)」と「サイトアドレス (URL)」が「https://」になっていることを確認 「日付形式」や「時刻形式」を確認→「Y年n月j日」「A g:i」 投稿設定 これは投稿のカテゴリーでよく使うものがあれば設定すればよい。その他は特に設定の必要はない。 表示設定 「ホームページの表示」で「固定ページ...
Divi テーマオプションの設定
Divi テーマオプション wordpressのダッシュボード「Divi」をクリックで「Divi テーマオプション」が開く※以下変更が必要と思われる項目のみ記述 [全般]タブの[一般] 「ロゴ」ロゴをアップロードする（ヘッダー左のロゴ） 「Color Pickers Default Palette」を設定。こことかこことか使いやすい 「Divi ギャラリーを有効にする」→無効。あまり良くないのでプラグインを使う 「Google Fontsを使用する」→基本的には無効。遅くなる。 「日付の表示法」→Y年n月j日...
xserverにDiviをインストールするまで
Diviインストール Xserverのサーバーパネル「WordPress簡単インストール」から、インストールするドメインを選び「wordpressインストール」タブを開きドメインを選択。※サブドメインにインストールする場合は、同じページの「サイトURL」から予め作成しておいたサブドメインを選択 インストールされたwordpressのダッシュボード「設定」タブで「WordPress アドレス (URL)」と「サイトアドレス (URL) 」で https にする。※xserverのssl設定で無料独自SSLをONにしておくすると...
ボタン
工夫次第で設定からデザインできる。
ただ、何故かテキスト色は「明るい」「暗い」からしか選べなかった。
結局cssでしないといけないのかな？
いや、出来た。ボタンテキストカラーって項目がありました。
elementor ならプラグインを入れればたくさんのサンプルを見て気に入ったものを選ぶだけなのにな・・・。
↓css を書くことなく出来るボタン↓
↓cssとdiviの設定で作ったボタン↓
メールoptin
ただ、メール配信システムを契約しておく必要があり、設定でシステムを選んで連携させるのですが、日本のサービスは選択肢にないようです。
※FireFoxではフォームが出ない
※他のブラウザでも安定しない
ユーザーの感想
ユーザーの感想・レビューを紹介するモジュールですね。
※chrome以外では画像が出ない？たまに出る。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
ログイン
プラグイン「SiteGuard WP Plugin」が入っていると、画像認証があるのでログインできない。
人
タブレット以下では画像は上に配置される。
SNSアイコンは「facebook」「Twitter」「Google+」「LinkedIn」のみ。
「torque Team」の方が良い。
名前はここに行く
位置
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
価格表
↓入れただけの状態
トグルタイトル
Subtitle goes Here- この機能は含まれています+この機能は含まれています+この機能は含まれています+この機能は含まれています – この機能は含まれていません – この機能は含まれていません
トグルタイトル
Subtitle goes Here- この機能は含まれています+この機能は含まれています+この機能は含まれています+この機能は含まれています – この機能は含まれていません – この機能は含まれていません
下が調整したもの。
「デザイン」タブの「レイアウト」で「この表を注目にする」をONにすると、真ん中の表になります。
あとは「通貨」や「頻度」（「/月額」になっているところが「頻度」）を変える。
「ボディ」で下のテキストを記述するが、ちょっと癖がある。
+この機能は含まれています
– この機能は含まれていません
こんな感じで改行して先頭に＋記号を書くのと－記号を書くので文字色が変わる。
価格表の各項目のギアアイコンをクリックし、各項目の設定を出してから、「コンテンツ」→「リンク」でリンクを設定しないとボタンは出ません。
トグルタイトル
Subtitle goes Here- この機能は含まれています
- この機能は含まれています
- この機能は含まれています
- この機能は含まれています
- この機能は含まれていません
- この機能は含まれていません
トグルタイトル
Subtitle goes Here- デザインタブのレイアウトで「この表を注目にする」にするとこうなります
- テキストの文頭にプラス記号を書くとテキストの色がこれになります
- テキストの文頭にマイナス記号を書くとテキストの色がこれになります。
- この機能は含まれていません
トグルタイトル
Subtitle goes Here- この機能は含まれています+この機能は含まれています+この機能は含まれています+この機能は含まれています – この機能は含まれていません – この機能は含まれていません
動画
動画を貼り付けるモジュール。
YOUTUBEかアップロードした動画を表示。
他サイトの動画も最後が.mp4となっているURLが分かれば、URLから貼り付けで可能。
「torque Video Popup」はポップアップで再生でこちらはそのまま再生。
下の例はオーバーレイのテストのために、関係ない画像を設定しています。
動画スライダー
下にサムネイルを出していますが、ドットにも設定可能。
地図
Diviの地図モジュールは無料では使えないみたいです。googleの仕様ですよね。
テキスト
コードを使う方法は以下。
モジュール「コード」を入れて、googlemap の埋め込みコード（iframeのやつ）を入れるだけです。
iframe のコードにwidth があるので、それを100%にすると横幅がいっぱいになります。当然高さも設定可能です。
下の例は、width=”100%” height=”300″にした例です。
広告
リンクボタンなどは入りません。画像にリンクは可能です。画像の代わりにアイコンも使えます。
あなたのタイトルはここに入ります
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
もっと良いのは、全て自分で作る事ですかね。制限がなくなりますからね。
↓は「torque Diviber」や「Supreme Divi Business Hours」、「コード」などを入れて、高さを合わせて「ボタン」を入れたもの
タイトル
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
タイトル
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
タイトル
いや、出来た。 p style="text-align:left;" にしたら左寄せになった。編集画面ではタグがそのまま見えて、左寄せにならなかったから出来ないものだと思っていたが、ブラウザでは反映されていた。
とあるレビュアーさん
投稿タイトル
投稿タイトルやメタ情報を表示するモジュール
Diviのモジュール
投稿ナビゲーション
前の投稿や次の投稿のリンクを出すモジュール
数カウンター
数字のカウンターを表示するモジュール。
％以外も選択できれば良いにになあ。。
%
あなたのタイトルはここに入ります
検索
検索を表示するモジュール
画像
画像を表示するモジュール。下の例では「全幅」をオンにしています。