ДНЕВНИК ФРИЛАНСЕРА

Взрыв мозга 🤯 Клиент пишет:

Только сделай прям по красоте, нам нужно чтобы дорого выглядело, чтобы человек заходил и видел не сайт из 2005-го а хотя бы из 23-го

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

Последнее время часто замечаю, что десктопная версия не важна, типа «весь трафик с мобильных». Прикрепляю данные Яндекс.Метрики за последнюю неделю по трём разным проектам: сайт по оптовой продаже автотоваров, сайт с онлайн-курсами и сайт с b2b-услугами. Хочу донести, что игнорировать любую из версий - значит терять часть аудитории. На мобильных важна компактность и скорость. На десктопе - больше пространства для визуала и анимаций, которые могут усилить восприятие. Сайт должен быть адаптирован и привлекателен на всех устройствах, ну а если вы нацелены только на мобильные, то можете делать сайты на таплинке и не мучать вордпресс

Видео с адаптацией лендинга с последнего видео уже загружено Это не полноценный урок по адаптивной вёрстке - я не буду подробно разбирать значения em, rem, vw и другие единицы. Цель видео - показать на практике, как быстро и без лишних сложностей сделать сайт удобным для просмотра на всех экранах. Позже я обязательно сниму отдельное видео, где подробно расскажу о подходах к адаптивности, когда и какие значения лучше использовать. 📺 Смотреть на YouTube 📺 Смотреть в VK Видео Не забудьте тыкнуть лайк под видео ❤️

Адаптируем лендинг с прошлого видео. 📺 Смотреть на YouTube 📺 Смотреть в VK Видео Не забудьте тыкнуть лайк под видео ❤️

Видео с адаптацией под различные устройства записано, завтра вечером опубликую 😎 Оно не будет длинным - всего лишь 15–20 минут, сразу в процессе всё покажу. Поднакиньте, пожалуйста, лайков, комментариев и посмотрите хотя бы первые 30 секунд последнего видео на YouTube - нужно как-то реабилитировать канал 🙂

Новое видео с лендингом, в котором я показываю, как сделать анимацию при скролле, уже загружено. Для удобства вы можете использовать таймлайн в описании, чтобы сразу перейти к нужной части видео. 📺 Смотреть на YouTube 📺 Смотреть в VK Видео Не забудьте тыкнуть лайк под видео ❤️

Это сайт, который покажу в завтрашнем видео. В каждом блоке реализована анимация при скролле. Код вертикальной карусели изображений скину вам завтра 👻

Все телеграм-каналы пишут про новинки эпл, но я сейчас не о самой презентации. Зашел на сайт Apple и увидел, как они делают анимацию. Как оказалось, когда вы доходите до блока, на сайте запускается видео, которое идет пару секунд, а потом последний кадр меняется на картинку. Очень просто и прикольно, особенно если в команде есть motion designer)

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

Сегодня было свободных пару часиков - решил попробовать сделать крутейшую рамку для блока, чтобы потом вам скинуть. Ну, результат вы можете видеть на экране - получилось реально круто. Но… Когда начал адаптировать, увидел, что на телефоне анимация как-то нормально не работает - как будто fps упало. Как игру запустить на компе, который не тянет. Решил попробовать на ноуте в Safari открыть - и мой годовалый макбук зашумел как самолёт. Короче, как оказалось, Safari почему-то плохо работает с SVG-фильтрами. Так что этот эффект я пока отложу - до тех времён, пока всё не пофиксится. Но выглядит реально прикольно 😎

Короче, без лишних слов, обзор на самую креативную WordPress-тему уже опубликован, так что включайте: 📺 Смотреть на YouTube 📺 Смотреть в VK Видео Не забудьте тыкнуть лайк под видео ❤️ Ну и ссылка на тему: https://1.envato.market/APV6gN

