シングルページサイトを作る.
ここでは1ページにサイト全体を作ります。下のAbout、Services、Contactセクションへ 飛ぶボタン付き全高ヒーローです。各セクションはボタンの飛び先のHTML IDを 持ちます。小規模事業所、キャンペーン、ポートフォリオに使います。1つの提案中心の ページには代わりにマーケティングランディングページを作るを ご覧ください。
動画ではStudio Nordというデザインスタジオのサイトを作ります。
はじめる前に
- ロールがEdit with DXPR Builder権限を持ちます。
- メディアライブラリーにヒーロー用の幅広写真とチーム写真があります。
- ページをビルダーで開きます。新規はContent > Add content > Landing Page (
/node/add/landing_page) を開き、Saveをクリックします。 - 新規エレメントはセクション・カラムの上に載るため、ヒーローボタンは最後から最初へ入れます。
手順1: ヒーローを作る
- 空ページのAdd Elementsをクリックし、LayoutタブからSectionを選びます。
- セクションにホバーしてMore > Settingsを開きます。HTML IDを
heroにし、HTML classes下でAlign text centerを選びます。 - オンにするのは100% heightでセクションを画面いっぱいにし、Vertical centeringでコンテンツを中央に置きます。
- 開くのはStyleパネルで、Background image下でSelect Imageをクリックし、写真にチェックしてInsert selectedをクリックします。Background styleをCoverにし、紺色Backgroundと白Font colorを選んでSaveをクリックします。
- セクションの+をクリックしてButtonを選びます。Titleに「お問い合わせ」、Linkに
#contact、TypeにLightを設定してSaveをクリックします。同じ方法で2つボタンを追加します。#servicesの「サービス」、次に#aboutの「概要」です。各ボタンは直前の上に載ります。 - クリックするのは+を再びで、Textを選びます。ボタンの上に載ります。「Studio Nord」をHeading 2で入力し、キャッチコピーを加えます。StyleパネルでFont colorを白にしてSaveをクリックします。テーマはページタイトルをページのHeading 1として出します。この見出しを代わりにHeading 1にするにはSEOに強いページを作るをご覧ください。
手順2: 概要セクションを追加する
- ヒーローにホバーしてAdd Section Belowをクリックします。新セクションのMore > Settingsを開き、HTML IDを
aboutにしてSaveをクリックします。 - セクションの+をクリックしてRowを選びます。2つの均等カラム付きで入ります。
- 左カラムの+をクリックしてImageを選びます。Select Imageをクリックし、写真にチェックしてInsert selectedをクリックします。SEOパネルでAlt attributeを入力してSaveをクリックします。
- 右カラムの+をクリックしてTextを選びます。「概要」をHeading 2で入力し、沿革を加えてSaveをクリックします。
手順3: サービスセクションを追加する
- 追加するのはAdd Section Belowで3つ目のセクションで、More > Settingsを開きます。HTML IDを
servicesにし、HTML classes下でAlign text centerを選び、Styleパネルで薄灰色Backgroundを選びます。Saveをクリックします。 - 追加するのはRowで、グリッドアイコン (Column layout) をクリックして1/3 + 1/3 + 1/3プリセットを選び、Saveをクリックします。
- 1つ目のカラムの+をクリックしてTextを選びます。「ブランディング」をHeading 3で入力し、1行加えてSaveをクリックします。
- 同じカラムの+をクリックしてIconを選びます。テキストの上に載ります。Font Awesome Free Solidセットを選び、
pen-nibを検索してアイコンをクリックします。SizeをVery Large (3x)にし、Icon utilitiesを開いてStyleをCircleにしてSaveをクリックします。 - 「Webサイト」に
laptop-code、「分析」にchart-pieで繰り返します。
手順4: お問い合わせセクションを追加する
- 4つ目のセクションを追加し、More > Settingsを開きます。HTML IDを
contactにし、HTML classes下でAlign text centerを選びます。Saveをクリックします。 - セクションの+をクリックしてSocial linksを選びます。1行目のブランドに
linkedinを入力してプロフィールURLを貼り、2行目にinstagramとそのURLを入れます。StyleをCircle、Sizeを2xにしてSaveをクリックします。 - クリックするのは+を再びで、Buttonを選びます。リンクの上に載ります。Titleに「メールする」、Linkに
mailto:hello@studionord.example、TypeはPrimaryのままにしてSaveをクリックします。 - クリックするのは+を再びで、Textを選びます。ボタンの上に載ります。「お問い合わせ」をHeading 2で入力し、下にメールアドレスと電話番号を入れてSaveをクリックします。
手順5: 保存してプレビューする
- ビルダーツールバーのSaveをクリックします。
- ビューメニュー (eye icon、目のアイコン) を開き、Previewを選んでContactなどのヒーローボタンをクリックします。
さらに進む
動画にはありません。
- 固定メニュー: Structure > Menus > Add menuでセクションごとに1リンクのメニューを作ります (
/studio-nord#aboutなど、トップページなら<front>#about)。ヘッダー領域にStructure > Block layoutで置きます。DXPR ThemeではAppearance > Settings > DXPR ThemeでSticky Headerをオンにします。 - トップページ: Configuration > System > Basic site settingsでこのページをトップページにします。
- お問い合わせフォーム: リード文の代わりにDrupal Blocksタブからフォームを挿入します。ページにフォームを追加するをご覧ください。
表示結果
写真が画面いっぱいに広がり、「Studio Nord」、キャッチコピー、3つの明るいボタンが載ります。ボタンのクリックでページが該当セクションへ滑らかにスクロールします。概要は沿革横にチーム写真、サービスは灰色に丸囲みアイコン3つ、お問い合わせは「お問い合わせ」見出しとメールするボタンの上に2つの丸いソーシャルアイコンです。
図通りにならない場合
- ボタンでセクションに飛びません。 LinkがセクションのHTML IDと一致しません。リンクは
#に完全同一IDを付けます (aboutのIDには#aboutなど)。 - 固定ヘッダーの下にセクションが隠れます。 ビルダーはヘッダー高を知りません。Advanced Settings下のDXPR Studio > DXPR Builder > General Settings (
/admin/dxpr_studio/dxpr_builder/settings) でScroll offset selectorをヘッダーのCSSセレクターにします。 - ソーシャルリンクに「No matching brand icon found」と出ます。 ブランドが既知アイコン名ではありません。小文字で入力します (
linkedinやinstagramなど)。 - 再読み込み後に変更が消えています。 ビルダーツールバーのSaveをクリックする前にページを離れました。Saveがエラーを出す場合、変更が保存されないをご覧ください。
次はこちら
- ヒーローセクション: オーバーレイとパララックス選択肢用
- ランディングページ: キャンペーンページ用
- クラスでセクションにリンクしスタイルを使い回す: HTML ID詳細用