Vertical Textbox

Hi there,

vertically aligning text would require some CSS. Do you have that layout created with the text elements in place ?

Theres a basic draft only. Links are attached.

I want to create banners like that for every subsite of the main menu - and afterwards additionaly include them in a slider on the startpage (currently i plan to use getwid slider block for that) - so you can click the banner in the slider and get to the subsite by doing so.

and afterwards additionaly include them in a slider on the startpage (currently i plan to use getwid slider block for that)

This I am not sure on. I can advise how to do it with a GenerateBlocks Container and Buttons block, but that may not work inside the slider.

1. Select the parent Container Block and in Advanced > Additional CSS Class(es) add: has-vertical-button
2. Select the Buttons Block not the Button, and give that a class of: is-vertical-button
3. Add this CSS:

.has-vertical-button {
    position: relative;
}
.is-vertical-button {
    position: absolute;
    left: 0;
    top: 150%;
    transform: rotate(270deg);
    transform-origin: 0 0;
}

Thanks a lot David. Worked like a charm. Had to play around with the %-in the css to position the button.

But - Last question for the button would be:
how to have a button with 2 different textcolors?
I solved this by simply adding another button, deleting the space in between them - so they look like one.

Is there a smarter/smoother solution? Or how would you approach different textcolors on the button-text?

Use a Headline Block with a link instead of a Button.
The Headline you can Highlight part of the text and set a different color.

using the code above: is there a way to have the headline block centered in relation to the chosen parent container.
The parent container has a background image - where i would like the vertical headline to be centered to.
I can "wing" that by playing around with the % - but i wonder if there is a way to do this by code.

Sometimes its best to go back to the drawing board, and i think this is one of those times :) The Grid i don't think is required as it adds % variables that will cause problems.

Instead try this HTML:

<!-- wp:generateblocks/container {"uniqueId":"27f995d0","containerWidth":600,"paddingTop":"100","paddingRight":"40","paddingBottom":"100","paddingLeft":"40","bgImage":{"id":"","image":{"url":"https://picsum.photos/id/237/200/300"}},"bgOptions":{"selector":"pseudo-element","opacity":0.3,"overlay":false,"position":"center center","size":"cover","repeat":"no-repeat","attachment":""},"innerZindex":1,"isDynamic":true,"blockVersion":2,"className":"has-vertical-button"} -->
<!-- wp:generateblocks/container {"uniqueId":"160dc591","backgroundColor":"var(\u002d\u002daccent)","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/headline {"uniqueId":"c2fbcf95","element":"p","paddingTop":"20","paddingRight":"20","paddingBottom":"20","paddingLeft":"20","paddingSyncUnits":true} -->
<p class="gb-headline gb-headline-c2fbcf95 gb-headline-text">some contained text</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/headline {"uniqueId":"0b9df072","element":"div","className":"is-vertical-button"} -->
<div class="gb-headline gb-headline-0b9df072 gb-headline-text is-vertical-button">vertical text</div>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

and this CSS:

.has-vertical-button {
    position: relative;
}
.has-vertical-button .gb-inside-container {
	position: initial;
}
.is-vertical-button {
    position: absolute;
    left: 0;
    bottom: 50%;
    transform: rotate(270deg) translateX(-50%);
    transform-origin: 0 50%;
}

The basics are:

1. A Full Width container that has its inner width set to whatever value you want your inner text to be displayed.
1.1 This container has the has-vertical-button class

2. Inside the #1 Container is:
a. Another container block for your text
b. A headline block for your vertical text that has the is-vertical-button class

Thx.
I played with that a little (your code with some added texts can be seen right under the block i linked - so my old one on top, yours 2nd) .

I am not sure how you did it - but i can't make the text visible unless the background image has an opacity below 1 and also the text background color can not be seen.
On my original block you can see how i plan the colors to be: background image with no opacity - and the text with a white box surrounding it.
I also added a minimal height of 50vh - as i want the container to span half a screen (as the side visitor should see that there is something under that hero.

I tried some settings - but couldnt figure out what you did there to make the text working only when opacity is below 1.

Hope you know what i mean

Select the #2 inner container and increase its Z-index value.

thx that worked - almost there.

You created the surrounding container with a inner width of 600 (which i uped to 800 to avaid a linebreak).
Now i wonder a few things:
-> looking at the page -> old container on top, new one below
1. what would be best practice to move the text-container to the left? I can set a outer margin of -200. But then the text-container moves out of the screen when shrinked.
2. Is there a way to make the vertical text and the white-container text never overlap when i shrink the screen?
3. The vertical text is "under" the left side of the screen. I can make it come out when i add "left: 50px;" to the css.
Also it is not at in the middle - at 50% of the outer container - this can again be "winged" if i enter a value like "bottom: 40%;". Is there a better way to have it in the middle - which puts us full circle back to my question some hours ago (but with a "lighter" container solution).

I solved it i guess - but im not sure if minus pixels and playing with a percentage is the smartest solution.

1. Set the #1 parent containers width to match the site content contatiner eg. 1200px.
Replace the very inner container that has your white background with a single column Grid Block. Set that single columns flex values to:
Flex Grow: 0, Flex Shrink: 1, Flex-basis: 800px

2. Add left and right padding to the #1 parent container.

3. In this CSS:

.is-vertical-button {
    position: absolute;
    left: 0;
    bottom: 50%;
    transform: rotate(270deg) translateX(-50%);
    transform-origin: 0 50%;
}

Adjust the left property - make it 30px or so.

worked. thx a lot. Would never have looked at using a 1 Column Grid.

To get on your nerves some more. My generateblocks knowledge lacks i guess.
I'm having troubling positioning the white box to the left+right - played around a lot - but couldnt position it where i want without unwanted effects (like the white box shrinking instead of the "free" space between the vertical + whitebox text instead of the space in between. I would like it as it currently is - but the white text box positioned to almost fully right or fully left

The first banner i want to use is fine - now im having trouble with the 2 others - they are stacked on the sandbox-page.
1. is fine
2. i would like the whitebox to be on the right - with only a little space on the right side.
3. i would like th have the whitebox to be more on the left - so the person in the background picture is not covered.

dunno which setting i am missing.

Awesome - the design you're trying to achieve is more complicated then you would expect hence we have to think a little differently :)

Try this - duplicate banner #1.
Select the Grid block you have and set its Horizontal Alignment to Right:

https://docs.generateblocks.com/article/grid-overview/#horizontal-alignment

Does that achieve what you want for Banner #2 ?

thx a lot!!! That worked.
With that setting full left + right is possible - so everything in between is just tinkering.

You're awesome.