Add a logo slider to your beehiiv site using Website Builder 2.0

Hello, busy bee 🐝

Long time no see… Well, I have been busy building my firm (Tinker Solution), strong with a solid team base and serving clients at the same time with new beehiiv website builder.

In today’s Unbee-lievable, we are covering Tyler’s question which seems basic for some but important for many.

Tyler as like many other users, would like to know how to create a beautiful and functional logo slider using the new website builder from beehiiv.

Context

As you know, in beehiiv website builder 2.0, you can add an HTML embed, which can accept a script or extensive HTML code to customize pretty much anything.

Using just that, we will be injecting this HTML code to generate the logo slider that we have made for a few of our clients already.

How to Use This in Beehiiv?

1. Go to Website Builder (not the leacy one)

2. Go to your page where you like to add the slider.

3. Add a section > container > HTML embed.

   1. Make sure the section and container width and spacing are based on your needs. Like, if you want the edge-to-edge experience, then remove all padding from the sides in the section and also in the container.

4. Use the code that I have written below to create a logo slider that is also responsive for mobile, and change the images with your own logo.

The challenging part:

1. The actual logo images need to be the same size, so use Canva and use a specific size, say 200×200 and place all logos in that size to have consistency.

2. The hosting is a bit problem. I tackle this using 2 ways.

   1. Hosting using AWS. Create a free account on Amazon S3 and create a bucket, and upload all images to get a public URL.

   2. OR… You can create a post in beehiiv, upload all of your logo images to the image library and then right-click on each image that has been uploaded and copy the image link. This will get you the link from beehiiv Beehiiv-hosted cloud, which will work just fine too.

3. You can also use any other tool that you may have been using to host images that gives you a public URL.

The Code

<div class="relative overflow-hidden py-6" style="background-color: #FFFFFF;">
  <!-- Left and Right Fades -->
  <div class="pointer-events-none absolute left-0 top-0 h-full w-16 z-10"
    style="background: linear-gradient(to right, #FFFFFF, transparent);"></div>
  <div class="pointer-events-none absolute right-0 top-0 h-full w-16 z-10"
    style="background: linear-gradient(to left, #FFFFFF, transparent);"></div>

  <div class="relative">
    <div class="scroll-track flex w-max animate-scrollLoop gap-12">
      <!-- Repeating logo track twice -->
      <div class="flex gap-12">
        <img src="https://img.logo.dev/anthropic.com?token=pk_DX9UHP_oRHu1z39ZsPlgyg" alt="Anthropic Logo" class="w-32 h-16 object-contain grayscale" />
        <img src="https://img.logo.dev/facebook.com?token=pk_DX9UHP_oRHu1z39ZsPlgyg" alt="Facebook Logo" class="w-32 h-16 object-contain grayscale" />
        <img src="https://img.logo.dev/databricks.com?token=pk_DX9UHP_oRHu1z39ZsPlgyg" alt="Databricks Logo" class="w-32 h-16 object-contain grayscale" />
        <img src="https://img.logo.dev/figma.com?token=pk_DX9UHP_oRHu1z39ZsPlgyg" alt="Figma Logo" class="w-32 h-16 object-contain grayscale" />
        <img src="https://img.logo.dev/notion.so?token=pk_DX9UHP_oRHu1z39ZsPlgyg" alt="Notion Logo" class="w-32 h-16 object-contain grayscale" />
        <img src="https://img.logo.dev/openai.com?token=pk_DX9UHP_oRHu1z39ZsPlgyg" alt="OpenAI Logo" class="w-32 h-16 object-contain grayscale" />
        <img src="https://img.logo.dev/ramp.com?token=pk_DX9UHP_oRHu1z39ZsPlgyg" alt="Ramp Logo" class="w-32 h-16 object-contain grayscale" />
        <img src="https://img.logo.dev/retool.com?token=pk_DX9UHP_oRHu1z39ZsPlgyg" alt="Retool Logo" class="w-32 h-16 object-contain grayscale" />
        <img src="https://img.logo.dev/stripe.com?token=pk_DX9UHP_oRHu1z39ZsPlgyg" alt="Stripe Logo" class="w-32 h-16 object-contain grayscale" />
      </div>
      <div class="flex gap-12">
        <!-- Duplicate logos -->
        <img src="https://img.logo.dev/anthropic.com?token=pk_DX9UHP_oRHu1z39ZsPlgyg" alt="Anthropic Logo" class="w-32 h-16 object-contain grayscale" />
        <img src="https://img.logo.dev/facebook.com?token=pk_DX9UHP_oRHu1z39ZsPlgyg" alt="Facebook Logo" class="w-32 h-16 object-contain grayscale" />
        <img src="https://img.logo.dev/databricks.com?token=pk_DX9UHP_oRHu1z39ZsPlgyg" alt="Databricks Logo" class="w-32 h-16 object-contain grayscale" />
        <img src="https://img.logo.dev/figma.com?token=pk_DX9UHP_oRHu1z39ZsPlgyg" alt="Figma Logo" class="w-32 h-16 object-contain grayscale" />
        <img src="https://img.logo.dev/notion.so?token=pk_DX9UHP_oRHu1z39ZsPlgyg" alt="Notion Logo" class="w-32 h-16 object-contain grayscale" />
        <img src="https://img.logo.dev/openai.com?token=pk_DX9UHP_oRHu1z39ZsPlgyg" alt="OpenAI Logo" class="w-32 h-16 object-contain grayscale" />
        <img src="https://img.logo.dev/ramp.com?token=pk_DX9UHP_oRHu1z39ZsPlgyg" alt="Ramp Logo" class="w-32 h-16 object-contain grayscale" />
        <img src="https://img.logo.dev/retool.com?token=pk_DX9UHP_oRHu1z39ZsPlgyg" alt="Retool Logo" class="w-32 h-16 object-contain grayscale" />
        <img src="https://img.logo.dev/stripe.com?token=pk_DX9UHP_oRHu1z39ZsPlgyg" alt="Stripe Logo" class="w-32 h-16 object-contain grayscale" />
      </div>
    </div>
  </div>
</div>

<style>
  @keyframes scrollLoop {
    0% {
      transform: translateX(0%);
    }

    100% {
      transform: translateX(-50%);
    }
  }

  .animate-scrollLoop {
    animation: scrollLoop 30s linear infinite;
  }
</style>

PRO TIP:

1. You can change the background color from white to anything that matches your design.

<div class="relative overflow-hidden py-6" style="background-color: #FFFFFF;">

2. You can adjust the fading from both sides by adjusting the color. Change and see what happens.

 <!-- Left and Right Fades -->
  <div class="pointer-events-none absolute left-0 top-0 h-full w-16 z-10"
    style="background: linear-gradient(to right, #FFFFFF, transparent);"></div>
  <div class="pointer-events-none absolute right-0 top-0 h-full w-16 z-10"
    style="background: linear-gradient(to left, #FFFFFF, transparent);"></div>

See it in action:

And that’s about it! Told you I would make it buzzy quickly.

Got a question? Feel free to hit reply or tag me in the hiiv Slack and ask your question. Not on hiiv Slack, well, you are missing big time!

— Keyur
Your chief at unbee-liveable,