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

[Nele]

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.

 

[scrambler]

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

 

[Nele]

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.

[scrambler]

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

[Weaver]

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.

[scrambler]

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;
}

[Nele]

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.

[scrambler]

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

[Author]

Posts