Social linksエレメントの追加.

DXPR Builderを学ぶページを作るコンテンツを追加マーケティング

ソーシャルメディアのプロフィールにリンクするブランドアイコンの列を設置できます。訪問者が見つけてフォローできるよう、フッター、サイドバー、お問い合わせセクションに使います。

ログインした状態でページを開きます。コンテンツエリアにカーソルを合わせると、ビルダーのコントロールが表示されます。基本操作は最初のページをご覧ください。

カラムにカーソルを合わせ、コントロールバーの+をクリックします。空のページではAdd Elementsをクリックします。Contentタブを開き、Social linksをクリックします。カラムの一番上に追加され、設定ダイアログが開きます。
アカウント設定はSocial linksで、2つのサンプル行を自分のアカウントに置き換えます。追加のアカウントごとにAdd linkをクリックします。ブランドを入力し始め、候補から選んでURLを入力します（例：https://github.com/dxpr）。
アイコンの形としてStyleを選びます。これはダイアログ上部近くのフィールドで、下部のStyleパネルではありません。ここではCircleです。
アイコンのSizeを選びます。ここでは3xです。
見出しIcon colorsをクリックして展開し、Background colorをBrand colorにします。
色はColorで、パレットから選びます。Colorの初期値はCustomのためパレットが表示されます。ここでは白に近い色です。
ダイアログのSaveをクリックします。次に、コンテンツエリア上部のツールバーにあるSaveをクリックして、ページを保存します。

表示内容

追加したアカウントがアイコンの列で表示され、各アイコンでプロフィールが開きます。動画ではLinkedIn、GitHub、Drupalがブランドカラーの大きな円に白いロゴで表示されています。ページを保存して公開すると、訪問者に表示されます。

エレメントにカーソルを合わせ、コントロールバーのMore > Settingsを開きます。設定項目は次のとおりです。

Social links: アイコンごとに1行。ブランド名とプロフィールURLを入力します。行の追加はAdd link、並べ替えは矢印で行います。
Layout: Inlineはアイコンを横一列に、Stackedはアイコンを1行ずつ縦に並べます。
Style: アイコンの形。None、Rounded、Circle、Square。
Size: Small、Large、2xから5x。
CSS3 hover effects: None、Disc、Pulse。いずれの効果でもアイコンは円になります。
Color: ロゴの色。Brand color、Custom、Inherit。Customではパレットが表示され、Inheritでは周囲のテキストの色になります。
Background color: 図形の塗りつぶし。選択肢は同じ3つです。

ColorとBackground colorはIcon colors見出しの下にあります。クリックして開きます。

ContentタブにSocial linksがない。 ユーザープロファイルで非表示になっています。管理者にUser Profilesでの有効化を依頼してください。
再読み込み後に消えている。 ページが保存されていません。追加し直し、コンテンツエリア上部のツールバーにあるSaveをクリックします。
アイコンが1つ出ない。 その行にブランドまたはURLがなく、エレメントが飛ばしています。その行の両方のフィールドを入力します。
ロゴなしの図形が表示される。 ブランド名に合うアイコンがなく、その行に「No matching brand icon found」と表示されています。入力しながら候補からブランドを選びます。
アイコンが違うページを開く。 その行のURLが間違っているか不完全です。エレメントにカーソルを合わせ、コントロールバーのMore > Settingsを開き、各URLがhttps://で始まるか確認します。

Styleタブでソーシャルリンクの間隔や背景を変更します。