How-to
~ 10 мин читать
56442 просмотры
оценить
11 октября 2017

Smart-элементы. Сокращаем время на создание однотипных писем за счет их автоматизации

Stripo / Blog / Smart-элементы. Сокращаем время на создание однотипных писем за счет их автоматизации

Создавая новый шаблон для рассылки, часто приходится делать одни и те же действия. Например, представьте: у Вас есть сайт, на котором опубликованы товары. Если Вам нужно отправить письмо об акции с ссылкой на 5 товаров из вашего сайта, нужно скачать 5-ть картинок, названий товаров, их цен и ссылок, чтобы указать их под кнопкой “Купить”. Эти скачанные объекты, как правило, применяются в письме по нескольку раз, например, название товара используется 3 раза: в поле “названия товара”, для title и alt-текста картинки товара. То же самое с ссылкой, ее мы применяем для кнопки, для картинки, для заголовка и т.д. А завтра новая акция и снова нужно повторять описанные выше шаги. А что если товаров не 5, а 50? Это боль, не так ли?!

Для того, чтобы сократить потерю Вашего времени на выполнение рутинных операций мы создали новую сущность — smart-элемент, который позволяет автоматизировать этот процесс! Хотя, если быть честным, вначале придется немного “попотеть”, чтобы потом происходила магия.

И так, что такое smart-элемент?

Smart-элемент — это структура, контейнер или полоса, в которых присутствуют все те же базовые блоки, как Картинка, Текст, Кнопка и так далее, но для них активирована опция получения данных через переменные из внешних источников. Вы один раз настраиваете контент, в котором будут расположены в нужном порядке заголовок товара, картинка, цена, описание и кнопка «Купить», а также их внешний вид. Далее добавляете переменные, устанавливаете правила откуда брать значения и куда их применять и все — smart-элемент готов к использованию. Вам нужно всего лишь указать ссылку на страницу продукта на сайте и система самостоятельно “вытащит” с нее нужные нам данные и применит их в указанных местах Вашего письма. В конечном счете, создавая 5 карточек товара Вы значительно экономите время, указав всего 5-ть разных ссылок — остальное система делает самостоятельно!

Дополнительно стоить отметить, что система позволяет настроить преображение данных через модификаторы, например, чтобы полученное название товара длиной в 150 символов обрезалось до первых 50 символов и т.д.

Для этого вам нужно:

  • в поле Modifier 1 ввести следующую комбинацию: 
(.{0,50})(.{0,}) 

Где 50 - это количествое отображаемых символов. Это число вы можете заменить необходимым вам.

  • в поле Replacement ввести комбинацию: $1.

Stripo_Smart-Elements_Entering Info in Modifier1 Field

Цена на данный момент отображается в том же формате, что и на вашем сайте. 

Давайте детальнее рассмотрим все преимущества smart-элемента на примере.

Пример создания смарт-контейнера для карточки товара

Для примера давайте рассмотрим создание карточки товара, расположенного на сайте Boohoo. Для карточки из этого сайта мне нужны будут картинка продукта, его название и цена.

В редакторе Stripo бросаем структуру из двух контейнеров (сразу оговорюсь: это на Ваше личное усмотрение, сколько именно контейнеров в структуре Вам нужно, столько и добавляйте). В первый контейнер добавляю нужные мне блоки (Картинка, два блока Текст, Кнопка) — делаю “скелет” карточки товара.

Далее, выделяю контейнер с базовыми блоками (для этого кликаю по синей лейбе “Контейнер” сверху), выбираю в боковой панели табу “Данные” и кликаю на кнопку “Начать” для активации Smart-свойства.

umnije-bloki-v-email-verstke

В результате, вместо кнопки отобразится визуальный конструктор, в котором мы можем:

  • настроить все возможные правила получения значений, применения их через переменные к нужным блокам внутри моего письма. Для этого нам пригодится вкладка “Конфигурация”;
  • просмотреть и откорректировать вручную (при желании) полученные значения настроенных переменных из сайта во вкладке “Внешний вид”.

И так, приступим к конфигурации — добавим переменные. Для удобства пользования, по нажатию на иконку добавления переменной, будет показан список самых популярных, которые чаще всего могут быть у Товаров/Продуктов или у Блоговых записей. Кстати, обратите внимание, что как только мы активируем smart-свойство любому объекту, по умолчанию создается переменная URL, которую удалить нельзя.

