Diviのドラッグアンドドロップファイルアップロード機能を使用して生産性を高める6つの方法

公開: 2018-08-22

Diviのドラッグアンドドロップファイルアップロード機能は、Webデザイナーとしての生産性を高めるための素晴らしいツールになり得ます。 このチュートリアルでは、ドラッグアンドドロップ機能を使用してDiviデザインワークフローを改善する6つの方法について説明します。 途中で、役立つヒント、例、ボーナスコードスニペットも提供します。 どちらかといえば、何が起こるかを見るためだけにファイルをドラッグアンドドロップするのはいつも楽しいです。

始めましょう！

Diviのドラッグアンドドロップファイルアップロード機能の概要

ドラッグアンドドロップファイルアップロード機能は、DiviBuilderを使用するときにページにコンテンツを追加する簡単な方法です。 名前が示すように、セクション、行、およびモジュールを事前に設定する通常のプロセスなしで、ファイルをページにドラッグアンドドロップしてコンテンツを追加できます。 また、Diviは、ファイルの種類に応じてコンテンツの配置を変えます。 たとえば、txtファイルはテキストモジュールに追加され、htmlファイルはコードモジュールに追加され、cssファイルはカスタムCSSとしてページに追加されます。

サポートされているファイルタイプとそのドラッグアンドドロップ動作

ドラッグアンドドロップ機能で現在サポートされているすべてのファイルタイプのリストを次に示します。 これは、設計プロセスでこの機能を利用する方法を考えるときに役立つ場合があります。 また、これらのファイルタイプをドラッグするとどうなるかを理解するのに役立つ簡単な説明を追加しました。

画像ファイル

  • gif
  • jpeg
  • jpg
  • png

単一の画像ファイルをドロップすると、Diviは新しいセクションと1列の行を作成し、画像がモジュールにアップロード済みの画像モジュールを追加します。

複数の画像ファイルを一度にドロップすると、Diviは同じ構造（新しいセクションと行）を作成しますが、画像をギャラリーモジュールに追加します。

テキストファイル

  • txt

txtファイルをドロップすると、新しいセクションと行内の新しいテキストモジュールにテキストが追加されます。

フォントファイル

  • otf
  • ttf

フォントファイルをドロップすると、フォント名とフォントがすでにロードされた状態で、フォントアップロードポップアップモーダルが開始されます。 アップロードボタンをクリックする前に、サポートされているすべてのフォントの太さを含めることを確認するだけです。

ビデオファイル

  • m4v
  • mov
  • webm
  • wmv
  • mp4

1つ以上のビデオファイルをドロップすると、各ビデオが新しいセクションと行内の新しいビデオモジュールに追加されます。

オーディオファイル

  • mp3
  • wav

1つ以上のオーディオファイルをドロップすると、各オーディオファイルが新しいセクションと行内の新しいオーディオモジュールに追加されます。

Webファイル

  • json
  • html
  • css

jsonファイルは、エクスポートしたすべてのページレイアウト用です。 jsonファイルをドラッグすると、ページレイアウトがページに自動的に読み込まれます。

HTMLファイルをドラッグすると、新しいセクションと行内の新しいコードモジュールにHTMLが追加されます。

CSSファイルをドラッグすると、ページ設定の[詳細設定]タブにあるページのカスタムCSSにcssコードが自動的に追加されます。

全体として、プロセスは直感的であり、ワークフローを改善するためのいくつかの大きな可能性があります。 この機能を使用する方法のいくつかを見てみましょう。

＃1必要に応じてカスタムCSSスニペットをページにドラッグします

カスタムCSSを使用する必要がないという理由で、DiviユーザーのほとんどはDiviを特に気に入っています。 それがDiviをとても素晴らしいものにしているのです。 ただし、WordPressテーマのカスタマイズに関しては、カスタムCSS（Divi内であっても）は依然として貴重な資産です。

他の優れたWeb開発者と同様に、CSSスニペットを途中で保存して、将来のプロジェクトで簡単にアクセスできるようにする必要があります。 これにより、Webサイトの構築に習熟するだけでなく、Diviのドラッグアンドドロップ機能を利用できるようになります。

たとえば、Diviページの下部のフッターバーを非表示にするためのCSSスニペットがあるとします。 そのスニペットを「HideBottomFooter」というタイトルのcssファイルとして保存すると、そのファイルを取得してページにドラッグすると、すぐに結果が得られます。

