Home Forums Designer Blocks for Gutenberg Designer Blocks for Gutenberg – All-in-One Image/Text link

This topic contains 7 replies, has 3 voices, and was last updated by  scrambler 1 month, 3 weeks ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #56835

    Nele
    Participant

    Homepage: https://wycliff.de/relaunch2018/
    Admin: kr45mn
    Password: 67jh#t78(u)

    I have put a link into the bottom description, but instead of a simple link I want a link-button at this place.
    I cannot put html into this block, so I do not know how to get a link-button as result. I just need to put a class to the link.

     

    #56839

    scrambler
    Moderator

    Are you speaking about the mehr info text below the text titled Infotage.

    If so, that div has the class wvrblocks-imgtext__descBot

    So you could use a CSS rule to style it using that selector

    .wvrblocks-imgtext__descBot {background:yellow;width:150px;margin-top:20px;margin-left:45px;}

    I am not sure why you said you can put HTML in there as you already have some

     

    #56847

    Nele
    Participant

    What I ‘ve meant is, that I want a link-button which doesn’t tage the defined link color of the wrapping area. Therefore I put normally in the Global CSS Rulesas  a rule for example:

    a.buttonred {
    background-color: #D12E54;
    padding: 10px;
    width: auto;
    color: #ffffff;
    display: inline-block;
    }
    a.buttonred:hover {
    background-color: #E8335D;
    color: #ffffff;
    }

    And then I give a link the class “buttonred”. This is what I want for the class wvrblocks-imgtext__descBot (mehr Infos) on this page.
    How can I get this? Now there is no opportunity on the page to put the class “buttonred” to the link.

    #56855

    scrambler
    Moderator

    Switch the content to Edit as HTML (using the 3 dot icon in the menu bar at the top

    Then locate

    class=wvrblocks-imgtext__descBot

    and replace it by

    class= wvrblocks-imgtext__descBot buttonred

    To add your class to that section

    #56860

    Weaver
    Keymaster

    I don’t think that will work. While Gutenberg has an HTML view, if you change anything with the content, it will break the block when you try to edit the page again.

    You would have to look at the complete HTML for the actual link in the block to add to global custom CSS.

    #56864

    scrambler
    Moderator

    Good to know,

    Then your only solution is to add the block class to your rules

    a.buttonred, .wvrblocks-imgtext__descBot {
    background-color: #D12E54;
    padding: 10px;
    width: auto;
    color: #ffffff;
    display: inline-block;
    }
    a.buttonred:hover , .wvrblocks-imgtext__descBot:hover {
    background-color: #E8335D;
    color: #ffffff;
    }

    #56870

    Nele
    Participant
    1. Several days ago I tried to edit the block as HTML but it broke the block.
    2. I added the block class to my rules, but this do not work  – as you can see (Instead of “buttonred” I used “buttonposts” and it should look like the buttons in the post below on that page)

    Meanwhile I think the limits of changing this area in order to get a button are reached…

    So I will use Weaver X-Flex Columns instead of the All-in-One Image/Text-Block on this page and insert the widget-shortcode at this place.

    #56875

    scrambler
    Moderator

    Your rules are working just fine, you may want to clear your caches

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.