bloki-email-verstka

Так как я задумала сделать карточку с картинкой, названием и ценой, я добавляю переменные Name, Image, Price из секции Product. Каждой добавленной переменной создается своя табка для конфигурации. Итого их у меня получается четыре.

smart-bloki-stripo-email-redactor

Далее нужно настроить правила получения значения для этих переменных и их применения в нашем smart-элементе. Для этого переходим к контролу Matching rules, который состоит из двух вкладок:

  • Внутренние правила. Тут мы будем задавать правила куда именно нужно применить уже полученные значения переменных в нашем smart-элементе.
  • Внешние правила. В нем настраиваются правила, откуда нужно получить значения переменных с нужного нам сайта. Также здесь есть контролы, позволяющие преобразовать полученное значение через регулярные выражения или применяя различные виды форматирования.

Правила для каждой вкладки настраиваются через общепринятый механизм поиска элементов в HTML через CSS-селекторы и Атрибуты, о которых более детально можно прочитать здесь.

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

Переменная URL

У этой переменной есть контрол “Динамический сайт”, который по умолчанию выключен. Если сайт, с которого Вы хотите получить значения для любой из переменных smart-элемента, является динамическим — отметьте этот контрол, поставив чекбокс напротив.

Динамический сайт — сайт, содержимое которого создается на КЛИЕНТСКОЙ стороне javascript-ом, т.е. получив HTML страницы на ней нельзя найти нужные элементы, не выполнив перед этим все положенные скрипты. Например, цена рассчитывается на лету и т.п.

Сайт, с которого я собираюсь получить значения, не является динамическим, поэтому я пропускаю контрол и перехожу сразу к Matching rules.

Так как мне нужно, чтобы в smart-элементе были ссылки на сайт по клику на кнопку “Купить” и картинку продукта, во вкладке “Внутренние правила” я прописываю правило, чтоб значение переменной устанавливалось всем элементам ‘a’ (поле CSS селектор) в атрибут ‘href’ (поле Атрибут).

email-blocks-smart-layout

Обратите внимание, что для этой переменной не доступна вкладка “Внешних правил”, так как по сути сама ссылка на сайт и является источником получения данных.

Переменная для картинки продукта

Установим для начала правило получения картинки продукта для вкладки “Внешнее правило”. Для этого открываем страницу сайта с продуктом, наводим курсор на картинку, кликаем правой кнопкой мыши для открытия контекстного меню и выбираем пункт “Проверить объект” (обратите внимание что этот пункт меню может называться иначе на Вашем компьютере, например “Исследовать”). В результате откроется консоль, в которой мы увидим CSS-селекторы с атрибутами.

code-email-layout-stripo

В моем случае, правило для получения картинки получилось следующим:

CSS-селектор: div#product-primary-image.product-primary-image.js-product-primary-image a
Атрибут: href

Устанавливаем их в соответствующие поля вкладки “Внешние правила”. Для вкладки “Внутренние правила” я указываю:

CSS-селектор: .esd-block-image .adapt-img
Атрибут: src

Благодаря этому правилу, полученное значение картинки будет применено для атрибута ‘src’, который расположен в блоке “Картинка”.

Переменные для названия продукта и цены

По сути, принцип действия тут такой же, как мы уже сделали для картинки. Только есть некоторая хитрость, которой я хочу с Вами поделиться.

Как Вы помните, я добавила два блока “Текст” в наш smart-элемент. Первый я буду использовать для названия, а второй — для цены. Причем контент для первого блока будет заполняться только из сайта, а для блока с ценой: часть контента будет браться с сайта, а часть будет константой. Например, вот так:

stripo-umnije-bloki

Во втором текстовом блоке выделенное слово “Price:” будет константой, а текст далее будет заменяться на значение, полученной из сайта.

Чтобы наш smart-элемент смог различить эти блоки (какой из текстовых полей мы хотим сделать для названия, а какой для цены), а также понимать куда именно применять полученный контент — нужно каждому из них добавить свой уникальный класс в редакторе кода HTML. В моем случае, это будут классы esd-p-name и esd-p-price.

