GenerateBlocks/GeneratePress Design Question

  • Reed Sutton
    June 17, 2026 at 4:52 pm

    This is a bit of a design question, but I’m basically wondering how I’d go about getting a line through the connecting process steps (01,02,03,04). I’ve seen this done in a few generatepress site templates. I have the numbers currently set up simply as headline blocks inside a container inside a grid.

    I have attached a picture of what I currently have, and what I am hoping to achieve. Just wanted to see if it was possible with generateblocks/press natively without resorting to some complicated CSS.

    Thanks in advance!

  • Alvind
    June 17, 2026 at 7:52 pm

    Hi there,

    That type of timeline layout is typically created using ::before and ::after pseudo-elements.

    Since you’re still using the V1 blocks, the most practical approach is to use custom CSS. It may be possible to recreate something similar with V2 blocks using block settings, but custom CSS will likely be simpler and more reliable for this layout.

    You can try this CSS:

    /* Grid that wraps the 4 steps */
.itin-process-timeline {
    position: relative;
}
/* Connecting line, centered on the number circles */
.itin-process-timeline::before {
    content: "";
    position: absolute;
    top: 50px;
    left: 14.42%;
    right: 10.58%;
    height: 3px;
    background-color: #1e3a5f;
    z-index: 0;
}
/* Keep circles/content above the line; white badge background hides the line inside each circle */
.itin-process-timeline .itin-process-step {
    position: relative;
    z-index: 1;
}
/* Accent dots between the circles */
.itin-process-timeline .gb-grid-column {
    position: relative;
    z-index: 1;
}
.itin-process-timeline .gb-grid-column:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 40px;
    right: -25px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #f0a500;
    border: 3px solid #ffffff;
    box-sizing: content-box;
    z-index: 2;
}
/* Hide line + dots when the layout stacks on mobile */
@media (max-width: 768px) {
    .itin-process-timeline::before,
    .itin-process-timeline .gb-grid-column::after {
        display: none;
    }
}

    This should get the layout close to your mockup, but you may need to slightly adjust the positioning values depending on the final spacing.

  • Reed Sutton
    June 18, 2026 at 7:44 am

    Thanks this worked great!

  • Reed Sutton
    June 18, 2026 at 1:58 pm

    Hi Alvind,

    Since you seem highly skilled with this css stuff, I had one more ask. I am trying to create a ribbon over my main blue banner on the page, that says “Most Popular”.

    What would be the best way to do this?

    (I included some images in the private info section.)

  • Alvind
    June 18, 2026 at 7:57 pm

    Same concept applies here. You can use a pseudo-element selector for the ribbon.

    However, I’m unable to replicate the exact layout perfectly. This is the closest version I could come up with:

    .itin-service-main {
    overflow: hidden;
}
.itin-service-main::after {
    content: "MOST POPULAR";
    position: absolute;
    top: 28px;
    right: -58px;
    width: 220px;
    transform: rotate(45deg);
    background-color: #f0a500;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    line-height: 1;
    padding: 8px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    z-index: 5;
}
  • Reed Sutton
    June 19, 2026 at 9:38 am

    Thanks Alvind. Was able to make this work with a few slight adjustments. Appreciate it!

  • Alvind
    June 21, 2026 at 6:12 pm

    No problem, glad to hear that! 🙂

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.