Блок "Word-author"

Описание

Блок "Word-author" - это блок с ссылкой на покупку или пожертвование, ссылка на онлайн-магазин и кнопки соц. сецей. В библиотеке доступны вариант с ссылкой на покупку плагина или вариант с ссылкой пожертвовать.

Демо с блоком "Купить"

Для использования блока с ссылкой купить требуется подключить следующие LESS файлы.

						   
@import "../../blocks/word-author/word-author.less"; 
@import "../../blocks/word-author/modifiers/word-author_claret/word-author_claret.less"; 
						   
					

Важно! Путь указан относительно текущего файла Вполне возможно, что вам потребуется указать свой.

Указать пути к иконкам в своем LESS файле.

						   
.word-author__buy:before {
  background-image: url("../../blocks/word-author/dollar_claret.svg");
}

.word-author__look-projects:before{ 
  background-image: url("../../blocks/word-author/eye.svg");
} 

.word-author__share:before{
  background-image: url("../../blocks/word-author/share.svg");
}
						   
					

Важно! Путь указан относительно текущего файла Вполне возможно, что вам потребуется указать свой.

Далее требуется скопировать следующую разметку и вставить в свой файл.

											
<div class="word-author word-author_claret">
 <div class="word-author__inner">
  <div class="word-author__layout">
   <a href="#0" class="world-author__link word-author__iconbox word-author__buy word-author__buy_claret" target="blank">Buy</a>
  </div>
  <div class="word-author__layout">
   <a href="https://codecanyon.net/user/melnik9099" class="world-author__link word-author__iconbox word-author__look-projects">All Projects</a> 
  </div>
  <div class="word-author__layout">
   <span class="word-author__iconbox word-author__share">Share</span> 
   <div class="yashare-auto-init" data-yashareL10n="en"
   data-yashareType="small" data-yashareQuickServices="twitter,gplus,facebook" data-yashareTheme="counter"></div>
  </div>
 </div>
</div>
	
						
					

После сделанных шагов вы должны увидеть в браузере следующий блок.

Важно! Для демонстрации блока я добавил путь к иконки background-image: url("../../blocks/icons/dollar/dollar_claret.svg"). При инициализации блока нужно будет указать путь относительно вашей файловой структуры.

Демо с блоком "Пожертвовать"

Для использования блока требуется подключить следующие LESS файлы.

						
@import "../../blocks/word-author/word-author.less"; 
@import "../../blocks/word-author/modifiers/word-author_claret/word-author_claret.less"; 
@import "../../blocks/donate/donate.less"; 						
						
					

Указать пути к иконкам в своем LESS файле.

						   
.word-author__look-projects:before{ 
  background-image: url("../../blocks/word-author/eye.svg");
} 

.word-author__share:before{
  background-image: url("../../blocks/word-author/share.svg");
}
						   
					

Важно! Путь указан относительно текущего файла Вполне возможно, что вам потребуется указать свой.

Далее скопируйте следующий HTML и вставьте в свой файл.

						
<div class="word-author word-author_claret">
 <div class="word-author__inner">
  <div class="word-author__layout">
   <a href="#0" class="world-author__link word-author__iconbox donate" target="blank">Donate</a>
  </div>
  <div class="word-author__layout">
   <a href="https://codecanyon.net/user/melnik9099" class="world-author__link word-author__iconbox word-author__look-projects">All Projects</a> 
  </div>
  <div class="word-author__layout">
   <span class="word-author__iconbox word-author__share">Share</span> 
   <div class="yashare-auto-init" data-yashareL10n="en"
   data-yashareType="small" data-yashareQuickServices="twitter,gplus,facebook" data-yashareTheme="counter"></div>
  </div>
 </div>
</div>
	
						   
					

В результате в браузере вы должны увидеть следующий блок.