HTML-code-editor

Теперь заполняем поочередно для каждой переменной внутренние и внешние правила для контрола Matching rules.

В моем случае,

Для переменной Name

  • внутренние правила:

CSS-селектор: .esd-block-text.esd-p-name
Атрибут: пусто
CSS-селектор 2: .esd-block-image a img
Атрибут: title
CSS-селектор 3: .esd-block-image a img
Атрибут: alt

  • внешние правила:

CSS-селектор: h1.product-name.js-product-name
Атрибут: пусто

Для переменной Price

  • внутренние правила

CSS-селектор: .esd-p-price
Атрибут: пусто

  • внешние правила:

CSS-селектор: span[itemprop=price]
Атрибут: пусто

Вот и все. Самое сложное позади! Теперь осталось дело за малым — получить значения по ссылке с внешнего сайта. Для этого просто вставьте ссылку в поле Link и дождитесь нескольких секунд для отображения полученных данных.

stripo-kartichki-tovarov

Вуаля — smart-элемент сделал свое дело! В шаблоне отображаются имя, картинка и цена продукта с нашего сайта. Теперь осталось немного подредактировать стили карточки товара. Смотрите, что у меня вышло!

block-tovarov-v-email

Во вкладке «Внешний вид» мы видим все данные, которые отображаются у нас в шаблоне, тут мы можем их откорректировать, не переживая, что это как-то повлияет на стили форматирования.

stripo-smart-bloki-knopka

Так как наш smart-элемент уже сконфигурирован, для создания аналогичной карточки товара с другой страницы этого сайта, надо всего-лишь указать другой путь в поле Link и карточка товара будет заполнена новыми данными автоматически, а Ваше время будет значительно сэкономлено!

devushki-kartochka-tovarov

Закончить эту статью хочется приятным бонусом — во всех наших бесплатных шаблонах уже есть подготовленные нами smart-элементы. В них уже настроены внутренние правила, поэтому для их использования Вам достаточно указать внешние правила в соответсвии с Вашим сайтом. Так как внешние правила стандартные для большинства сайтов, мы вскоре добавим их в качестве примеров в систему для их автоматической подстановки.

Phúc Dương 2 месяца назад

Hello, please help pulling main photo, price, name from: https://selly.vn/product/6225745b9da17eda62fb290e I have tried many ways with instruction but it was not worked

Alexander Zelenskiy прокомментировал Phúc Dương 2 месяца назад

Hello, I want to bring to your attention that smart elements aren't the universal solution for all possible cases. Unfortunately, some sites don't allow get information from them using smart containers, as it happens with this site I assume.

Jose Basto 11 месяцев назад

Hello, please help pulling main photo, price and name from: https://loja.misterpc.pt/DELL-LATITUDE-E6330-13.3-i5-3320m-6GB-120GB-SSD-OFERTA-DE-MALA Thanks.

Aleksandr Zelenskiy прокомментировал Jose Basto 11 месяцев назад

Hello, You can try to get the image, name, and price via the next external attributes: - image CSS selector meta[property='og:image'] Attribute content https://skr.sh/s8mMuXxz6cF - name CSS selector .title-product https://skr.sh/s8mWqjDYnJ5 - price CSS selector .price-new https://skr.sh/s8msNx9lVA6

АромаАп Парфюмерия 1 год назад

Добрый день! Какие данные нужны, чтобы вытянуть картинку(основное фото), цену и название с конкретным объемом со страницы подобного типа https://aromaup.ru/parfyumeriya/muzhskie-duhi/banana-republic-wildblue-noir/ ? Заранее спасибо

Aleksandr Zelenskiy прокомментировал АромаАп Парфюмерия 1 год назад

Добрый день. С данного сайта получилось извлечь картинку, цену и название используя следующие внешние селекторы: .ty-product-block-title для названия - http://prntscr.com/117725t meta[itemprop="price"] и content атрибут для цены - http://prntscr.com/11771un meta[property="og:image"] и content атрибут для картинки - http://prntscr.com/11772iw Пожалуйста, обратите внимание что данный сайт использует изображения в формате webp. Они могут не отображаться в некоторых почтовых сервисам. Мы используем jpg, png и gif изображения как наиболее кросс-платформенные.

