Jump to content

Need to add pictures to timeline slider

Recommended Posts

Site URL: https://www.thelibertyproject.org/

Hey! I have a timeline at the bottom of my homepage and I would like to add pictures sliding in on either side of it as a person scrolls down (reference image attached) Any idea how to do this?

I also seem to be having an issue with the timeline becoming very messy in terms of alignment if someone decreases their window size, even though its position is relative. Any help on this would be much appreciated! For your reference, I had attached the CSS of the timeline and the .js file embedded. 

 

Quote

//Timeline//
.top-section{
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.timeline{
  position:relative;
  min-height: 150px;
}

.line{
  position: absolute;
  z-index:1;
  left: calc(50.6% - 1px);
  width: 2px;
  top: -50px;
  bottom: -0px;
  background-color: #000;
  display: none;
}

.line:before, 
.line:after{
  position: absolute;
  display: block;
  content: '';
  height: 1rem;
  width: 1rem;
  border-radius: 50%;
  background-color: #000;
  left: 50%;
  transform: translateX(-50%);
}

.line:after{
  bottom:0;
}

.section{ 
  display: flex;
  width: 590px;
  color: #2D2F1F;
  opacity: 0;
  transform: translateX(16%) !important;
  transition: 500ms ease;
  position: relative; 
  z-index: 1;
  margin: 70px 0;
  padding: 1rem;
  border-radius: 1rem;
  align-items: left; 
  text-align: justify;
  min-height: 180px;
}
  
.section:nth-child(odd) {
  flex-direction: row-reverse;
  transform: translateX(125.9%) !important;
}
.bead{
  position:absolute;
  display: block;
  height: 1rem;
  width: 1rem;
  border-radius: 50%;
  background-color: #000;
  left: 103.5%;
  top: 20%;
  transform: translateX(50%);
}

.beadeven {
  position:absolute;
  display: block;
  height: 1rem;
  width: 1rem;
  border-radius: 50%;
  background-color: #000;
  left: -3.9%;
  top: 14.8%;
  transform: translateX(-50%);
}
.content{
  width: calc(50% - 1rem);
}
.show-me:nth-child(n) {
  transform: none;
  opacity: 1;
}

JAVASCRIPT

Quote

 
     "use strict";

function qs(selector, all = false) {
  return all ? document.querySelectorAll(selector) : document.querySelector(selector);
}

const sections = qs('.section', true);
const timeline = qs('.timeline');
const line = qs('.line');
line.style.bottom = `calc(100% - 20px)`;
let prevScrollY = window.scrollY;
let up, down;
let full = false;
let set = 0;
const targetY = window.innerHeight * .8;

function scrollHandler(e) {
  const {
    scrollY
  } = window;
  up = scrollY < prevScrollY;
  down = !up;
  const timelineRect = timeline.getBoundingClientRect();
  const lineRect = line.getBoundingClientRect(); // const lineHeight = lineRect.bottom - lineRect.top;

  const dist = targetY - timelineRect.top;
  console.log(dist);

  if (down && !full) {
    set = Math.max(set, dist);
    line.style.bottom = `calc(100% - ${set}px)`;
  }

  if (dist > timeline.offsetHeight + 50 && !full) {
    full = true;
    line.style.bottom = `-50px`;
  }

  sections.forEach(item => {
    // console.log(item);
    const rect = item.getBoundingClientRect(); //     console.log(rect);

    if (rect.top + item.offsetHeight / 5 < targetY) {
      item.classList.add('show-me');
    }
  }); // console.log(up, down);

  prevScrollY = window.scrollY;
}

scrollHandler();
line.style.display = 'block';
window.addEventListener('scroll', scrollHandler);

 

Screenshot 2022-04-01 at 4.47.45 PM.png

Link to comment

Your code IS CSS + JavaScript

Can you send HTML code to add Timeline content (Text)? We can check easier

--

Also, you should consider using a plugin to add timeline, it will look better. Or find a better timeline code on Codepen.io (then share link, we can convert it to Squarespace code)

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Thank you! Will try looking on codepen to see if there's anything similar. The HTML content is as follows: 

Quote

 <div class="container">
      <div class="top-section">
        <h3> The Liberty Narrative</h3>
        <p>
         The Liberty Narrative delves deep into the core of your story, and crafts timeless brand identities through deeply rooted strategy, aligned design, and heartfelt visuals.
        </p>
      </div>
      
      <div class="timeline">
        <div class="line"></div>
        <div class ="section">
          <div class="bead"></div>
          <div class ="content">
            <h2> Chapter 1: Prologue</h2>
            <p class=“p1”>
             Think of this as your brand's origin story.
              We will start with a 1:1 Discovery call to 
              get an insightful understanding of your 
              brand's ethos. A clear timeline is established, and 
              we begin to dig in deep to get to the essence and 
              foundation of your brand, to lay down the framework
              for the rest of your business model. 
            </p>
          </div>
        </div>
        
        <div class ="section">
           <div class="beadeven"></div>
          <div class ="content">
            <h2> Chapter Two: Narrative</h2>
            <p>
              What are the ultimate goals for your brand? 
              Your vision, your mission? Who does your brand 
              speak to, and who is it welcoming into 
              your community of like-minded individuals? 
              After delving into all this information, 
              we use the one-concept approach
              to draft a creative direction for your brand 
              that speaks directly to your ideal customer. 
            </p>
          </div>
        </div>
        
        <div class ="section">
          <div class="bead"></div>
          <div class ="content">
            <h2> Chapter 3: Creation</h2>
            <p>
              Now comes the fun part. Weaving your built strategy 
              with heartfelt visuals, we now delve into the perception of 
              your brand. 
              <br>
              This includes the design of your logos, collateral design, 
              social media, website design, and any additional 
              services that may be unique to your brand. 
            </p>
          </div>
        </div>
        
        <div class ="section">
         <div class="beadeven"></div>
          <div class ="content">
            <h2> Chapter Four: Synthesis</h2>
            <p>
              We come to the bittersweet end of our journey with 
              synthesis. This include the collation of all your 
              brand files, a full fledged brand direction board, 
              brand guidelines, and the prospect of investing further
              in our customized Interior Design services for our 
              journey to come full circle. 
            </p>
          </div>
        </div>
        
        
      </div>
        
   </div>
   <script src="/s/timeline.js"></script>

   

Thanks!

Link to comment

Sorry. Misread your question. I thought you want to add image under text 

I think you should consider finding another timeline code to achieve this

With current timeline, try adding this to Design > Custom CSS

@media screen and (min-width:768px) {
.section.show-me:nth-child(2):after {
    background-image: url(https://cdn.pixabay.com/photo/2022/01/16/23/12/desert-6943430__480.jpg);
    background-position: right;
    content: "";
    width: 100%;
    z-index: 99999;
    transform: translateX(100%);
}
.section.show-me:nth-child(3):after {
    background-image: url(https://cdn.pixabay.com/photo/2022/01/16/23/12/desert-6943430__480.jpg);
    background-position: left;
    content: "";
    width: 100%;
    z-index: 99999;
    transform: translateX(-150%);
}
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Thanks! I did try it out and this was the result: The text width is also decreasing. And overall I think on smaller windows the timeline's text and bead keeps moving left/right and isn't responsive. 

 

I am trying to look for something similar on codepen but not able to 😞 Any idea what I can do? 

Screenshot 2022-04-11 at 4.35.38 PM.png

Link to comment
On 4/11/2022 at 6:07 PM, MadihaSyed said:

Thanks! I did try it out and this was the result: The text width is also decreasing. And overall I think on smaller windows the timeline's text and bead keeps moving left/right and isn't responsive. 

 

I am trying to look for something similar on codepen but not able to 😞 Any idea what I can do? 

Screenshot 2022-04-11 at 4.35.38 PM.png

Hi,

How about this: https://codepen.io/samedkazan/pen/gOgNpzL

I tweaked some code to Squarespace: https://thung.squarespace.com/timeline-textimage-side-by-side?noredirect

Password: abc

(I haven't adjusted layout on mobile yet)

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
  • 1 month later...

Hey @MadihaSyed @tuanphan,

 

Did you manage to find a solution for having the text and image on opposite sides of the timeline? I would like to do the same.

image.thumb.png.20ca0fd9ebf11381df0d7ec15c6d4a5c.png

I would like to move the circled in red text onto the opposite side of the timeline to reduce the section length.

 

This is the code I am currently using:

<div class="main-timeline">

 

    <ul class="timeline">

        <li class="timeline-item">

            <div class="timeline-content"><img class="item-img" src="https://images.squarespace-cdn.com/content/v1/624a6c4a102c030c56ea3277/5d33320c-7d51-4d76-9b00-6853cf8df142/Bex-jetsurfing.jpg?format=750w" />

                <h3>2014</h3>

                <p>ZeroJet’s story begins in 2014 when our co-founders - entrepreneurs and outdoors-enthusiasts Bex and Neil - moved to Perth and opened the world’s first Jetsurf Experience Centre. Through buying, selling and renting out these Czech-made boards, they simultaneously realised a) how big the market was, and b) the negative impact these petrol powered, two-stroke motorised surfboards were having on the environment. During this time Bex made a video which went viral online, and it was further proof that there was an enthusiastic market waiting to be served.

 

 

           <li class="timeline-item">

            <div class="timeline-content"><img class="item-img" src="https://images.squarespace-cdn.com/content/v1/624a6c4a102c030c56ea3277/e0c8f833-28e2-4ee7-9ee9-9219f221dce9/water-blasting.jpg?format=750w" />

                <h3>2015</h3>

                <p>But Bex and Neil decided to serve up something a bit greener; something to counteract the jetboards’ carbon footprint. So in 2015 they moved back to New Zealand and founded Voltaic Jetboards. After assembling a team of four engineers - all ex-Buckley Systems; a New Zealand success story making electromagnets for particle accelerators - the crew started work on a more environmentally-friendly alternative, and they spent the next two years developing high-performance electric jetboards.

 

 

            </div>

        </li>

        <li class="timeline-item">

            <div class="timeline-content"><img class="item-img" src="https://images.squarespace-cdn.com/content/v1/624a6c4a102c030c56ea3277/1e5026d8-98a3-436e-871b-409a3f248e3e/voltaic_electric_jetboards-jumping.jpg?format=750w" />

                <h3>2018</h3>

                <p>Fast forward to 2018, the team had carried out significant Research & Development on a bespoke jet pump design paired with electric motor and custom hull design using their hydrodynamic expertise. In other words, they produced a finalised design and a high-performing prototype: the world’s fastest electric jetboard, hitting speeds of 70km/hr.

            </div>

        </li>

      </li>

        <li class="timeline-item">

            <div class="timeline-content"><img class="item-img" src="https://images.squarespace-cdn.com/content/v1/624a6c4a102c030c56ea3277/2485dbe7-0fa0-4a7f-a8ce-bd6dcd84fbba/20191123_1339280-scaled.jpg?format=750w" />

                <h3>2019</h3>

                <p>With such positive feedback about the impressive performance their electric jetboard was capable of, it was the interest of boat builders that ultimately influenced the team to pivot their business and focus purely on electric jet systems for boats. Although the opportunity was a daunting one, it was also a fantastic chance to make a much greater impact in the world. During this year the first prototype electric jet tender was designed and built - though it actually packed a little too much punch!

 

 

            </div>

        <li class="timeline-item">

            <div class="timeline-content"><img class="item-img" src="https://images.squarespace-cdn.com/content/v1/624a6c4a102c030c56ea3277/ae1f0edb-7bb6-453b-84cc-12e912aa86a8/zerojet-electric_jet_tender-transparent-front.jpg?format=750w" />

                <h3>2020</h3>

                <p>Despite the relative international chaos of 2020, it was a year of exponential growth for Bex, Neil and their team. After rebranding to ZeroJet and raising seed capital from investors, the team grew to 10 and managed to hit a number of key milestones, including: - completed a 3 month Startmate accelerator program - built the world’s lightest electric jet tender - developed a highly efficient jetpod system designed for 3m to 4m boats - formed an ongoing partnership with Offshore Cruising Tenders - launched publicly and started making sales to a very interested marine industry

 

 

            </div>

           <li class="timeline-item">

            <div class="timeline-content"><img class="item-img" src="https://images.squarespace-cdn.com/content/v1/624a6c4a102c030c56ea3277/1290933b-c060-4bf1-9861-1243b298a668/about_us-2021-scaled.jpg?format=750w" />

                <h3>2021 and beyond</h3>

                <p>Alongside the material and technical development journey of ZeroJet, some powerful comparisons have been made to the automotive industry, to gauge the impact of traditional petrol-powered outboard motors on the marine environment. In short, taking one 20hp four-stroke outboard off the water is the equivalent of taking 150 cars off the road - and that’s something we’re striving to have a hand in. Our plans include partnering with more boat builders, expanding internationally, and developing systems for larger 5m and 6m tenders, all working towards our ultimate audacious goal of eliminating the need for combustion engines on small watercraft.

 

 

 

 

            </div>

    </ul>

</div>

 

<style>

 

@import url('https://fonts.googleapis.com/css?family=Amaranth|Source+Sans+Pro&display=swap');

 

 .main-timeline {

               padding: 2em 0;

}

 .main-timeline h1 {

               color: #00AEEF;

               font-family: 'Amaranth', sans-serif;

               line-height: 3em;

}

 .main-timeline h3 {

               color: #003D58;

               font-family: 'Amaranth', sans-serif;

}

 .main-timeline p {

               color: #003D58;

               font-family: 'Source Sans Pro', sans-serif;

               font-size: 18px;

               font-weight: 400;

               line-height: 1.4em;

}

 .main-timeline .timeline {

               position: relative;

}

 .main-timeline .timeline:before {

               background: #003D58;

               content: '';

               height: 100%;

               left: 50%;

               position: absolute;

               transform: translateX(-50%);

               width: 4px;

}

 .main-timeline .timeline .timeline-item {

               clear: both;

               list-style-type: none;

               padding: 0 30px;

               position: relative;

}

 .main-timeline .timeline .timeline-item:before {

               background: #003D58;

               border-radius: 50%;

               content: '';

               height: 20px;

               left: 50%;

               position: absolute;

               transform: translateX(-50%);

               width: 20px;

}

 .main-timeline .timeline .timeline-item .timeline-content {

               background: #E9E9F3;

               border: 2px #E9E9F3;

               padding: 1em;

               width: 46%;

}

 .main-timeline .timeline .timeline-item .timeline-content h3, .main-timeline .timeline .timeline-item .timeline-content p, .main-timeline .timeline .timeline-item .timeline-content button {

               margin: 20px;

}

 .main-timeline .timeline .timeline-item:nth-child(even) .timeline-content {

               float: right;

}

 .main-timeline .timeline .timeline-item:nth-child(2):before {

               background: #003D58;

}

 .main-timeline .timeline .timeline-item:nth-child(2) .timeline-content {

               background:  #E9E9F3;

               border: 2px  #E9E9F3;

}

 .main-timeline .timeline .timeline-item:nth-child(3):before {

               background: #003D58;

}

 .main-timeline .timeline .timeline-item:nth-child(3) .timeline-content {

               background:  #E9E9F3;

               border: 2px  #E9E9F3;

}

 .main-timeline .timeline button {

               background: #fff;

               border: 2px solid #fff;

               color: #656565;

               font-weight: 500;

               padding: 10px;

               transition: all 0.3s;

}

 .main-timeline .timeline button:hover {

               background: #fff;

               border: 2px solid #656565;

}

 @media screen and (max-width: 968px) {

               .main-timeline .timeline {

                              margin: 0 0 0 10px;

              }

               .main-timeline .timeline:before {

                              left: 0px;

              }

               .main-timeline .timeline .timeline-item:before {

                              left: 0;

              }

               .main-timeline .timeline .timeline-item .timeline-content {

                              margin: 2em 0;

                              width: 100%;

              }

               .main-timeline .timeline .timeline-item:nth-child(even) .timeline-content {

                              float: initial;

              }

}

 .timeline {

  padding-left:0;

}

</style>

Link to comment
11 hours ago, Localmotionuk said:

Hey @MadihaSyed @tuanphan,

 

Did you manage to find a solution for having the text and image on opposite sides of the timeline? I would like to do the same.

image.thumb.png.20ca0fd9ebf11381df0d7ec15c6d4a5c.png

I would like to move the circled in red text onto the opposite side of the timeline to reduce the section length.

 

This is the code I am currently using:

<div class="main-timeline">

 

    <ul class="timeline">

        <li class="timeline-item">

            <div class="timeline-content"><img class="item-img" src="https://images.squarespace-cdn.com/content/v1/624a6c4a102c030c56ea3277/5d33320c-7d51-4d76-9b00-6853cf8df142/Bex-jetsurfing.jpg?format=750w" />

                <h3>2014</h3>

                <p>ZeroJet’s story begins in 2014 when our co-founders - entrepreneurs and outdoors-enthusiasts Bex and Neil - moved to Perth and opened the world’s first Jetsurf Experience Centre. Through buying, selling and renting out these Czech-made boards, they simultaneously realised a) how big the market was, and b) the negative impact these petrol powered, two-stroke motorised surfboards were having on the environment. During this time Bex made a video which went viral online, and it was further proof that there was an enthusiastic market waiting to be served.

 

 

           <li class="timeline-item">

            <div class="timeline-content"><img class="item-img" src="https://images.squarespace-cdn.com/content/v1/624a6c4a102c030c56ea3277/e0c8f833-28e2-4ee7-9ee9-9219f221dce9/water-blasting.jpg?format=750w" />

                <h3>2015</h3>

                <p>But Bex and Neil decided to serve up something a bit greener; something to counteract the jetboards’ carbon footprint. So in 2015 they moved back to New Zealand and founded Voltaic Jetboards. After assembling a team of four engineers - all ex-Buckley Systems; a New Zealand success story making electromagnets for particle accelerators - the crew started work on a more environmentally-friendly alternative, and they spent the next two years developing high-performance electric jetboards.

 

 

            </div>

        </li>

        <li class="timeline-item">

            <div class="timeline-content"><img class="item-img" src="https://images.squarespace-cdn.com/content/v1/624a6c4a102c030c56ea3277/1e5026d8-98a3-436e-871b-409a3f248e3e/voltaic_electric_jetboards-jumping.jpg?format=750w" />

                <h3>2018</h3>

                <p>Fast forward to 2018, the team had carried out significant Research & Development on a bespoke jet pump design paired with electric motor and custom hull design using their hydrodynamic expertise. In other words, they produced a finalised design and a high-performing prototype: the world’s fastest electric jetboard, hitting speeds of 70km/hr.

            </div>

        </li>

      </li>

        <li class="timeline-item">

            <div class="timeline-content"><img class="item-img" src="https://images.squarespace-cdn.com/content/v1/624a6c4a102c030c56ea3277/2485dbe7-0fa0-4a7f-a8ce-bd6dcd84fbba/20191123_1339280-scaled.jpg?format=750w" />

                <h3>2019</h3>

                <p>With such positive feedback about the impressive performance their electric jetboard was capable of, it was the interest of boat builders that ultimately influenced the team to pivot their business and focus purely on electric jet systems for boats. Although the opportunity was a daunting one, it was also a fantastic chance to make a much greater impact in the world. During this year the first prototype electric jet tender was designed and built - though it actually packed a little too much punch!

 

 

            </div>

        <li class="timeline-item">

            <div class="timeline-content"><img class="item-img" src="https://images.squarespace-cdn.com/content/v1/624a6c4a102c030c56ea3277/ae1f0edb-7bb6-453b-84cc-12e912aa86a8/zerojet-electric_jet_tender-transparent-front.jpg?format=750w" />

                <h3>2020</h3>

                <p>Despite the relative international chaos of 2020, it was a year of exponential growth for Bex, Neil and their team. After rebranding to ZeroJet and raising seed capital from investors, the team grew to 10 and managed to hit a number of key milestones, including: - completed a 3 month Startmate accelerator program - built the world’s lightest electric jet tender - developed a highly efficient jetpod system designed for 3m to 4m boats - formed an ongoing partnership with Offshore Cruising Tenders - launched publicly and started making sales to a very interested marine industry

 

 

            </div>

           <li class="timeline-item">

            <div class="timeline-content"><img class="item-img" src="https://images.squarespace-cdn.com/content/v1/624a6c4a102c030c56ea3277/1290933b-c060-4bf1-9861-1243b298a668/about_us-2021-scaled.jpg?format=750w" />

                <h3>2021 and beyond</h3>

                <p>Alongside the material and technical development journey of ZeroJet, some powerful comparisons have been made to the automotive industry, to gauge the impact of traditional petrol-powered outboard motors on the marine environment. In short, taking one 20hp four-stroke outboard off the water is the equivalent of taking 150 cars off the road - and that’s something we’re striving to have a hand in. Our plans include partnering with more boat builders, expanding internationally, and developing systems for larger 5m and 6m tenders, all working towards our ultimate audacious goal of eliminating the need for combustion engines on small watercraft.

 

 

 

 

            </div>

    </ul>

</div>

 

<style>

 

@import url('https://fonts.googleapis.com/css?family=Amaranth|Source+Sans+Pro&display=swap');

 

 .main-timeline {

               padding: 2em 0;

}

 .main-timeline h1 {

               color: #00AEEF;

               font-family: 'Amaranth', sans-serif;

               line-height: 3em;

}

 .main-timeline h3 {

               color: #003D58;

               font-family: 'Amaranth', sans-serif;

}

 .main-timeline p {

               color: #003D58;

               font-family: 'Source Sans Pro', sans-serif;

               font-size: 18px;

               font-weight: 400;

               line-height: 1.4em;

}

 .main-timeline .timeline {

               position: relative;

}

 .main-timeline .timeline:before {

               background: #003D58;

               content: '';

               height: 100%;

               left: 50%;

               position: absolute;

               transform: translateX(-50%);

               width: 4px;

}

 .main-timeline .timeline .timeline-item {

               clear: both;

               list-style-type: none;

               padding: 0 30px;

               position: relative;

}

 .main-timeline .timeline .timeline-item:before {

               background: #003D58;

               border-radius: 50%;

               content: '';

               height: 20px;

               left: 50%;

               position: absolute;

               transform: translateX(-50%);

               width: 20px;

}

 .main-timeline .timeline .timeline-item .timeline-content {

               background: #E9E9F3;

               border: 2px #E9E9F3;

               padding: 1em;

               width: 46%;

}

 .main-timeline .timeline .timeline-item .timeline-content h3, .main-timeline .timeline .timeline-item .timeline-content p, .main-timeline .timeline .timeline-item .timeline-content button {

               margin: 20px;

}

 .main-timeline .timeline .timeline-item:nth-child(even) .timeline-content {

               float: right;

}

 .main-timeline .timeline .timeline-item:nth-child(2):before {

               background: #003D58;

}

 .main-timeline .timeline .timeline-item:nth-child(2) .timeline-content {

               background:  #E9E9F3;

               border: 2px  #E9E9F3;

}

 .main-timeline .timeline .timeline-item:nth-child(3):before {

               background: #003D58;

}

 .main-timeline .timeline .timeline-item:nth-child(3) .timeline-content {

               background:  #E9E9F3;

               border: 2px  #E9E9F3;

}

 .main-timeline .timeline button {

               background: #fff;

               border: 2px solid #fff;

               color: #656565;

               font-weight: 500;

               padding: 10px;

               transition: all 0.3s;

}

 .main-timeline .timeline button:hover {

               background: #fff;

               border: 2px solid #656565;

}

 @media screen and (max-width: 968px) {

               .main-timeline .timeline {

                              margin: 0 0 0 10px;

              }

               .main-timeline .timeline:before {

                              left: 0px;

              }

               .main-timeline .timeline .timeline-item:before {

                              left: 0;

              }

               .main-timeline .timeline .timeline-item .timeline-content {

                              margin: 2em 0;

                              width: 100%;

              }

               .main-timeline .timeline .timeline-item:nth-child(even) .timeline-content {

                              float: initial;

              }

}

 .timeline {

  padding-left:0;

}

</style>

Can you share link to page where you added Timeline?

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.