Завтра выйдет видео по одной очень крутой теме, в которой есть огромное количество креативных блоков и с которой очень легко работать. А сегодня занимаюсь своим сайтом - уже добавил библиотеку продуктов с различными эффектами. Постепенно буду наполнять её - уже есть несколько классных эффектов с анимированными рамками, которые опубликую на днях. https://evangretz.com/products/

Если у вас в магазине много категорий, и лень вручную добавлять к ним картинки - этот код вас выручит.

add_action('init', 'eg_set_category_thumbnail_from_first_product');
function eg_set_category_thumbnail_from_first_product() {
    $args = array(
        'taxonomy'   => 'product_cat',
        'hide_empty' => false,
    );

    $terms = get_terms($args);

    foreach ($terms as $term) {
        $thumbnail_id = get_term_meta($term->term_id, 'thumbnail_id', true);
        if ($thumbnail_id) {
            continue;
        }

        $products = get_posts(array(
            'post_type'      => 'product',
            'posts_per_page' => 1,
            'fields'         => 'ids',
            'tax_query'      => array(
                array(
                    'taxonomy' => 'product_cat',
                    'field'    => 'term_id',
                    'terms'    => $term->term_id,
                    'include_children' => false,
                ),
            ),
        ));

        if (!empty($products)) {
            $product_id = $products[0];
            $product_thumbnail_id = get_post_thumbnail_id($product_id);
            if ($product_thumbnail_id) {
                update_term_meta($term->term_id, 'thumbnail_id', $product_thumbnail_id);
            }
        }
    }
}

Просто вставьте его в functions.php, потом зайдите в «Категории товаров» в админке - и всё готово. У тех категорий, где не было миниатюры, она автоматически подтянется из первого товара внутри. Потом можете удалить этот код.

Видео с универсальным блоком с инвертированным бордер радиусам уже доступно для просмотра. 📺 Смотреть на YouTube 📺 Смотреть в VK Видео Не забудьте тыкнуть лайк под видео ❤️ Полностью адаптивный шаблон блока, можно взять ЗДЕСЬ

Насмотренность — это кислород. Без регулярного просмотра чужих проектов легко застрять в круге одинаковых решений: одни и те же шрифты, привычные блоки, предсказуемая структура. Насмотренность вытаскивает из этого болота. Когда в голове есть библиотека удачных приёмов, проще предложить клиенту что-то свежее, а не очередной «шаблон из шаблона». Я сделал подборку сервисов, где я ищу новые идеи: 🔹 siteinspire.com 🔹 a1.gallery 🔹 browsingmode.com 🔹 dark.design 🔹 unsection.com 🔹 httpster.net 🔹 land-book.com 🔹 minimal.gallery Перед началом нового проекта я пользуюсь этими сайтами, чтобы найти новые решения. Это как зарядка для глаз и мозга - проекты становятся живее, а идеи приходят быстрее 😉

Я какое-то время ничего не выкладывал, потому что нужно было справиться с выгоранием. Иногда даже то, что очень любишь, начинает выматывать, и тогда лучше взять паузу. Сейчас я отдохнул, набрался сил и снова хочу делиться с вами идеями и новыми фишками для сайтов. С 1 сентября начинаем с видео про инвертированный border-radius без кода и запар. На превью уже можно увидеть пример того, что у нас получится (но только про анимации расскажу позже). Другие видео, которые выйдут в сентябре: ➡️ Как работать с Off-Canvas ➡️ Лендинг для школы английского языка ➡️ Плагин для анимаций в Elementor ➡️ Тема для креативных сайтов ➡️ Тема для личного сайта Спасибо всем, кто не отписался 🫶

В последнее время после переноса сайта на Elementor через Duplicator могут не переноситься шрифты от Google. Чтобы это исправить, перейдите в Elementor → Инструменты → Сменить URL и укажите ссылку на старый сайт и на новый. Даже если система покажет, что затронуто 0 строк базы, ваши шрифты всё равно подтянутся. Ну и на всякий случай, в разделе Elementor → Инструменты → Общие нажмите кнопку «Очистка файлов и данных» для очистки кэша Elementor.

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