Как превратить элемент или раздел в интерактивную кнопку

Ссылка: http://up8.431.myftpupload.com/services/

Мне нужно превратить раздел на странице выше в интерактивные кнопки. Я использую WordPress с установленным плагином elementor.

Я уже добавил дополнительный CSS, чтобы разделы казались интерактивными. Мне просто нужно добавить актуальную функциональность. Я так понимаю, это делается с помощью javascript. Я еще не пробовал добавлять код javascript. Я тоже немного сомневаюсь, потому что не думаю, что у меня есть навыки и знания, чтобы делать это должным образом. Я не хочу просто начинать добавлять код везде. Прошлый опыт подсказал мне, что это плохая идея.

Я надеюсь, что кто-то, имеющий опыт работы с elementor, может мне помочь. Вот где я застрял: куда мне добавить javascript? Мне некуда добавить javascript, как будто для каждого элемента есть раздел для CSS. Стоит ли добавить его в настройщик (Внешний вид -> Настроить -> Пользовательский CSS / JS)? Стоит ли покупать плагин для кастомного javascript? Я уже присвоил каждому элементу собственный класс. Я мог бы прикрепить к этим классам немного JS.

РЕДАКТИРОВАТЬ: Подумал об этом еще немного. Я не думаю, что добавление JS в настройщик - лучший вариант. Я думаю, что любой CSS / JS, который я добавляю, должен быть эксклюзивным для верхней панели, верхнего и нижнего колонтитула. Я считаю, что эти разделы будут отображаться одинаково на каждой странице. Это оставляет мне возможность получить плагин JS. Это лучший способ?

Как лучше всего выполнить то, что мне нужно? У меня определенно нет навыков, чтобы понимать документацию разработчика Elementor. Для меня это слишком сложно. Вот почему я спрашиваю здесь.

Спасибо заранее


javascript wordpress css elementor
person Vladimir Rosca    schedule 11.02.2019    source источник
comment
Должна быть возможность добавить ссылку на конструктор Elementor нет?   -  person m4n0    schedule 11.02.2019
comment
Нет, я не вижу такой возможности. Моим первым побуждением было искать что-то подобное также из-за интуитивной природы elementor.   -  person Vladimir Rosca    schedule 12.02.2019
comment
Вот как я получаю. prnt.sc/mjwg5k и для кнопки: prnt.sc/mjwgud Я предлагаю вам сначала разобраться с проблемой плагина, если таковая имеется. Или вы также можете попробовать временный взлом jQuery, например: jQuery('[data-id=62f0f1fd] .elementor-column-wrap .elementor-widget-wrap').wrap('<a href="http://google.com" window="_new" />')   -  person m4n0    schedule 12.02.2019

Ответы (2)


arrow_upward
0
arrow_downward

если вы знаете, как это сделать, и это можно сделать с помощью javascript, вы можете сделать это следующим образом: перетащите виджет HTML - ›вставьте js между тегами сценария.

Я рекомендую использовать html в нижнем колонтитуле (созданном с помощью elementor), чтобы сценарий был доступен на всем сайте.

person mhdi    schedule 09.09.2020
comment
Это не дает ответа на вопрос. Как только у вас будет достаточная репутация, вы сможете комментировать любой пост; вместо этого предоставит ответы которые не требуют пояснений от автора вопроса. - Из отзыва - person Domino; 09.09.2020
comment
Он ищет способ добавить javascript в elementor. Единственный способ сделать это (без плагина) - это то, что я упомянул. Я не понимаю, как вы нашли ответ как «нет»! - person mhdi; 11.09.2020

arrow_upward
0
arrow_downward

Мне удалось найти способ сделать это без каких-либо плагинов или js, просто CSS:

Сначала нам нужно установить минимальную высоту для нашего раздела / столбца (я установил 50vh);

затем нам нужно добавить элемент со ссылкой / тегом (например, Title Widget) и установить для него класс CSS (в моем примере .mhdizmni_title);

теперь нам нужно написать немного css:

.mhdizmni_title a:after {
content: "";
display: block !IMPORTANT;
position: absolute;
height: 50vh;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
}
person mhdi    schedule 19.09.2020