АромаАп Парфюмерия прокомментировал Aleksandr Zelenskiy 1 год назад

Александр, мы сменили фото на формат jpg. Помогите, пожалуйста, еще с парой моментов. 1 - https://prnt.sc/117chj6 вы можете указать параметры для получения этого фото? А то мы очень тяжелое фото детализированное получили пердыдущим способом. 2. Как получить текст с объемом отсюда https://prnt.sc/117ckt3 ?Именно от первой строки(вариация товара с объемом) в карточке

Aleksandr Zelenskiy прокомментировал АромаАп Парфюмерия 1 год назад

1. Насколько я могу судить, картинка с меньшим разрешением на данном сайте не содержит каких-то уникальных классов. Классы использующиеся для изображении применяются на странице множество раз - http://prntscr.com/117ded6. Поэтому будет сложно получить значение именно из нужного тега. Если тег данной картинки будет содержать какой-то уникальный класс (не повторяющийся на странице) или ID это может помочь. 2. Можно попробовать использовать .ty-product-options-content > a > strong селектор Однако, как я понимаю тут похожая ситуация с первым пунктом, т.к. для данного элемента не используются уникальные классы и селекторы получают все значения доступные для данного класса - http://prntscr.com/117djoz

АромаАп Парфюмерия прокомментировал Aleksandr Zelenskiy 1 год назад

Спасибо за помощь! Видимо, придется в отдельном формате фото выводить под это дело

Владимир Трепак 1 год назад

День добрый. Помогите пожалуйста с селекторами для картинки. Пробовал селекторы в контейнере с картинкой не работает. https://iherb.in.ua/houston-enzymes-trienza-90-kapsul.html

Aleksandr Zelenskiy прокомментировал Владимир Трепак 1 год назад

Добрый день. По данной ссылке удалось получить картинку используя следующие CSS селекторы: внутренний .adapt-img и атрибут src http://prntscr.com/10ou3ms внешний .imagezoom и атрибут href http://prntscr.com/10ou6g8

Александр Бондаренко 1 год назад

Добрый день! Вот есть товар https://fitomarket.com.ua/pravenor-forte-kaps-60 . Атрибут href, а CSS-селектор какой использовать?

Руслан Трепухалов прокомментировал Александр Бондаренко 1 год назад

Здравствуйте. Для изображение можете использовать: CSS селектор: div.main-imagemain-image-wrapper > a > img Атрибут: src

Роман Харьков 1 год назад

Здраствуйте. Помогите с селекторами https://pro.auto/katalog/tjagachi/4x2/man-tga-18-390-id-13076/ . И еще вопрос: Можно ли как-нибудь автоматизировать. Чтобы данные брались не из товарной карточки, а со страницы с каталогом, чтобы в рассылку не попадали проданные товары?

Aleksandr Zelenskiy прокомментировал Роман Харьков 1 год назад

Добрый день. Используя .vehicleName .priceIn .vehicleSpecifications внешние селекторы удалось получить название товара, цену и его описание. Насколько я могу судить, используя смарт-элементы получить картинки с данного сайта не получится. По поводу вашего вопроса об автоматизации. Могли бы вы уточнить адрес страницы с которой необходимо получить данные? Спасибо.

Daniel Herenyi 1 год назад

Подскажите какие селекторы нужно указать для названия товара и фото Для карточки товара https://kosmetika-proff.ru/catalog/detail/modeliruyushchiy_krem_filler_dlya_gub/

Aleksandr Zelenskiy прокомментировал Daniel Herenyi 1 год назад

Добрый день. Название товара и фото с данного сайта получилось "подтянуть" используя следующие внешние селекторы: h1[itemprop='name'] для названия - http://prntscr.com/uprxrk а также .img-target и атрибут src для фото. Пожалуйста, обратите внимание что для фото понадобится использование модификатора /upload/ и замены https://kosmetika-proff.ru/upload/ http://prntscr.com/uprzxq

Daniel Herenyi прокомментировал Aleksandr Zelenskiy 1 год назад

Благодарю за опаеративный ответ. Очень помогли. По аналогии попробовал добавить цену и старую цену.Почемуто и то и другое задваивается. https://yadi.sk/i/dgqsms4ZYUGfjA

