【サンプル】ポップアップ(HTMLパーツ/カスタムフォーム)のテンプレート

ポップアップ(HTMLパーツ/カスタムフォーム)の汎用的にご利用いただけるテンプレートをご用意しました。

※デザインテンプレートはこちらの内容のものを一部変更して作成しています。設定方法と併せてご確認ください。

※「"http://satyr.io/~"」部分をアップロードした画像のURLに置き換えてください。

※「a href="#"」の「#」部分を誘導したいURLに置き換えてください。

■ポップアップ(HTMLパーツ)

ポップアップデザイン

(イメージ)

ソースコード① 追加するCSS②
___________1.jpg <div class="l-image_horiz">
<div class="image"><img src="http://satyr.io/?width=300&height=225" alt="" style="display: block; margin-left: auto; margin-right: auto;" /></div>
<div class="text" style="text-align: center;"><text-align: center=""><span style="color: #000;">お問い合わせはこちら。お気軽にご相談ください。</span><a href="#"><br /></a></text-align:></div>
</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 50%; }
.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; }
__________2.png <div class="l-list_contents">
<ul>
<li><a href="#">
<div class="list_thumbnail"><img src="http://satyr.io/?width=80&height=60" width="80" height="60" alt="" /></div>
<div class="list_content">&ldquo;新規リード獲得数を増やしたい&rdquo;を実現できるアンノウン機能。〜商談タイミングが重要な大規模案件にも最適だった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="http://satyr.io/?width=80&amp;height=60" 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="http://satyr.io/?width=80&amp;height=60" 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;">株式会社Be&amp;Do導入事例</span></div>
</li>
</ul>
</div>

.satori__popup_inner .l-list_contents > ul {
margin: 0;
padding: 0; }
.satori__popup_inner .l-list_contents > ul > li {
list-style-type: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.satori__popup_inner .l-list_contents > ul > li > a {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
text-decoration: none; }

.satori__popup_inner .l-list_contents .list_thumbnail,
.satori__popup_inner .l-list_contents .list_content {
padding: 5px; }

.satori__popup_inner .l-list_contents .list_thumbnail {
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto; }

.satori__popup_inner .l-list_contents .list_content {
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto; }

.satori__popup_inner .l-list_contents .list_subcontent {
color: rgba(0, 0, 0, 0.6); }

■ポップアップ(カスタムフォーム)

ポップアップデザイン

(イメージ)

追加するCSS①
___________3.png
.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("http://satyr.io/?width=60&height=60");
content: '110,000人超が購読中のメールマガジンです。月数回程度、マーケティング最新情報やマーケティングセミナーの情報をお知らせします。'; }
___________4.png .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("http://satyr.io/?width=80&height=60");
content: '◆資料内容◆マーケティングオートメーションとは/アンノウンマーケティングについて/SATORIの機能(集客に強い理由)/事例'; }