Как выкладывать на Dribbble видео с InVisio Studio

Я решил заняться изучением анимации интерфейсов и начал с Invisio Studio. Это что-то вроде Principle, но подходит для Windows.

Я не буду касаться того, как делать анимацию в InVisio, я лишь расскажу, как можно «экспортировать» то, что вы сделали.

Экспорта в InVisio в формате видео или гиф — нет. Вы можете только дать ссылку для просмотра. Такую ссылку не вставишь в Dribble. Там нужно либо видео, либо гиф.

Я начал с видео, и ничем хорошим это не кончилось. На windows я пользовался программами Loom и Bandicam.

Loom выводит низкое качество и не показывает полупрозрачные элементы.

Loom

Bandicam уже выводит качество выше, но всё равно что-то не так. Видны пикслели.

Bandicam

Я решил скачать программу для gif — ScreenToGif и решил попробовать с ней. Спойлер — мне понравился результат.

Результат с ScreenToGif

Как выкладывать на Dribbble видео с InVisio Studio 1

Про запись я говорить не буду, изучите сами.

Dribbble для обложки берёт первый кадр вашего видео или гиф. Важно выставить конечный кадр в самое начало. Иначе в сетке Dribbble у вас будет просто фон. С конечным кадром в начале у нас будет виден дизайн, который может привлечь пользователей к просмотру.

[изображение сетки дрибла, на первом скине фиолетвый квадрат, на втором анимация, сделать исскуственно]

Как поставить кадр в начало

После окончания записи гифки у вас появится экран редактирования. Внизу располагается раскадровка. Можно удалить или клонировать кадры. Перемещаться по ней можно горизонтальным скроллом.

[изображение тайминга кадров]

Идём в конец раскадровки, кликаем на последний кадр и нажимаем ctrl+c.

Как выкладывать на Dribbble видео с InVisio Studio 2

Перемещаемся в начало, кликаем на первый кадр и нажимаете ctrl+v.

[изображение выделенного первого кадра в тайминге]

Если он вставится после первого кадра с фоновым цветом — просто удаляем первый кадр, чтобы наш кадр с результатом переместился влево.

Как выкладывать на Dribbble видео с InVisio Studio 3

Готово!

Экспорт

Для начала нужно попасть в окно экспорта. Кликаем на Файл → Сохранить как.

[изображение экспорта в панели]

После этого справа появиться панелью.

[изображение Параметры кодировщика]

За качество отвечает «Параметры кодировщика». Надо перетянуть ползунок влево. Ниже параметры по желанию.

Внизу кнопка сохранить. После экспорта можно вставить эту гиф в дрибл.

Промостраница для Ремейка

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

Небольшая предыстория. Ремейк — это наш с партнёром проект по скоростному оформлению Геткурса. Мы заметили что у клиентов похожие запросы на оформление Геткурса и сделали шаблон, который можно установить за два дня.

Можно прокрутить, чтобы просмотреть весь лендинг.

Как выкладывать на Dribbble видео с InVisio Studio 4

Если просмотреть всю страницу, можно поймать впечателение, что мы просто продаём красивую картинку. Мы кричим «Красиво, красиво, красиво — дай 100к». В целом я пытался на лендинге показать какой был страшный геткурс и какой он стал крутой с Ремейком.

Через пару недель я подумал, что не понятен масштаб нашего решения. Слишком мало страниц мы показали.

Я поменял первый блок и добавил изображения страниц, чтобы люди могли их рассмотреть. В остальном всё осталось также.

Как выкладывать на Dribbble видео с InVisio Studio 5

Посыл «Бери дизайн за 100к» никуда не делся, просто немного изменился формат.

Переосмысление

В какой-то момент я понял, что сделал фигню. Глядя на этот лендинг, было не понятно, что мы продаём, в чем вообще ценность. Почему это должны купить? Почему предприниматель должен вложить в нас сотку, а не в маркетинг?

Решил опросить клиентов и составить картину продукта с их стороны.

Мнение клиентов

Мы запускали сайт не на пустом ожидании, что клиенты будут — они уже были. Они покупали продукт и до запуска лендинга. Мы думали, что они покупают его из-за красивого дизайна. На самом деле это не так.

