DiviとGiveWPを使用してギビングチューズデーランディングページを作成する方法

公開: 2017-11-22

聞いたことがない方のために、ここエレガントテーマで大規模なブラックフライデーとサイバーマンデーのキャンペーンを開始する準備をしています。 しかし、今年のこの時期に別のクールなことが起こっています。 これはギビングチューズデー(今年は11月28日)と呼ばれ、世界中の非営利団体が、個人的な買い物のために財布を持っている間、必要もあります。 なんてクールなアイデアでしょう。 そして、私たちはコミュニティに力を与えるビジネスをしているので、Divi(またはExtra)を使用していて、非営利団体で働いている人々が最高のギビングチューズデー寄付のランディングページを作成できるように支援するのは良い考えだと思いました。できる。

今日作成するものを簡単に見てみましょう。

最終結果のプレビュー

今日の投稿では、視覚的に魅力的な(そしてもちろん機能的な)寄付フォームを備えた美しいギビングチューズデーのランディングページを作成します。

GiveWPプラグインをインストールして新しいフォームを作成する

https://www.givingtuesday.org/

このチュートリアルで使用する寄付フォームは、GiveWPプラグインによって生成されます。 これをインストールするには、WordPress管理者で[プラグイン]> [新規追加]に移動します。 そこで、検索機能を使用してGiveプラグインを見つけます。 「今すぐインストール」ボタンをクリックして、アクティブにします。

次に、 [寄付]> [フォームの追加]に移動します。 フォームのタイトルを入力します。 私は「地元の農家と持続可能な農業を支援する」を選びました。

次に、寄付フォームのオプションが表示されます。 タブごとにそれらを実行してみましょう。

寄付オプションと呼ばれる最初のタブで、上部のセクションで次の設定を構成します。

寄付オプション:マルチレベルの寄付

寄付の表示:ボタン

カスタム金額:有効

[寄付レベル]セクションで、次の寄付レベルを設定します:$ 1、$ 5、$ 10、$ 25、$ 50、$ 100。 必ず$ 5.00の寄付レベルを新しいデフォルトとして設定してください。

次に、[フォームの表示]タブに移動します。 ここで行う必要があるのは、[表示オプション]設定を[モーダル]に変更することだけです。