Daniel Herenyi прокомментировал Daniel Herenyi 1 год назад

Для старой цены указывал внешний селектор - s А для цены - span.price

Aleksandr Zelenskiy прокомментировал Daniel Herenyi 1 год назад

Чтобы избежать "задваивания", можно попробовать использовать следующие внешние селекторы. Для цены: meta[itemprop='price'] и атрибут content https://prnt.sc/upt347 Для старой цены: .element-price-price-old.x-element-price-price-old http://prntscr.com/upt49z

Daniel Herenyi прокомментировал Aleksandr Zelenskiy 1 год назад

Спасибо!!!

Татьяна NSP 1 год назад

Добрый день! А получится использовать эмейл рассылку с подхватом картинок и цен для сайта https://nspdoma.com.ua/colloidal-silver.php

Руслан Трепухалов прокомментировал Татьяна NSP 1 год назад

Добрый день. Напишите пожалуйста к нам в службу поддержки и мы поможем настроить Вам Smart-Container

НоваФлора Магазин 1 год назад

Добрый день. Никак не могу подобрать селекторы для картинок и стоимости для https://novaflora.com.ua/tyulpan-double-beauty-of-apeldoorn Заранее благодарен за помощь

Aleksandr Zelenskiy прокомментировал НоваФлора Магазин 1 год назад

Добрый день. Чтобы "подтянуть" картинку и стоимость вы можете попробовать использовать следующие внешние селекторы: meta[property='og:image'] с атрибутом content http://prntscr.com/t920mq #main-product-wrapper > div.row.product-info-row > div.col-md-5.col-product-info > div.product_header_container.clearfix > div > div:nth-child(3) > div > span без атрибута http://prntscr.com/t920v3

Sergey Stoyanov 2 года назад

День добрый. Помогите пожалуйста с селекторами для картинки. Перебрал селекторы всех в контейнере с картинкой ничего не работает. https://mitsudiesel.su/catalog/diesel/ad-30-t400/ Спасибо.

Aleksandr Zelenskiy прокомментировал Sergey Stoyanov 2 года назад

Добрый день. Для картинок на приведенном сайте используются относительные ссылки вместо абсолютных, поэтому потребуется использовать модификатор и следующий внешний CSS селектор: .wrp_img img атрибут src модификатор assets замещение https://mitsudiesel.su/assets http://prntscr.com/ss4f8i

Anya Stepanova 2 года назад

Здравствуйте! Подскажите, пожалуйста, какой селектор взять с сайта https://usmall.ru/product/734594-ribbed-stretch-viscose-tank-top-michael-kors Можно ли добавить определенную картинку из слайдера? Спасибо

Aleksandr Zelenskiy прокомментировал Anya Stepanova 2 года назад

Добрый день. Основную картинку удалось получить с использованием .p-product__thumb.__active img селектора и src аттрибута - http://prntscr.com/sokhku Вторую картинку из слайдера удалось "втянуть" с помощью следующего селектора: #__layout > div > div > section > div > div.grid.small-collapse > div.item.item--images > div.ui-scroller.p-product__thumb-list > div > div:nth-child(2) > img и того же атрибута - http://prntscr.com/sokiyf

Anya Stepanova прокомментировал Aleksandr Zelenskiy 2 года назад

