Add image block to top of events page below heading

Site URL: https://walrus-springtail-ljhd.squarespace.com/workshop-events?p

I would like to add an image block on the above events page between the heading and the text below it.  Please could someone help? I'm not sure where to start with this.  Many thanks

pw 1mageproblem

Hi @Nikitaly, with most 7.0 templates you can add blocks into the intro section at the top of the page when editing, but it looks like on your website you can only put in a title and description via the page settings. If that's correct you may only be able to add an image via a snippet of code. Would you be willing to share an invite to your website so that I can check and potentially help you do this?

On 9/15/2022 at 4:52 PM, Nikitaly said:

Site URL: https://walrus-springtail-ljhd.squarespace.com/workshop-events?p

I would like to add an image block on the above events page between the heading and the text below it.  Please could someone help? I'm not sure where to start with this.  Many thanks

pw 1mageproblem

Add it inside or outside colored box?

(1) or (2)?

I'd like to add it under the FLOWER SCHOOL WORKSHOPS heading

thanks for looking

Niki

On 9/22/2022 at 4:10 PM, Nikitaly said:

I'd like to add it under the FLOWER SCHOOL WORKSHOPS heading

thanks for looking

Niki

The site is expired.

You can access this link to extend it (free)

Sorry about that.  Now extended.

extended again.  Any help would be really really appreciated.

thanks

Niki

On 10/5/2022 at 3:59 PM, Nikitaly said:

extended again.  Any help would be really really appreciated.

thanks

Niki

Add to Design > Custom CSS

/* Workshop events */
body#collection-62d814121c78f957515d358f h1.page-title:after {
    content: "";
    background-image: url(https://cdn.pixabay.com/photo/2022/09/21/02/35/white-faced-heron-7469269__480.jpg);
    background-size: cover;
    width: 100%;
    height: 300px;
    display: block;
    background-repeat: no-repeat;
    background-position: center center;
}

That's fantastic.  Thank you so much.  Only one thing... how can I increase the space between the image and the title?

Your help so very much appreciated.

On 10/11/2022 at 2:24 PM, Nikitaly said:

That's fantastic.  Thank you so much.  Only one thing... how can I increase the space between the image and the title?

Your help so very much appreciated.

Just add margin top or margin bottom

body#collection-62d814121c78f957515d358f h1.page-title:after {
    content: "";
    background-image: url(https://cdn.pixabay.com/photo/2022/09/21/02/35/white-faced-heron-7469269__480.jpg);
    background-size: cover;
    width: 100%;
    height: 300px;
    display: block;
    background-repeat: no-repeat;
    background-position: center center;
	margin-top: 40px;
}

Thanks again.  Sorry, thought I'd tried that.  Works great.

One final question, in general, is there a difference in performance between putting these code snippets in the page header v site header or site footer?

On 10/13/2022 at 3:08 PM, Nikitaly said:

Thanks again.  Sorry, thought I'd tried that.  Works great.

One final question, in general, is there a difference in performance between putting these code snippets in the page header v site header or site footer?

Site Header/Footer: The code will load on all pages

Page Header: The code will load on that page only (Good for performance)