How can I customize button and text placement on a hero image?

Store Design
1

I would like to move the text and button on my hero image. This is my website currently https://www.tanmadonnas.com/

The image below is how I would like to move the text and button. I would also like to be able to have a border with a customizable color fill around the text. I would also like to be able to customize my button. I use the Dawn theme.

FigmaLandingPage_1.png
FigmaLandingPage_1.png1366×768 227 KB

2

hi @patricia0928

  1. Navigate to the theme customizer
  2. Click “Image banner”
  3. Set the “Desktop content position” to “Middle Left”
  4. Paste the following into the “Custom css” textarea
.banner__box {
  background-color: #fbf5e6;
}

.banner__heading,
.banner__box {
  color: #040404;
}

.button {
  background-color: #f2b578;
  color: #040404;
}
3

How would I go about changing the positioning and size of the banner box? Do you know where in the code I could change that?

4

@patricia0928 , you can change the size & position by changing the following css.

.banner__box {
  position: absolute;
  top: 0; // e.g. 10rem, 100px, or 25%
  left: 0;
  right: 0;
  bottom: 0;

  width: auto; // e.g. 10rem, 100px, 25%, or 25vw
  min-width: 45rem;
  max-width: 89rem;
}
5

Thank you, this is sort of working but, I am using an older Dawn theme (I don’t want to update because there are code changes) This code doesn’t seem to be working for my Dawn version. I keep trying to move the text box to the left side of the image banner but it is not moving past the middle.