ブログレイアウトを作る.

DXPR Builderを学ぶページを作るチュートリアル

ここではブログ記事を挙げるページを作ります。上の注目記事、Drupalビューによる一覧とサイドバー、ニュースレター帯です。新記事はページ編集なしで載ります。1顧客の物語を深く書くには代わりに事例紹介を書くをご覧ください。

動画では報道製品のブログを作ります。

はじめる前に

ロールがEdit with DXPR Builder権限を持ちます。
サイトにブログ記事を挙げるビューがあります。DXPR CMSはBlogビューを出荷します。Blog一覧とFeatured postsディスプレイ付きです。
ページをビルダーで開きます。新規はContent > Add content > Landing Page (/node/add/landing_page) を開き、Saveをクリックします。
新規エレメントはカラムの上に載ります。カラムのエレメントは逆順に追加するか、後からドラッグで整えます。

空ページのAdd Elementsをクリックし、LayoutタブからSectionを選びます。
セクションの+をクリックしてRowを選びます。2つの均等カラム付きで入ります。グリッドアイコン (Column layout) をクリックし、2/3 + 1/3プリセットを選んでSaveをクリックします。
広いカラムの+をクリックし、ContentタブからImageを選びます。Select Imageをクリックし、写真にチェックしてInsert selectedをクリックします。SEOパネルでAlt attributeを入力してSaveをクリックします。
狭いカラムの+をクリックしてButtonを選びます。Titleに「続きを読む」、Linkに記事、TypeはPrimaryのままにしてSaveをクリックします。
狭いカラムの+を再びクリックしてTextを選びます。ボタンの上に載ります。記事タイトルをHeading 2で入力し、下に抜粋を加えてSaveをクリックします。

セクションにホバーしてAdd Section Belowをクリックします。2/3 + 1/3プリセットのRowを追加します。
広いカラムの+をクリックし、Drupal Viewsタブを開きます。View: Blog (Blog)を選んでSaveをクリックします。記事を描画します。
狭いカラムの+をクリックし、Drupal Viewsタブを開きます。View: Blog (Featured posts)を選んでSaveをクリックします。
狭いカラムの+を再びクリックし、Drupal Blocksタブを開きます。Block: Forms: Search formを選んでSaveをクリックします。注目記事の上に載ります。

追加するのはAdd Section Belowで3つ目のセクションで、More > Settingsを開き、Styleパネルで紺色Backgroundを選んでSaveをクリックします。
セクションの+をクリックしてButtonを選びます。Titleに「ニュースレターを購読する」、Linkに/newsletter、TypeにLightを設定してSaveをクリックします。
クリックするのは+を再びで、Textを選びます。ボタンの上に載ります。「最新情報をお届け」をHeading 2で入力し、下にニュースレターの1行を続けます。StyleパネルでFont colorを白にしてSaveをクリックします。

動画にはありません。

注目記事がページを開きます。左に幅広の写真、右にタイトル、抜粋、続きを読むボタンです。下には広いカラムに記事が並び、サイドバーに検索フォームと注目記事が載ります。紺色帯が最新情報をお届け見出しとニュースレターを購読するボタンでページを締めます。

BlogビューがDrupal Viewsタブにありません。 ビューが無効か、ビルダーユーザープロファイルが隠しています。Structure > Views (/admin/structure/views) で有効にするか、管理者にユーザープロファイルのViews下でのチェックを頼みます。
一覧カラムが空のままです。 ビューに表示する公開記事がありません。Content > Add content > Blog postで記事を公開し、ページを再読み込みします。
検索フォームがDrupal Blocksタブにありません。 そのブロックはコアSearchモジュール提供です。Extend (/admin/modules) でオンにします。
再読み込み後に変更が消えています。 ビルダーツールバーのSaveをクリックする前にページを離れました。Saveがエラーを出す場合、変更が保存されないをご覧ください。