Zero Block:カスタムブロックの作り方

ページにZero Block を追加するには、ページの一番下にある「Zero」をクリックしてください。また、ブロックライブラリーの一番下、「その他」カテゴリのすぐ下にもあります。

Zero Block コピー、削除、非表示が可能です。設定もありますが、「コンテンツ」ボタンの代わりに「ブロックエディター」ボタンがあります。ブロックを編集したい場合はこれをクリックすると、ブロックエディターが開きます。

Zero Block には、ブラウザ画面の境界を示すグリッドコンテナとウィンドウコンテナという2つのワークスペース（コンテナ）があります。

グリッドコンテナは、Tildaと同じ12列（1200px）のグリッドをサポートしています。オブジェクトをグリッドに合わせ、要素をグリッドコンテナ内に配置すると、画面サイズに関係なく、常に12カラムの境界内に収まります。

ブロックエディタの左上にあるプラスボタンをクリックして、ページに要素を追加します。テキスト、イメージ、シェイプ、ボタン、ビデオ、ツールチップ、HTML、フォーム、ギャラリー、ベクターを追加できます。

Zero Block 要素の移動、サイズ変更、コピー（Altキーを押しながら）、複数要素の選択が可能です。

テキスト要素の高さは、テキストのボリュームに応じて自動的に変更さ れます。

ボタンとシェイプのサイズは、全方向に変更できます。

複数の要素が選択されている場合、それらの要素は互いまたはコンテナに対して水平または垂直に整列させることができます。

キーボードを使ったブロック要素の編集は、作業プロセスを大幅にスピードアップします。

キーボードショートカットのリストは、ブロックエディタのコンテキストメニューからもアクセスできます。

画面右下の「設定」をクリックすると、どの要素でも完全な設定にアクセスできます。

デフォルトでは、ワークスペースをすっきりさせるため、設定パネルは非表示になっています。

上部のボタン列を使用して、要素をコンテナに対して垂直または水平に素早く整列させます。

要素の座標は下に表示されます。座標はピクセルまたはパーセントで指定できます。以下、この機能について詳しく説明します。

原点は青い十字で示されています。

また、要素のパラメータである幅と高さをピクセル単位で表示することもできます。

画像をアップロードすると、その画像はアップロードされたフレームのサイズになります。画像を元のサイズに戻すには、要素の設定パネルにある「元のサイズ」をクリックしてください。

画像を円形に切り抜きたい場合は、丸め半径を設定します。

均等な円を作るには、元の画像が正方形である必要があり、丸め半径は辺の半分に等しくする必要があります。例えば、画像のサイズが100×100pxの場合、半径を50に設定します。

画像に影を付けることができます。これを行うには、要素の設定パネルで影の色、不透明度、xとyのオフセット、ぼかしの度合い、広がりを選択します。

各画像には代替テキスト（altタグ）を付けることができます。検索エンジンは代替テキストをキーワードとして解釈し、ページのインデックスに使用するため、代替テキストがウェブサイトのコンテンツ全般に関連し、画像の内容を反映していることを確認してください。

どんな画像でもリンクにすることができ、ユーザーがクリックすると別のページに移動します。要素の設定パネルに移動し、リンクと、同じウィンドウで開くか新しいウィンドウで開くかを指定します。

長方形：コントロールポイントをドラッグして辺の長さを変える。

または、要素設定で値を指定する。

円。 円を作るには、丸め半径を正方形の辺の長さの半分に設定する。

線。要素設定で矩形の高さを1～5pxに設定し、線を作る。

シェイプには、シャドウ、ボーダー、リンクを割り当てることができます。

ボタンのサイズ、色、丸め半径を変更できます。また、影と境界線を追加することもできます。

ボタンのキャプションとリンクは、要素の設定パネルで設定できます。そこでは、サイズ、タイプ、不透明度、フォントの色も設定できます。

ボタンの動作を設定することができます。例えば、ボタンにカーソルを合わせると、背景色、文字色、枠線の色が変わります。

ツールチップは、ポインタを重ねるとテキストヒントや画像を表示するインタラクティブなブロック要素です。

ツールチップの色、影、サイズを調整したり、円の中に表示されるアイコンを設定したり、ポインタを乗せたときにポップアップする画像をアップロードしたり、アニメーションを作成したりすることができます。

ツールチップがブロックの端で切れてしまわないように、ブロック内の要素を配置した後、すべての画面解像度でツールチップの位置を確認してください。

Zero Block 。入力フィールドの追加、データ取得サービスの接続、成功・エラーメッセージの設定、デザインの変更、アニメーションの作成など、すべての基本的なフォーム設定にアクセスできます。