Кто лучше знает, что хорошего в нашем продукте, как не наши клиенты? Ведь они почему-то отдали 100к за продукт, даже без лендинга. Я поговорил с ними и вот, что они сказали о Геткурсе и нашем оформлении:

  • В старом дизайне ученики не могли найти нужный курс и уроки, с Ремейком стало легче найти и количество обращений в поддержку уменьшилось
  • У нас две школы, для одной делали индивидуальную разработку, а для другой заказали Ремейк. С индивидуальной разработкой много головняка, костылей и косяков. Ремейк работает стабильно.
  • Наша цель — отстроится от конкурентов, у которых все одинаково в стандартном стиле геткурса. Создать хорошее впечатление, что это не стандартный геткурс или очередной обезличенный геткурс, а именно наш геткурс.
  • От учеников меньше вопросов. Мы отличились от конкурентов, показали уровень лидеров рынка, отзывы стали лучше, меньше нагрузка на тех.поддержку.
  • Это вообще не про красоту. Нам важен был бренд, удобство. Хороший дизайн это показатель серьезной школы, которой можно доверять. Нас всегда бесило, когда надо было делать скриншоты и из-за некрасивого видео каждый раз было стремно их выкладывать, потому что дизайн некрасивый. Он портил впечатление, даже если сайт был красивый.

Что это нам даёт? То, что наши клиенты покупают не красивый дизайн. Они покупают усиление бренда, решение проблем, уменьшение нагрузки на тех. поддержку, возможность увеличить чек.

Создание ценности

С пониманием потребностей клиентов я начал выстраивать текст и структуру лендинга.

Большую часть контента я сосредоточил на выгоде для владельцев школ. Да, мы Ремейк делали в основном для пользователей, чтобы им было приятнее и удобнее пользоваться Геткурсом. А изначальная выгода для владельцев была в экономии денег и времени по сравнению с индивидуальной разработкой.

Как выкладывать на Dribbble видео с InVisio Studio 6

Дизайн лендинга

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

Расскажу о ключевых блоках лендинга

Как выкладывать на Dribbble видео с InVisio Studio 7

Первый блок

В первом блоке мы должны рассказать, что человек тут увидит. Дать это понимание. Кроме текста я показываю основные страницы шаблона.

Как выкладывать на Dribbble видео с InVisio Studio 8

Что вообще такое Ремейк?

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

Как выкладывать на Dribbble видео с InVisio Studio 9

Как он выглядит

В блоках с изображениями я показываю в виде слайдера изображения Ремейка. Если пользователю интересно — он пролистает всю галерею, если нет — легко пропустит её.

Как выкладывать на Dribbble видео с InVisio Studio 10

Преимущества для владельца

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

Как выкладывать на Dribbble видео с InVisio Studio 11

Преимущества для админов

Школы, это не только владельцы, но и администраторы. Часто бывает так, что это одни и те же люди. В этом блоке я показал, что мы подумали также и об админах. Добавили функции, которые облегчат им жизнь и сделают работу эффективнее.

Как выкладывать на Dribbble видео с InVisio Studio 12

Преимущества для учеников

Блок побольше с пользой для учеников. Здесь мы рассказали о важных дополнениях, которые мы меняем в Геткурсе. К каждому преимуществу приложили картинку, чтобы визуально донести смысл текста. Нестандартную сетку интересно разглядывать.

Как выкладывать на Dribbble видео с InVisio Studio 13

Исправили баги

Кроме пользы для всех участников школы мы рассказали о том, что исправили в Геткурсе. Там хватает проблем поэтому мы вынесли это в отдельный блок.

Как выкладывать на Dribbble видео с InVisio Studio 14

Школы с Ремейком

Сначала я думал сделать просто логотипы, но потом понял, что нужно выжать максимум из блока. Кроме перечисления клиентов, цель этого блока была показать, что несмотря на шаблонность нашего решения, школы все равно получаются разные. Мы адаптируем их под бренды клиентов и это уже не Ремейк, это новый дизайн на базе Ремейка.

Как выкладывать на Dribbble видео с InVisio Studio 15

Почему купить выгоднее

Если владелец школы не осознал ценность продукта, здесь я кратко подвожу итоги чётко по списку.

Как выкладывать на Dribbble видео с InVisio Studio 16

Процесс установки

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

В чем крутость блоков с пользой для владельцев, админов, учеников?

Мы знаем над чем нужно работать в продукте. Эти блоки масштабируемые и разбирая список задач мы будем задавать себе вопросы: «Это принесет кому-то пользу? А какую пользую это принесет?». А потом добавил этот блок в лендинг. Эти 3 блока — база для продажи продукта. Именно в этих блоках владелец будет составлять ценность продукта и сравнивать их с суммой сделки.

