申し訳ないですが、ちょっと、説明だけではどういった状態なのかが分からないです。
https://getbootstrap.com/docs/4.0/components/jumbotron/

どういったカスタマイズなのかわかりませんが、Bootstrapという見本があるので、そのCSS＆HTMLを参考にすると良いのではないでしょうか。

参考URLのソースを、そのまま固定ページに貼り付けたのですが
画面の端から端までのブロックにならなさそう感じです。

イメージとしては、以下の感じです。
https://tonari-it.com/bootstrap-jumbotron/

固定ページや投稿ページで、画面いっぱいに画像を表示させたり
さらにその画像の上にテキストを配置させたりしたいです。

-----

-----

テキストモードで投稿しなかったので、ソースがそのまま表示されてしまいました、すみません。

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

---

It uses utility classes for typography and spacing to space content out within the larger container.

Learn more

すみません、ソースを貼り付けても、すべて変換されている感じです。


 
Hello, world!

 
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

 

 
It uses utility classes for typography and spacing to space content out within the larger container.

 

 Learn more
 

できればそういった状態になっているページのURLを書いて、見せて欲しいです。

以下のページも、そんな横幅いっぱいになっているエリアもないようですし。

https://tonari-it.com/bootstrap-jumbotron/

こちらのページの「ジャンボトロンフルワイド」の部分がイメージしているのに近いです。

https://codepen.io/takeshi-du/pen/rjmbRj

他にも、

http://web-test03.opal.ne.jp/bootstrap/jumbotron.html

それでしたら、アピールエリアのエリア画像を設定して、不要なものはCSSで非表示にしてしまうのが最も手っ取り早いのではないかと思います。

設定部分は、Cocoon設定の「アピールエリア」タブにあります。

イメージと近い感じに表示されているのですが、

文字を使用しない場合白い四角が表示されてしまいます。

こちら、テキスト不使用の場合は四角が表示しないようにするにはどうしたらよいでしょうか？

また、アピールエリアをトップと固定ページで任意に変更したい場合はどうしたらよいでしょうか？

トップの場合はAの画像、固定ページ１の場合はBの画像、固定ページ２の場合はCの画像という感じです。

添付ファイルをつけます

添付ファイルをつけます

以下の点に関してはこんな感じでどうでしょう？

• アピールエリアのコンテンツを横幅いっぱいに
• 四角を非表示に（透明にしました）

.appeal-content {
 width: 100%;
 max-width: 100%;
 background-color: transparent;
}

マージンやパディングまでイジってませんので、その辺りは好みで調整してみて下さい。画像だけ横幅いっぱいにしたいという事でしたらアピールエリアの背景に設定すれば最初からその状態なので問題無いかと思います。

トップと固定ページで任意に変更したい、という件は現行の仕様ではムリでしょう。アピールエリアに相当する位置にウィジェットエリアを作成して、ウィジェットでCocoonの表示設定機能を利用すれば出来そうかなとは思いますけど。

私もまだ試していないので未確認ですが、テンプレート機能で作成したショートコードがウィジェットでも使えるならバリエーションを増やすのも難しくは無さそうです。

ありがとうございます、まずは試してみます

やってみたのですが、スマホ環境だと高さがcocoonでは設定されないようなのでひとつ課題ですね。

モバイルのアピールエリアの高さを設定するにはCSSでの調整となりますでしょうか？

そうですね。

スマホ向けとかだと、メディアクエリを使用して以下のように書く必要はあるかもしれません。

@media screen and (max-width: 480px){
  .appeal{
    height: 300px;
  }
} 

ありがとうございます、確認出来ました。

こんにちは＾＾

簡単にですが、今やってみました。

• アピールエリアを表示するように設定のみして保存
• CSSでトップページ・固定ページ1・固定ページ2の画像を変更
• 他のページは領域だけ非表示

こんな感じです。

.appeal-content {
 display: none;
}
.appeal {
 display: none;
 background-size: contain;
 width: 100%;
}
.home .appeal {
 display: block;
 background-image: url(画像のURL);
 height: 60vw;
}
.page-id-IDの数字 .appeal {
 display: block;
 background-image: url(画像のURL);
 height: 数字vw;
}

• 上から、真ん中の四角を非表示
• 他のページでは非表示・ホーム・固定ページなど表示する画像を画面におさめる・画像のは見出し防止
• ホームにアピールエリアを表示・指定したい画像のURL入力・高さは画像に合わせて数字で調整　30vw　など
• 固定ページのid（以下※の通り）：数字を入れる他は上のと同じ

※表示したい固定ページを管理画面で開く

※URL/wp-admin/wp-admin/post.php?post=★ここの数字★&action=edit

これが固定ページのIDです。

ホームでしか試してませんが、私の環境ではレスポンシブ対応できる感じです。

＞かうたっくさん

ありがとうございます！

設定してみて確認してみます。

＞かうたっくさん

・アピールエリアを表示するように設定のみして保存
・アピールエリアの背景画像は1400X600

上記の内容で、以下の設定を追加してみました。

----------

.appeal-content {
display: none;
}
.appeal {
display: none;
background-size: contain;
width: 100%;
}
.home .appeal {
display: block;
background-image: url( );
height: 600vw;
}
.page-id-2 .appeal {
display: block;
background-image: url( );
height: 600vw;
}

 ----------

しかし、添付の画像のようにうまく表示されない感じです。

PCでは問題なさそうなのですが、iphoneのサファリだとナビ部分が全て表示されていない感じです。

PC版

スマホ版

スマホ版では、ナビが隠れてしまって且つサブナビ横の「Ｖ」も表示しないんですよね。

CSSの設定で何か間違っているのでしょうか。

300×100の画像は何ですか？それはこのカスタマイズに関係あるのかな？と言った印象です。headerに依存するようなCSSではないので。

例えばヘッダー画像だとすれば、一時追記したCSSをコメントアウトしてご確認ください。おそらくアピールエリア？画像を入れた領域と違う可能性が高いと思われます。

リンクがあれば、どこのどの領域だわかりますし、もしかしたらiPhone特有でない可能性もあったり。

_________________

今見たらロゴをいれてたんですね！ロゴを入れてない環境でテストしてました。headerのロゴサイズの指定なのかどうか？実際見ないと画像で見ても特定しにくいとおもわれます。

300×100の画像はロゴ画像となります。

こちらは、出来れば表示させたままにして、

・ロゴ

・ナビ

・各ページの横幅いっぱいの画像

この要素を表示させたいと考えています。

ロゴ無しだと添付のような感じですね。

ヘッダーサイズ関連が入っていなかったため、崩れていた感じです。

サイズを全ていれると思っている形になってきました。

ヘッダーサイズ関連が入っていなかったため、崩れていた感じです。

とりあえず表示に問題は特になかった。って感じでしょうか？

headerも改善され、少しずつ実現しているようで何よりです＾＾