すべてのコレクション
よくあるご質問【ランディングページ機能】
【ランディングページ】お役立ち資料一覧ページの作り方
【ランディングページ】お役立ち資料一覧ページの作り方
エアトリスマートDX サポートチーム avatar
対応者:エアトリスマートDX サポートチーム
一週間前以上前にアップデートされました

お役立ち資料を用意し、webサイトにてフォーム申請でダウンロードできるようにすると、オンラインで見込み客が獲得できるようになります。

弊社でも、以下のようなお役立ち資料一覧ページを設けています。

このようなお役立ち資料一覧ページは基本的に貴社webサイトを構成しているCMSで作成いただくことをお勧めしますが、ドメインが変わっても問題ないようでしたら、アイセールスのランディングページで作成いただくことも可能です。

こちらが、アイセールスのランディングページで作成したお役立ち資料一覧ページのサンプルとなります。

アイセールスでこのようなお役立ち資料一覧ページを作成されたい場合は、以下の手順をご参考ください。

お役立ち資料一覧ページの作成

移行は同様の作業を行うことで、一覧ページに資料を随時追加していくことが可能です。

お役ち資料一覧テンプレコード

上記ページをテンプレートとして利用したい方は、以下のコードをご利用ください。

<head> 
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>{pagetitle}</title>
<meta name="description" content="{pagemetadescription}">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">



</head>
<body id="sortable">


<div class="container-fluid" data-section-wrapper="1" style="box-sizing: border-box;width: 100%;padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;">
<div class="row">
<div data-slot-container="blank" style="width:100%; min-height: 30px;">
</div>
</div>
</div>


