Content page layout

Please advise 3 things on shapely:

  1. Images on top of content pages- how do i place in images in white section above page headline.
    Each page needs to have its own unique image
  2. How do I insert breadcrumbs
  3. How to ensure h4 elements are shown smaller in mobile formats
  4. Res-size of content text (paragragh) text. The CSS style don’t work! Please help

Hey there,
Hope you’re doing well today

  1. In order to get a header image, you’ll need to go to Appearance > Customize > Header Image.
    Having a custom image for each page would require adding the CSS below customized for each page:
.page-id-### .bg-secondary {
    background: url("background image link here")!important;
    background-repeat: no-repeat;
    background-size: cover!Important;

Please note that you’ll need to inspect the page and check the body tag for the page ID and add replace ### with that number.

  1. You’ll need to use a third party plugin to get this since breadcrumbs aren’t available within the theme. You may search or for a suitable plugin.

  2. For the Media Queries you have, you’re actually going to have to wrap each CSS in its own media query, so the code should be:

@media (max-width: 767px) {
h1 {
font-size: 28px;
line-height: 40px;
font-weight: 300;

@media (max-width: 767px) {
h2 {
font-size: 25px;
line-height: 40px;

@media (max-width: 767px) {
h3 {
font-size: 20px;
line-height: 32px;

@media (max-width: 767px) {
h4 {
font-size: 15px;
line-height: 16px;

@media (max-width: 767px) {
h5 {
font-size: 14px;
line-height: 18px;
font-weight: 400;
  1. You may use the code below to resize your paragraph text:

p{font-size: 12px!Important;}

Ensure that all your CSS is added to Appearance > Customize > Additional CSS.

I hope this helps :slight_smile:

Best Regards,