Делаю так, как вы написали. Приходят картинки других вариантов продукта - другого цвета вещи :( Вытянуть заглавную картинку слайдера вообще невозожмно?

Aleksandr Zelenskiy прокомментировал Anya Stepanova 2 года назад

Вы можете "вытянуть" заглавную картинку слайдера с помощью .p-product__thumb.__active img селектора, как я и писал выше. Пожалуйста, обратите внимание что если сайт использует разное расположение элементов и разные ID и классы на разных страницах (отличающихся от расположения по ссылке которую вы привели выше) то селекторы могут не работать универсально для всех страниц. Если вы хотите и уточните почтовый ящик на который зарегестрирован ваш аккаунт в Страйпо, я могу добавить в ваш аккаунт письмо с примером работы описанных мною селекторов.

Anya Stepanova прокомментировал Aleksandr Zelenskiy 2 года назад

Я пробую сделать так и не всегда получаю данные из слайдера на странице. У товаров могут быть разные варианты по цвету и по этому селектору показывается карточка товара не из слайдера страницы, а из какого-то товара. Также есть вариант, что цена на разный цвет отличается, поэтому по селектору цены передается цена не того варианта. моя почта hello@anyastepanova.ru.

Анна Кузнецова прокомментировал Anya Stepanova 2 года назад

Анна, Спасибо. По Вашему вопросу связались с Вами в почте.

Anya Stepanova прокомментировал Aleksandr Zelenskiy 2 года назад

Спасибо большое!

Matthias Schwindt 2 года назад

How can I pull a image url which is includet as background-image out of my website?

Aleksandr Zelenskiy прокомментировал Matthias Schwindt 2 года назад

Hello, Please be advised that background images are creating via CSS styles. Our smart elements meant to get data within HTML tags but can't fetch CSS styles out of code, including background styles. You can add background images to an email only manually.

Paron Antonyan 2 года назад

Здравствуйте! Бьемся больше часа, попробовали разные способы по логике, приведенной ниже в комментариях, не получается. Помогите нам с селектором на картинку, пожалуйста. https://kidsavenue.ru/catalog/malchiki/odezhda_1/longslivy_1/36020/

Aleksandr Zelenskiy прокомментировал Paron Antonyan 2 года назад

Добрый день. По данной ссылке картинку можно подгрузить используя следующие селекторы\параметры: внешний #bx_117848907_36020_pict атрибут src внутренний .myImage атрибут src На скриншотах: http://prntscr.com/qscfe3 http://prntscr.com/qscfmy Важно отметить. На сайте используется относительный путь для картинки, поэтому необходимо использовать модификатор /upload/ с заменой на https://kidsavenue.ru/upload/ http://prntscr.com/qscggp

К. Зайцева 2 года назад

Здравствуйте, подскажите какой селектор ввести чтобы выгрузить картинку https://flytechnology.ua/dji-agras-mg-1p

Руслан Трепухалов прокомментировал К. Зайцева 2 года назад

Здравствуйте, для Вашего сайта Вам нужно указать селектор #content > div > div.us-product-top.d-flex > div.us-product-left > div.us-product-photo-main.mb-4 > a > img Атрибут src Пример: http://prntscr.com/qc1kyq и выбрать динамический сайт в пункте URL http://prntscr.com/qc1h4a Но так как на Вашем сайте используются изображения формата .webp http://prntscr.com/qc1i3e мы не гарантируем что будет отображаться изображения в почтовых клиентах, так как нет подержки рендеринга изображений в формате .webp. Мы рекомендуем Вам использовать на Вашем сайте форматы изображений такие как jpg, png, gif.

Артём Русев 2 года назад

Добрый день, подскажите какой селектор ввести чтобы выгрузить картинку https://sayyes.com.ua/skrab-dlya-tela/10943-kofeynyy-skrab-joko-blend-cherry-200-g.html

Aleksandr Zelenskiy прокомментировал Артём Русев 2 года назад

Добрый день. По данной ссылке картинку получится подгрузить используя следующий внутренний и внешний CSS селекторы: внутренний .adapt-img атрибут src внешний head > meta:nth-child(13) атрибут content На скриншотах: http://prntscr.com/q25763 http://prntscr.com/q257im

Evgenii Romanenkov 2 года назад

Здравствуйте! Пробовал различные варианты для вытягивания картинки. Ничего не удалось. Например пробовал такие селекторы с href, img, src div#main-photo.d-doned-sm-block.zoom.card-image-zoom.card-zoom-small div.owl-item.active>div:nth-child(1)>a:nth-child(1) div.owl-item>div:nth-child(1)>a:nth-child(1) div.owl-item>div>a div.owl-item a:nth-child(1) div.owl-item a Какой селектор ввести чтобы выгрузить картинку отсюда https://wellmax.eu/ru/goods/67407 ?

Aleksandr Zelenskiy прокомментировал Evgenii Romanenkov 2 года назад

Добрый день. В вашем случае, картинку получится подгрузить, используя следующий внутренний и внешний CSS селекторы: внутренний .esd-block-image img атрибут src внешний #card-main-photo атрибут src На скриншотах: http://prntscr.com/q0kk0u http://prntscr.com/q0kjoy

Evgenii Romanenkov прокомментировал Aleksandr Zelenskiy 2 года назад

Получилось. Спасибо за оперативный ответ)