<div class="container-fluid" data-section-wrapper="1" style="line-height: 1.3;" draggable="false">
<!-- テキストのみ -->
<div class="row text-center" data-slot="text"><div class="col-12"><p><span style="font-size: 24px;"><strong>お役立ち資料一覧</strong></span></p></div></div>
</div><div class="container-fluid" data-section-wrapper="1" style="line-height: 1.3;" draggable="false">
<!-- テキストのみ -->
<div class="row text-center" data-slot="text"><div class="col-12"><p><br></p><div><br></div><p><span style="font-size: 24px;">一括ダウンロード</span></p><div>複数の資料を一括でダウンロードいただけます</div></div></div>
</div><div class="container-fluid" data-section-wrapper="1" style="box-sizing: border-box; width: 100%; padding-right: 1rem; padding-left: 1rem; margin-right: auto; margin-left: auto;" draggable="false">
<div class="container-fluid" data-slot="button-position" style="box-sizing: border-box;width: 100%;padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;">
<div class="row align-items-center" style="min-height: 80px;margin-right: -15px;margin-left: -15px;justify-content: center;align-items: center;text-align: center;">
<div class="text-center" style="margin: 0px 5px 0px;display: inline-block;"><button style="background-color:#f47e00; border-color:#f47e00; box-sizing: border-box;border-radius:.3rem;margin: 0;font-family: inherit;font-size:1.25rem;line-height: 1.5;overflow: visible;text-transform: none;-webkit-appearance: button;display: inline-block;font-weight: 400;text-align: center;white-space: nowrap;vertical-align: middle;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;border: 1px solid transparent;padding: .25rem .5rem;transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;color: #fff;" "class="btn btn-primary btn-lg" href="javascript:void(0);" data-slot="button">ダウンロードする</button></div>
</div>
</div>
</div><div class="container-fluid" data-section-wrapper="1" style="line-height: 1.3;" draggable="false">
<!-- テキストのみ -->
<div class="row text-center" data-slot="text"><div class="col-12"><p><br></p><div><span style="font-size: 24px;">各種お役立ち資料</span></div><div><br></div></div></div>
</div><div class="container" data-section-wrapper="1" style="line-height: 1.3;" draggable="false">
<!-- 上画像(3列)-->
<div class="row mt-2" style="display: flex;margin-top: 0.5rem; margin-left: auto; margin-right: auto;">
<div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 m-auto pt-2 pt-sm-0 pb-3">
<div class="card" style="margin: 0.5rem auto; max-width: 26rem;position: relative; display: flex; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1px solid rgba(0, 0, 0, 0.125); border-radius: 0.25rem;box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);">
<div style="flex: 1 1 auto;">
<img alt="image" src="https://manualtenant.mk6-robo.com/static/sections/block_2_1/html/img/upperImage_1.png" data-slot="image-crop" style="width: 100%;border-top-left-radius: calc(0.25rem - 1px);border-top-right-radius: calc(0.25rem - 1px);" draggable="false">
<div style="padding: 0.5rem 0.5rem 1rem 0.75rem;">
<div data-slot="text">
<p style="text-align: center;"><strong>見出し 1</strong></p>
<p style="text-align: left;">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 m-auto pt-2 pt-sm-0 pb-3">
<div class="card" style="margin: 0.5rem auto; max-width: 26rem;position: relative; display: flex; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1px solid rgba(0, 0, 0, 0.125); border-radius: 0.25rem;box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);">
<div style="flex: 1 1 auto;">
<img alt="image" src="https://manualtenant.mk6-robo.com/static/sections/block_2_1/html/img/upperImage_2.png" data-slot="image-crop" style="width: 100%;border-top-left-radius: calc(0.25rem - 1px);border-top-right-radius: calc(0.25rem - 1px);" draggable="false">
<div style="padding: 0.5rem 0.5rem 1rem 0.75rem;">
<div data-slot="text">
<p style="text-align: center;"><strong>見出し 2</strong></p>
<p style="text-align: left;">Separated they live in Bookmarksgrove right at the coast of the Semantics, a large ocean.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 m-auto pt-2 pt-sm-0 pb-3">
<div class="card" style="margin: 0.5rem auto; max-width: 26rem;position: relative; display: flex; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1px solid rgba(0, 0, 0, 0.125); border-radius: 0.25rem;box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);">
<div style="flex: 1 1 auto;">
<img alt="image" src="https://manualtenant.mk6-robo.com/static/sections/block_2_1/html/img/upperImage_3.png" data-slot="image-crop" style="width: 100%;border-top-left-radius: calc(0.25rem - 1px);border-top-right-radius: calc(0.25rem - 1px);" draggable="false">
<div style="padding: 0.5rem 0.5rem 1rem 0.75rem;">
<div data-slot="text">
<p style="text-align: center;"><strong>見出し 3</strong></p>
<p style="text-align: left;">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="container" data-section-wrapper="1" style="line-height: 1.3;">
<!-- 上画像(3列)-->
<div class="row mt-2" style="display: flex;margin-top: 0.5rem; margin-left: auto; margin-right: auto;">
<div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 m-auto pt-2 pt-sm-0 pb-3">
<div class="card" style="margin: 0.5rem auto; max-width: 26rem;position: relative; display: flex; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1px solid rgba(0, 0, 0, 0.125); border-radius: 0.25rem;box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);">
<div style="flex: 1 1 auto;">
<img alt="image" src="https://manualtenant.mk6-robo.com/static/sections/block_2_1/html/img/upperImage_1.png" data-slot="image-crop" style="width: 100%;border-top-left-radius: calc(0.25rem - 1px);border-top-right-radius: calc(0.25rem - 1px);">
<div style="padding: 0.5rem 0.5rem 1rem 0.75rem;">
<div data-slot="text">
<p style="text-align: center;"><strong>見出し 1</strong></p>
<p style="text-align: left;">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 m-auto pt-2 pt-sm-0 pb-3">
<div class="card" style="margin: 0.5rem auto; max-width: 26rem;position: relative; display: flex; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1px solid rgba(0, 0, 0, 0.125); border-radius: 0.25rem;box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);">
<div style="flex: 1 1 auto;">
<img alt="image" src="https://manualtenant.mk6-robo.com/static/sections/block_2_1/html/img/upperImage_2.png" data-slot="image-crop" style="width: 100%;border-top-left-radius: calc(0.25rem - 1px);border-top-right-radius: calc(0.25rem - 1px);">
<div style="padding: 0.5rem 0.5rem 1rem 0.75rem;">
<div data-slot="text">
<p style="text-align: center;"><strong>見出し 2</strong></p>
<p style="text-align: left;">Separated they live in Bookmarksgrove right at the coast of the Semantics, a large ocean.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 m-auto pt-2 pt-sm-0 pb-3">
<div class="card" style="margin: 0.5rem auto; max-width: 26rem;position: relative; display: flex; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1px solid rgba(0, 0, 0, 0.125); border-radius: 0.25rem;box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);">
<div style="flex: 1 1 auto;">
<img alt="image" src="https://manualtenant.mk6-robo.com/static/sections/block_2_1/html/img/upperImage_3.png" data-slot="image-crop" style="width: 100%;border-top-left-radius: calc(0.25rem - 1px);border-top-right-radius: calc(0.25rem - 1px);">
<div style="padding: 0.5rem 0.5rem 1rem 0.75rem;">
<div data-slot="text">
<p style="text-align: center;"><strong>見出し 3</strong></p>
<p style="text-align: left;">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div><div class="container-fluid" data-section-wrapper="1" style="box-sizing: border-box;width: 100%;padding-right: 1rem;padding-left: 1rem;margin-right: auto;margin-left: auto;" draggable="false">
<div class="container-fluid" data-slot="button-position" style="box-sizing: border-box;width: 100%;padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;">
<div class="row align-items-center" style="min-height: 80px;margin-right: -15px;margin-left: -15px;justify-content: center;align-items: center;text-align: center;">
<div class="text-center" style="margin: 0px 5px 0px;display: inline-block;"><button style="background-color:#f47e00; border-color:#f47e00; box-sizing: border-box;border-radius:.3rem;margin: 0;font-family: inherit;font-size:1.25rem;line-height: 1.5;overflow: visible;text-transform: none;-webkit-appearance: button;display: inline-block;font-weight: 400;text-align: center;white-space: nowrap;vertical-align: middle;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;border: 1px solid transparent;padding: .25rem .5rem;transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;color: #fff;" "class="btn btn-primary btn-lg" href="javascript:void(0);" data-slot="button">お問い合わせはこちら</button></div>
</div>
</div>
</div></body>


こちらの回答で解決しましたか?