ビジュアルエディター

ビジュアルエディター

お知らせ:当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

テンプレートをお好みのスタイルに仕上げましょう。Webサイトのプロパティ(プリセットカラースキーム、ヘッダーのレイアウト、バナーのレイアウト、その他)を複雑なコードを使わずにカスタマイズできます。ビジュアルエディターを開き、希望のオプションを選択して編集を開始してください。

  1. カスタマイズ」→「Visual Editor」へ移動します。

  1. 必要な変更を行います。適用前にプレビューで確認できます。
  2. 完了したら保存をクリック、またはリセットするをクリックしてやり直すこともできます。

以上がビジュアルエディターの基本的な使い方です。これから各項目について詳しくご案内します。

プリセット

ここをクリックして好きなプリセットカラーを選択します。プリセットをカスタマイズするには、カスタム Valuesをクリックし、該当する16進数値をクリックしてカラーピッカーで色を設定してください。 

BaseフォントおよびHeadingフォントは、ドロップダウンをクリックし、フォントライブラリからフォントを選択することで変更できます。


ヘッダーのレイアウト

  1. 利用可能な設定のいずれかをクリックして、さまざまなヘッダーレイアウトを適用できます。
  2. Webサイトでメンバーポータルを有効にしている場合は、ポータル位置の項目で、メンバーサインインをWebサイトのトップバーに表示するか、ナビゲーションバーの一部として表示するかを選択できます。
  3. ドロップダウンリストをクリックして、トップバーやヘッダーのテーマを選択します。
  4. ヘッダーの挙動も「固定」「フローティング」「スクロール時のみ表示」から選択できます。
  5. ヘッダーで表示したい場合は、Social Icon Floaterを有効にしてください。

バナーレイアウトをカスタマイズするための設定が3種類あります。

  • フル幅:バナー画像が画面全体の横幅いっぱいに長方形で表示されます。ナビゲーションバーはシンプルな背景上にバナー画像の上部に表示され、(後から編集可能)です。

  • ボックス:バナー画像は白い余白で囲まれた箱の中に表示されます。前述のオプションと同様に、ナビゲーション棒グラフはバナー画像の上にシンプルな背景で表示されます。

  • フルスクリーン:バナー画像はWebサイト全体にわたってフルサイズで表示されます。ナビゲーション棒グラフはバナー画像の上に重ねて表示され、シームレスな見た目を実現します。

ブログリストとブログ投稿のレイアウト

Visual Editorを使って、ブログリストや投稿の表示方法を変更できます。リストに表示する投稿のレイアウトを複数から選択可能です。また、個別投稿の表示方法も選べます。
            



複数のパンくずリストナビゲーションデザインから選択でき、ユーザーがWebサイトを簡単かつ迅速に移動できるようになります。

メガメニュー 

メガメニュー内で設定の表示方法や、列のセパレーターの種類を選択できます。また、切り替えも可能です。
バックドロップ を追加して、メガメニューの背後に背景を設けることができます
メニュー設定の横にアイコンを追加できます。Visual Editorでは、これらのアイコンがメニュー設定に対してどのように表示されるかを選択できます。

詳細Visual Editor

カスタマイズ機能をさらに一歩進化させました。詳細Visual Editorは、Webサイトのデザインやコンテンツを柔軟かつ簡単にカスタマイズできる機能を提供します。
  1. Visual Editorで、右側のカスタマイズメニュー下部にある詳細をクリックします。 
  2. ElementタブとHeaderタブを切り替えて、必要なカスタマイズを選択します。Elementタブでは各要素の外観を変更でき、Headerタブはブランディングやサイトナビゲーション、ヘッダースタイルのカスタマイズに利用できます。




 

Element:サイト上の見出し、段落、アイコン、ボタンなど、さまざまな要素をカスタマイズできます。ドロップダウンをクリックし、フォントライブラリからフォントを選択することで、ベースや見出しのフォントなどタイポグラフィを変更できます。要素に対するサイト全体のカスタマイズを一箇所から行うことが可能です。詳細はこちら

Heading:ヘッダー タブを使用して、Webサイトのヘッダーセクションのあらゆる側面をカスタマイズできます。タイポグラフィやナビゲーション、ブランディング、サインインボタンなど、ヘッダー要素の編集も可能です。詳細はこちら


    Zoho CRM 管理者向けトレーニング

    「導入したばかりで基本操作や設定に不安がある」、「短期間で集中的に運用開始できる状態にしたい」、「運用を開始しているが再度学び直したい」 といった課題を抱えられているユーザーさまに向けた少人数制のオンライントレーニングです。

    日々の営業活動を効率的に管理し、導入効果を高めるための方法を学びましょう。

    Zoho CRM Training



              Zoho Campaigns Resources

                Zoho WorkDrive Resources




                  • Desk Community Learning Series


                  • Digest


                  • Functions


                  • Meetups


                  • Kbase


                  • Resources


                  • Glossary


                  • Desk Marketplace


                  • MVP Corner


                  • Word of the Day


                  • Ask the Experts









                                  • Related Articles

                                  • 高度なビジュアルエディター

                                    お知らせ:当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 詳細 Visual Editor を使用すると、要素やヘッダーのプロパティをサイト全体でカスタマイズできます。これにより、Webサイト全体の設定を一括で変更できます。例えば、Webサイトに複数のボタンがあり、そのサイズや色を変更したい場合、Visual Editor ...
                                  • ビジュアルエディター:ヘッダー

                                    お知らせ:当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 ヘッダーにおけるすべての機能利用可能を見ていきましょう。 サイト名前 サイトキャプション メインメニュー サブメニュー メガメニュー メニューハイライト ヘッダーテーマ トップ棒グラフ 連絡先Info ソーシャルアイコン Member ポータル
                                  • トップバー

                                    お知らせ:当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 上部の棒グラフは、連絡先詳細やお知らせ、プロモーションメッセージなどの重要な情報を表示するのに便利な場所です。訪問者が関連するコンテンツへ迅速にアクセスできるようになります。これは詳細ビジュアルエディターで編集可能です。 ビジュアルエディターで上部棒グラフを編集する方法: ...
                                  • テンプレート開発

                                    お知らせ:当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 Webサイトの構築は、あらかじめデザイン・コーディングされたテンプレートを使用することで簡単になります。これにより、コードを書くことなく、ご希望に合わせてWebサイトを柔軟にデザインできます。 Zoho ...

                                  Resources

                                  Videos

                                  Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                  eBooks

                                  Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                  Webinars

                                  Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                  CRM Tips

                                  Make the most of Zoho CRM with these useful tips.