表紙は、人々があなたのページで最初に目にするものです。それはコンテンツを紹介し、彼らにそれを選ぶように促すか、あなたのプロジェクトをユニークにするものを要約します。カバーには通常、スタイリッシュな写真、説得力のあるビデオ、色、グラデーション、テクスチャなどの背景画像が含まれています。

ここでは、カバー、背景、動画をより効率的に操作するのに役立つヒントをいくつか紹介します。

可視領域

雑誌のページとは異なり、Web サイトのページには固定の表示領域がありません。デバイスごとに画面サイズと縦横比が異なります。また、閲覧できる範囲はブラウザによって異なります。たとえば、ブックマークバーが固定されているブラウザでは、表示可能な領域が狭くなります。表紙の画像はトリミングされて、画面にフチなしで表示されます。

背景画像

ブロックの[コンテンツ]パネル→[背景画像]にカバー背景画像をアップロードします。

画像の見栄えを良くするには、背景画像の最適な設定に関する次のヒントに従ってください。

最高のサイズ:
アップロードされた画像に最適なパラメータは次のとおりです。
フォーマット: JPG
幅:1680ピクセル
解像度: 72 dpi
カラーモデル:RGB
圧縮: 10

画像の品質に不満がある場合は、以下の参考記事を使用してグラフィックエディターで事前に編集します。

Web 用に画像を最適化する方法

画像を選択する前に、Tilda Educationの記事「Webサイトのカバーを作成する方法」をお読みください。独自の表紙を作成するためのヒントと、高品質のストックフォトWebサイトへのリンクが含まれています。

テキストの書式設定

テキストは、Web サイトの訪問者が最初に目にするメッセージであるため、カバーページの最も重要な部分です。表紙には、メッセージを伝え、重要なことを強調するために、見出し、小見出し、説明、および上部の注記が含まれます。

カバーにテキストを入力するには、ブロックのコンテンツパネルを使用する方法と、ページの編集中にテキストをクリックする方法の 2 つがあります。

ブロックをクリックしたときのテキストの編集

ブロックのコンテンツセクションのテキストを編集する

テキストの書式設定は、上部のコントロールパネルを使用するか、ブロックの[設定]パネルでテキストのサイズ、色、またはその他のパラメーターを変更して→タイポグラフィです。

上部のコントロールパネルを使用したテキストの書式設定

ブロックの設定パネルでのフォーマットの変更

クールなカバーを作成するには、テキストと背景画像の組み合わせの実際的な例が記載された記事「Web サイトのカバーを作成する方法」と、「Web サイト向けのユニークな販売提案 (USP) の作成」ガイドを参照して、カバーページを訪問者に魅力的にしてください。 10秒未満。

カバーの高さ

薄いカバー の高さは、100%ではなく60%または70%です。これは、ユーザーの注意が表紙に続く情報に移るにつれて、より正式な機能を果たします。

このようなカバーを作成するには、ブロック設定の [高さ] フィールドに移動します。高さをピクセル単位(400pxなど)またはビューポートの高さの測定単位(パーセント)で設定できます(1vhは表示可能領域の1%です)。高さをvhで設定することをお勧めします。

表紙の色：フィルター設定

背景画像のトーンを変更する方法
カバーテキストを読みやすくしたい場合は、画像のトーンを変更します。これを行うには、カバーブロックの[設定]パネルを開き、フィルターの色を調整します。ここでは、1つのフィルターカラーが適用されたカバー画像を見ることができます。場合によっては、調色に使用されるのはブランドカラーまたはWebサイトの原色です。

ブロックのコンテンツパネルのフィルター設定

Tildaヘルプセンターのカバー:フィルターは徐々にオレンジ色に変わります

色を次のブロックの色にブレンドする方法
時々カバーは次のブロックに穏やかに溶け込むはずです。この効果を得るには、エンドフィルターの色を100%の不透明度に設定する必要があります。フィルターの色は、次のブロックの色と同じである必要があります。

