LTG全幅見出しを固定ページに適応したい

[VWSカスタマー]

Lightning pro
カスタマイズのトップでLTG全幅見出しを使えるのですが
別の固定ページで利用できないでしょうか？
ご教示のほど宜しくお願いいたします

[Vektor,Inc]

ウィジェットではありませんが、VK Blocks Pro レイアウトの Outer ブロックと、VK Blocks の中の見出しブロックを使えばほぼ同じ事が可能です。

[Vektor,Inc]

Outerブロックで背景の色や画像を指定して、そのブロックの中に見出しブロックを入れます。

[DRILL LANCER]

完全再現とは行きませんが・・・
（文字の影が再現不可＆全体の高さに数 px ほどの誤差が出る）
再現方法を書いておきます。

まず、VK Outer ブロックの中に下記の順番でブロックを配置します。

1. VK レスポンシブスペーサー
2. VK見出し
3. VK レスポンシブスペーサー

触れていないものはデフォルトで OK です。

【VK Outer ブロックの設定】

＜背景設定＞
ご自由にどうぞ。

＜レイアウト設定＞
アウターの幅 → 全幅
コンテンツエリアの余白 (左右) → 余白なし
余白 (上下) → 標準の余白を使用しない

＜枠線の設定＞
枠線の種類 → なし

【VK レスポンシブスペーサー ブロックの設定（２つとも）】
単位 → em
PC → 3 or 2.5
タブレット → 3 or 2.5
モバイル → 2.5

【VK 見出し ブロックの設定】

＜スタイル設定＞
見出しスタイル → 装飾無し
下部の余白→ 0

＜見出し設定＞
Text Alignment → 中央揃え
文字サイズ (rem) → 2
見出し下部の余白 (rem) → 0.3
文字の色 →　ご自由に

＜サブテキスト設定＞
文字サイズ (rem) → 1
文字の色 →　見出し設定と同じものを

参考になれば幸いです。

[DRILL LANCER]

少々荒っぽくて多少のリスクはあるものの完全再現する方法もあることはあります。
この方法で生じるリスクは該当部分の CSS を削除されたら元も子もなくなる点にあります。

今回は Google Chrome の開発者ツールを使った例を示しておきます。

1. トップページコンテンツエリア上部 or LP ウィジェットに LTG 全幅見出し を設置して公開
2. ウィジェットを設置したページを開き、該当ウィジェットの部分を右クリック→検証
3. 開発者ツールが起動し選択された部分の付近に
   <div class="widget_ltg_full_wide_title_outer （略）" style="（長いので略）">
   というコードが見つかるのでその部分を左クリックして選択する
4. 上記該当部分を右クリックして Edit as HTML を選択
5. LTG全幅見出しに該当する部分の全体が編集可能になるのでその全体を選択
6. 上記で選択した部分を右クリック→コピー
7. LTG全幅見出しの要素を使いたい部分に カスタム HTML ブロック を挿入し先程コピーしたコードを貼り付け

[VWSカスタマー]

Vektor,Inc 様
DRILL LANCER　様

早速のご回答有難うございます。

ご指示のとおりやってみました。

素敵に仕上がりました。

感謝いたします。

[投稿者]

投稿