Cómo avanzar con perseverancia e innovación

Este mes celebramos nuestro octavo aniversario como empresa y lo hacemos con una serie titulada «Into the SQSP Metaverse: 33 portales a través del diseño web y el emprendimiento». Este es el portal n.º 4.

«Haz siemprealgo. Nunca te quedes de brazos cruzados esperando que, algún día, tu bandeja de entrada se llene hasta reventar, porque eso no es así como funciona».

— Cody

La historia de Cody comenzó hace cinco años, cuando necesitaba crear una página web para un proyecto musical. Después de que un supuesto diseñador le estafara su dinero, Cody decidió tomar las riendas del asunto. Probó varios creadores de páginas web y, finalmente, descubrió Squarespace. A pesar de no tener experiencia previa, disfrutó creando la página web y decidió aprender más sobre diseño web.

A medida que iba perfeccionando sus habilidades, Cody se dio cuenta de que existía un vacío en el mercado en cuanto a servicios de diseño web asequibles dirigidos a pequeñas empresas y diseñadores autónomos. Esto le llevó a crear Move Labs, una empresa que crea páginas web de forma gratuita y solo cobra una cuota mensual de suscripción por la gestión y las actualizaciones continuas.

La perseverancia y el espíritu emprendedor de Cody también dieron lugar a Ghost Plugins, una plataforma que ofrece plugins y plantillas gratuitas para Squarespace. Próximamente lanzarán Ghost Plus, un servicio de suscripción que ofrece plantillas ilimitadas por una cuota mensual fija. Este servicio tiene como objetivo ayudar a los equipos pequeños y a los diseñadores autónomos a ahorrar tiempo y dinero.

A lo largo de su trayectoria, Cody ha aprendido valiosas lecciones que comparte con otros emprendedores de Squarespace:

1. Ten paciencia: el éxito no llega de la noche a la mañana. Se necesita tiempo para aprender, crecer y crear un negocio sostenible. Cody aconseja no esperar resultados inmediatos y, en su lugar, centrarse en perfeccionar tu oficio y ser perseverante.

2. Esfuérzate y pasa a la acción: No te quedes sentado esperando a que los clientes vengan a ti. Acércate a clientes potenciales, establece contactos con personas afines y mantente siempre activo para hacer crecer tu negocio.

La historia de Cody es un testimonio del poder de la perseverancia y de la importancia de seguir aprendiendo y creciendo continuamente. Su enfoque innovador de los servicios de diseño web no solo le ha ayudado a crear un negocio de éxito, sino que también ha proporcionado recursos valiosos a otros emprendedores de Squarespace. Siguiendo los consejos de Cody y apostando por la paciencia, el esfuerzo y el crecimiento constante, otros diseñadores pueden alcanzar el éxito en el metaverso de Squarespace.

Escucha su historia aquí.

Cómo generar CSS personalizado para Squarespace con ChatGPT

I received a question from one of our customers today about how to make image caption titles appear on hover. I thought this would be a good case study for using ChatGPT to generate CSS on a Squarespace site. Let's dig in.

First, we need to inspect the element. I will isolate the image, and it seems that each of these divs applies to a different image. I will click "Edit as HTML," copy the entire HTML, and paste it here. Now, in my prompt, I will ask ChatGPT to write CSS to make the caption title appear on hover.

To make the caption title appear on hover, we can use CSS. Here's an example of how to achieve this. Let's test it and see if it works. It seems that the image slide title is currently below the image. How can we make it overlay the image? This code might help us achieve that. Let's copy the code and give it a try.

I will paste this in my custom CSS. As you can see, the image title now appears on hover. Let's save that. We might want to change the color of the text and adjust the spacing. To change the font color and size, we can use the following customizations. I will copy that piece and paste it within what we already have here, then hit save.

Now the color is white, and the font size is 20. If we want to make it 30, we can adjust the code accordingly. However, let's bring it back to 20, as that seems good enough.

So, there you have it. This is how you can generate custom CSS for your Squarespace site using ChatGPT. It's quite simple. First, copy your HTML and give a specific command. If the initial command isn't specific enough, go back and provide more clarity. If you have any questions about this process, feel free to leave them in the comments, and I'll be happy to answer them. Peace.

Here’s another example…

You can find the code here.

Code Queen: The Story of Becca Harpain and Inside the Square

This month is our 8th year business anniversary and we're celebrating with a series called Into the SQSP Metaverse: 33 Portals Through Web Design And Entrepreneurship. This is Portal #3.

The California sun was setting as Becca Harpain sat hunched over her laptop, her fingers flying over the keys. She was deep in the digital trenches of Squarespace 7.1, the platform's latest version that had sent shivers of anticipation and trepidation throughout the web design community. But Becca was not daunted. Instead, she was thrilled by the challenge.

For years, Becca had been a Squarespace entrepreneur, a self-proclaimed CSS super nerd who spoke the language of computers with fluency and flair. She had a knack for transforming web pages into breathtaking digital canvases, and she was about to do it again. But this time, it was different. This time, she was not just redesigning a website. She was reshaping her destiny.

“I want to become a lot more of a resource than just a one-off. I want to make it easy for people to narrow down what they need.”

— Becca Harpain

Becca's journey into the Squarespace metaverse began in a small town deli across a startup company. Tired of smelling like turkey, she had taken the job as a phone operator at the startup, which eventually led her to the world of online marketing. With ten keywords and a hundred dollars, Becca dived headfirst into Google Ads, kickstarting her career in the digital realm.

Years later, she was managing a global marketing campaign, dealing with six-figure budgets, three languages, and multiple countries. But as thrilling as it was, the fast-paced world of marketing began to wear her out. She longed for the creativity of art, the joy of design. So, she pivoted, teaching herself CSS and starting to build websites for clients.

Becca's pivot led her to create Inside the Square, a platform where she shared her CSS knowledge with the Squarespace community. Every Tuesday, she would post a new video or article, sharing her insights and tips. The response was overwhelmingly positive, and Inside the Square quickly gained traction.

But Becca wasn't satisfied with just sharing her knowledge. She wanted to empower others to become experts themselves. Inside the Square is Becca's brainchild, her gift to the Squarespace community. With a wealth of free CSS tutorials and the launch of Custom Code Academy, she is on a mission to democratize web design, distilling years of experience into a comprehensive and accessible course.

“I’m a very high energy person. I like to channel that energy into a lot of different directions. Picking one path and focusing on it has been a really big part of Inside the Square”

— Becca Hapain

As Inside the Square continues to grow, Becca is excited about the future. She's redesigning her website, organizing her content, and creating cheat sheets for those who want to dip their toes into CSS. She's also nurturing her community, fostering collaboration, and helping her students become experts.

Through all her trials and triumphs, Becca remains committed to her mission: to empower Squarespace entrepreneurs to become CSS experts. As she charts her course through the Squarespace metaverse, Becca's story serves as a beacon of hope for aspiring entrepreneurs. It demonstrates that with passion, creativity, and a bit of code, they too can etch their mark in the digital universe.

Listen to her story here and check out her new podcast Think Inside the Square.