Чему вы научитесь:
- Создавать сайты на WordPress с любым дизайном
- Создавать сайты на WordPress, используя сторонние шаблоны
- Научитесь изменять любые стили темы сайта на WordPress
- Научитесь работать в no-code платформе Elementor
- Изучите все возможности WordPress
- Сможете создать интернет-магазин
- Научитесь подключать оплату в рублях и криптовалюте
- Научитесь создавать блок с комментариями
- Узнаете, как адаптировать сайт под любое устройство
- Научитесь продвигать ваш сайт в поиске Google/Yandex
- Узнаете основы SEO
- Поймёте, как создавать основные анимации на сайте
- Научитесь приобретать домен, хостинг и настраивать WordPress
- Узнаете, как оптимизировать ваш сайт, чтобы он работал быстрее
- Научитесь создавать собственные шаблоны для сайта
- Сможете создать сайт любой сложности на WordPress
- Узнаете, как использовать собственные CSS-стили в WordPress
Программа курса:
Введение
- Приветствую на курсе!
- Скачиваем материалы
- Устанавливаем WordPress на хостинг
Знакомство с WordPress
- Базовые настройки нового сайта
- Как редактировать страницу
- Как работают темы в WordPress
- Как работают плагины в WordPress
- ПРАКТИКА! Создайте свой сайт
Знакомство с Elementor
- Как загружать плагины и темы с компьютера
- Настройки Hello Theme Elementor
- Создаем первые элементы в elementor
- Как позиционировать элементы в контейнере
- Сбрасываем стандартные стили elementor
- Выравнивание элементов и внешние отступы (Margins)
- Внутренние отступы + заливка фона (Padding)
- Как добавлять градиент + единицы измерения VH
- Изображения на сайте и их форматы.
- Как работает абсолютное позиционирование элементов
- ПРАКТИКА. Начните создавать первую секцию сайта
Стили
- Создаем стили цвета. Сброс стилей elementor
- Создаем стили текста и кнопок
- Настройка стилей всего текста на сайте
- Ограничение контента сайта и доп настройки
- Как работает настройка фонового изображения
- ПРАКТИКА. Создайте следующую секцию сайта
Настройки и ошибки
- Out of memory \ тормозит elementor
- Как настроить WP и сбросить стили
- Как сменить пароль и кастомизировать WP
- Если не обновляется новое изображение вместо старого
Углубление в Elementor
- Размеры изображений и overflow hidden
- Центрирование абсолютно позиционированного элемента
- Как работают CSS фильтры
- Библиотека иконок Elementor. Доделываем карточки
- Свойства трансформирования элементов
- Что такое семантические теги
- ПРАКТИКА. Создайте следующие 2 секции сайта
- Как работает grid css
- Верстаем следующую секцию ч.1
- Верстаем следующую секцию ч.2
- Создаем навигационное меню
Анимации
- Якорные ссылки
- Эффекты движения
- Анимации виджетами
- Lottie Анимации
Адаптивный дизайн
- Теория адаптивного дизайна
- Создаем breakpoints
- Адаптируем планшетную версию
- Адаптация грид сетки
- Как скрыть элемент в определённой версии сайта
- ПРАКТИКА. Адаптируйте сайт
- Адаптируем breakpoint планшет
- Адаптируем мобильный breakpoint
Формы и Popup
- Форма через Royal Addon
- Как создать popup
Введение в шаблоны и конструктор тем
- Как работают шаблоны
- Как работают динамические шаблоны
Блог и конструктор тем
- О чем блок
- Верстаем страницу блога
- Автоматическое создание карточки поста поста
- Как работают категории и метки
- Как сделать динамическую запись поста
- Что такое архивы
- Создаем архив Рубрик
- Как создать динамический шаблон
Интернет Магазин
- Устанавливаем Woocomerce
- Как создать единичный товар
- Что такое вариативный товар
- ПРАКТИКА. Создаете 2 товара
- Что такое Up Sale и Cross Sale
- Какие основные страницы магазина
- Как создавать купоны
- Стилизация страниц заказа и кассы
- Стилизация страницы магазина и товара
- Как создать возможность регистрации пользователя
- Как подключить recaptcha
- Подводим итог
- Добавление товара в корзину по ссылке
- Как подключить оплату за рубли
- Как подключить оплату криптовалютой
Готовый сайт из шаблонов
- Демо контент темы
- Тема из интернета
- Как использовать шаблоны
SEO
- Первичная настройка YAST SEO
- SEO Заголовок и описание
- Заголовок h1
- 404 / alt / индексакция страниц
- Google search & Yandex Master
- Оптимизация сайта
Свой код и ElementorPro
- Свой CSS код
- Обзор Elementor Pro
- Динамические теги
До новых встреч!
- Подводим итог
- Получите свой сертификат