Diviは、ドロップごとにスニペットを自動的に整理します

ページにドラッグするcssファイルごとに、DiviはCSSを抽出してページに追加します。 このカスタムCSSは、ページ設定の[詳細設定]タブでいつでも表示できます。

また、Diviがcssスニペットをコメントでラップすることにより、スマートに整理することにも気付くでしょう。 わからない場合は、コード内でコメントを使用して、コードの特定のブロックを簡単に識別および/または説明します。 CSSスニペットの前に、Diviは「Begin」というテキストの後にCSSファイルのタイトル「HideBottomFooter」を付けたコメントを挿入します。 スニペットの後に、Diviはファイルのタイトルの後に「End」というテキストを含む別のコメントを挿入します。

これは、「HideBottomFooter」CSSファイルをドラッグした後のページ設定でのスニペットの例です。 

/* BEGIN: Hide Bottom Footer */
#main-footer {
    display: none;
}
/* END: Hide Bottom Footer */

独自のCSSを作成する方法がわからない場合は、Web上にある役立つチュートリアルを参考にしてください。 カッコいい。 私たちは皆それをします。 ただし、ドラッグアンドドロップ機能を利用する場合は、これらのスニペットを個別のファイルとして保存し、それに応じて名前を付けることをお勧めします。 そうすれば、各スニペットはドラッグアンドドロップするだけです。

ホバーアニメーションに使用できるCSSスニペットの2つの例

CSSを使用すると、可能性はほぼ無限に広がります。 しかし、サイトにアニメーションを追加するためにライブラリに保存できるcssスニペットの例をいくつか紹介したいと思いました。

次のcssスニペットを「.css」ファイルとして保存します（「ホバーのアイコンを拡大縮小」のような名前を付けます）。 

