#css #wordpress #elementor
#css #wordpress #elementor
Вопрос:
Вот веб-сайт, который имеет эффект, который я ищу:https://wehaulmo.com /
Ссылка «Связаться сегодня» в каждом разделе — это то, на что я конкретно ссылаюсь здесь.
Я не уверен, что это пользовательский CSS, который использовался, или на самом деле есть виджет, который помогает создать этот эффект в Elementor. Я могу создать этот эффект, просто используя index.html и style.css без проблем, но опять же, я пытаюсь понять, как это сделать в Elementor для сайтов WordPress.
Должно быть, я здесь чего-то не хватает, потому что этот эффект довольно стандартный, и я ни за что на свете не смогу найти виджет / элемент в Elementor, который может создать этот эффект подчеркивания.
Если кто-нибудь из вас является гуру Elementor, я был бы очень признателен за вашу помощь.
Спасибо.
Ответ №1:
В любое время, когда вам нужно сделать что-то внешнее на странице Elementor, что невозможно сделать с помощью виджетов, вы можете использовать несколько способов добавить туда немного css (и даже JS).
1 — HTML ВИДЖЕТ (работает без Elementor Pro)
Вставьте HTML-виджет туда, где вам нужен ваш элемент. Виджет HTML предлагает текстовую область на вкладке «содержимое». В этой текстовой области вы можете написать HTML-код, но вы также можете добавить CSS с помощью <style></style> тега. Например, так:
<p class="demo">Hello!</p>
<style>
.demo{
color: blue;
}
</style>
Вы даже можете добавить <script></script> тег, если вам нужен Javascript.
Кроме того, у каждого виджета интерфейса Elementor есть вкладка «Дополнительно», в которой вы можете найти раздел «Дополнительно» (первый раздел вкладки «Дополнительно»). В этом разделе есть два поля с надписями «CSS ID» и «CSS Class», которые позволяют вам добавлять идентификатор и / или класс к этому элементу. Затем вы можете ссылаться на этот класс или идентификатор в вашем CSS и Javascript с помощью DOM.
2 — Пользовательский CSS (только для Pro)
Каждый (почти каждый) виджет в Elementor имеет раздел «пользовательский CSS» на вкладке «Дополнительно». Имейте в виду, что для доступа к этому разделу вам нужен Elementor Pro. Вы можете написать весь CSS, который вам нужен, в этом разделе.
Кроме того, в этой текстовой области вы можете ссылаться на редактируемый элемент, не требуя его имени класса или идентификатора, просто используя ‘selector’ как таковой:
selector{
margin: 0 auto;
}
Используйте «селектор» для целевого элемента оболочки
3 — Плагины
Существует множество плагинов, которые созданы специально для добавления кода в Elementor и другие редакторы с помощью коротких кодов или с помощью других методов.
В вашем случае
В вашем случае, используя первый описанный мной способ (HTML WIDGET), вам нужно будет написать что-то подобное в текстовом поле вашего HTML виджета :
<a href="#" class="demo">REACH OUT TODAY</a>
<style>
.demo {
color: #f89c27;
font-size: 24px;
letter-spacing: 0.20em;
position: relative;
display: inline-block;
}
.demo:hover{
color: #f89c27;
}
.demo:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
position: absolute;
display: block;
height: 2px;
left: 50%;
background: #f89c27;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
.demo:hover:after {
left: 0;
width: 100%;
}
</style>
Комментарии:
1. Я увидел, что есть html-виджет, и рассматривал это, но когда я проверил элемент на веб-сайте, он показывает, что ссылка использует заголовок Elementor вместо этого. В любом случае, я попробую. Спасибо за вашу помощь.
2. Да, я тоже проверил это. Однако, как я упоминал, вы можете присвоить класс или идентификатор элементу на его вкладке Дополнительно. Я предполагаю, что это то, что было сделано, а затем css был добавлен из раздела custom CSS (только для Pro). Вероятно, вы могли бы присвоить заголовку класс, а затем создать html-виджет, содержащий только CSS, чтобы иметь тот же эффект, если у вас нет pro. Я надеюсь, вы найдете способ сделать это, который вам подходит.
3. У меня временно есть pro. Еще раз спасибо за помощь.
4. Сладко! Я позаботился об этом! Еще раз спасибо, чувак. Мне просто нужно было создать заголовок Elementor, присвоить ему идентификатор класса CSS «подчеркивание», затем просто добавить пользовательский CSS на вкладку Дополнительно, как вы сказали, и это было довольно просто.
5. Рад, что смог помочь человеку! Я нахожу пользовательскую вкладку CSS очень полезной, если у вас есть pro. Жаль, что нет эквивалента javascript. В любом случае, поскольку вы упомянули, что только начали использовать Elmentor, не стесняйтесь публиковать любые другие вопросы, связанные с Elementor, я просматриваю тег elementor почти ежедневно. 😉
Ответ №2:
Спасибо Shiverz за то, что указал мне правильное направление здесь, это мне очень помогло. Еще раз спасибо, чувак.
Вот HTML и CSS-код, который сработал для меня:
/*** Styling Underline Hyperlink ***/
/* Creating Underline */
.underline.elementor-widget-heading .elementor-heading-title>a {
position: relative;
}
.underline.elementor-widget-heading .elementor-heading-title>a:after {
content: '';
width: 0%;
height: 2px;
background-color: #FAC074;
position: absolute;
bottom: -10px;
left: 50%;
transform: translatex(-50%);
-webkit-transition: width .4s;
transition: width .4s;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
}
.underline.elementor-widget-heading .elementor-heading-title>a:hover:after {
width: 90%;
-webkit-transition: width .4s;
transition: width .4s;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
}
/** Creating Arrow **/
.underline.elementor-widget-heading .elementor-heading-title>a:before {
content: url(http://ronratzlaff.wpengine.com/wp-content/uploads/2020/09/icon-arrow-right.svg);
width: 1px;
height: 1px;
position: absolute;
bottom: 15px;
right: -12px;
} <div class="elementor-element elementor-element-c3ae88a underline elementor-widget elementor-widget-heading" data-id="c3ae88a" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<div class="elementor-heading-title elementor-size-default"><a href="#request">Reach Out Today</a></div>
</div>
</div>