# Squarespace Portfolio Title between Pagination Titles

**URL:** <https://community.elfsight.com/t/squarespace-portfolio-title-between-pagination-titles/167807>\
**Category:** Platform Tips\
**Tags:** squarespace\
**Created:** [July 11, 2026, 1:15am UTC](https://community.elfsight.com/t/squarespace-portfolio-title-between-pagination-titles/167807 "2026-07-11T01:15:56Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![tuanphan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/tuanphan/32/3165_2.png) [@tuanphan](https://community.elfsight.com/u/tuanphan)\
**Post date:** [July 11, 2026, 1:15am UTC](https://community.elfsight.com/t/squarespace-portfolio-title-between-pagination-titles/167807/1 "2026-07-11T01:15:57Z")

</div>

**Description:** adding Portfolio Page Title between Pagination Titles

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/2/4/2420695ddd76f5bafb9934ddbd9e7b3720a0a7e3.png)

**#1.1.** Click Gear icon on Portfolio Page

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/c/5/c5b9e084045c5bc1dc8b10758bb8e82e61c593bb.png)

**#1.2.** Click Advanced \> Paste this code

- If you use Personal/Basic Plan and your plan doesn’t support Injection, see #3.1

```auto
<!-- 07.26c010v2 Portfolio Pagination Page Title -->
<script>
window.PodpTitleConfig = {
  titleTag: 'h4',
  titleClass: 'podp-title',
  titleSeparator: '—',

  desktopFontSize: '18px',
  mobileFontSize: '12px',
  mobileMaxWidth: '100px',

  paginationTitleDesktopSize: '',
  paginationTitleMobileSize: '14px',

  mobileBreakpoint: 767
};
</script>

<script>
!function(){var c=window.PodpTitleConfig;if(!c)return;var S="podp-title-styles",N='.item-pagination[data-collection-type^="portfolio"]',P=".item-pagination-title",k="."+c.titleClass.trim().split(/\s+/).join(".");if(!document.getElementById(S)){var s=N+"{position:relative}"+k+"{position:absolute;left:50%;transform:translateX(-50%);margin:0!important;font-size:"+c.desktopFontSize+";font-family:var(--portfolio-item-pagination-font-font-family);font-style:var(--portfolio-item-pagination-font-font-style);font-weight:var(--portfolio-item-pagination-font-font-weight)}";c.paginationTitleDesktopSize&&(s+=N+" "+P+"{font-size:"+c.paginationTitleDesktopSize+"!important}");s+="@media screen and (max-width:"+c.mobileBreakpoint+"px){"+k+"{font-size:"+c.mobileFontSize+";max-width:"+c.mobileMaxWidth+";text-align:center}";c.paginationTitleMobileSize&&(s+=N+" "+P+"{font-size:"+c.paginationTitleMobileSize+"!important}");s+="}";var e=document.createElement("style");e.id=S;e.textContent=s;document.head.appendChild(e)}function t(){var r=document.title||"",p=c.titleSeparator;return p&&-1!==r.indexOf(p)?r.split(p)[0].trim():r.trim()}function i(){var x=t();document.querySelectorAll(N).forEach(function(n){var o=n.querySelector(k);if("true"===n.dataset.podpTitleInit&&o)return void(o.textContent=x);n.dataset.podpTitleInit="true";var d=document.createElement(c.titleTag);d.className=c.titleClass;d.textContent=x;n.appendChild(d)})}addEventListener("load",i);addEventListener("mercury:load",i)}();
</script>

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/3/9/39fdf222002ceeaac54f3a952100815ceaca734b.jpeg)

**#2. Customize**

**#2.1.** By default, Page Title uses Heading 4 (h4), if you want to change it to other tags: h1, h2, h3, h5, h6, span, p, div, strong, em… change Line 06

```auto
titleTag: 'h4',

```

**#2.2.** To change Page Title size on Desktop/Mobile, change Line 08, Line 09

```auto
desktopFontSize: '18px',
  mobileFontSize: '12px',

```

**#2.3.** To prevent overlap between Pagination Titles – new Page Titles, you can limit width of new Page Titles, by edit Line 10

```auto
mobileMaxWidth: '100px',

```

**#3.1.** If you use Personal/Basic Plan and your plan doesn’t support Injection, you can edit Site Footer

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/f/7/f7b86c6d9cd3e4d23ba2357803df646fde967680.png)

Add a Markdown Block

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/a/5/a5b7c63b8bf5d6bd492784a712cbb1709ce8e8e0.png)

Add this code into Markdown

```auto
<script>
window.PodpTitleConfig = {
  titleTag: 'h4',
  titleClass: 'podp-title',
  titleSeparator: '—',

  desktopFontSize: '18px',
  mobileFontSize: '12px',
  mobileMaxWidth: '100px',

  paginationTitleDesktopSize: '',
  paginationTitleMobileSize: '14px',

  mobileBreakpoint: 767
};
</script>

<script>
!function(){var c=window.PodpTitleConfig;if(!c)return;var S="podp-title-styles",N='.item-pagination[data-collection-type^="portfolio"]',P=".item-pagination-title",k="."+c.titleClass.trim().split(/\s+/).join(".");if(!document.getElementById(S)){var s=N+"{position:relative}"+k+"{position:absolute;left:50%;transform:translateX(-50%);margin:0!important;font-size:"+c.desktopFontSize+";font-family:var(--portfolio-item-pagination-font-font-family);font-style:var(--portfolio-item-pagination-font-font-style);font-weight:var(--portfolio-item-pagination-font-font-weight)}";c.paginationTitleDesktopSize&&(s+=N+" "+P+"{font-size:"+c.paginationTitleDesktopSize+"!important}");s+="@media screen and (max-width:"+c.mobileBreakpoint+"px){"+k+"{font-size:"+c.mobileFontSize+";max-width:"+c.mobileMaxWidth+";text-align:center}";c.paginationTitleMobileSize&&(s+=N+" "+P+"{font-size:"+c.paginationTitleMobileSize+"!important}");s+="}";var e=document.createElement("style");e.id=S;e.textContent=s;document.head.appendChild(e)}function t(){var r=document.title||"",p=c.titleSeparator;return p&&-1!==r.indexOf(p)?r.split(p)[0].trim():r.trim()}function i(){var x=t();document.querySelectorAll(N).forEach(function(n){var o=n.querySelector(k);if("true"===n.dataset.podpTitleInit&&o)return void(o.textContent=x);n.dataset.podpTitleInit="true";var d=document.createElement(c.titleTag);d.className=c.titleClass;d.textContent=x;n.appendChild(d)})}addEventListener("load",i);addEventListener("mercury:load",i)}();
</script>

```