Interpult Studio. Создание и построение seo ссылок

Создать виджет наложения текста с помощью CSS


Вот пример виджета с наложением текста, созданного с помощью CSS.

Выполните следующие действия, чтобы создать аналогичный виджет для своего веб-сайта.

Простые шаги

Настройки виджета

  1. Создать виджет -> RSS

  2. URL фида ->


  3. Общий -> Ширина -> Отзывчивый/в пикселях -> Responsive

  4. Общий -> Стиль -> Thumbnail



  5. Общий -> Высота -> Сообщения -> 1

  6. Общий -> Прокрутить -> ON

  7. Общий -> Прокрутить -> Horizontal

  8. Общий -> Прокрутка -> Стрелка навигации -> ON

  9. Общий -> Прокрутка -> Автопрокрутка -> ON


  10. Общий -> Прокрутка -> Исчезающий переход -> ON

  11. Общий -> Дополнительные настройки -> Пользовательская ссылка CSS -> Показать пользовательский css

    
    Note: Copy CSS from below, paste into your CSS file [your-file-name.css] , make changes as per your need and upload to your server or in Dropbox [ Check How to host CSS on Dropbox Click here], copy the complete CSS path [e.g. http//example.com/css/your-file.css] and paste in "Custom CSS Link" field in Feedwind setting.
    
    /* Copy CSS From Here  */
    
    .fw-feed-item {
      padding: 0px;
    }
    
    .fw-feed-item:hover {
      padding: 0px;
    }
    
    .fw-feed-item-image-module {
      margin: 0 auto 0px auto;
      padding: 0;
      float: none;
      width: 100%;
      text-align: left;
    }
    
    .fw-feed-item-url {
      position: relative;
    }
    
    .fw-feed-item-image {
      margin: 0 auto;
      padding: 0;
      background-size: cover !important;
      overflow: hidden;
      height: 300px;
      width: 100% !important;
    }
    
    #fw-feed-items .fw-feed-item-description {
      margin: 0 2px 0 0;
      padding: 0 2px 0 0;
      word-wrap: break-word;
      line-height: 1.5;
      font-size: 16px;
      overflow: hidden;
    }
    
    .fw-feed-item-description,
    .fw-feed-item-description img {
      width: 100% !important;
    }
    
    .fw-feed-item-content-module {
      position: absolute;
      margin: 0;
      padding: 10px;
      top: 230px;
      height: 100%;
      background: #000000a6;
      -webkit-transition: all 0.5s linear;
      -moz-transition: all 0.5s linear;
      -o-transition: all 0.5s linear;
      transition: all 0.5s linear;
      width: 100%;
    }
    
    .fw-feed-item-content-module .fw-feed-item-description {
      display: none;
      -webkit-transition: all 0.5s linear;
      -moz-transition: all 0.5s linear;
      -o-transition: all 0.5s linear;
      transition: all 0.5s linear;
    }
    
    .fw-feed-item:hover .fw-feed-item-title {
      display: none;
    }
    
    .fw-feed-item:hover .fw-feed-item-content-module {
      margin: 0;
      padding: 10px;
      /* overflow: visible; */
      position: absolute;
      top: 0;
      background: #000000a6;
      height: 100%;
      width: 100%;
      left: 0;
    }
    
    .fw-feed-item:hover .fw-feed-item-content-module .fw-feed-item-description {
      display: block;
    }
    /*   CSS Ends Here  */
    


  12. Название фида -> Пользовательские -> ON


  13. Название фида -> Размер шрифта -> 16

  14. Название фида -> Цвета -> Цвет фона -> #000000

  15. Название фида -> Цвета -> Цвет шрифта -> #FFFFFF

  16. Название фида -> Дополнительные настройки -> Фоновое изображение -> https://ak9.picdn.net/shutterstock/videos/19733719/thumb/1.jpg


  17. Контент фида -> Размер -> Название товара -> 16

  18. Контент фида -> Размер -> Жирный -> OFF

  19. Контент фида -> Размер -> Содержание -> 14

  20. Контент фида -> Цвета -> Шрифт заголовка -> #FFFFFF

  21. Контент фида -> Цвета -> Шрифт содержимого -> #FFFFFF

  22. Контент фида -> Цвета -> Фон -> #080707

  23. Контент фида -> Расширенные настройки -> Время/Дата -> OFF

  24. Остальное оставить по умолчанию


Похожие сообщения



Source link

READ  Как улучшить свой SEO-рейтинг с помощью Interpult Studio • Interpult Studio