.et-pb-icon {
  -webkit-transition: all .2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.et-pb-icon:hover {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}

次に、この次のスニペットを「Blurb ShadowonHover」という名前の別の「.css」ファイルとして保存します。

.et_pb_blurb:hover {
    -moz-box-shadow: 0px 0px 20px #ccc;
    -webkit-box-shadow: 0px 0px 20px #ccc;
    box-shadow: 0px 0px 20px #ccc;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}

両方のファイルをコンピューターに保存したら。 両方のファイルを選択して、ページにドラッグします。 もちろん、必要に応じてドラッグできるのは1つだけですが、複数のファイルでも機能することをお見せしたいと思います。 これにより、ホバー時にボックスシャドウが追加され、すべての宣伝文句モジュールにポップアップ効果がすぐに表示されます。 また、それらにカーソルを合わせると、すべての宣伝文句アイコンが拡大縮小（拡大）します。

かなりクールなもの。

そして、これらのcssファイルを自由に使えるようになったら、それがどれほど役立つか想像できます。

＃2カスタムフォントをページにドラッグアンドドロップして、現在のフォントをすばやく置き換える

あなたがウェブサイトを構築するならば、あなたは利用可能なフォントの幅広い選択を持っている必要性に精通しています。 Diviには、Divi Builderに組み込まれている何百ものフォントがあり、作業がはるかに簡単になります。 また、このオプションをいつでも使用して、DiviBuilder内から新しいフォントをアップロードできます。 しかし、Diviの新しいドラッグアンドドロップ機能を使用すると、サイトに新しいフォントを追加するのはとてつもなく簡単です。

既成のレイアウトの1つを使用しているが、Diviがまだ利用できない新しいフォントを試してみたいとしましょう。 フォントの変更は次のように簡単です。

ビジュアルビルダーがアクティブになっていて、作成済みのレイアウトがアップロードされていることを確認してください。 次に、フォントファイルをコンピューターからブラウザーウィンドウ内のページ/ビジュアルビルダーにドラッグするだけです。 次に、アップロードボタンをクリックします。

検索と置換を使用したドラッグアンドドロップは強力なコンボです

さらに一歩進めるために、Diviの検索と置換機能を使用して、作成済みのレイアウト見出しで使用されているフォントを、ドロップしたばかりの新しいフォントに置き換えることができます。

Creative Agency Landing Pageレイアウトを使用して、上部セクションのヘッダーテキストを含むテキストモジュールを開きます。 次に、見出しフォントオプションを右クリックします。 右クリックメニューで、[検索と置換]を選択します。

[検索と置換]ポップアップで、[置換]オプションの下にある新しいフォントを選択し、青い[置換]ボタンをクリックします。

これで、すべてのヘッダーに新しいフォントが配置されました。

＃3複数の画像をドラッグアンドドロップして、タイトル付きのインスタントフォトギャラリーを作成します

Diviのドラッグアンドドロップ機能を使用すると、画像をサイトに簡単にドラッグできます。 これは、画像の多いWebサイトを構築するときに非常に便利です。 また、ほとんどの人は保存した画像をコンピューター上のフォルダーに保存しているため、それらの画像を選択してページにドラッグできると非常に便利です。

1つの画像をドラッグアンドドロップした場合の仕組みは次のとおりです。

単一の画像をビジュアルビルダーにドラッグすると、自動的に次のようになります。
1.1列の行を持つ新しい通常のセクションを作成します
2.画像​​モジュールを行に追加します
3.画像をその画像モジュールに挿入します
4.編集プロセスを開始するための便宜のために画像設定を開きます。

複数の画像をドラッグする場合の仕組みは次のとおりです。

複数の画像をビジュアルビルダーページにドラッグすると、Diviは自動的に次のことを行います。

1.1列の行を持つ新しい通常のセクションを作成します
2.ギャラリーモジュールを行に追加します
3.新しい画像をギャラリーモジュールに挿入します
4.ギャラリーモジュールの設定を開いて、編集プロセスをすぐに開始できるようにします。

画像をページにドラッグする前に画像を準備します

画像ギャラリーの見栄えを良くするために、事前にいくつかの最適化を実行しておくと役立ちます。

画像サイズ
まず、画像がすべて同じサイズであることを確認します。 1500px×800px程度の画像を使用することをお勧めします。 これにより、ライトボックスに展開するときに画像に適したサイズが提供されます。 また、Diviは、ギャラリーのサムネイルに小さいバージョンの画像を使用します。 この件については、Diviモジュールの推奨画像サイズを確認すると役立つ場合があります。 その後、ファイルサイズをTinyPNGにドラッグするか、フォトエディタを使用してWeb仕様用に保存することにより、ファイルサイズをもう少し縮小できます。

画像のタイトル
デフォルトでは、Diviはギャラリーの各サムネイルの下に画像のタイトルを表示します。 したがって、（このタイトルを表示する場合は）画像をドラッグする前に、画像に正しいタイトルを付けることができます。

＃4MP3ファイルをCSSファイルを使用してページにドラッグしてデザインをジャンプスタート

ポッドキャスターにとって、これは間違いなく生産性を高める可能性があります。 Diviのドラッグアンドドロップ機能はmp3およびwavファイル形式をサポートしているため、これらをビルダーに簡単にドロップして、ビルドプロセスをすぐに開始できます。

単一のmp3またはwavファイルをページにドラッグすると、Diviは自動的に次のことを行います。

1.1列の行を持つ新しい通常のセクションを作成します
2.オーディオファイルが添付された新しいオーディオモジュールを追加します
3. autio設定モーダルを開いて、編集プロセスを開始します。

複数のmp3またはwavファイルをページにドラッグすると、Diviは、単一のオーディオファイルをドラッグしたときと同じことを行いますが、これを複数回行う点が異なります。 したがって、4つのオーディオファイルをドラッグすると、Diviは、オーディオファイルが添付されたオーディオモジュールを含む1列の行を持つ4つの異なるセクションを作成します。 オーディオ設定モーダルもポップアップ表示され、ページに最後に追加されたオーディオモジュールの編集を開始します。

CSSファイルをドラッグして、すべてのオーディオモジュールを一度にスタイリングします

カスタムCSSを使用してDiviページにスタイルを追加することに慣れている場合は、将来のビルドで使用するために、これらのスニペットをcssファイルに保存することをお勧めします（ただし、既にご存知だと思います）。 したがって、オーディオモジュールを特定の方法でスタイル設定するcssスニペットがある場合は、そのcssを別のcssファイルに保存します。 次に、そのcssファイルをページにドラッグするだけで、すべてのオーディオモジュールのスタイルを即座に設定できます。

上の図で使用したCSSは簡単な例ですが、試してみたい場合は、次のカスタムCSSをコピーしてください。 

.et_pb_audio_module_content h2 {position: absolute;
    top: -40px;
    background: #c5310d;
    padding: 0.6em;
    left: 50px;}
.et_audio_module_meta {
    position: absolute;
    bottom: -45px;
    right: 30px;
    background: #c5310d;
    padding: 1em !important;
}
.et_pb_audio_module {
background: #888 !important;
}

.et_audio_container .mejs-playpause-button button:before, .et_audio_container .mejs-volume-button button:before {
    color: #c5310d;
}

.mejs-time-handle-content {
    border: 4px solid #c5310d;
    height: 14px;
    left: -7px;
    top: -6px;
    width: 14px;
    background: #c5310d;
}
.et_audio_container .mejs-controls .mejs-time-rail .mejs-time-total
{
background: #222;
}

次に、テキストエディタに貼り付けて、cssファイル形式で保存します（拡張子は「.css」である必要があります）。 あなたがそれをあなたのコンピュータに保存したら。 オーディオブラーを含むビジュアルビルダーにドラッグします。

＃5ページにドラッグしてすぐに実装できる再利用可能なコードブロックを作成する

Diviのドラッグアンドドロップ機能はCSSおよびHTMLファイルをサポートします（申し訳ありませんが、JavaScriptファイルは許可されていません）。 自分が何をしているのかを知っている人にとっては、そのjavascript機能を追加するスクリプトをHTMLファイルに追加できる場合があります。 ただし、これにより、これらのファイルを組み合わせて、ページにドラッグしてすぐに結果を得ることができる便利なコードブロックを作成する機会が残ります。

例1：エクスポートされたCodePenファイルをページにドラッグアンドドロップします

あなたがcodepensのファンなら、あなたはすでにいくつかの便利なドラッグアンドドロップの魔法のためにセットアップされているかもしれません。 興奮しすぎる前に、ドラッグしたときにすぐにサイトに影響を与えるファイルを作成するには、htmlとcssの組み合わせのみを使用するcodepenに制限されることを警告する必要があります。

このプロセスがどのように機能するかを次に示します。

エクスポートするCodepenを備えたページに移動し、ページの右下にあるエクスポートボタンをクリックします。

コンピューター上のファイルを抽出し、htmlファイルとcssファイルを見つけます。 テキストエディタを使用してhtmlファイルを表示し、不要なすべてのタグ（doctype、html、header、body）を取り出して、残りはcodepenのhtmlボックスに表示されるhtmlだけになるようにします。 。 次に、ファイルを保存します。

実際、HTMLファイルの場合は、ペンから直接HTMLをコピーして、独自のhtmlファイルを作成する方がよい場合があります。

次に、CSSファイルを見つけます（CSSフォルダー内にあるはずです）。 SCSSファイルではなくCSSファイルを使用していることを確認してください（このファイルタイプはドラッグアンドドロップ機能ではサポートされていません）。

次に、ビジュアルビルダーをアクティブにして両方のファイルをページにドラッグします。

これは自動的に起こることです：

1. Diviは、1列の行を持つ新しいセクションを作成します。
2. Diviは、HTMLをコンテンツとして行にコードモジュールを追加します。
3. Diviは、カスタムcssをページ設定のカスタムCSSブロックに追加します。

エラーが発生した場合は、適切なファイルタイプがないか、ファイルのコンテンツにサポートされていないコードが含まれていることを意味します。 たとえば、htmlファイルにdoctypeタグとhtmlタグがある場合、ファイルは機能しません。 また、cssファイルにSCSSコードが含まれている場合は、エラーが発生する可能性もあります。

確かに、これは最初は最もスムーズなプロセスではありません。 コードとファイルを少し整理する必要があります。 したがって、HTMLとCSSに精通していない場合、これは苦労する可能性があります。 しかし、最終結果は、ドラッグアンドドロップするだけの再利用可能なコードブロックをストックできるという点で非常に価値があることがわかります。

また、自分のものではないコードをコピーする前に、Codepenのライセンスに精通している必要があることにも注意してください。

例2：素晴らしいFontAwesomeの分離されたインスタンスをページにドラッグアンドドロップします

DiviサイトでFontAwesomeを使用することに慣れている場合は、FontAwesomeインスタンスをページに挿入できる「ドラッグ対応」ファイルをいくつか用意しておくと便利です。 これは、実際には1つのHTMLファイルで実行できます。

このプロセスがどのように機能するかを次に示します。

彼らのウェブサイトからFontAwesomeスクリプトを入手してください。 SVG + JSバージョンであることを確認してください。 次に、スクリプトをクリップボードにコピーします。

次に、新しいテキストファイルを作成し、コードを貼り付けます。 スクリプトの下に、ページにデプロイするhtmlおよびフォントコードを追加します。

これは、fontawesomeアイコンを使用したリストを含む「ドラッグ対応」のhtmlコードの例です。 

<script defer src="https://use.fontawesome.com/releases/v5.2.0/js/all.js" integrity="sha384-4oV5EgaV02iISL2ban6c/RmotsABqE4yZxZLcYMAdG7FAPsyHYAPpywE9PJo+Khy" crossorigin="anonymous"></script>

<h2>Header</h2>
<ul class="fa-ul" style="list-style:none; font-size: 18px">
<li><i style="color: Tomato; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
<li><i style="color: Dodgerblue; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
<li><i style="color: Mediumslateblue; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
<li><i style="color: Tomato; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
<li><i style="color: Dodgerblue; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
<li><i style="color: Mediumslateblue; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
</ul>

必ずファイルをhtmlファイルとして保存してください。 次に、ビジュアルビルダーを使用してページにドラッグします。

Diviは自動的にhtmlをコードモジュールに追加します。これで、ページ用に編集できる素晴らしいフォントリストができました。

コンテンツのテキスト設定を使用できるように、リストがテキストモジュールに配置されていることを望んでいる可能性があります。 ただし、これは自動的には行われないため、スクリプトを含めるようにhtmlファイルを制限することをお勧めします。 次に、HTMLをテキストモジュールに貼り付けます。 しかし、デザインを処理するためのcssファイルを手元に持っている人にとっては、それをhtmlファイルと一緒にドラッグできるのは素晴らしいことです。

＃6ハードドライブにDiviページレイアウト（jsonファイル）のライブラリを作成して、ページにドラッグして開発を迅速化する

Diviを使用すると、デザインしたページレイアウト全体を簡単に保存およびエクスポートできます。 この機能には2つの非常に大きな利点があります。 最初の利点は、Diviライブラリ内にページレイアウトを保存して、Webサイトを構築する際の設計プロセスをスピードアップできることです。 2番目の利点は、ページレイアウトを自分のコンピューターにエクスポートできることです。 これにより、ページレイアウト（jsonファイル）の貴重なコレクションを蓄積して、次のプロジェクトを開始できます。

また、新しいドラッグアンドドロップ機能を使用すると、保存したレイアウトをビジュアルビルダーにすばやくドラッグして、開発をさらに高速化できます。

このプロセスがどのように機能するかを次に示します。

デザインエージェンシーのランディングページレイアウトのヘッダーセクションのみを保存するとします（これは任意のデザインにすることができますが、この例では、事前に作成されたレイアウトを使用しています）。 レイアウトをページにロードしたら、上部のヘッダーセクションを除くレイアウトのすべてのセクションを削除します。 次に、レイアウトをハードドライブにエクスポートします。

ビジュアルビルダーを使用してページレイアウトをエクスポートするには、設定メニューを開き、移植性アイコンをクリックします。 次に、移植性ポップアップで名前（「DesignAgency Header Layout」）を入力し、[Export Divi BuilderLayout]ボタンをクリックします。

これにより、レイアウトがjsonファイルとしてコンピューターに保存されます。

これで、ページのヘッダーセクションを削除して、ページのセクションが空になった場合、jsonファイルをページにドラッグすることで、そのヘッダーをページに簡単に追加できます。

jsonファイルをドラッグすると、移植性モーダルが自動的にポップアップ表示され、既存のコンテンツを置き換えるオプションを選択したり、事前にバックアップを作成したりできます。 コンテンツを置き換える必要がないので、インポートボタンをクリックするだけで、すぐにページに読み込まれます。

これはそれほど印象的ではないように思われるかもしれませんが、設計プロセスを本当にスピードアップする可能性があります。 さまざまなページレイアウトを持つjsonファイルの大規模なコレクションがある場合（それぞれに私が気に入った特定の要素があります）。 次に、ビルディングブロックなどのファイルを使用して、それらを1つずつページにドラッグします。 エクスポートするときは、タイトルを説明していることを確認してください。

最終的な考え

Diviのドラッグアンドドロップ機能は、Webデザインワークフローを後押しするための便利なツールになることは間違いありません。 最初はフラストレーションを引き起こす可能性のあるいくつかの制限がありますが、この記事が、この機能を利用して、Webデザインの生産性を向上させるドラッグ可能なファイルのパーソナルライブラリを作成する方法を理解するのに役立つことを願っています。

以下のコメントであなた自身のアイデアを聞いてみたいです。

乾杯！