これらの 2 つの設定を同時に適用しながらカバーの高さを 2 倍にすると、以下に示す効果が得られます。

グラデーションと塗りつぶし

ブロック設定には、不透明度と色の2つの調色パラメータがあります。不透明度を 100% に設定し、カバーの色になります。

異なる色を選択すると、スムーズに別の色に溶け込みます。

ビデオカバー

画像の代わりにビデオを使用できます。それには2つの方法があります。

YouTube 動画を追加する方法

動画を YouTube にアップロードするか、そこにある既存の動画を見つけます。次に、カバーブロックのコンテンツパネルに移動し、ビデオリンクを適切なフィールドに貼り付けます。このようにして、ビデオカバーを作成できます。

当社

芸術の専門家

Art Basel は、高品質の近現代美術のアートショーを上演し、バーゼル、マイアミビーチ、香港で毎年開催されます。

WebM および MPEG-4 ビデオを追加する方法

オンラインコンバーターを使用してWebMおよびMPEG-4ビデオを作成し、サーバーまたは変換サービスのWebサイトでホストできます。たとえば、 gfycat.com 変換とホスティングの両方が可能です。

カバーブロックの[設定]パネルを開き、対応するフィールドにビデオリンクを追加します。

なぜ両方のフォーマットを使用するのですか?
ブラウザは異なる形式を使用するため、統一された形式はありません。ユーザーがあなたのウェブサイトにアクセスすると、ブラウザで再生できるビデオが表示されます。それ以外の場合、カバーは空で表示されます。

重要なポイント:現在、ビデオファイルをTildaにアップロードすることはできませんが、ビデオファイルへの直接リンクを提供するサードパーティのサービスを使用できます。
一般的なクラウドサービスの中には、ファイルへの直接リンクを提供するものもあります。たとえば、Dropbox上のビデオファイルへの直接リンクを取得するには、dropbox.com リンクを dl.dropboxusercontent.com に置き換える必要があります。また、Selectelなどのホスティングサービスにファイルをアップロードすることもできます。

モバイル表示用の表紙

画面にはさまざまな縦横比があり、デバイスによってカバーの見え方が異なる場合があります。一般的な縦横比ではカバー画像が劇的に変化することはありませんが、モバイルデバイスでは見分けがつかないほど変更される可能性があります。この包括的なガイドを使用して、モバイルフレンドリーなカバー (またはその他のブロック) を作成する方法を時間をかけて学んでください。

モバイルフレンドリーへ

カバー動画がモバイルで再生されない理由

モバイルOSの特性により、ビデオカバーはモバイルデバイスでは再生されません。モバイル OS は自動再生を無効にします。自動再生ビデオカバーを作成した場合は、カバーブロックのコンテンツパネルに画像を追加することを忘れないでください。画像は、動画が再生できない場合、つまり訪問者がスマートフォンやタブレットからWebサイトにアクセスしたときに表示されます。

表紙のフォーム

データ入力フォームは、CR26 (入力フィールドのある表紙)、CR26AN (複数の入力のある表紙)、CR32 (右揃えのフォームのある表紙)、CR34 (カウントダウンとサブスクリプションフォームのある表紙) の表紙にあります。 )、CR36 (表紙に画像または YouTube 動画と 2 列のフォーム)

フォームがどのように表示されるかをプレビューするには、ブロックライブラリ→カバーにアクセスし、お気に入りのオプションを選択します。

表紙のフォームは同じ機能を実行し、通常のフォームと同じ方法でカスタマイズできます。フォームをカスタマイズするには、「データキャプチャフォームの設定方法」を参照してください。

ヘルプ記事データ取得フォームの設定方法

カウントダウンタイマーの追加

ブロック CR34 と CR35 のカバーページには、将来の特定の時間までのカウントダウンタイマーがあります。この機能は、プロモーションやイベント用のページを作成する場合に特に便利です。

これらのブロックの [コンテンツ] パネルで、イベントの開始時刻の日付、時刻、およびタイムゾーンを設定できます。