Gatsby WP Themes Documentation

Styling your layouts

All Blocks come unstyled from the @gatsbywpthemes/gatsby-theme-acf-builder, and are styled in the starter.

For example, Section blocks are styled this way in the starter Agency in single projects.

src/styles/acfBlocks/sections-block.css

.sections-block {
  @apply py-16 md:py-28;
  &.project-sections {
    .sections-container {
      @apply center-container;
    }
    .section-item {
      @apply items-center gap-20 mb-10 md:mb-20 md:flex last:mb-0 even:flex-row-reverse;
      .section-text,
      .section-image {
        @apply flex-1;
      }
      .section-text {
        @apply mb-10 md:mb-0;
        .headline {
          @apply mb-5;
        }
      }
      .button-container {
        @apply mt-5 md:mt-10;
      }
      .button {
        @apply bg-black btn hover:bg-highlight;
      }
      .section-image {
        @apply shadow-lg rounded-xl aspect-1;
      }
    }
  }
}

As you can see with very little and simple tailwindcss code you can really create beautiful layouts.

You can also use regular css here.

The class .project-sections is given in the block settings class input.

So if you want to use the block sections on a page in another way, you just need to give it another class, and style it under &.your-class

&.your-class {
    @apply bg-red-500 p-10;
    margin-top: 20px;

    //if you don't know tailwindcss, you can also use regular css here
}

However, if you need to change the html/jsx, you will need to use shadowing

Gatsby WP Themes Documentation

Styling your layouts

Styling your layouts

General Usage

Shadowing Layouts