入力フィールドを編集するには、要素の「設定」パネルに移動し、「入力フィールド」をクリックします。ここでは、通常のフォームブロックのように入力フィールドをカスタマイズすることができます。

データキャプチャサービスをフォームに接続するには、エレメントの設定パネルで「サービス」をクリックします。そこでデータ取得サービスをフォームに接続することができます。

Zero Block では、画像ギャラリーを追加することができます。ギャラリーの幅と高さはShape要素と同様に変更できます。

ギャラリーの設定を確認してみましょう。

Stretch：2つのパラメーターがあります：

Coverの場合、イメージはギャラリーエリアを完全に埋めるので、そのフォーマットがギャラリーと異なる場合、トリミングされる可能性があります。

Containの場合、ギャラリーのイメージはオリジナルのフォーマットになるので、どのフォーマットのギャラリーでもトリミングされません。

Position。ギャラリー領域に対するイメージの位置を定義します。例えば、Left Topパラメータが選択された場合、イメージはギャラリーの左上隅を基準に位置されます。

Loop.この設定はギャラリーのスライド(イメージ)をループします。2つのパラメータがあります：

ループの場合、ギャラリーのスライドは無限にループされます。つまり、最初のスライドは最後のスライドの後に表示されます。

なしオプションの場合、ループはなく、ギャラリーは最後のスライドで停止します。

スライドスピードスライドを変更するためのアニメーションタイプを定義します。3つのパラメーターがあります：

Noneオプションの場合、スライドを切り替えるときにアニメーションは使用されません。

Slowオプションの場合、スライドはゆっくり切り替えられます。

Fastオプションの場合、スライドは速く切り替えられます。

Autoplayは自動スライド切り替えのスピードを秒単位で定義します。
秒単位で値を指定していない場合、自動スライド切り替えは行われません。

Zoomableオプションはクリック時にギャラリーイメージをズームすることができます。これには2つのパラメータがあります：

Zoom on clickの場合、画像はクリック時にズームされます。

Noneオプションの場合、画像はクリック時にズームされません。

Arrowsタブには、矢印（ボタン）の外観を定義する設定が含まれます。

Dotsタブには、ギャラリーの下のドットの外観を定義する設定が含まれます。

各スライド（画像）には独自の設定があります：

ここでは、画像のキャプション、SEO用のAltタグ、YouTubeやVimeoの動画を追加したり、このスライドをクリックしたときにジャンプするリンクを追加したりできます。

Tilda supports responsive design for all the basic screen types:
1200—max (desktops)
980—1200 (horizontal tablet)
640—980 (vertical tablet)
480—640 (horizontal smartphone)
360—480 (vertical smartphone)

This is enough for your design to display correctly on all devices.

After you have customized a Zero Block on the main artboard, switch the screen types and make adjustments where necessary, such as text column width, image size, font size, artboard height, or element layout.

特定の画面タイプ用に変更された設定は強調表示されます。他のスクリーン・タイプの設定を反映する設定は灰色で表示されます。こうすることで、どの設定が変更されたかを簡単に見ることができる。

下の例では、text要素の設定がすべて灰色になっています。これは、現在の画面タイプでも前の画面タイプと同じであることを意味します。

あるスクリーン・タイプのフォント・サイズとエレメント座標を変更すると、その値はグレーで着色されなくなる。これは、新しい設定がこのスクリーン・タイプに対して一意であることを意味します。

空のスペースをクリックすると、アートボード設定が表示されます。

グリッドコンテナの高さは、キーボードを使ってピクセル単位で指定できます。コンテナの端をドラッグして値を変更できます。グリッドコンテナの幅は1200pxに固定されています。

アートボード設定でブロック全体の背景色をカスタマイズできます。

アートボード設定で、ブロック全体の背景画像をアップロードできます。

背景画像のレンダリング（フィルタ開始／フィルタ終了）や、背景画像に関するコンテンツの動作もカスタマイズできます：Fixed "に設定すると、コンテンツ（テキストや図形）はスクロール中に移動し、画像は固定されます。

ボタンやリンクをクリックするとポップアップするブロックには、「その他」カテゴリーからT1093モディファイア・ブロックを追加してください。

ブロックのコンテンツタブで、必要なZero Block のIDを指定します（または "ChooseZero Block" リンクをクリックして手動で選択します）。デフォルトでは、ポップアップするリンクは#zeropopupリンクです。これを好きな名前に変更することができますが、先頭にハッシュ記号を付けておく必要があります。

ポップアップブロックがどのように機能するかについては、"ポップアップ "の記事をお読みください。

T1093ブロックの設定では、背景（色、不透明度）、クローズアイコンの色、アニメーション速度、
独自のZインデックス、その他のパラメータを選択できます。