Как сделать всю карточку кликабельной в Elementor Pro: 3 способа без плагинов

Обычно карточку в Elementor собирают из изображения, заголовка, текста и кнопки. А потом выясняется: пользователь кликает по свободному месту внутри карточки — и ничего не происходит. Интерфейс выглядит кликабельным, но кликабельной остаётся только маленькая кнопка.

Что выбрать: три способа за 30 секунд

Способ №1. Сделать ссылкой сам Container

Elementor поддерживает кликабельные Flexbox Containers нативно. То есть не нужен отдельный плагин, JavaScript и конструкция из прозрачной кнопки размером с пол-экрана. Последняя иногда работает, но выглядит как ремонт изолентой: держится, пока никто не трогает.

На выходе Elementor создаёт настоящий HTML-элемент <a href="...">. Это важно не только для удобства. Google рекомендует использовать обычные ссылки <a> с href, потому что такая ссылка понятна и пользователю, и поисковому роботу.

Но есть правило: внутри кликабельного Container не должно быть другой активной ссылки. Например, если внутри уже есть кнопка с URL, сначала уберите URL с кнопки. В Elementor Editor V4 вложенные ссылки блокируются прямо в редакторе; в Editor 3.x можно получить предупреждение, но плохая HTML-структура от этого хорошей не становится.

Способ №2. Динамическая карточка в Loop Grid и Meta Box

Этот вариант полезнее всего для каталогов, услуг, проектов и других CPT. Один шаблон карточки может автоматически вести на URL текущей записи — или на ссылку, сохранённую в отдельном поле Meta Box.

Вариант A: карточка ведёт на текущую запись

Теперь один шаблон работает для всех элементов Loop Grid. Заголовок, изображение и описание меняются динамически, а вся карточка ведёт на текущую запись.

Вариант B: URL хранится в Meta Box

Например, у проекта есть поле project_url: часть карточек ведёт на внутренние страницы, часть — на внешние кейсы. В Meta Box создайте поле типа URL, а затем подключите его через Dynamic Tags.

Для этого используется интеграция Meta Box с Elementor. Она выводит поля Meta Box в списке Dynamic Tags, поэтому URL не приходится прописывать вручную в каждой карточке.

Если вы только начинаете работать с динамическими шаблонами, сначала разберитесь, как Elementor устроен как конструктор WordPress. А если редактор зависает или не открывается, пригодится отдельная диагностика, почему не загружается Elementor и что проверить.

Способ №3. Растянуть обычную ссылку CSS-кодом

Иногда проект старый, карточка собрана не на Container или её HTML нельзя быстро переделать. Тогда можно оставить ссылку на заголовке и растянуть её кликабельную область на всю карточку через псевдоэлемент.

Это лучше JavaScript-редиректа: в HTML остаётся нормальная ссылка с href, которую может обработать поисковый робот.

.mp-click-card {
    position: relative;
}

.mp-click-card__link a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
}

.mp-click-card {
    transition: transform .2s ease, box-shadow .2s ease;
}

.mp-click-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .18);
}

Как откатить: удалите два CSS-класса и этот фрагмент CSS. Контент карточки останется на месте.

Почему я не советую делать карточку кликабельной через JavaScript

Скрипт вида window.location = ... кажется быстрым решением, но создаёт лишние вопросы: клавиатурная навигация, доступность, открытие ссылки в новой вкладке и обработка поисковыми роботами. Когда Elementor уже умеет создавать настоящий <a href>, JavaScript для обычной карточки — лишний посредник.

Google прямо рекомендует делать ссылки сканируемыми через <a href>. Поэтому при одинаковом результате я выбираю решение, где ссылка остаётся настоящей ссылкой.

Как сделать карточку визуально кликабельной

Технически ссылка может работать идеально, но пользователь должен ещё догадаться, что карточка нажимается. Добавьте три сигнала: cursor: pointer, небольшое движение карточки при hover и заметное изменение рамки/тени.

.mp-click-card {
    cursor: pointer;
    border: 1px solid rgba(50, 250, 0, .15);
}

.mp-click-card:hover {
    border-color: #32FA00;
    box-shadow: 0 0 28px rgba(50, 250, 0, .16);
}

Не превращайте hover в новогоднюю гирлянду. Карточка должна сообщать «я нажимаюсь», а не подавать сигнал ближайшему аэропорту.

Если Elementor на таких карточках начинает заметно тормозить, проблема обычно уже не в самой ссылке. Тогда имеет смысл отдельно проверить, что замедляет сайт на Elementor и как найти узкое место.

FAQ

Можно ли сделать кликабельным весь Container без кода?

Да. В актуальном Elementor Container можно превратить в HTML-тег a и указать ссылку в его настройках.

Можно ли внутри такой карточки оставить кнопку со ссылкой?

Нет, если сам Container уже является ссылкой. Получится вложенная ссылка. Оставьте кнопку визуально, но уберите у неё собственный URL.

Как сделать динамическую ссылку в Loop Grid?

В Link выберите Dynamic Tags → Post URL. Если URL хранится в Meta Box, используйте Meta Box Field через соответствующую интеграцию.

Что лучше для SEO: Container-link или JavaScript?

Предпочтительнее обычный HTML-анкор с href. Это стандартная сканируемая ссылка, которую Google рекомендует использовать для навигации.

Почему после добавления ссылки сломалась карточка?

Сначала проверьте вложенные ссылки. Частая причина — внешний Container уже стал <a>, а внутри остались ссылка изображения, заголовка или кнопки.