Полный дизайн лендинга

Как выкладывать на Dribbble видео с InVisio Studio 17

Полезности для карточек уроков и тренингов в GetCourse

Скрыть кол-во уроков на карточке тренинга

.stream-title + div b { display: none; }

Скрыть имя основного преподавателя на карточке тренинга
(код для JavaScript-блока)

$(".stream-title + div").each((i,el)=>{
    $(el).html((i,t)=>{return t.replace("Dmitry Space.", "")});
});

* Моё имя нужно заменить на имя преподавателя

Убрать иконки на карточках урока

html .lesson-list .state-icon-block {
  display: none;
}

html .lesson-list li .info {
  padding: 0 20px;
  margin: 5px;
  border-left: none;
}

html .lesson-list .user-state-bg {
  background: none;
}

Скрыть картинки у всех карточек уроков

html .lesson-list li table .item-image { display: none; }
html .lesson-list .item-main-td.item-with-image { height: auto; }

Показывать картинки уроков в мобильной версии сайта

@media (max-width: 520px) {
  html .lesson-list li .item-image {
    display: table-cell;
  }
}

Добавить лейбл/ярлычок на карточку урока

.lesson-id-149282656 {
  position: relative;
}

.lesson-id-149282656:after {
  content:url("https://img.icons8.com/nolan/64/cat.png");
  position: absolute;
  top: 5px; right: 5px;
}

* ID урока заменяете на свой

Как сделать полный бэкап страницы в старом конструкторе Getcourse

Мини-инструкция, как сделать полный бэкап страницы в старом конструкторе getcourse.

1. На правой панели в Настройках вида страницы выбираем главный блок.

2. Экспортируем его и сохраняем код экспорта в надёжное место.

3. Этот код просто так не загрузится обратно через Импорт. Поэтому поиском по тексту ищем в нём первое вхождение слова children (с кавычками). Всё что было до него заменяем на:

{"type":"div","xdgetId":"r9274","params":{

Это обернёт все экспортированные блоки в единый контейнер, который нормально импортируется.

4. Важно! Стили, которые прописаны в окошке CSS-styles нужно сохранять отдельно, они не будут экспортироваться.


Если вам нужно просто экспортировать отдельные блоки, то предложенное выше делать не надо. Это решение именно для полного экспорта.

Аккордеон на jQuery/JavaScript

Для одного из проектов нужно было сделать аккордеон, решил показать в блоге, как его делать. Делаем аккордеон в блоке FAQ, поэтому там будут классы и стили со словом faq.

В вёрстке блок выглядит вот так. При клике должен показываться текст и иконка меняется с плюса на минус.

Как выкладывать на Dribbble видео с InVisio Studio 18

Логика

При клике на заголовок элемента, мы ищем его родителя и добавляем ему класс is-active. В то же время удаляем такой класс у остальных элементов. Изначально контект и одна иконка скрыта. В стилях для блока с активным класом меняем отображения внутренних элементов.

Разметка

Сначала нам нужна разметка. В списке всего один элемент. Чтобы не

<div class="faqs-list">
  <div class="faq faq-item">
    <div class="faq-header"> 
      <div class="faq-icon">
        <img class="faq-icon-minus" src="./img/svg/faq-icon-minus.svg" alt="">
        <img class="faq-icon-plus" src="./img/svg/faq-icon-plus.svg" alt="">
       </div>
      <div class="faq-title">Заголовок элемента</div>
    </div>
    <div class="faq-text">Текст элемента</div>
  </div>
</div>

В разметке мы должны дать дополнительный класс с приставкой .js, чтобы обращаться к нему из jQuery/Javascript. Дополнительный классы нужен, чтобы другой разработчик его не трогал. Чтобы понимал, что он не для стилей, а для интерактивности.

Нам нужно будет добавить 2 класса:

  • для шапки — js-faq-header,
  • для элемента — js-faq

Проставил классы в той же разметке. Выделил их жирным.

<div class="faqs-list">
  <div class="faq faq-item js-faq">
    <div class="faq-header js-faq-trigger"> 
      <div class="faq-icon">
        <img class="faq-icon-minus" src="./img/svg/faq-icon-minus.svg" alt="">
        <img class="faq-icon-plus" src="./img/svg/faq-icon-plus.svg" alt="">
       </div>
      <div class="faq-title">Заголовок элемента</div>
    </div>
    <div class="faq-text">Текст элемента</div>
  </div>
</div>

Стили

/* Стили по-умолчанию*/
.faq-icon-minus {
  display: none;
}
.faq-text {
  display: none;
}

/* Показываем текст */
.faq.is-active .faq-text {
  display: block;
}

/* Меняем иконку */
.faq.is-active .faq-icon-minus {
  display: block;
}
.faq.is-active .faq-icon-plus {
  display: none;
}

Логика

При клике на faq-header, мы ищем его родителя faq и добавляем ему класс is-active. А у всех остальных удаляем.

JavaScript

// Перебираем каждый элемент шапки
document.querySelectorAll('.js-faq-trigger').forEach(function(trigger) {
    // Получаем родителя, элемент аккордеона
    var parent = trigger.closest('.js-faq');
    
    // клик по шапке
    trigger.addEventListener('click', function(e) {
        
        // если при клике у него уже есть активный класс 
        if (parent.classList.contains('is-active')) {
            // то мы его удаляем
            parent.classList.remove('is-active');
        } 
        // если при клике мы не нашли у элемента активный класс
        else {
            // удаляем у всех элементов активный класс
            document.querySelectorAll('.js-faq').forEach(function(item) {
                item.classList.remove('is-active');
            });            
            // добавляем класс тому элементу, по которому кликнули
            parent.classList.add('is-active');
        }
    })
});

jQuery

// клик по шапке
$('.js-faq-trigger').on('click',function() {
   
    // Получаем родителя, элемент аккордеона
    var parent = $(this).closest('.js-faq');

    // если при клике мы не нашли у элемента активный класс
    if (parent.hasClass('is-active')) {
        // то мы его удаляем
        parent.removeClass('is-active'); 
    }
    else {
        // удаляем у всех элементов активный класс
        $('.js-faq').removeClass('is-active');
        
        // добавляем класс тому элементу, по которому кликнули
        parent.addClass('is-active');  
    }
})

Демо работы

Как выкладывать на Dribbble видео с InVisio Studio 19

Не получается верстать

Любой новый навык — дело практики. Начните с простых макетов и постепенно усложняйте их.

Если вы уже программировали, вам знаком гугл и интрумент отладки. Это уже 80% успеха.

Пусть вас не утомляют простые блоки и макеты. На них набьете руку и потом рутинные задачи перестанут волновать и вы сосредоточитесь на более сложных вопросах и их решениях.

Непонятно и сложно постоянно. Но важно, чтобы макет был не на 80% сложный, а на 15%-20%. В начале важно, чтобы это приносило кайф. А будет приносить, когда большую часть вы сделать можете и это не страшно, но вот над 15%-20% надо покумекать.

Цифры в фигме и в вёрстке выглядят по-разному

Сейчас верстаю проект и наткнулся на проблему — в процессе верстки заметил, что цифры в вёрстке выглядят по-другому. Шрифт и начертания те же, но выглядит нет так.

Как выкладывать на Dribbble видео с InVisio Studio 20

Я 10 раз проверил шрифт и растерянный не понимал, в чём дело.

Потом зашёл в дополнительные текстовые настройки и нашёл параметр Numbers→Style. Он отвечает за стиль цифр.

Как выкладывать на Dribbble видео с InVisio Studio 21

В вёрстке за это отвечает css свойство font-variant-numeric со значением lining-nums

.class {
  font-variant-numeric: lining-nums;
}

Под какие контентные области делать дизайн?

Важно понимать, насколько большой проект и кто его будет поддерживать.

Я делаю под три разрешения: 1200, 640, 480. Все промежуточные точки верстальщик адаптирует так, чтобы ничего не разваливалось.

После вёрстки я прохожу по всем разрешениям и пишу правки.

Если проект для Тильды — беру сетку Тильды. Если сайт не на Тильде — ориентируюсь на Бутстрап.

Но это не панацея. Если вы работаете по своей сетке и разрешениям — верстальщик должен сверстать под основные разрешения и проверить ототбражение на остальных.

Реально ли обучиться верстке на бесплатных курсах до уровня заработка? И если да, то на каких курсах?

Реально ли обучиться

Да, реально.

Я учился пару месяцев, просматривая бесплатные курсы. Начал с «Вёрстка за 1 час» у Хауди Хо.

Потом пробовал верстать макеты. По тем моментам, что не получались — гуглил. Это основной навык, постоянно гуглить и искать решения.

Сверстал своё портфолио и закинул туда свёрстанные сайты по макетам, которые нашёл на бесплатных стоках.

Спустя 2 месяца устроился на работу и проработал год. Зарплата была 35 000 рублей.

После года работы вышел на фриланс и доход поднялся до 60−80 тысяч рублей.

Курсы по вёрстке

Не могу рекомендовать то, что не проходил сам.

Я бы помоветовал начать с простых уроков от «Хауди Хо» на ютубе. Они быстро и без воды вводят в тему.

После рекомендую попробовать тренажёр HTML-academy.

Где найти подработку (не фриланс) по вёрстке сайтов, сборке в конструкторах, чтобы руку набить?

Найти такую подработку можно в нескольких местах.

1. Бесплатные стоки

По запросам «макеты psd бесплатно» и «макеты figma для верстки» вам откроектся много сайтов, где можно скачать макеты для вёрстки в разных форматах.

2. Дизайнеры

Вы можете найти сайты дизайнеров и попросить у них макеты для вёрстки. Если вы хотите потом выложить работу в портфолио — уточните у дизайнеров, не против ли они, возможно у них будут условия — чтобы вы указали их как автора дизайна и прикрепили ссылку на их сайт.

Когда у меня брали так работу, я попросил, чтобы подписали, что я автор и оставили ссылку на мой сайт. В последствии я просмотрел работу верстальщика и дал ему правки по некоторым блокам

Плюс в том, что если вы сверстаете хорошо, дизайнер тоже может захотеть выложить её себе в портфолио. Так он покажет, что может делать не только дизайн, но и закрыть проект под ключ.

Также он упомянет вас в своём проекте.

3. Сайты, которые вас зацепили

Вы можете зайти на сайт и увидеть какой-то элемент: «Хм, интересно, как они его сделали». Обычно я после этого открываю редактор и стараюсь повторить, не подгладывая в консоль разработчика.

4. Сайт-портфолио

Я в начале карьеры начал разрабатывать сайт-портфолио. Использовал html, css, js, cms — wordpress.

Сначала это был простенький лендинг, где была информация обо мне и ссылки на мои работы.

Потом я добавил блог, полноценные кейсы.

На портфолио можно набить руку, потому что оно будет переставать нравится вам спустя месяц — это нормально. Я сделал уже 11 вариантов сайта портфолио. Кайждый раз докручивая или меняя дизайн полностью.

И вот тут-то и набиваешь руку. Хочешь сделать всё идеально и результат хороший. Я свой сайт переделываю сам: дизайн, вёрстка, программирование. И это освежает знания.

Как копировать SVG из браузера в Фигму

Часто нужно скопировать, но обычный вариант с кликом правой кнопкой мыши и «Сохранить как» не работает. У SVG такого нет.

Сейчас расскажу, как это можно сделать. Если коротко — скопировать код svg и вставить в фигму.

Откройте страницу

Откройте страницу с SVG.

Мне нужно для одного из проектов такой знак. Переходя из википедии по ссылке, открывается страница SVG-файла.

Как выкладывать на Dribbble видео с InVisio Studio 22

Перайдите в консоль разработчика

Чтобы открыть консоль, нажмите Ctrl+Shift+I или кликните правой кнопкой мыши и выберите «открыть консоль разработчика».

Выглядеть будет так

Как выкладывать на Dribbble видео с InVisio Studio 23

Найдите тег <svg>

Чтобы найти код SVG, найдите вкладку «Элементы/Elements». Там надо найти код, который начинается с <svg.

Как выкладывать на Dribbble видео с InVisio Studio 24

Скопируйте

Кликните по этой строчке правой кнопкой мыши и выберите «Копировать → Копировать outerHTML».

Как выкладывать на Dribbble видео с InVisio Studio 25

Вставье

Переходим в фигму, нажимаем Ctrl+V, готово.

Как выкладывать на Dribbble видео с InVisio Studio 26

Как найти код запрещенных соц. сетей на своём сайте. Beget-хостинг

У меня около 40 работ лежит на сервере и каждую страницу проекта можно открыть, если знать ссылку.

Я думаю, что наши правоохранительные органы запустят какие-то парсеры. Поэтому оставлять иконки — прям расход бабок на штрафы.

Я сначала прошёлся вручную по всем файлам, проверил шапки и подвалы.

Потом узнал о фиче бегета — поиск текста в файлах.

Как выкладывать на Dribbble видео с InVisio Studio 27

Идём в файловый менеджер

Как выкладывать на Dribbble видео с InVisio Studio 28

Заходим в нужную папку и нажимаем «Поиск текста» в верхней панели

Как выкладывать на Dribbble видео с InVisio Studio 29

Откроется окно поиска. Инстукции по полям на скриншоте. В списке найденных кликаете 2 раза и на Бегет будет открывать ту папку.

Как нужно передавать макет в фигме верстальщику?

Добрый день, Игорь!

Когда мне как верстальщику передавали макет в контейнере 1200 — я верстал в таком же контейнере и сайт выглядел одинаково, как на 1200, так и на 1600, 1920.

Когда вы будете передавать макет верстальщику, уточните, что это не «резиновая» вёрстка. Элементы должны располагаться так же экранах с шириной больше 1200.

Когда я стал дизайнером, я заметил, что верстальщики берут мои макеты на 1200 и делают «резиновую» вёрстку на своё усмотрение. В итоге сайт на 1920 выглядит совсем не так.

Теперь я заранее предупреждаю об этом.

Хорошо писать верстальщику ТЗ: состояния кнопок, переполнение текста, рефренсы по анимации или эффектам.

Перенос wordpress-сайта

Мне поступила задача перенести сайт на wordpress. Дали архив с файлами wordpress и базу.

Я этого давно не делал и у меня не получалось. Я попросил знакомого и он помог мне в некоторых тонкостях.

Делюсь с вами, потому что я перерыл много статей, но не смог найти

Загрузить файлы на хостинг

Грузить файлы лучше в 2 захода, первый — все файлы кроме папки wp-content/uploads. Там лежат все картинки и часто эта папка занимает 95% всего размера сайта.

Лучше закинуть 200−300мб файлов самого сайта, а потом второй задачей закинуть папку uploads. Пока она загружатеся, вы сможете заняться другими делами.

Если же закидывать сразу всё, вам надо будет долждаться полной загрузки файлов и тогда вы сможете зайти в админку.

Создать пустую базу

У каждого свой хостинг и свой интерфейс. Вам надо на своём хостинге создать пустую базу данных.

Импортировать в пустую базу данные нашей базы

Если у вас phpmyadmin — пользуйтесь импортом базы.

Как выкладывать на Dribbble видео с InVisio Studio 30

После вход нажмите на кнопку «Импорт».

Как выкладывать на Dribbble видео с InVisio Studio 31

Прикрепите файл базы

Как выкладывать на Dribbble видео с InVisio Studio 32

Нажмите кнопку «Вперёд».

Проверить данные для подключения базы

Для уточнения данных для подключения базы, зайдите в файл wp-config.php.

Вам нужно найти следующие строки:


define('DB_NAME', 'название базы данных');
define( 'DB_USER', 'логин от базы данных' );
define( 'DB_PASSWORD', 'пароль от базы данных' );
define( 'DB_HOST', 'хост вашего хостинга' );

И вставить туда данные вашей базы. Эти данные нужно запросить у хостинг-провайдера.

Перенастроить домен

В старой базе лежит информация о старом домене. Она не будет работать, пока мы не поменяем адрес сайта.

Если вы переносите сайт на тестовый домен хостинга, можно воспользоваться супер-переменными. Они позволяют без правок базы быстро изменить ссылки на файлы и домен.

Переходим в кореть сайта, переходим в файл wp-config.php и находим строчку define ('WP_DEBUG', false).

После неё вставляем текущий код. Менять нужно только ‘https’:

  • Если домен использует ssl — https://
  • Если не использует — http://
define('WP_SITEURL', 'https://' . $_SERVER['HTTP_HOST']);
define('WP_HOME', 'https://' . $_SERVER['HTTP_HOST']);

Заменить активного пользователя

Чтобы получить доступ к админке, надо заменить данные пользователя. Для этого переходиим в wp-users.

Там мы находим пользователя, который был на старом сайте. Можно даже не пытаться ввести такой же логин и пароль — пароль зашифрован.

Как выкладывать на Dribbble видео с InVisio Studio 33

Чтобы получить доступ, вы можете поменять email и получить на него пароль при восстановлении. Чтобы изменить его, кликните 2 раза на поле и вставьте свой email.

Дальше заходим на страницу: ваш-сайт.ru/wp-login.php — это страница авторизации.

Как выкладывать на Dribbble видео с InVisio Studio 34

Нажимаем «Восстановить пароль» и восстанавливаем пароль. После этого вы сможете по тому же логину зайти со своим паролем. Если хотите — логин тоже можно поменять, делается тоже двойным кликом.

За подсказку спасибо Дмитрию Воробьеву.