Людвик Сафарян 2 года назад

Добрый день! столкнулся с ситуацией в смарт контенте, у меня на сайты все ссылки на картинки начинаются с папки. /upload/resize_cache/iblock/6cd/500_500_19c25237da8d22b6fe15e058ccab634fe/6cd1af7c8c4dee53d44c1849e9757467.jpg , соответственно не открывается картинка, как сделать так чтобы впереди добавилось название сайта чтобы картинка подгружался ?

Aleksandr Zelenskiy прокомментировал Людвик Сафарян 2 года назад

В Вашем случае, картинку получится подгрузить, используя следующий CSS селектор meta[property=og:image] и атрибут content Пожалуйста, посмотрите как это выглядит на скриншоте https://prnt.sc/of4cge

Людвик Сафарян прокомментировал Aleksandr Zelenskiy 2 года назад

Спасибо за оперативный ответ!

Вас также может заинтересовать

Предыдущие статьи Следующие статьи
banner9
06 июня · 15 мин читать
ТОП-10 email-редакторов 2022 года

Все конструкторы email-шаблонов для вас на одно лицо? И вы затрудняетесь с выбором подходящего инструмента для своих кампаний, верно? Неудивительно, ведь их очень много. Мы сделаем обзор самых популярных конструкторов, чтобы выделить их отличительные особенности и помочь вам найти наилучший HTML-редактор шаблонов для ваших текущих потребностей. Я попробую создать одинаковый шаблон с одними и теми же медиафайлами во всех редакторах, чтобы увидеть, чем отличаются эти инструменты. Лучшие конструкторы email-шаблонов Для нашего обзора мы выбрали такие редакторы: Stripo, HubSpot, Campaign Monitor,...

Дизайн Маркетинг Шаблоны
24 мая · 18 мин читать
Лучшие шрифты для рассылок: советы и хитрости

Одна из самых серьезных проблем при создании электронных писем — правильно выбрать шрифт. Вес, высота, ширина, цвет, форма, интервал… Все ли здесь имеет значение? Да, важно все, но самое главное — выбрать читабельный шрифт. В этой статье мы расскажем, как выбрать лучший профессиональный шрифт для рассылки. Создавайте элегантные письма с помощью Stripo в кратчайшие сроки, используя наши готовые шаблоны Ознакомиться   Шрифты HTML-писем: основные правила, которые нужно соблюдать При выборе оптимального шрифта следует учитывать три базовых правила: 1. Не используйте более двух шрифтов...

Дизайн Шаблоны
Greatest Examples of GIF animations in Emails_Cover Image
27 октября 2021 · 10 мин читать
Гиф-анимации в письмах: 16 лучших примеров

Гифки отлично будут смотреться в ваших письмах, если вы хотите продемонстрировать продукт, привлечь внимание пользователей к какому-либо элементу письма или же просто ненавязчиво украсить текст. В этой статье мы представили лучшие примеры гиф-анимаций в рассылках. Примеры GIF в письмах В этой подборке собраны лучшие примеры использования GIF в письмах, где каждая анимация выполняет свою миссию. 1. Adidas (Источник: рассылка от Adidas) Adidas использовал анимацию в письме, чтобы показать, в каком еще цвете доступен данный товар. Выглядит аккуратно и просто, но при этом...

Дизайн Маркетинг
08 апреля 2021 · 17 мин читать
Дизайн подписи в письмах: 14 лучших примеров

Хорошие подписи в письмах помогают нам развивать бизнес и производить хорошее впечатление на клиентов. И поскольку это последний элемент, который люди видят в письмах, нам нужно сделать подписи креативными и запоминающимися. Давайте рассмотрим лучшие примеры подписей и их правильное использование в письмах и шаблонах рассылок. Стоит отметить, что профессиональные подписи с подробной контактной информацией нужны для любого бизнеса. Используйте этот шаблон, чтобы создавать подписи для рассылок быстрее Использовать Такой пример подписи хорошо подходит для юридических консультаций, банковского дела и т.д....

Дизайн Маркетинг Шаблоны
Будьте всегда в курсе последних новостей в области email-маркетинга!