Як зробити попередній запис у своєму блозі, щоб порівняти дві фотографії
Як зробити до/після на своєму сайті, щоб порівняти дві фотографії ?
Створіть до свого пізніше у своєму блозі
Ви вже точно зустрічалися до/після в Інтернеті! Покажіть шматок до і після роботи, обличчя до і після макіяжу, фото до і після ретуші, його тіло до і після фізичної трансформації ... Але як легко зробити до/після у своєму блозі ?
У цьому підручнику я покажу вам, як користуватися JuxtaposeJS, дуже простим в освоєнні інструментом для створення до/після на сайті.
Підготуйте свої фотографії до/після
Успіх ваучера до/після частково залежить від вибору фотографій !
Зробіть правильну фотографію
До/після цього найбільше впливають фотографії взято з того самого кута.
Наприклад, якщо ви хочете показати обличчя до і після макіяжу, краще зробити фотографію з однаковим виразом, з однаковою яскравістю і однаковим кутом. Таким чином, відмінності між двома фотографіями будуть виділятися тим більше.
Те саме для місця, ви можете цілком використовувати штатив, щоб зробити знімок у тому самому місці в два різні часи.
Як тільки ви зберегли дві схожі фотографії, ми розмістимо їх у мережі.
Завантажте фотографії
Потрібен JuxtaposeJS, інструмент, який ми збираємось використовувати відновити посилання на ваші фотографії. Це можна зробити з Dropbox, якщо у вас є обліковий запис і ваша фотографія зберігається на Dropbox, або з веб-сайту.
Звичайно WordPress, перейти до Меню медіа> Додати і надішліть свої дві фотографії.
Потім рекомендую натиснути посилання "Редагувати" для кожної фотографії та заповнити її заголовок та поле "Альтернативний текст" з описом зображення.
У правій колонці, Ви знайдете посилання на фото. Скопіюйте посилання на дві фотографії та залиште його в стороні (наприклад, у Блокноті).
Якщо у вас є блог на Блогер, перейдіть до розділу "Статті", натисніть кнопку "+", щоб створити нову статтю, а потім натисніть "Вставити зображення". Потім виберіть «імпортувати з комп’ютера» та завантажте два зображення.
Вони будуть автоматично вставлені в статтю. Клацніть на кожне зображення, виберіть "редагувати", а потім встановіть розмір зображення на "Оригінальний розмір". Тоді перейдіть до редактор HTML натиснувши кнопку "HTML View" у верхньому правому куті екрана.
Скопіюйте посилання на два зображення:
- Він знаходиться відразу після частини, яка називається "src ="
- Він починається з https і закінчується .jpg, якщо ваші зображення у форматі JPG
Тепер ми готові перейти до створення належних до/після !
JuxtaposeJS, безкоштовний інструмент для виконання до/після
Робота JuxtaposeJS дуже проста. На сайті ви починаєте з копіювання ліворуч посилання на зображення, що представляє ситуацію "До", а праворуч посилання на зображення, що відповідає "Після", наприклад:
Потім для кожного зображення можна вказати підпис, наприклад, дату, наприклад ("Етикетка"), а також кредит.
Тоді ви можете налаштувати свої до/після за допомогою декількох варіантів:
- Початкове положення повзунка - Це процентний розподіл між двома фотографіями. Якщо ви залишите 50%, ми побачимо половину фотографії до і половину фотографії після.
- Показати ярлики та показати кредити - Ці параметри дозволяють відображати ваш заголовок та кредит на двох фотографіях.
- Анімація - Цей параметр автоматично анімує до і після.
- Зробіть чуйним - Я раджу вам встановити цей прапорець, який дозволяє вашій до/після адаптації до смартфонів та планшетів.
- Вертикальний - Якщо для вашої фотографії потрібна вертикаль до/після, ви можете встановити цей прапорець, щоб отримати її.
Ви можете попередньо переглянути в режимі реального часу візуалізацію повзунка до/після.
Коли ви будете готові, натисніть "Опублікувати", щоб отримати повзунок.
Опублікуйте свої до/після у своєму блозі
Щоб опублікувати свої до/після у своєму блозі, вам просто потрібно скопіюйте код, що з'являється в зоні "Вбудувати" від JuxtaposeJS:
Коли ви пишете свою статтю, переключитися на редактор HTML. У Blogger я трохи вище показав вам, як це робити.
У WordPress це відбувається за допомогою цієї кнопки, якщо ви використовуєте класичний редактор:
А якщо використовувати редактор Гутенберга WordPress, вам доведеться натиснути на три крапки вгорі праворуч на екрані, а потім вибрати "Редактор коду" в меню.
Там, де ви хочете, щоб з’явилися ваші до і після, скопіюйте код із JuxtaposeJS.
Корисне роз'яснення для користувачів Blogger: якщо ви зробите "Попередній перегляд" вашої публікації, попередній і післяшній час не працюватимуть у попередньому перегляді ... але після публікації це прекрасно працює в блозі.
Ось візуалізація, я використовував для тестування інструменту фотографію Вінчестера в Англії ... до і після ретуші:
До/після породили дуже креативні проекти, такі як "Ірина Вернінг" Назад в майбутнє ", які заохочували дорослих відтворити свої дитячі фотографії. Ви повинні уявити своє бачення речей !
Привіт ! Я, це Марлен. SEO-консультант у житті, я ділюся з вами порадами щодо створення блогу та розвитку вашої видимості в Інтернеті. Якщо у вас є питання або ви хочете відповісти після прочитання цієї статті, сміливо залишайте коментар !