2021/11/11のUI刷新 第一弾リリースにてカラースキーム(配色設計)とタイポグラフィ(文字の書体、大きさ、配列のしかたなど)を変更しております。オンラインマニュアルに掲載している画面キャプチャと実際の管理画面の配色や文字の状態が異なる場合がございますがご了承いただけますと幸いでございます。
ポップアップ（HTMLパーツ/フォーム）の汎用的にご利用いただけるテンプレートをご用意しました。
※デザインテンプレートはこちらの内容のものを一部変更して作成しています。設定方法と併せてご確認ください。
※ [アップロードした画像URLを記入] の部分をアップロードした画像のURLに置き換えてください。
※「a href="#"」の「#」部分を誘導したいURLに置き換えてください。
ポップアップ（HTMLパーツ）
|
ポップアップデザイン （イメージ） |
ソースコード① | 追加するCSS② |
| <div class="l-image_horiz"> <div class="image"><img src="[アップロードした画像URLを記入]" alt="" style="display: block; margin-left: auto; margin-right: auto;" /></div> <a href="#"><div class="text" style="text-align: center;"><text-align: center=""><span style="color: #000;">お問い合わせはこちら。お気軽にご相談ください。</span><br /></text-align:></div></a> </div> |
.satori__popup_inner .l-image_horiz { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: column wrap; -moz-flex-flow: column wrap; -ms-flex-flow: column wrap; flex-flow: column wrap; } .satori__popup_inner .l-image_horiz .image { -webkit-flex: 1 1 50%; -ms-flex: 1 1 50%; flex: 1 1 auto; } .satori__popup_inner .l-image_horiz .image img { max-width: 100%; max-height: 100%; } .satori__popup_inner .l-image_horiz .text { -webkit-flex: 1 1 50%; -ms-flex: 1 1 50%; flex: 1 1 50%; padding: .5em; } |
|
| <div class="l-list_contents"> <ul> <li><a href="#"> <div class="list_thumbnail"><img src="[アップロードした画像URLを記入]" width="80" height="60" alt="" /></div> <div class="list_content">“新規リード獲得数を増やしたい”を実現できるアンノウン機能。〜商談タイミングが重要な大規模案件にも最適だったSATORI〜</div> </a></li> <li> <div class="list_content" style="text-align: center;"><span class="list_subcontent" style="color: #000000;">株式会社○○導入事例</span></div> </li> <li><a href="#"> <div class="list_thumbnail"><img src="[アップロードした画像URLを記入]" width="80" height="60" alt="" /></div> <div class="list_content">リード獲得14倍を実現。インバウンドから最速で受注に繋げる仕組み構築に成功。〜素早くPDCAを回せるスピード感が決め手に〜</div> </a></li> <li> <div class="list_content" style="text-align: center;"><span class="list_subcontent" style="color: #000000;">株式会社△△導入事例</span></div> </li> <li><a href="#"> <div class="list_thumbnail"><img src="[アップロードした画像URLを記入]" width="80" height="60" alt="" /></div> <div class="list_content">MA成功企業の活用を徹底して真似することで売上4倍を実現</div> </a></li> <li> <div class="list_content" style="text-align: center;"><span class="list_subcontent" style="color: #000000;">株式会社□□導入事例</span></div> </li> </ul> </div> |
.satori__popup_inner .l-list_contents > ul { .satori__popup_inner .l-list_contents .list_thumbnail, .satori__popup_inner .l-list_contents .list_thumbnail { .satori__popup_inner .l-list_contents .list_content { .satori__popup_inner .l-list_contents .list_subcontent { |
ポップアップ（フォーム）
|
ポップアップデザイン （イメージ） |
追加するCSS① |
|
.satori__popup_inner #satori__form_body .satori__popup_body:before { display: inline-block; padding-left: 100px; padding-top: .5em; padding-right: .5em; background-size: 60px 60px; background-position: .5em .5em; min-height: 60px; background-repeat: no-repeat; background-image: url("[アップロードした画像URLを記入]"); content: '110,000人超が購読中のメールマガジンです。月数回程度、マーケティング最新情報やマーケティングセミナーの情報をお知らせします。'; } |
|
| .satori__popup_inner #satori__form_body .satori__popup_body:before { display: inline-block; padding-left: 100px; padding-top: .5em; padding-right: .5em; background-size: 80px 60px; background-position: .5em .5em; min-height: 60px; background-repeat: no-repeat; background-image: url("[アップロードした画像URLを記入]"); content: '◆資料内容◆マーケティングオートメーションとは／アンノウンマーケティングについて／SATORIの機能(集客に強い理由)／事例'; } |