Suzuki『Diviではポップアップを作れない』こんな風に思ったことありませんか?こんにちはナオミです。海外で13年近くエンジニアをしています。残念ながらDiviにはポップアップを作る機能が最初から備わっていません。そこでこの記事では、有料ですがポップアップを作れるプラグインを紹介します。Overlaysというプラグインを使います。Themesのブロガーの方がいます。Overlaysを選んでいたので、自分も試してみました。Overlaysを選びました。ちなみにそのブログ投稿はこれです。Overlyasの購入を考えてる方はこのリンクからどうぞ。Overlaysの購入とインストール(2600円しないくらいです)次のセクションからはインストールした状態からの説明となります。Overlays』というメニューが出てきます。Overlaysを作るこの画面が表示されます。ポップアップに名前をつけます。これは後で見やすいようにです。『Diviビルダーを使う』をクリックします。Diviビルダーを使うこの画像が出るので最初から構築を選びます。Diviビルダーがロードされました。行を入れて、何か作ってみましょう。ビジュアルビルダーでポップアップを作る画像モジュールを入れてみました。このワイヤーフレームだけのビューだと、ポップアップがどう見えるのかわかりませんよね。上の画像のところにあるデスクトップのアイコンを押してみます。このようにポップアップをビジュアルビルダーで作ることが可能です。このポップアップを公開してみましょう。一度保存すると、Diviビルダーが起動しないバグの対処法これは自分もなったのですが、一度ポップアップを作って保存し、編集しようとするとDiviビルダーのローディングが終わらないというバグが発生することがあります。何も問題ないかたはここは飛ばしてください。『設定→パーマリンク設定』にいき、一度『基本』を選び保存します。自分の好きなタイプに戻しましょう。自分は投稿名に戻しました。問題が解消されない場合は、サロンでメッセージくれれば全力で解決します。作ったポップアップを表示させる次に先ほど作成したポップアップを表示させる方法を紹介します。ポップアップの編集画面を開きます。Trigger』というものがあります。これはCSSセレクタという概念を使って、何をクリックしたらポップアップが表示されるのかを設定するところです。今は『.show-popup』と入れてください。(show-popupの部分はなんでもいいのですが、今はこんがらがると思うのでshow-popupにします。)最初にピリオドを入れるのを忘れないでください。しましたら、保存してます。これでポップアップの方の準備は完了です。ポップアップを表示させたいボタンにトリガークラスを追加それではDiviで新しいページを作るなり、現存のページを開きます。ボタンを追加ボタンじゃなくてもいいのですが、一番しっくりくるのでボタンにします。何もURLが入っていない状態でボタンをクリックするとページがリフレッシュしてしまうので、『#』を入れてその後にランダムな文字列を入れます。この例では『#anything』になっています。CSSクラスの追加これらのステップが完了したら、保存してプレビューをみてみます。ボタンをクリックすると、ポップアップが出てきます。基本はこれで完成です。クローズボタンのスタイリング右上のX、ちょっとシンプルすぎですよね。このボタンのスタイルを変える方法を紹介します。ポップアップの編集画面に戻ります。Buttonにチェックを入れます。カスタマイズこのようにボタンをカスタマイズでいます。プレビューは少しだけずれていて、実際はXが真ん中にきます。いじってから保存してみましょう。クローズボタンが離れすぎスタイルできたはいいものの、ボタンが離れすぎてますね。これはCSSを追加して直します。}}このCSSコードをサイトに追加してください。追加の仕方がわからない方はこの記事からどうぞ。>>DiviでカスタムCSSを追加する4つの方法もしかしたら、ポップアップの大きさでボタンの位置がずれるかもしれません。その場合は、上記のCSSコードのtopとrightの値を調整してみてください。これでかっこいいポップアップが作れますね。Overlays、是非使ってみてください。他にも自動でポップアップを表示など、色々とトリガーを工夫できるようですが、それはまた別の記事で。Diviのことをもっと深く知りたい方は、Divi完全マニュアルをご覧ください。返信をキャンセルメールアドレスが公開されることはありません。名前*メール*サイト検索:ナオミ旅するエンジニアです。出しヨーロッパでフリーランス。DiviとElementorが好き。WordPressとウェブ開発の情報を発信していきます。Proの購入完全ガイドDiviの入手からインストールまでを完全ガイドします。