Jump to content

Add image block to top of events page below heading

Recommended Posts

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?

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
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)?

image.thumb.png.9e0c4a97dbf3eef330a3adcb85366893.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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)

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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)

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.