[寄付の目標]タブで、最初に[寄付の目標]オプションを有効にします。 それが終わったら、目標額を設定します。 私は1,000ドルに設定しました。 また、目標フォーマットをパーセンテージに設定しました。 これにより、フォームの視聴者は、実際に集めた金額ではなく、達成した目標の割合を知ることができます。 そして最後に、プログレスバーの色を少し変更して、他のWebサイト全体で使用されているのと同じ緑(#07c907)に一致させました。

最後に、フォームコンテンツを追加する必要があります。 [フォームコンテンツ]タブで、[コンテンツの表示]を有効にします。 次に、コンテンツ領域にテキストを追加します。

このチュートリアルでは、これらはすべて、構成する必要のあるギブフォーム設定です。 [公開]ボタンをクリックして、後でこの寄付フォームのショートコードが必要になることに注意してください。

このフォームを実際に設定するときは、 [寄付]> [設定]に移動して、支払いゲートウェイやメールなどを構成する必要もあります。

画像アセットを準備する

フォームセクションにはカスタムの背景画像も必要です。 もちろんこれはオプションであり、フォームの動作には影響しません。 しかし、見た目はかっこよく、ファーマーズマーケットの例に素晴らしいデザインの結びつきを加えています。

この画像を作成するために私はPhotoshopを使用しましたが、おそらくGimpと呼ばれる無料のソフトウェアを使用することもできます。 これは、同じ機能を多数備えたオープンソースツールです。

作成方法は次のとおりです。

まず、非営利団体に関連する要素を含む画像を見つけます。 私が使っている例はファーマーズマーケットのものなので、野菜を使うことにしました。 ストックイメージのウェブサイトで「孤立野菜」を検索しました。 通常、ストック画像のWebサイトで「分離された」という用語は、白い背景のアイテムを指します。 これにより、背景を削除することで簡単に分離できます。 それはまさに私がしたことです。

これが私が見つけた画像です。

次に、その画像をフォトショップで開きました。

初期レイヤーはデフォルトでロックされているので、右クリックして「レイヤーの複製」を選択して複製します。 次に、その横にある目のアイコンをクリックして、最初のレイヤーを非表示にします。

次に、魔法の杖ツールを使用して、野菜要素の周囲と内部のすべての空白を選択します。 バックスペースキーを押して削除します。

次に、トップメニューで[画像] > [キャンバスサイズ]に移動し、キャンバスのサイズを1920×1080に変更します。 これを行うと、新しい小さなキャンバスと比較して、要素が非常に大きくなる可能性があります。

キーボードでcommand + Tを押すか、[編集]> [変換]> [スケール]に移動します。 新しいキャンバスサイズに収まるように、分離した要素レイヤーのサイズを変更します。

これは、今のところこの画像で説明する限りです。 この新しいフォトショップファイルを保存したことを確認してください。 サイズの参考として新しい寄付フォームを入手したら、以下に進みます。

Diviでデザインを作成する

まだ行っていない場合は、新しい(無料の)ファーマーズマーケットレイアウトパックをダウンロードしてインストールすることをお勧めします。 レイアウトパックのインストールについては、その投稿の指示に従ってください。 インストールしたら、このブログ投稿の指示に従って、カスタマイズの次の段階に向けてサイトをセットアップします。これについては、ここで説明します。

準備ができたら、寄付ページに移動し、ページ上部のボタンを使用してビジュアルビルダーを有効にします。 ページの下のセクションごとに、カスタマイズを行っていきます。

このページはギビングチューズデーキャンペーンの準備ができているので、おそらく一番上で言及する必要があります。 したがって、ヒーローセクションにカーソルを合わせ、灰色のモジュールコントロールの歯車アイコンをクリックしてモジュール設定を開きます。

次に、[コンテンツ]タブを表示したまま、下にスクロールしてリンク設定を開きます。 フィールドタイトルのボタン#1 URLに、「#donate」というテキストを配置します。 これは、以下で作成するフォームへのアンカーリンクとして機能します。

最後に、[デザイン]タブに移動し、[サブヘッドテキスト]設定を開きます。 小見出しのフォントの太さを太字に設定します。

これで最初のセクションが完了しました。 3番目のセクション(大きな引用符が付いているセクション)まで下にスクロールし、青いセクションコントロールの歯車アイコンをクリックします。 背景色を#F6F6F6に設定します。

次に、引用テキストモジュールのモジュール設定を開きます。 その背景も#F6F6F6に変更します。

このセクションも完了しました。 そのすぐ下の4番目のセクションに移動します。 これは私たちの寄付フォームのセクションです。

このセクションはレイアウトパックに含まれているため、お問い合わせフォームを使用して、提供する予定の金額の誓約を送信できる「誓約」セクションになります。 しかし、私たちはそれを実際の寄付フォームに変えて、直接お金を受け取ることができるようにします。

セクションの設定から始めて、作業を始めましょう。まず、背景色を変更する必要があります。 上記のセクションと同じ#F6F6F6に設定します。

次に、[デザイン]タブのセクションで、[間隔]オプションを開きます。 次のカスタムパディングを追加します。

上:250px

右:40px

下:250px

左:40px

最後に、セクション設定のままで、[詳細設定]タブに移動し、[CSSIDとクラス]コントロールを開きます。 CSSIDの下に「寄付」という言葉を書いてください。

新しい設定を保存します。

私たちは今、私たちの誓約書を取り除く必要があります。 2つのテキストモジュールとお問い合わせフォームモジュールで構成されています。 先に進み、それらを削除します。 その代わりに、テキストモジュールを追加します。

新しいテストモジュール内に、前に作成した寄付フォームのショートコードを配置します。 背景を白一色(#ffffff)に設定します。

次に、[デザイン]タブに移動します。 あまり知られていない秘密は、サードパーティのショートコードによって生成された要素が、テキストモジュールの設計設定を使用してある程度カスタマイズできることです。

テキストオプションで、次の設定を構成します。

テキストテキストサイズ:18px

テキスト行の高さ:1.8em

H2の[見出し]テキストオプションで、次の設定を構成します。

見出し2テキストサイズ:36px

見出し2行の高さ:1.5em

[間隔]オプションで、次の設定を構成します。

カスタムパディング:50xp(すべてのフィールド)

[ボックスシャドウ]オプションで、一番上の行(右端)の最後のオプションを選択します。 次に、このオプションを構成します。

ボックスシャドウスプレッド強度:-2px

最後に、[アニメーションオプション]で、次の設定を構成します。

アニメーションスタイル:バウンス

アニメーションの方向性:上

アニメーション時間:800ms

アニメーションの遅延:400ms

アニメーションの開始不透明度:100%

これらすべての設計設定を構成したら、それらを保存します。 寄付フォームは次のようになります。

もちろん、これは完全に受け入れられる形式です。 しかし、私の意見では、それは少し退屈です。 スパイスを効かせるためにやりたいことが2つあります。 まず、[今すぐ寄付]ボタンのスタイルを、Webサイト全体の他の[寄付]ボタンと一致させます。

[Divi]> [Divi Library]> [General]に移動して、テーマオプションに移動します。 [カスタムCSS]ボックスまで下にスクロールし、フォローボタンのスタイルをそこに貼り付けます。

/*Give Plugin Styles*/

.give-btn.give-btn-modal {
    background: #07C907;
    border: none;
    border-radius: 0px;
    color: #fff;
    padding: 20px;
    cursor: pointer;
    line-height: 1.2em;
    font-size: 18px;
    font-weight: bold;
}

#give-purchase-button.give-submit.give-btn {
    background: #07C907;
    border: none;
    border-radius: 0px;
    color: #fff;
    padding: 20px;
    cursor: pointer;
    line-height: 1.2em;
    font-size: 18px;
    font-weight: bold;
}

変更を保存して、寄付ページに戻ります。 更新して、フォームを確認してください。 これで、次のようになります。

今、私たちはどこかに到達しています! 最後の仕上げを追加しましょう。 以前に作成し始めたセクションの背景画像。

完了するには、ブラウザウィンドウのサイズを1920×1120に変更します。 whatsmybrowsersize.comのようなWebサイトを使用できます。

次に、新しいフォームを中心にした寄付ページのスクリーンショットを撮ります。 このようになります。

この新しいスクリーンショットを、前に作成したフォトショップファイルと一緒にPhotoshopで開きます。

長方形マーキーツールを使用してフォームを選択します。 その後、すべてのもの、あなたのフォームを選択するには、[選択]> [逆に進みます。 新しい選択を削除します。 これで、次のようなキャンバスが作成されます。

これで、背景画像の参照として使用できる正しいサイズの「フォームモックアップ」ができました。 両方のフォトショップファイルを開いた状態で、分離したフォームを含むフォトショップレイヤーを背景画像ファイルにドラッグします。

レイヤーパネルで、フォームレイヤーの不透明度を50%に調整します。 次に、後でフォームを選択したまま、ロックアイコンをクリックしてロックします。 これで、次のようになります。

これで、レイヤーパネルで野菜レイヤーを選択できます。 なげなわツールを使用して個々の要素を選択し、必要な構成が得られるまで要素を削除または再配置します。 私の最終的な構成は次のようになりました。

独自の最終構成ができたら、 [ファイル]> [エクスポート]> [名前を付けてエクスポート]に移動し、 [ PNG]を選択して背景を透明に保ちます。

これで、その画像を寄付ページの寄付フォームセクションに追加して、DiviWebサイトに戻すことができます。

セクション設定を開きます。 [背景]で、前に設定した色をそのままにして、画像オプションを選択します。 ここに新しい背景画像を追加します。 次に、次の設定を構成します。

背景画像サイズ:実際のサイズ

背景画像の位置:中央

これらの設定を保存します。 これでフォームセクションが完成しました。

寄付-フォーム-プレビュー-3

デザインを完全に完成させるには(投稿の最初から全ページのプレビューに一致させるため)、残りのページセクションの背景色をスクリーンショットの背景色と一致するように変更するだけです。 灰色(#F6F6F6)または白(#ffffff)のいずれかを使用します。

ハッピー募金!

DiviとGiveと同じくらい強力なプラグインにより、GivingTuesdayの取り組みが大ヒットすることは間違いありません。 フォローしていただきありがとうございます。 このチュートリアルで取り上げられていることについて引き続きサポートが必要な場合は、本日午後3時にFacebookページとYouTubeチャンネルでライブストリームを実施し、このプロセス全体を1つのテイクで紹介します。 また、質問に答えていきます。 そこで会えるのを楽しみにしています!