Hi,
I inserted a row with 4 columns in my page… each of these 4 “tiles” with a Header, photo, a little bit text.
Now I want to use this like a menu bar which means, if you click ANYWHERE in this “tile”, you will be forwarded to another site.
How can I create this links?
(I know that I can put a link on the photo or on a part of the text, but I want to have the link on the whole tile…)
Hi Oliver
Thanks for reaching out.
If you use a Text or Visual Editor widget (Text tab within that widget) you can wrap all your content in a link as follows:
In order to get the title into the div you’ll need to leave the widget title blank and instead insert the heading into the widget body:
If you’re using the Visual Editor widget you could insert your image, then click over to the Text tab and insert the wrapping HTML as I indicated in my first code block.
Ref: https://css-tricks.com/snippets/jquery/make-entire-div-clickable/
thanks for helping!!
allow me 2 questions:
1) if I move the page later to another location/folder I have to update all links?
2) Is it possible to have the link without underlining and link-color in the text?
…. and another question: Is it possible to force the columns with less content, to have the same height that the highest column?
Reason is that I have a background and it looks better, if all 4 tiles have the same height….
For sure.
1. Is the page you’re linking to static or in WordPress. It depends. If you move WordPress you can map urls so although the folder structure changes your urls don’t. But if you’re linking to a static page and you move that, then yes, you’d need to update your HTML to reflect the new url.
2. Yes, sure. Is your site live? Can you send me the link if it is. I’ll take a look and send through some CSS to help. If you have privacy concerns just use the Private Reply checkbox to send your site url.
3. Here is something you might try:
https://css-tricks.com/equal-height-blocks-in-rows/
You could use this plugin: https://wordpress.org/plugins/header-and-footer-scripts/ to include that bit of code in your header, just wrap it in a script tag:
Each of your divs would need to have the class “blocks” for the script to work:
…. thanks for help ;-)
the site is still growing…. have a look here:
http://wp.qiyun.de <http://wp.qiyun.de/>
what we are talking about are the 4 pics on the bottom.
The link is something your theme would handle the styling of. Assuming you give those blocks a class of “blocks” you could say something like this:
Custom CSS code goes in a Custom CSS plugin or in Theme Settings somewhere if the theme offers that.
…. and can I define the whole block as a link?
mit freundlichen Grüßen
Oliver Bock
Hirschgartenallee 21
80639 München
+49 171 5581818 [email protected]
Am 28.03.2015 um 10:08 schrieb Andrew Misplon <forum+11659-u19650-8e4605cc8157d787ee34c89829d980fdebefeff0@siteorigin.com>:
Andrew Misplon has posted on Row with 4 columns, how can I insert 4 links? <http://mandrillapp.com/track/click/30502291/siteorigin.com?p=eyJzIjoiN0VDX0lGRnYxMFFPdmx0OXprM042WUtBUi0wIiwidiI6MSwicCI6IntcInVcIjozMDUwMjI5MSxcInZcIjoxLFwidXJsXCI6XCJodHRwczpcXFwvXFxcL3NpdGVvcmlnaW4uY29tXFxcL3RocmVhZFxcXC9yb3ctd2l0aC00LWNvbHVtbnMtaG93LWNhbi1pLWluc2VydC00LWxpbmtzXFxcL1wiLFwiaWRcIjpcIjQyYzdlZTQ1MzRlMTQyZGRiM2E0MjNmNDcxMmJiNDM4XCIsXCJ1cmxfaWRzXCI6W1wiMjA3NDUwMDQ2ZGM1NzYxYzQzMmI4ZjIzNTYxMGUwNDBmOGFmMmJhY1wiXX0ifQ>.
—–
The link is something your theme would handle the styling of. Assuming you give those blocks a class of "blocks" you could say something like this:
.blocks a {
color: #9db668;
text-decoration: none;
}
.blocks a:hover {
color: #9db668;
text-decoration: none;
}
Custom CSS code goes in a Custom CSS plugin or in Theme Settings somewhere if the theme offers that.
—
Reply to this email or view the thread on SiteOrigin <http://mandrillapp.com/track/click/30502291/siteorigin.com?p=eyJzIjoiN0VDX0lGRnYxMFFPdmx0OXprM042WUtBUi0wIiwidiI6MSwicCI6IntcInVcIjozMDUwMjI5MSxcInZcIjoxLFwidXJsXCI6XCJodHRwczpcXFwvXFxcL3NpdGVvcmlnaW4uY29tXFxcL3RocmVhZFxcXC9yb3ctd2l0aC00LWNvbHVtbnMtaG93LWNhbi1pLWluc2VydC00LWxpbmtzXFxcL1wiLFwiaWRcIjpcIjQyYzdlZTQ1MzRlMTQyZGRiM2E0MjNmNDcxMmJiNDM4XCIsXCJ1cmxfaWRzXCI6W1wiMjA3NDUwMDQ2ZGM1NzYxYzQzMmI4ZjIzNTYxMGUwNDBmOGFmMmJhY1wiXX0ifQ>. All replies are public, don't email sensitive data. Unsubscribe <http://mandrillapp.com/track/click/30502291/siteorigin.com?p=eyJzIjoiOVQxNms4QXh0NUpaODNwUTJISGQwYnl3UVFNIiwidiI6MSwicCI6IntcInVcIjozMDUwMjI5MSxcInZcIjoxLFwidXJsXCI6XCJodHRwczpcXFwvXFxcL3NpdGVvcmlnaW4uY29tXFxcL3dwLWFkbWluXFxcL2FkbWluLWFqYXgucGhwP2FjdGlvbj1zb2NuX3Vuc3Vic2NyaWJlJmlkPTEzOTc4JnRva2VuPTIxNmNhZjQwMjAyZjM3ZWY1OTU4MWRmMTg5NWE4ZGNhXCIsXCJpZFwiOlwiNDJjN2VlNDUzNGUxNDJkZGIzYTQyM2Y0NzEyYmI0MzhcIixcInVybF9pZHNcIjpbXCIyMDc0NTAwNDZkYzU3NjFjNDMyYjhmMjM1NjEwZTA0MGY4YWYyYmFjXCJdfSJ9> to stop receiving notifications.
Did you try my initial suggestion for that?
With the extra div it would look like this:
Yes I tried that. But then the text is underlined like a link. And I want to have it look like a normal text.
Is that possible?
For sure. If you scroll up you’ll see the link CSS I provided. Just set the color to the same color as your text.