Zero Block: カスタム ブロックを作成する方法

ページにZero Blockを追加するには、ページの一番下にある [ゼロ] をクリックします。また、ブロックライブラリの下部、「その他」カテゴリのすぐ下にあります。

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

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

グリッドコンテナは、Tildaと同じグリッド(12列(1200ピクセル))をサポートします。オブジェクトをグリッドに整列させ、グリッドコンテナ内に要素を配置すると、画面サイズに関係なく、常に12列の境界内にとどまります。

ブロック エディターの左上隅にあるプラス ボタンをクリックして、要素をページに追加します。テキスト、画像、図形、ボタン、ビデオ、ツールヒント、HTML、フォーム、またはギャラリーを追加できます。

Zero Blockは、要素の移動、サイズ変更、コピー (Alt キーを押したまま)、複数の要素の選択など、基本的なマウス操作をすべてサポートしています。

縦横比を変更せずに画像エレメントのサイズを変更できます。

テキスト要素の高さは、テキストの量に応じて 自動的に変化します 。

ボタンや図形のサイズは、すべての方向に変更できます。

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

キーボードを使用してブロック要素を編集すると、作業プロセスが大幅に高速化されるため、ホットキーの使用をお勧めします。

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

画面の右下隅にある [設定] をクリックすると、すべての要素の設定にアクセスできます。

デフォルトでは、ワークスペースを明確に保つために設定パネルは非表示になっています。

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

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

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

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

画像をアップロードすると、アップロードされたフレームのサイズが使用されます。要素の [設定] パネルで [元のサイズ] をクリックして、画像を元のサイズにリセットします。

画像を円形にトリミングする場合は、丸みの半径を設定します。

均一な円を作成するには、元の画像が正方形で、丸め半径が辺の半分に等しくなければなりません。たとえば、画像のサイズが 100×100 ピクセルの場合は、半径を 50 に設定します。

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

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

ユーザーがクリックすると別のページに移動するように、任意の画像をリンクに変えることができます。要素の [設定] パネルに移動し、リンクを指定して、同じウィンドウで開くか新しいウィンドウで開くかを指定します。

図形を追加すると、ページに四角形が表示され、四角形、円、または線に変換できます。

長方形:コントロールポイントをドラッグして辺の長さを変更します。

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

サークル。 円を作成するには、正方形の辺の長さの半分に等しい丸め半径を設定します。

線。 要素設定で長方形の高さを1〜5ピクセルに設定します。したがって、あなたは線を作ります。

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

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

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

ボタンの動作を設定できます。たとえば、ボタンにカーソルを合わせると、背景色、テキストの色、境界線の色が変わります。

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

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

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

水平フォームまたは垂直フォームをZero Blockに追加できます。入力フィールドの追加、データ キャプチャ サービスの接続、成功メッセージとエラー メッセージの設定、デザインの変更、アニメーションの作成など、すべての基本的なフォーム設定にアクセスできます。

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

データ キャプチャ サービスをフォームに接続するには、要素の [設定] パネルに移動し、[サービス] をクリックします。そこで、データ キャプチャ サービスをフォームに接続できます。

Tildaは、すべての基本的な画面タイプのレスポンシブデザインをサポートしています。
1200:最大(デスクトップ)
980—1200(水平タブレット)
640—980(垂直タブレット)
480—640(水平スマートフォン)
320—480(垂直スマートフォン)

これは、デザインがすべてのデバイスで正しく表示されるのに十分です。

メイン アートボード上のZero Blockをカスタマイズしたら、画面の種類を切り替え、テキスト列の幅、イメージ サイズ、フォント サイズ、アートボードの高さ、要素のレイアウトなど、必要に応じて調整を行います。

特定の画面タイプで変更された設定が強調表示されます。別の画面タイプの設定を反映する設定は灰色です。これにより、どの設定が変更されたかを簡単に確認できます。

以下の例では、テキスト要素のすべての設定がグレーで表示されています。これは、現在の画面タイプでも前の画面タイプと同じであることを意味します。

特定の画面タイプのフォント サイズと要素の座標を変更すると、値が灰色で表示されなくなります。これは、新しい設定がこの画面タイプに固有であることを意味します。

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

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

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

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

背景画像のレンダリング(フィルター開始/フィルター終了)と背景画像に関するコンテンツの動作をカスタマイズすることもできます:「固定」値を設定すると、コンテンツ(テキストと図形)はスクロール中に移動しますが、画像はそのまま残ります。