Divi＆Slick.jsを使用して自動カルーセルを作成する方法
公開: 2019-09-11毎週、次のプロジェクトに使用できる新しい無料のDiviレイアウトパックを提供します。 レイアウトパックの1つとして、Webサイトを次のレベルに引き上げるのに役立つユースケースも共有しています。
今週は、進行中のDiviデザインイニシアチブの一環として、Divi、Slick.js、Ice Cream Shop LayoutPackを使用して自動カルーセルを作成する方法を紹介します。 まず、洗練されたJSライブラリをWebサイトに含め、DiviBuilder内で機能させることから始めます。 これは、紹介したいあらゆる種類のモジュール用の自動カルーセルを作成するための優れた方法です。 JSONファイルも無料でダウンロードできます！
それを手に入れましょう。
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
自動カルーセルレイアウトを無料でダウンロード
無料の自動カルーセルレイアウトを利用するには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
ヘッドタグにSlick.jsファイルが含まれていることを確認してください。 それがなければ、それは機能しません。 以下の最初のステップを参照してください。
1.Diviテーマの統合にSlickJSを追加します
Diviテーマオプションに移動
このチュートリアルの最初の部分は非常に重要です。 Slick.jsをWebサイトに追加します。 これを行うには、Diviテーマオプションに移動します。
Slick.jsをヘッドタグに追加する
[統合]タブに移動し、Slick.jsファイルをWebサイトのheadタグに追加します。
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
2.アイスクリームショップのメニューレイアウトを使用して新しいページを作成する
新しいページを追加
Webサイトに新しいページを追加して続行します。 ページにタイトルを付け、ページを公開して、DiviBuilderに切り替えます。
アイスクリームショップのメニューレイアウトをアップロードする
このチュートリアルでは、Ice Cream Shop Layout Packのメニューレイアウトを使用していますが、他のページ/レイアウトを自由に使用してください。
2.ページに新しいセクションを追加します
新しいセクションを追加
自動カルーセルを作成する次のステップは、ページに新しいセクションを追加することです。
背景色
セクション設定を開き、背景色を変更します。
- 背景色：＃f5f5f5
ボトムディバイダー
セクションにも下部仕切りを追加します。
- 仕切りスタイル：リストで検索
- 仕切りの色：#ffffff
- 仕切りの重量：10vw
間隔
いくつかの下部のパディングと一緒に。
- ボトムパディング：10vw
新しい行を追加
カラム構造
次の列構造を使用して最初の行を追加します。
タイトルテキストモジュールを列に追加
H2コンテンツを追加する
行の列にテキストモジュールを追加し、選択したH2コンテンツを挿入します。
H2テキスト設定
[デザイン]タブに移動し、それに応じてH2テキスト設定を変更します。
- 見出し2フォント：プロンプト
- 見出し2フォントの太さ：超軽量
- 見出し2テキストの配置：中央
- 見出し2テキストサイズ：60px（デスクトップ）、40px（タブレット）、25px（電話）
- 見出し2行の高さ：1.2em
サイジング
モジュールのサイズ設定も変更します。
- 最大幅：800px
- モジュールの配置：中央
3.新しい1列の行を自動スライダー専用にする
新しい行を追加
カラム構造
自動カルーセルを作成するには、カルーセル内に配置するアイテムに新しい行を割り当てる必要があります。 必ず1列のみの行を選択してください。 次の手順では、この列を自動カルーセルに変換します。
サイジング
モジュールをまだ追加せずに、行設定を開き、サイズ設定で行が画面の幅全体を占めるようにします。
- 幅：100％
- 最大幅：100％
間隔
上マージンを追加し、次にデフォルトの上下のパディングをすべて削除します。
- トップマージン：50px
- トップパディング：0px
- ボトムパディング：0px
オーバーフロー
また、オーバーフローを非表示にすることで、行コンテナを超えるものがないことを確認しています。
- 水平オーバーフロー：非表示
- 垂直オーバーフロー：非表示
列の設定
列の設定を開いて続行します。
CSSクラス
2つの異なるCSSクラスを列に追加します。 それらの間にスペースを残してください。 このチュートリアルの後半では、これらのクラスを使用して自動カルーセルを作成します。
- CSSクラス：アイスクリーム-アイテムスライダー
最初のスライダーアイテムを列に追加する（Call to Actionモジュール）
デフォルトのコンテンツ
最初のカルーセルアイテムの追加を開始する時が来ました！ 召喚状モジュールを使用しますが、他の任意のモジュールを自由に使用してください。 お好みのコンテンツを入力してください。
コンテンツにカーソルを合わせる
タイトルと本文のコンテンツを空の文字（次のようなもの： ''）に置き換えて、ホバー時にコンテンツを削除します。
リンク
ボタンが表示されるように、モジュールへのリンクも追加してください。
- ボタンリンクURL：＃
デフォルトのグラデーションの背景
次に、背景設定に移動し、グラデーションの背景を追加します。
- 色1：＃8300e9
- 色2：rgba（41,196,169,0）
- グラデーションタイプ：ラジアル
- 半径方向：上
- 開始位置：35％
- 終了位置：35％
ホバーグラデーションの背景を削除する
ホバー時にグラデーションの背景を削除します。
背景画像
関連する背景画像もアップロードします。
タイトルテキスト設定
[デザイン]タブに移動し、それに応じてタイトルテキストの設定を変更します。
- タイトルフォント：プロンプト
- タイトルテキストサイズ：2vw（デスクトップ）、4vw（タブレット）、5vw（電話）
- タイトル行の高さ：2vw（デスクトップ）、3vw（タブレット）、4vw（電話）
本文の設定
本文の設定も変更してください。
- ボディフォント：Open Sans
- 本文のサイズ：0.9vw（デスクトップ）、2vw（タブレット）、2.5vw（電話）
- ボディラインの高さ：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
ボタンの設定
次に、ボタンの設定に移動し、次のようにボタンのスタイルを設定します。
- ボタンにカスタムスタイルを使用する：はい
- ボタンのテキストサイズ：0.9vw（デスクトップ）、1.5vw（タブレット）、2vw（電話）
- ボタンのテキストの色：#ffffff
- ボタンの背景色：＃000000（デフォルト）、＃ff6f7e（ホバー）
- ボタンの境界線の幅：0px
- ボタンの境界線半径：0px
- ボタンの文字間隔：2px
- ボタンフォント：プロンプト
- ボタンのフォントの太さ：通常
- ボタンのフォントスタイル：大文字
- トップマージン：19vw（デスクトップ）、30vw（タブレット）、45vw（電話）
- トップパディング：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
- 下部のパディング：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
- 左パディング：2vw（デスクトップ）、4vw（タブレット）、5vw（電話）
- 右パディング：2vw（デスクトップ）、4vw（タブレット）、5vw（電話）
サイジング
モジュールの幅と高さも変更しています。
- 幅：23vw
- 高さ：23vw（デスクトップ）、50vw（タブレット）、80vw（電話）
間隔
最後になりましたが、間隔の設定に移動し、カスタムのマージンとパディングの値を追加します。
- 左マージン：1vw
- 右マージン：1vw
- トップパディング：2vw（デスクトップ）、4vw（タブレット）、6vw（電話）
4.スライダーアイテムを必要な回数だけクローンします
CTAモジュールを4回クローンする
最初のCTAモジュールを完了したら、先に進んで、必要な回数だけクローンを作成できます。 この列のすべてのモジュールは、自動カルーセルの一部になります。
複製ごとにコンテンツ、グラデーションの背景、背景画像を変更する
各CTAモジュールを一意にするために、各複製のコンテンツ、グラデーションの背景、および背景画像を必ず変更してください。
5.前の行の下に新しい行を追加します
次の列構造を使用して、次の行と最後の行をセクションに追加します。
jQueryコードを使用して最初のコードモジュールを挿入する
新しいコードモジュールを列に追加
最初のコードモジュールを列に追加します。
CSSコードを挿入
そして、CSSコードの次の行を挿入します。
<style>
.slick-slider
{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-slide
{
float: left;
}
</style>
CSSコードを含む2番目のコードモジュールを挿入します
新しいコードモジュールを列に追加
前のコードモジュールのすぐ下に別のコードモジュールを追加します。
jQueryコードを挿入します
そして、jQueryコードの次の行を挿入します。
<script>
jQuery(function($){
$('.icecream-items').slick({
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 700,
arrows: false,
dots: false,
pauseOnHover: true,
responsive: [{
breakpoint: 1079,
settings: {
slidesToShow: 2
}
}]
});
});
</script>
CSSとjQueryコードを追加したら、VisualBuilderを終了して結果を表示できます。
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
最終的な考え
この投稿では、Divi、slick.js、Ice Cream Shop LayoutPackを使用して自動カルーセルを作成する方法を紹介しました。 これは、Webサイトにインタラクションを追加するための優れた方法です。 このテクニックは、表示したいあらゆる種類のモジュールで機能させることができます。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。