- This topic has 15 replies, 2 voices, and was last updated 1 year, 10 months ago by David.
-
AuthorPosts
-
March 9, 2022 at 4:48 am #2147901Matthias
Hi there,
i am trying to create a hero/banner. I wonder if its possible to have text vertical aligned – like the black box on the side in my attached picture?
I later want to place the whole banner a)on the corresponding page and b) into a slider on the startpage.
Couldnt find any settings for that for now.March 9, 2022 at 10:20 am #2148530DavidStaffCustomer SupportHi there,
vertically aligning text would require some CSS. Do you have that layout created with the text elements in place ?
March 11, 2022 at 4:22 am #2150619MatthiasTheres 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.
March 11, 2022 at 4:59 am #2150645DavidStaffCustomer Supportand 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; }
March 14, 2022 at 6:41 am #2153954MatthiasThanks 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?
March 14, 2022 at 7:03 am #2153975DavidStaffCustomer SupportUse a Headline Block with a link instead of a Button.
The Headline you can Highlight part of the text and set a different color.May 31, 2022 at 1:11 am #2238850Matthiasusing 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.May 31, 2022 at 4:35 am #2239021DavidStaffCustomer SupportSometimes 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 thehas-vertical-button
class2. Inside the #1 Container is:
a. Another container block for your text
b. A headline block for your vertical text that has theis-vertical-button
classMay 31, 2022 at 6:46 am #2239151MatthiasThx.
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
May 31, 2022 at 6:50 am #2239157DavidStaffCustomer SupportSelect the #2 inner container and increase its Z-index value.
May 31, 2022 at 8:22 am #2239366Matthiasthx 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.
May 31, 2022 at 8:46 am #2239386DavidStaffCustomer Support1. 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: 800px2. 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.June 1, 2022 at 2:35 am #2240026Matthiasworked. 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 leftThe 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.
June 1, 2022 at 4:59 am #2240153DavidStaffCustomer SupportAwesome – 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 ?
June 1, 2022 at 6:51 am #2240253Matthiasthx a lot!!! That worked.
With that setting full left + right is possible – so everything in between is just tinkering.You’re awesome.
-
AuthorPosts
- You must be logged in to reply to this topic.