Trying to properly size the hero image? What are the rules

General
1

Hi team. I’m working with chatgpt to create a hero image appropriate for my studio. The issue is that because we can’t easily move around the action button on the hero image block it can get tricky.

Questions:

  1. Is there a doc or best practices for sizing and aspect for the hero image.
  2. Is there a way we can move around the button element.
  3. Alternatively can we make the hero image clickable and direct to the next pickaxe page?

See here. In this example the image has a button on it (not pickaxe) and my image was stretched out on upload.

image
image1920×1200 148 KB

2

Also how do we size properly for mobile versus desktop?

3

Hi,

We recommend using a 1:1 aspect ratio for profile images and a 16:9 aspect ratio for hero section images to ensure they display correctly without stretching or cropping.

It’s not currently possible to move the button, but you can achieve that by using custom Website Code Injections with CSS and JavaScript to reposition elements or make the hero image itself clickable.

If your use case requires more advanced customization and layout control, another option is to design your website separately and embed your Pickaxes within it.

How to Embed AI Chatbots into Your Website: A Step-by-Step Guide

6

Hi @gartulan ,

The Website Code Injection feature can be found in your Studio’s Settings section:

website-code-injection
website-code-injection1919×1006 73.2 KB

You can use this feature to customize the styling or behavior of your Studio’s website.
For example, the script below changes the background image on mobile devices while keeping the desktop background unchanged.

<!-- ✅ Mobile Hero Background Override -->
<style>
  /* Adjust breakpoint if needed */
  @media (max-width: 899px) {
    /* 🎯 Replace the URL below with YOUR mobile hero image */
    .pxe-content-page > section:first-of-type {
      background-image: url("https://i.pinimg.com/736x/d7/1a/1d/d71a1d5edecf0963ad056e381417e63d.jpg") !important; /* <-- 👈 REPLACE THIS URL */
      background-size: cover !important;
      background-position: center center !important;
      background-repeat: no-repeat !important;
    }
  }
</style>

<!-- ⚡ Optional: Preload the same mobile image for faster loading -->
<link
  rel="preload"
  as="image"
  href="https://i.pinimg.com/736x/d7/1a/1d/d71a1d5edecf0963ad056e381417e63d.jpg"  <!-- 👈 REPLACE THIS URL TOO -->
  media="(max-width: 899px)"
/>

Please make sure to replace the image URLs in the code with your own.
In this example, the mobile hero background is set to display a “Nyan Cat” image.

1 Like