組み込みの Web 背景とは何ですか? 会社の営業部門向けの顧客および取引会計システム。 販売ページにぜひアクセスしてください
販売分析
PBX との統合
ウェブサイトの統合
特別なウィジェットを接続すると、リードや連絡先をシステムに手動で転送する必要がなくなります。 Web サイトに特別なフォームを作成します。 クライアントが入力すると、連絡先またはトランザクションは自動的に amoCRM システムに入力されます。
iPhoneまたはAndroid用のアプリケーション
amoCRM iPhone および Android アプリを使用すると、クライアントのリスト、潜在的な取引、タスク リスト、イベント フィードを表示できます。
便利なデスクトップ
amoCRM 自体は、最も重要なグラフをすべて自動的に表示します。また、基本パッケージにデータが欠けている場合でも、いつでも独自のウィジェット パネルを無制限に追加できます。
拡張機能とウィジェット
amoCRM を使い慣れた快適な作業にしましょう! わずか 2 回のクリックで独自の電子メール ニュースレターを作成できます。 amoCRM をテレフォニーと統合し、スペシャリストの時間を節約します。 便利な Dropbox クラウド ストレージにファイルを保存します。
顧客、企業、取引のデータベース
各クライアント、進行中の交渉、現在の契約、将来の販売に関するすべての情報がここに収集されます。 さらに、このプログラムは「スマート」検索、タグ、フィルターを提供します。 各取引には、すべてのメモと提案ファイルが保存されるイベント フィードがあり、ここで新しいタスクを設定できます。 顧客とのやり取りの履歴全体が 1 か所にまとめられています。
amoCRM は、すべての取引にアクションがスケジュールされていることを確認し、タスクの期限が過ぎているか、何もスケジュールされていない場合に通知します。 取引を入力し、メモを残してタスクを追加します。 任務完了？ 取り消し線を引いてください。 これらは特別なインターフェイス タブにあります。 セルゲイに電話したのを覚えていますか？ 呼びましたか？ ここで、タスクが完了したことがわかります。
メールとの完全な統合
任意のメールボックスを無制限に接続すると、通信内容が自動的に amoCRM に表示されます。 クライアントからの新しい電子メールごとに、新しい取引が自動的に作成されます。 受信リクエストの処理速度も追跡します。
販売分析
amoCRM は、ステータス、マネージャー、または便利な別のセクションごとにトランザクションの分布を示す図を提供します。 さらに、システムは以前に収集された統計と現在の状況に基づいて売上予測を作成します。
PBX との統合
AmoCRM は、電話をかけたり転送したりする際に欠かせないアシスタントになります。 その助けを借りて、すべての顧客の名前を「覚える」ことができます。 このプログラムは、着信通話と発信通話のすべての統計も保存します。 PBX との接続を確立すると、電話の形をした特別なアイコンが amoCRM インターフェイスに表示されます。 ワンクリックで、その番号が管理者の電話に自動的にダイヤルされます。 リストからでも、連絡先カードまたはトランザクション カードからでも電話をかけることができます。
Web サイトの背景に大きなビデオを表示することは、Web デザインにおいてかなり人気のあるトレンドです。 動画を上手に活用すると、Web サイトをよりドラマチックでユーザーにとって魅力的なものにすることができます。
さらに、ビデオの背景は、アニメーションの結果をユーザーが確認する前に特定のコードと画像をロードする必要がある JavaScript を使用して作成された背景とは異なり、遅延なくスムーズに再生できます。
Powerhouse や Adidas のように、サイトの背景でビデオを使用して、製品やサービスに関する特定のメッセージやストーリーをユーザーに伝える企業があります。
ビデオ背景を作成する最も一般的な方法は、HTML5 ビデオ タグといくつかの CSS オプションを使用することですが、YouTube などの代替ビデオ ソースを検討することも価値があります。 この場合、リクエストは YouTube に直接送信されるため、サーバーの応答が遅いことを心配する必要はありません。
この記事では、YouTube 動画を背景として使用してクールな Web サイトを構築する方法を説明します。 jQuery.mb.YTPlayer.js を使用してビデオの外観を編集および制御します。 それでは始めましょう!
ソースをダウンロードする
デモ
必要になるだろう：
//大きな背景のコンテンツはここに //セクションのコンテンツについてはここに //小さな背景のセクションのコンテンツはここに
次に、各セクションにコンテンツを入力する必要があります。 big-background セクションと small-background-セクションにパターン クラスを配置して、ビデオに微妙なテクスチャを作成します。 h1、h2、段落、ボタンも追加する必要があります。
YOUTUBE ビデオを背景に配置する方法を知りたい YouTube のビデオをサイトの背景に配置します
ウェブサイトの背景にビデオを追加する方法を知りたいですか?
これ以上に簡単なことはありません。 jQuery プラグインである jQuery MB.YTPlayer を使用すると、任意の YouTube ビデオを Web サイトの背景に埋め込むことができます。
あらゆるビデオを簡単に HTML 背景に変えることができます。 ページの読み込みに遅延はなく、サーバーに負荷もかかりません。
小さな背景セクションにあるソーシャル アイコンには Font Awesome フォントを使用しました。 次に、jQuery.mb.YTPlayer プラグインを使用してビデオのテンプレートを追加します。 次のコードを の直後に配置します。
ビデオのセットアップに使用したものは次のとおりです。
- class player – このクラスは mb.YTPlayer プラグインによって使用されます
- videoURL – ビデオリンク
- containment – ビデオを再生する CSS セレクター
- autoPlay – ビデオを自動再生します
- ミュート – 音の存在
- startAt – ビデオの再生を開始する時刻
- 不透明度 – ビデオの透明度
Html (高さ:100%) 本文 (フォント:15px/23px "Raleway",sans-serif; マージン:0; パディング:0; 高さ:100%; 幅:100%; -webkit-font-smoothing:antialiased; - webkit-text-size-adjust:100% ) p ( font-size:20px; line-height:140%; text-align:center ) ul li ( display:inline-block; list-style:none; padding-right : 10px)
ラッパー（z-index:600;position:relative）.pattern（background-image:url(../images/pattern.png);background-repeat:repeat;background-attachment:scroll;width:100%;height: 100%; 位置:絶対; 上:0; 左:0 ) .divider (背景画像:url(../images/divider.png); 表示:ブロック; 高さ:35px; マージン:10px ) #colorize ( color:#f1c40f; font-family:"Lato",sans-serif; font-size:40px )
大きな背景セクションのスタイルを設定しましょう。 z-index を 550 に設定し、オーバーフロー パラメーターを非表示に設定します。 これは、YouTube コンテンツ (字幕、注釈) が当社の Web サイトに表示されないようにするために必要です。 残りのスタイルは、ヘッダー、ボタン、およびデフォルト画像用です (詳細は後ほど)。
Big-background ( z-index:550; text-align:center; height:100%; min-height:100%;position:relative; overflow:hidden ) .big-background .big-background-container ( width:830px ; 最大幅:100%; 左:50% (-50%,-50%); %,-50%); -o-transform:translate(-50%,-50%); -50%) ) .big-background-title ( font-family:"Raleway",sans-serif; font-size :78px; フォント-ウェイト:300; テキスト-整列:センター: 背景-位置: 中央) Lato",サンセリフ; テキスト変換:大文字; カラー:#fff; ボーダー:2px 実線 #fff; ; カーソル:ポインター; 文字間隔:2px; 表示:インラインブロック; -webkit-transition:.4 秒のバックグラウンドの容易さ。 -moz-transition:.4秒のバックグラウンドの容易さ; -o-transition:.4 秒のバックグラウンドの容易さ。 トランジション: .4 秒のバックグラウンドの容易さ。 ) .big-background-btn:hover ( color:#fff; 背景:rgba(255,255,255,0.20) ) .big-background-default-image (background:url(../images/sunset.jpg); 背景-繰り返し:no-repeat; 背景サイズ:カバー; 裏面の可視性:非表示)
それでは、「概要」のセクションに移りましょう。 背景色を白、パディングを上下60px、左右20pxに設定しましょう。
概要セクション ( font-family:"Lato",sans-serif; color:#7f8c8d; 背景:#fff; パディング:60px 20px ) .about-section-container ( text-align:center; padding-bottom:50px ) .about-section-title ( font-family:"Raleway",sans-serif; font-size:40px; バックグラウンド:#fff; カラー:#3d566e; パディング:0 35ピクセル; マージン-ボトム:22ピクセル; 背景添付:スクロール; 背景-リピート:リピート-x; 背景-位置:中央 センター; テキスト-変換:大文字 ) a.about-section-btn ( font-family:"Lato",sans-serif; フォントサイズ:13px; -transform:uppercase;color:#34495e;border:2pxsolid;padding:10px;letter-spacing:2px; -webkit-transition:.4s 背景の容易さ; -moz-transition:.4s の背景の容易さ - o-transition:.4s 背景の容易さ); ( color:#fff; 背景: #34495e; )
フッターとしても機能する小さい背景セクションでは、幅を 100% に設定し、オーバーフローを非表示に設定します。 また、ビデオが見えるように上部と下部にパディングを追加します。 最後に、ソーシャル メディア ボタンのスタイルを追加しましょう。
small-background-section ( font-family:"Raleway",sans-serif; padding:100px 0; Position:relative; width:100%; overflow:hidden ) .small-background-container (position:relative; text-align :center ) .small-background-title ( font-size:40px; color:#f1c40f; font-weight:300; z-index:10; display:inline-block; text-transform:uppercase; margin-bottom:20px ; マージン-トップ: 20px; 背景-リピート: リピート-x; 背景-位置: トップセンター ) .socials a: hover ( color:# bdc3c7 )
メディア クエリ サイトの応答性を高めるために、いくつかのメディア クエリを追加しましょう。@media 画面と (最大幅: 768px) ( .about-section-title ( line-height:1 ) ) @media 画面と (最大幅: 480px) ( .big-background-title ( font-size:58px) ) .small-background-title ( line-height:1 ) /*.player( display: none;) -> プラグインなしで特定のビューポートのビデオ背景を削除したい場合*/ ) @media screen and ( max-width: 360px) ( .big-background-title,#colorize ( line-height:1 ) ) @media screen および (max-width: 320px) ( .small-background-title ( font-size:30px ) )
jQuery それでは、YouTube ビデオをオンにしてみましょう。 jQuery コード内でプレーヤー クラスを呼び出してみましょう。 次のコードを、終了 body タグの前の . 内に配置します。$(function())( $(".player").mb_YTPlayer(); )); YouTube のポリシーでこれが許可されていないため、フォールバック YouTube バックグラウンド ビデオはモバイル デバイスやタブレットでは再生されません。
ただし、ユーザーがモバイル デバイスからサイトにアクセスしていることがブラウザで検出された場合に備えて、jQuery を使用してデフォルトの背景画像を追加できます。
手動による解決策
ユーザーがモバイル デバイスまたはタブレットからアクセスしていることを判断するには、特定の画面サイズで要素を非表示にすることができます。 たとえば、幅 480 ピクセルの画面でビデオの背景を削除したいとします。 player 要素に display: none を追加するだけです。
@media 画面と (最大幅: 480px) ( .player( display: none; ) )
jQuery に関しては、ここでは is_mobile 変数を false に設定します。 次に、プレーヤー クラスに display: none があることを確認します。 その場合は、big-background-default-image クラスを big-background セクションと small-background-section セクションに追加して、デフォルトの背景画像を使用します。 そうでなければ何も変わりません。
(function($) ( $(document).ready(function() ( var is_mobile = false; if($(".player").css("display")=="none") ( is_mobile = true; ) if (is_mobile == true) ( //ここに条件付きスクリプト $(".big-background, .small-background-section").addClass("big-background-default-image"); )else( $( ".player").mb_YTPlayer() ))(jQuery);
jQuery プラグインを使用した解決策 デフォルトの画像を設定するもう 1 つの方法は、jQuery プラグイン device.js (http://matthewhudson.me/projects/device.js/) を使用することです。 これにより、モバイル デバイスのさまざまな画面サイズの条件を記述するプロセスが簡素化されます。 このプラグインを使用すると、次のコードを簡単に作成できます。(function($) ( $(document).ready(function() ( //Device.js はタブレットかモバイルかをチェックします - http://matthewhudson.me/projects/device.js/ if (!device. table() && !device.mobile()) ( $(".player").mb_YTPlayer(); ) else ( //jQuery はデフォルトの背景を優先クラスに追加します $(".big-background, .small-背景セクション").addClass("大きな背景デフォルト画像"); ) )); ))(jQuery);
ここでは、device.mobile() メソッドと device.tablet() メソッドを使用して、ユーザーがログインしているデバイスを確認しました。 条件が満たされる場合、クラス big-background-default-image が big-background セクションと small-background-section セクションに追加されます。 それ以外の場合、プレーヤー クラスは変更されず、ビデオが再生されます。
正しく理解する 動画は、視聴者にメッセージを伝える優れた方法です。 正しく使用すれば、Web サイトにとって強力なツールになります。Web デザインが進化し、改善されるにつれて、Web サイトのデザインでビデオを使用するための創造的なアイデアがますます登場すると確信しています。 このチュートリアルから何かを学んでいただければ幸いです。 コメントにあなたの考えやコメントを書いてください。
翻訳者より。翻訳に関するご希望やご意見がございましたら、個人メッセージで私にご連絡ください。 ありがとう！
