Jump to content

Adding "Page Title" to top of Blog Landing Page (screenshots included)

Go to solution Solved by ChrisBartow,

Recommended Posts

Hi there, I believe I tried all the built-in options to add a "Page Title" to my blog's landing page. I am thinking I need to inject code into the specific page I am editing? I am currently using v7.1 and have the Business Plan. I have the ability to add code via the Design page or through the individual Page's setting.

The Page I am trying to edit is a Blog and the blog layout is Basic Grid.

This is what the Blog's landing page looks like right now (Notice that no text/title can be inserted above the grid):

Current.thumb.png.622576fc26151d2e9f24b7ba1d26e8c9.png

What I would like to do is to add text (the Page Title as seen in the navigation bar) to the top of the Blog's Landing Page. Here is a Photoshopped example of what I am trying to achieve:

Ideal.thumb.png.51d2d17ff6e035117653e77b7f0fceaa.png

Thank you very much in advance to anyone that may be able to help.

 

Note: the text in the website is all in Korean in case you're wondering. The purpose of the site is to provide real estate information.

Edited by beginnercss
improving question clarity
Link to comment
1 hour ago, ChrisBartow said:

I don't think this is possible out of the box in 7.1, which is frustration. I feel like we should be able to add a section here to give an introduction.

Feature request SquareSpace?

Thanks for trying! The closest I have been able to get is by creating a whole new section (+) and making it a text based one and then minimizing the vertical space to a minimum. It's not bad but not really what I'm looking for because of the fact that there is so much white space created by having two separate sections stacked.

I've been trying to research all sorts of CSS/code injection options.

Adding section and minimizing height:

917389056_ScreenShot2020-04-22at9_44_20PM.thumb.png.a13db7cfd38f16d8a428426e09c8a599.png

So so result (too much white space below "Sample Text"):

1902083693_ScreenShot2020-04-22at9_44_35PM.thumb.png.96b7f55bdfe9ad3b7b4581ee2b7480e7.png

Edited by beginnercss
clarity
Link to comment
  • Solution

I didn't even know you could add a section there! There is definitely a way to do some CSS trickery to remove the whitespace. You'll probably have to remove the white space around the SAMPLE TEXT and then remove the top margin or padding from the next section with the actual blogposts.

I did something like this on one of my test sites, but you have a different blog layout. Which one are you using?

.content-wrapper, .blog-alternating-side-by-side .blog-alternating-side-by-side-wrapper {
  padding-top:0 !important;
  padding-bottom:0 !important;
}

 

Creating websites using Squarespace at Design by Donuts 🍩

Link to comment
55 minutes ago, ChrisBartow said:

some CSS trickery to remove the whitespace

Yes! You're a lifesaver, Chris. I didn't think to try the padding. The padding around the text was actually ok with me. I tried changing the padding of the Blog section. Along these lines, I did the following:

.blog-basic-grid {
 padding: 0vw 4vw 4vw 4vw !important;
}

I removed just the top white space around my basic blog grid. I gathered from the source code(?) that Squarespace set the default spacing for the basic grid blog to 4vw all around(?). So I figured that I would set the top to 0 and set the left/right/bottom spacing to 4vw.

It looks perfect on desktop and on mobile. Hoping it stays this way.

Thanks so much for leading me to the right direction. This is fun!

Final:

64782671_ScreenShot2020-04-22at11_10_42PM.thumb.png.e5edc815b6f3c9d767264139e7dea04b.png

Link to comment

 

21 hours ago, ChrisBartow said:

I'm glad you were able to figure it out. Sites looking good!

Wondering if you might be able to help with one more thing ...

The blog landing page from yesterday is all good. Thanks again!

I am now working on the appearance of the blog posts themselves. The padding of the top and bottom for the post seems to be too large.

What I'm seeing:

Top of blog post

328703375_ScreenShot2020-04-23at7_47_58PM.thumb.png.706a1e962552d9a5df3363ce96b04529.png

Bottom of blog post

1121910337_ScreenShot2020-04-23at8_21_48PM.thumb.png.bb6b0431450ebae77a1f935577e3f57a.png

I am trying to remove the white space indicated by the red arrows. I have experimented with some code but had no luck.

Also, clicking the pencil to edit the post only allows the following options:

794871678_ScreenShot2020-04-23at8_10_20PM.thumb.png.b218e0682013757b6cd57ef3958b2f1a.png

Playing with "Header Spacing" only moves the address down but does nothing to move the post itself closer up to the navigation bar.

Greatly appreciate any insight!

Edited by beginnercss
clarity
Link to comment

@ChrisBartow

Update! I think I figured out why the blog post got pushed down. I set the site margin in design to 12vw because I wanted the left and right sides to be pushed in towards the center. Looks like setting it to 12vw affected top/bottom/left/right. Ideally, I;d like to keep the left and right sides pushed inwards while keeping the top and bottom margins to a minimum (~4 vw).

Current situation (red = bad; green = good):

1279799618_ScreenShot2020-04-24at12_20_46AM.thumb.png.d724edff561660a82c8bde96d7f2e44b.png

Design setting:

1325372651_ScreenShot2020-04-24at12_22_10AM.png.2de3ee946646acd69d8f379874b58abb.png

 

Update 2: Interestingly, changing the margin to 12vw affects only the blog posts themselves (like the one linked above). It does not change other pages like this one or the blog landing pages:

500

Edited by beginnercss
update 2
Link to comment

I've found that resetting the site margin back to the default and then setting the content width of the blog to narrow makes the blog itself look good but the site margins too wide. So I've tried something like this:

  • Set site margin to 12vw
  • On the blog, enter this code:
    @media only screen and (min-width: 760px) {
      .blog-item-wrapper {
    margin-top: -12vw;
    margin-bottom: -12vw;
     padding-top: 0px;
     padding-bottom: 0px;
      }
    }
  • The -12vw for margin-top and margin-bottom is intended to offset the 12vw setting for the left and right.
  • Because the Medium content width setting pushed the blog a bit too much, I am now using the Custom function under content width to balance it all out.

Thank you again for all the help!

 

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.