--- title: "How to Make a Clickable Container in WordPress?" url: https://nexterwp.com/docs/make-a-clickable-container-in-wordpress/ date: 2024-11-28 modified: 2026-09-19 lang: en author: "Aditya Sharma" description: "A card with an image, a heading and a short line of text usually wants to behave as one thing. Making only the heading clickable gives the visitor a small..." image: https://nexterwp.com/wp-content/uploads/2024/11/How-to-Make-a-Clickable-Container-in-WordPress_-1024x519.jpg word_count: 490 --- # How to Make a Clickable Container in WordPress? ## Key Takeaways - Nexter Blocks activa el enlace del contenedor con la opción de wrapper link, y el área completa del card responde al clic, no solo un elemento interno. - El enlace del contenedor admite URL, apertura en una nueva pestaña y nofollow, y al publicarse añade la clase tpgb-row-link con esos valores. - Los enlaces internos tienen prioridad sobre el wrapper, así que un botón o enlace de texto dentro del contenedor se abre antes que el enlace general del card. A card with an image, a heading and a short line of text usually wants to behave as one thing. Making only the heading clickable gives the visitor a small target and an odd experience. The Container block can carry the link itself, so the whole card is the click target. [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-container/) ## Before You Start - **Edition:** Free — works in Nexter Blocks (free) and with Nexter Blocks Pro.- **Block to enable:** Container, switched on under **Nexter > Blocks** in your WordPress dashboard.- A **Container** block with your card content inside — see the [Container block guide](https://nexterwp.com/docs/add-a-container-in-wordpress/). ## Steps - Select the **Container** you want to make clickable and switch on its **wrapper link**. ![Enabling the wrapper link on a container](https://nexterwp.com/wp-content/uploads/2024/11/container-layout-extra-options-wrapper-link.png) - Enter the **URL** the container should lead to. - Choose whether it opens in a new tab, and set nofollow if you need it. - Publish and click anywhere in the section on the real page. ## How It Behaves The link is applied to the container wrapper, so the whole area responds rather than one element inside it. - **Measured on a published page:** switching the wrapper link on added `tpgb-row-link` to the container, carrying the URL, the target and the nofollow setting as given.- **This one is free.** Measured with Nexter Blocks Pro deactivated, `tpgb-row-link` still rendered — unlike the container background effects, which all disappear.- **The whole container is the target**, including its padding, which is what makes a card feel like a card.- **A real link inside still wins.** A button or text link within the container is clicked instead of the wrapper, so a card can have one main destination and one secondary link. ## Limitations - **Nothing on screen says it is clickable.** Add a hover state — a shadow, a border, a colour change — or visitors will not know to try.- **Text inside cannot be selected comfortably**, because dragging across it starts a click. Avoid it for content people copy, such as an address or a code.- **Nested clickable containers fight each other.** Keep one wrapper link per card.- **Consider the screen reader experience.** A whole section announced as one link is only helpful if its text makes sense read end to end. ## Troubleshooting ### Clicking does nothing Check the URL is filled in as well as the toggle being on, and that you are on the published page rather than the editor. ### Only part of the section is clickable The link is probably on an inner container rather than the outer one. Put it on the container that holds the whole card. ### My button inside goes to the wrong place It does not — a link inside takes priority over the wrapper. If the button is unstyled it may just look like plain text; check which element you actually clicked. ### I cannot select the text any more That is the trade-off. If the text needs selecting, link the heading instead of the whole container. ## Related Docs - [Add a container in WordPress](https://nexterwp.com/docs/add-a-container-in-wordpress/)- [Create a grid container in WordPress](https://nexterwp.com/docs/create-grid-container-in-wordpress/)- [Make a sticky container in WordPress](https://nexterwp.com/docs/make-a-sticky-container-in-wordpress/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/) ## Frequently Asked Questions **Q: Why isn’t my clickable container working on the live page?** A: The wrapper link only works when the URL is filled in and the toggle is on, and it needs to be checked on the published page, not inside the editor. Nexter Blocks applies the link to the container wrapper, so a missing URL or testing in the wrong place makes it look broken. If it still feels dead, confirm you switched on the Container block under Nexter > Blocks first. **Q: How do I make a whole card clickable instead of just the heading?** A: Put the link on the Container block itself, not on a text element inside it. Nexter Blocks applies the URL to the container wrapper, which makes the full card area respond, including its padding. That is what turns an image, heading, and short text into one clear click target instead of a tiny link that feels awkward to use. **Q: Can I still use a button or text link inside a clickable container?** A: A real link inside still wins over the wrapper link. That means a button or text link inside the container will be clicked instead of sending people to the container’s main URL. This is useful when one card needs a primary destination plus a secondary action, but it also means you should check which element you actually clicked if something seems off. **Q: What should I do if only part of my section is clickable?** A: That usually means the link was added to an inner container instead of the outer one that holds the whole card. The clickable area follows the wrapper, so if you want the entire section to respond, put the link on the container that contains all of the card content. That keeps the hit area consistent and avoids weird dead zones. **Q: Is there a good way to make clickable containers obvious to visitors?** A: A clickable container has no built-in visual cue, so visitors may not realize it is interactive unless you add one. A hover state like a shadow, border, or colour change helps signal that the whole card is a link. Without that cue, people often only click headings or buttons because they do not expect an entire section to behave like one link. **Q: Should I use a clickable container for text people may want to copy?** A: That is usually a bad fit because dragging across text starts a click instead of a clean selection. Nexter Blocks treats the whole container as one link target, which makes copying awkward for things like an address or code. In those cases, linking just the heading is safer because it keeps selectable text usable while still giving you a clear destination.