[Resolved] Vertical Textbox

Home Forums Support [Resolved] Vertical Textbox

Home Forums Support Vertical Textbox

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #2147901
    Matthias

    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.

    #2148530
    David
    Staff
    Customer Support

    Hi there,

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

    #2150619
    Matthias

    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.

    #2150645
    David
    Staff
    Customer Support

    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;
    }
    #2153954
    Matthias

    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?

    #2153975
    David
    Staff
    Customer Support

    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.

    #2238850
    Matthias

    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.

    #2239021
    David
    Staff
    Customer Support

    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

    #2239151
    Matthias

    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

    #2239157
    David
    Staff
    Customer Support

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

    #2239366
    Matthias

    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.

    #2239386
    David
    Staff
    Customer Support

    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.

    #2240026
    Matthias

    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.

    #2240153
    David
    Staff
    Customer Support

    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 ?

    #2240253
    Matthias

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

    You’re awesome.

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