Как создать сайт с ChatGPT. WordPress + искусственный интеллект. По-шагам!

С помощью ИИ вы сможете сделать сайт гораздо быстрее.
А удобство работы с сайтом будет обеспечивать лучший в мире движок – WordPress.
Мое новое руководство позволит любому желающему сделать сайт без навыков программирования. Быстро, легко и качественно!
Приступай прямо сейчас!

Таймкоды

00:00:00 Введение в создание сайта с помощью ИИ

  • Создание сайта стало проще: описание бизнеса, выбор дизайна, генерация контента.
  • Нейросеть генерирует контент для сайта, экономя время и деньги.
  • Возможность редактирования контента: замена текста, фотографий, блоков.

00:00:56 Публикация сайта и план урока

  • Публикация полноценного сайта: главная страница, страница “О нас”, страница услуг, страница контактов.
  • Алексей Кальцин объясняет план урока: получение имени сайта и хостинга, установка WordPress, выбор дизайна, создание контента.

00:01:55 Важность хостинга и WordPress

  • Хостинг обеспечивает доступность сайта 24/7.
  • WordPress – простая и мощная система управления сайтами.
  • Выбор дизайна на основе исследований успешных американских компаний.

00:02:54 Создание контента и стоимость

  • Нейросеть генерирует контент, который можно легко перенести на сайт.
  • Использование собственных изображений и советы по улучшению качества сайта.
  • Стоимость: домен 179 рублей, хостинг 3800 рублей в год.

00:04:48 Дополнительные советы и факты

  • Бесплатный хостинг на 30 дней для тестирования.
  • WordPress всегда бесплатный, не используйте WordPress.com.
  • Сайт будет мобильно адаптирован и работать быстро.

00:05:47 Начало создания сайта

  • Первое действие: получение имени сайта и регистрация хостинга.

00:06:36 Регистрация на хостинге

  • Перейдите по ссылке в описании видео на хостинг Biget.
  • Выберите тариф “Блок” с 10 ГБ и возможностью размещения трех сайтов.
  • Зарегистрируйтесь на физическое лицо, указав паспортные данные и рабочий email.

00:08:35 Подтверждение регистрации и регистрация домена

  • После регистрации на почту придет уведомление для подтверждения.
  • Войдите в контрольную панель хостинга для управления.
  • Зарегистрируйте домен, используя инструмент “Помощь с доменом” от Biget.

00:09:27 Генерация и регистрация домена

  • Используйте инструмент для генерации доменов с помощью искусственного интеллекта.
  • Выберите подходящий домен и зарегистрируйте его.
  • Biget показывает стоимость регистрации и продления домена.

00:12:15 Бонусные домены и завершение регистрации

  • Пополните баланс на год и более для получения бонусных доменов.
  • Укажите паспортные данные администратора и зарегистрируйте домен.
  • Домен будет защищен бесплатным сертификатом от Let’s Encrypt.

00:13:40 Установка WordPress

  • Дождитесь, пока домен станет доступным.
  • Установите WordPress через панель управления хостингом.
  • Укажите логин и пароль администратора для доступа к админ-панели.

00:17:03 Вход в админ-панель WordPress

  • Войдите в админ-панель WordPress через адрес домена с добавлением “/wp-admin”.
  • Очистите область настроек и установите плагин для корректной работы SSL-сертификата.

00:18:35 Установка плагина для SSL

  • Установка плагина для завершения настройки SSL.
  • Поиск и установка плагина “Reliable Simple SSL”.
  • Активация плагина и повторная авторизация.

00:20:11 Установка темы для сайта

  • Переход в раздел “Внешний вид” и выбор темы “Varieties”.
  • Установка и активация новой темы.
  • Переход на сайт и проверка его внешнего вида.

00:22:03 Структура сайта

  • Обсуждение правильного порядка создания сайта.
  • Добавление страниц: “Главная”, “Услуги”, “О нас”, “Контакты”.
  • Настройка меню и порядка страниц.

00:27:07 Добавление контента с помощью ИИ

  • Открытие редактора страниц и удаление ненужных страниц.
  • Использование сайта “tayler.com” для генерации контента.
  • Копирование и вставка сгенерированного контента на страницы сайта.

00:31:16 Генерация контента для страниц

  • Копирование и вставка страниц для раздела “Услуги”.
  • Генерация контента для раздела “Контакты”.
  • Вставка контактной информации и обновление страницы.

00:32:50 Настройка главной страницы

  • Проблема с адресом главной страницы.
  • Изменение настроек для отображения статической страницы.
  • Проверка работы всех страниц и контента.

00:34:37 Важность качественного контента

  • Рекомендации по созданию собственных фотографий.
  • Использование стоковых изображений с сайта unsplash.com.
  • Загрузка и использование фотографий на сайте.

00:37:13 Работа с редактором страницы

  • Обзор редактора страницы и его элементов.
  • Настройка фокуса изображения и стиля текста.
  • Изменение параметров текста и типографики.

00:41:35 Добавление и настройка фотографий

  • Добавление фотографий на страницу.
  • Настройка фокуса и других параметров изображений.
  • Финальная настройка внешнего вида сайта.

00:42:42 Вставка и редактирование изображений

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

00:44:14 Изменение размера и кадрирование изображений

  • Открытие документа и редактирование обложки.
  • Обрезка изображения для лучшего соотношения песка и воды.
  • Применение кадрирования и сохранение изменений.

00:45:06 Настройка отступов и центрирование текста

  • Изменение отступов для центрирования текста.
  • Обновление и просмотр страницы для проверки изменений.

00:47:03 Удаление и добавление блоков

  • Удаление блока и добавление нового после изображения.
  • Открытие сайта и выбор шаблона для генерации контента.
  • Копирование и вставка блока на сайт.

00:49:13 Настройка ссылок и кнопок

Добавление ссылок на кнопки для перенаправления пользователей.
Изменение цвета кнопок и обновление страницы.

00:51:11 Создание страницы “О нас”

  • Удаление текущей страницы “О нас” и создание новой.
  • Генерация контента для новой страницы.
  • Вставка и обновление страницы “О нас”.

00:54:40 Финальные штрихи и завершение страницы

  • Замена фотографий и редактирование текста.
  • Поднятие точки фокуса и скругление углов изображений.
  • Обновление страницы и проверка финального результата.

00:57:07 Использование паттернов в WordPress

  • Редактор WordPress позволяет использовать готовые секции для сайта.
  • Перейдите на страницу wordpress.org/patterns для доступа к паттернам.
  • Паттерны включают посты, тексты, галереи, колту экшн и другие элементы.

00:58:02 Выбор паттернов

  • Паттерны делятся на созданные командой WordPress и комьюнити.
  • Комьюнити паттерны предлагают множество вариантов для различных элементов сайта.
  • Паттерны можно бесплатно использовать, стилизовать и применять на своем сайте.

00:59:01 Применение паттернов

  • Библиотека паттернов постоянно расширяется.
  • Можно искать паттерны по ключевым словам, например, “прайсинг”.
  • Паттерны создаются разными разработчиками и программистами.

01:00:01 Вставка паттернов

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

01:01:50 Группировка и удаление элементов

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

01:03:15 Настройка страницы услуг

  • Обновление страницы и проверка результата.
  • Поднятие кнопки на странице.
  • Удаление отступов в разделе стиля.
  • Финальная настройка страницы услуг.

01:04:14 Настройка страницы контактов

  • Переход на страницу контактов и вставка новых фотографий.
  • Замена текста “связь” на “контакты”.
  • Настройка обложки страницы и обновление.
  • Финальные изменения и проверка результата.

01:06:53 Завершение редактирования страниц

  • Завершение редактирования всех страниц.
  • Планирование дальнейших улучшений после завершения сайта.
  • Переход к настройке шапки и футера сайта.

01:07:52 Настройка шапки и футера

  • Переход в консоль и выбор редактора внешнего вида.
  • Замена шаблона шапки и футера.
  • Добавление и настройка кнопок и ссылок в шапке и футере.

01:11:26 Добавление и настройка кнопок

  • Добавление кнопки “Контакты” в шапку.
  • Настройка стиля и прозрачности кнопки.
  • Добавление дополнительных настроек типографики.

01:14:23 Финальные изменения и проверка

  • Обновление страницы контактов и проверка результата.
  • Удаление лишней ссылки и добавление ссылки на контакты.
  • Финальная проверка и исправление дублирования меню.

01:15:29 Настройка меню

  • Перейдите в настройки навигации и создайте новое меню.
  • Добавьте страницы “О нас”, “Услуги” и “Контакты”.
  • Убедитесь, что меню не повторяют друг друга.

01:16:18 Дополнительные страницы и стили

  • Добавьте страницы “Политика конфиденциальности” и “Условия использования” в меню футера.
  • Настройте шрифты и размеры кнопок в стиле.
  • Измените скругление кнопок для улучшения внешнего вида.

01:17:36 Изменение текста и добавление социальных сетей

  • Измените текст на “Сделано с любовью” и сохраните изменения.
  • Добавьте кнопки социальных сетей, таких как Telegram, ВКонтакте и YouTube.
  • Выровняйте кнопки по центру и настройте ссылки.

01:19:41 Настройка мобильного меню

  • Проверьте отображение кнопок социальных сетей.
  • Измените фон и цвет текста в мобильном меню.
  • Сохраните изменения и обновите страницу для проверки.

01:21:50 Создание логотипа

  • Использование сервиса Logo Maker для создания логотипа.
  • Поиск иконки с помощью поиска на английском.
  • Настройка иконки и добавление текста.

01:23:57 Настройка цвета и шрифта

  • Изменение цвета текста и шрифта.
  • Копирование кода цвета с сайта для точного соответствия.
  • Учитывание ограничений шрифтов для кириллицы.

01:25:55 Сохранение и загрузка логотипа

  • Сохранение логотипа и загрузка файла на почту.
  • Отправка файла на почту и загрузка его на сайт.

01:26:52 Настройка фавикона

  • Удаление стандартного фавикона и загрузка иконки волны.
  • Сохранение и загрузка иконки на почту.

01:27:42 Установка логотипа на сайт

  • Открытие редактора шаблона страниц.
  • Замена заголовка сайта на логотип.
  • Загрузка и установка логотипа и фавикона.

01:29:48 Настройка размера и стиля логотипа

  • Настройка размера логотипа.
  • Отключение использования логотипа как значка сайта.
  • Сохранение настроек и проверка результата.

01:30:43 Завершение настройки логотипа

  • Проверка логотипа на главной странице сайта.
  • Настройка иконки сайта как фавикона.
  • Проверка логотипа в мобильной версии сайта.

01:32:17 Создание формы обратной связи

  • Переходим на страницу контактов, где будет форма обратной связи.
  • Форма будет для записи на пробный урок, что является популярной маркетинговой стратегией.
  • Для создания формы используем плагин WP Forms.

01:33:15 Установка и настройка плагина WP Forms

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

01:36:03 Настройка формы

  • После установки плагина создаем первую форму.
  • Выбираем шаблон “Простая контактная форма” и редактируем её.
  • Добавляем поля для имени, номера телефона и маркетингового исследования.

01:39:26 Дополнительные настройки формы

  • Настраиваем маску ввода для номера телефона.
  • Указываем тему письма для уведомлений и настраиваем уведомления.
  • Сохраняем изменения и проверяем работу формы.

01:42:37 Размещение формы на сайте

  • Открываем сайт и переходим на страницу контактов.
  • Выбираем форму “Запись на пробный урок” и редактируем её.
  • Форма стилизована под дизайн сайта, что упрощает процесс.

01:43:26 Тестирование формы

  • Заполняем форму и отправляем её.
  • Получаем уведомление на электронную почту о новой записи.
  • Проверяем, что все данные сохранены и форма работает корректно.

01:45:18 Изменение шрифтов на сайте

  • Установка плагина “Google Fonts” через консоль WordPress.
  • Настройка шрифтов для основного текста, заголовков и кнопок.
  • Рекомендации по использованию не более двух шрифтов на сайте.

01:49:33 Создание бэкапа сайта

  • Важность создания бэкапа перед серьезными изменениями.
  • Установка плагина “WP-Backup” через консоль WordPress.
  • Настройка бэкапа для базы данных и файлов сайта.

01:52:14 Преобразование кириллических ссылок в латинские

  • Проблема использования кириллических ссылок на сайте.
  • Установка плагина “Cyrtulate” для преобразования ссылок.
  • Ручная конвертация ссылок в меню сайта.

01:55:29 Настройка навигации

  • Идем в консоль, внешний вид-редактор, навигация.
  • Нажимаем “изменить” в верхней навигации.
  • Удаляем ненужные элементы и добавляем “о нас”.
  • Сохраняем изменения и проверяем раздел “услуги”.

01:56:27 Проверка и настройка нижнего меню

  • Проверяем название “услуги” и “контакты”.
  • Копируем и вставляем “контакты” в нижнее меню.
  • Сохраняем изменения и проверяем работу сайта.

01:58:39 Оптимизация для поисковых систем

  • Наводим курсор на вкладку для отображения информации для поисковых систем.
  • Используем искусственный интеллект для создания теглайна и описания сайта.
  • Вставляем ключевые слова и описание в настройки сайта.

02:01:20 Завершение и рекомендации

  • Проверяем отображение информации при наведении курсора.
  • Поздравление с созданием сайта и приглашение на онлайн-школу.
  • Рекомендация курса “Запуск сайта на WordPress” и прощание.

Таймкоды сделаны в нейросети https://300.ya.ru/v_ZpMAQzH1/

В этом видео

Начали
0:00
создать свой сайт Стало ещё легче всё что нужно сделать – это описать ваш бизнес выбрать из вариантов
0:05
профессионального дизайна и нажать генерировать контент Давайте представим что в параллельной вселенной я инструктор по сёрфинга в городе Сочи И
0:12
мне нужен сайт смотрите прямо на ваших глазах нерас генерирует контент для сайта и вы удивитесь насколько хорошо
0:19
нерас напишет о вашем бизнесе помощь искусственного интеллекта сделает вас гораздо более продуктивным чем вы
0:24
когда-либо были и сэкономит уйму времени она напишет для нас даже отзывы сдела
0:30
всё это очень быстро и абсолютно бесплатно а далее нам Останется только скопировать страницу целиком перейти на
0:37
наш сайт написать заголовок и нажать вставить и Вуаля весь контент все блоки
0:43
с готовым дизайном на нашем сайте конечно же всё в нашем полном распоряжении мы можем менять текст
0:49
заменять фотографии менять блоки местами вставлять другие блоки и так далее а
0:56
затем нам Останется только опубликовать сайт и дело сделано причём речь идёт не
1:05
об одной странице а о полноценном сайте мы сделаем главную мы сделаем страницу
1:10
ос мы сделаем страницу услуги и мы сделаем страницу контакты с
1:18
формой обратной связи Вот так друзья Всем привет Меня зовут каль Алексей и в
1:24
этом видеоуроке мы по шагам с полного нуля без кода и программирования сделаем
1:30
при помощи искусственного интеллекта А сейчас я расскажу вам план нашего урока для того чтобы создать такой сайт мы с
План урока
1:37
вами вместе проделаем следующие шаги первое что мы сделаем – это получим имя сайта и хостинг имя сайта он же до он же
1:44
адрес сайта в сети Интернет мы с вами в уроке будем делать сайт с адресом soci
1:49
Wave ru У меня есть ещё dom cs.ru адрес моей онлайн школы десай в общем всё это
1:56
домены вам Я думаю это тоже знакомо вот мы для ва сайта получим такой домен хостинг хостинг по-простому – это сервер
2:04
компьютер который подключен к скоростному каналу интернет и 24 часа в сутки круглый год он обеспечивает
2:11
доступность вашего сайта для других пользователей имя сайта и хостинг – это вещи обязательные поэтому мы с них И
2:17
начнём следующее что мы сделаем – это установим систему управления WordPress WordPress – это простая лёгкая
2:24
дружелюбная к новичкам но в то же время мощная система для создания сайтов в
2:29
тоже она самая популярная в мире вы сами сможете убедиться что это по моему
2:35
мнению это лучший выбор для создания сайта в современных реалиях следующее что мы сделаем – это выберем дизайн для
2:41
вашего сайта мы выберем Не просто потому что это красивый дизайн мы выберем какой
2:46
дизайн который работает человек который вдохновил меня на создание этого видео он в Америке провёл обширное
2:53
исследования он исследовал успешные американские компании изучил их сайты и
2:58
заметил мерности они были учтены при создании дизайнов то есть крупные американские компании успешные которые
3:05
зарабатывают много денег они тратят соответственно много денег на исследовани и используют только то что
3:11
работает мы берём то что работает и используем Это для себя следующим пунктом мы с вами создадим контент вы
3:17
уже могли увидеть Да что мы просто опишем ваш бизнес и остальное за нас сделает нейросеть причём сделает это
3:24
классно далее мы этот классный контент перенесём очень просто на наш сайт и я
3:30
покажу вам как вы можете его редактировать и конечно же мы используем для сайта свои собственные изображения
3:37
всё сайт готов я дам вам ещё некоторые советы расскажу про необходимые плагины
3:43
в общем скажу вам Как сделать сайт ещё более качественным и мы закончим теперь
3:50
о том сколько это будет стоить до нам обойдётся в 179 руб если говорить про
Цена вопроса
3:55
зону ru есть другие доменные зоны они подороже а также немножко дороже будет само продление но
4:02
в первый год нам домин обойдётся в 179 руб Если вы выберете зону ru хостинг а
4:08
он нам обойдётся в 3.800 руб в год можно оплачивать помесячно Но тогда не буде
4:14
будет немного дороже хостинг я Настоятельно Рекомендую вам друзья не
4:19
экономить на хостинге потому что вы там какую-то тысячу может быть сэкономите в другом месте но что-то будет по-другому
4:27
Я уже более 10 лет пользуюсь тем хостингом который я буду рекомендовать и я абсолютно уверен что он первоклассный
4:34
вообще хостинг в принципе Вам нужно будет зайти сделать там кое-какие дела И вы пополнить баланс и забыть про это то
4:41
есть Это отличает хороший кости хостинг он просто работает И никаких проблем у вас сайтом не возникает а плюс а должен
4:49
сказать что по моим по моей рекомендации каждый из вас получит 30 дней хостинга
4:56
бесплатно то есть сможете сами протестировать понять что он вам подходит и уже затем оплачивать либо на
5:02
год либо оплачивать помесячно WordPress WordPress всегда был и будет бесплатным я обращаю на Это особое внимание и
5:09
друзья бывает совершают ошибку ребята почему-то попадают на сайт wordpress.com регистрируются Там они как бы тоже
5:15
делают на вордпрессе но они используют wordpress.com как платформу как по сути хостинг и это обходится в 10 раз дороже
5:22
Не совершайте такие ошибки не Используйте wordpress.com ещё пара фактов о вашем
5:28
будущем сайте во-первых он будет у вас полностью мобильно адаптирован то есть С
Мобильная версия
5:33
какого бы размера устройства пользователь не зашёл на ваш сайт всё будет выглядеть отлично будет
5:39
адаптировано под его размер устройства А сейчас в современных реалиях интернета
5:46
это очень и очень важно то есть вам не придётся заморачиваться у вас это будет всё уже сделано и последнее прежде чем
Скорость сайта
5:53
мы начнём Я хочу показать вам скорость работы вашего будущего сайта А есть
5:59
нюансы да то есть сайт на вордпрессе может работать медленно но в нашем случае если вы будете делать всё по моему видео то ваш сайт будет работать
6:07
очень и очень быстро 93 балла – это достаточно высокий показатель для вордпрессе о мобильной версии а для
6:14
компьютера скорость будет И того быстрее То есть это будет хорошо влиять на индексацию и На позиции вашего будущего
6:22
сайта в поисковой выдаче Яндекса или Гугла хорошо на этом вступительная часть
6:28
окончена и мы начинать поехали друзья и первое что нам необходимо сделать – это
6:33
получить имя сайта и зарегистрировать хостинг для этого Пожалуйста найдите в описании к видео ссылку которая ведёт на
Домен и хостинг (30 дней free)
6:40
хостинг и переходите по ней нажимайте А у вас откроется главная страница хостинга бегет Я уже упомянул что я
6:47
более 10 лет пользуюсь этим хостингом и я считаю что это лучший хостинг который можно выбрать следующее что нам нужно
6:53
сделать это найти вот здесь вот наверху справа кнопочку регистрация нажимаете затем первое что нужно выбрать
7:00

это изменить здесь тариф нам предлагает по умолчанию тариф Старт но он нам не нужен нам подойдёт тариф блок
7:07

это 10 Гб это более чем достаточно и у нас уже возможно размещение трёх сайтов
7:13
Старт – это уже 10 сайтов в общем выбираю я вот этот тариф их можно потом конечно же менять и Обратите внимание у
7:21
нас будет 30 дней абсолютно бесплатно затем У нас есть выбор регистрироваться на физическое лицо либо на юридическое
7:27
лицо а если Ну вам не нужно заморачиваться вам нужно регистрироваться просто на физическое лицо кому нужно на юридическое лицо
7:33
регистрироваться они и сами это знают пишите здесь фамилия имя отчества всё правильно как в паспорте пишете свой
7:40
мобильный телефон никакого спама не будет только важная информация можно вообще выключить любые уведомления а
7:46
вводите свой рабочий email которым вы пользуетесь Да здесь обязательно нужно указать все верные данные потому что вы
7:53
регистрируйте ну это можно сравнить с сим-картой То есть она как бы регистрируется на паспорт хостинг тоже
7:58
регистрируется на паспорт а затем У нас есть две опции мы можем указать во-первых логин То есть если вы у вас
8:04
есть какой-то никнейм который вы привыкли использовать Вы можете его сюда вписать и он у вас будет такой же на
8:09
хостинге и у нас есть возможность указать код партнёра а пожалуйста друзья
8:14
если вы делаете свой сайт по моему видео Если вы укажете мой код партнёра это будет такая
8:22
ваша небольшая благодарность 110 928 для вас это абсолютно ничего не изменит да А
8:28
для меня это очень много значит Спасибо вам в общем всё заполняете и нажимаете
8:33
регистрация А после того как вы зарегистрируетесь вам на почту придёт уведомление нужно будет наверное
8:39
подтвердить свою почту Я очень давно регистрировался уже не помню В общем здесь я думаю вы без проблем справитесь
8:45
А после того как вы зарегистрировались Вы можете попасть в контрольную панель своего хостинга вот так вот она выглядит
8:52
здесь есть некая общая информация Да Техническая информация нагрузка и вот
8:57
такие вот опции Да которыми мы можем здесь пользоваться как мы можем управлять
9:03
нашим хостингом и нам что нам нужно хостинг у нас уже есть теперь нам осталось зарегистрировать домен домен –
9:10
это важная неотъемлемая часть любого сайта Да я уже об этом говорил что если вы хотите серьёзно заниматься то вам
9:16
нужен собственный домен Есть бесплатные домены есть домены третьего уровня Но
9:22
это всё не то Если вы серьёзно планируете заниматься своим сайтом то зарегистрируйте домен Тем более это
9:27
всего лишь 179 руб за первый год смотрите находите значит раздел домены и
9:33
поддомены нажимаете и здесь вот есть регистрация доно и вот здесь нам
9:38
предлагают написать имя домена если у Вас уже есть в голове какое-то название Вы можете прямо брать его и
9:44
регистрировать Если же вы пока сомневаетесь то я вам предлагаю воспользоваться тоже классным
9:49
инструментом который тем же самым гето и предлагается он называется помощь с доменом с помощью
9:57
искусственного интеллекта смотрите Значит на сайте бегета идёте в раздел домены и здесь вот есть ai генератор
10:04
пишите Я уже написал представим что в какой-то параллельной реальности я занимаюсь сёрфингом я обучаюсь сёрфингом
10:11
в городе Сочи представим что в Сочи можно сёрфить что я провожу индивидуальное групповое обучение
10:16
серфингу в общем пишите сюда то чем вы занимаетесь Чем занимается ваша компания и нажимаете сгенерировать
10:24
домены и Нейро нам генерирует смотрите она не очень понимаю почему она
10:29
показывает нам те домены которые уже заняты Да но тем не менее можно что-то присмотреть Surf прочи Да Surf Surfers
10:39
Surf GL В общем вот такие вот разные варианты она нам предлагает но в зоне ру
10:45
не так много но смотрите мы можем попросить Допустим или увеличить или уменьшить количество доменов либо
10:50
Дописать что-то ещё нажимаете сгенерировать ещ раз и она предлагает вам уже другие домены в той же
10:58
самой Вы можете легко что-то Для себя выбрать в общем Пользуйтесь Да и пусть
11:05
нес поможет вам с регистрацией с генерацией с мозговым штурмом по имени
11:11
домена Вот кстати неплохой Wave Может быть я бы его и выбрал Если бы это было бы реально да то что я занимаюсь
11:18
сёрфингом далее ну в общем подсмотрели вы его копируете отсюда ид сюда
11:25
[музыка] вот я вставил Вставляю и bget они чем
11:33
мне тоже очень нравится они сразу говорят Сколько будет стоить первоначальная регистрация Сколько будет стоить продление в некоторых хостинг
11:39
компаниях Они вам говорят 10 руб сейчас заплатишь Да а потом ну сколько-то не скажем А когда проходит год то с тебя
11:46
просят там какие-то нереальные деньги то есть здесь вы сразу Видите сколько вы Заплатите через год То есть через год
11:51
продление будет стоить 390 руб затем нам по акции предлагается ещё
11:57
зарегистрировать вот этот вот домен да он сейчас будет абсолютно бесплатный но потом нам попросят за его
12:02
продление деньги Если Вам это не нужно да А мне это не нужно я просто нажимаю отказаться от участия всё у меня один
12:09
домен стоимость регистрации 179 руб и я могу нажать продолжить но друзья прежде
12:16
чем регистрировать я вам ещё хочу один момент показать смотрите у меня есть два бесплатных бонусных домена я их получил
12:22
за то что я пополнял баланс на год и более Вот видите Да получаете бонусные домены при пополнении баланса на год и
12:29
более Поэтому если вы сейчас прямо сейчас уверены что Вы будете сайтом заниматься для вас Он важен и для вас
12:35
это что-то на самом деле значит да то вы можете пополнить прямо сейчас баланс на год И тогда вам Доми достанется
12:42
бесплатно будет бонусный Доми вот затем нажимаете значит вы
12:47
продолжить на следующем этапе вас попросят указать паспортные данные
12:53
администратора и нужно Здесь заполнить те паспортные данные которые у вас собственно есть в паспорте Да у меня
13:00
здесь вот одного из моих клиентов паспортные данные в общем вы нажимаете у
13:06
вас в принципе здесь ничего не будет вам будет предложено создать администратора вы этого администратора создаёте всё
13:12
указываете как в паспорте пишите и всё после этого сможете регистрировать уже на ваши паспортные данные в общем полай
13:20
проделайте пожалуйста всю эту бюрократическую работу да Затем что здесь внизу Да продлевать автоматически
13:26
можете убрать можете оставить галочку и здесь соответственно защитить сайт
13:33
бесплатным СС сертификатом lpt это тоже обязательно нужно включить всё нажимаете
13:39
зарегистрировать мы видим сообщение что домен зарегистрирован и надёжно защищён бесплатным сертификатом от encrypt нам
13:47
никаких дополнительных сертификатов не потребуется то что до зарегистрирован это очень классно да но тем не менее
13:53
нужно Здесь подождать вки несколько какое-то время обычно это 20-30 минут
14:00
нужно подождать прежде чем домен станет доступным поэтому Возьмите паузу налийте себе кружечку чая и отвлекитесь Да после
14:08
того как домен будет уже полностью по-настоящему зарегистрирован мы сможем продолжать в моём случае Прошло около
14:14
полутора д часов и вот Я обновил страничку и в какой-то момент вместо ошибки У меня появляется вот такое вот
14:20
сообщение домен не прили кован к директории на сервере Всё значит хорошо Сейчас мы можем установить на наш до
14:28
система управления сайтом WordPress давайте это и сделаем а для этого я нажимаю панель управления вот здесь вот
14:35
да перехожу в Панель управления хостингом затем иду в раздел cms установка система управления дальше
Установка wordpress
14:43
опускаюсь в самый низ нет Простите вот здесь нажимаю установить CS и нахожу
14:48
WordPress вот он нажимаю и у меня здесь есть выбор на какой домен мне установить
14:55
соответственно я должен найти вы находите свой домен который регистрировали здесь я делаю создать
15:01
новый сайт ВС верно дальше я здесь пишу описание сайта мы это всё потом поменяем поэтому я просто
15:09
напишу Сочи волны например да затем смотрите важный момент логин администратора Я рекомендую использовать
15:15
какой-то нестандартный логин то есть Писать не админ Да а что-то другое Я сейчас здесь просто
15:22
напишу так AD 11 в шем случае использовать всё
15:29
что угодно но Я рекомендую не использовать Admin что-то другое А И здесь нужно указать пароль
15:35
администратора для того чтобы мы могли попасть в админку здесь я напишу тоже
15:41
что-нибудь сложное Да ну вернее я в моём случае это у меня не Основной какой-то сайт Я просто напишу набор цифр в вашем
15:49
случае Я рекомендую сделать надёжный пароль и здесь я укажу свою электронную
15:57
почту вот так вот и после этого мне нужно
16:03
нажать установить нажимаю информация cms устанавливается
16:09
процесс вставляется тива полностью заверши через 5 минут Всё отлично нажимаю
16:14
закрыть нужно подождать буквально не знаю минутку наверное и можно попробовать уже попасть в админку нового
16:23
сайта вашего А вот появляется сообщение что успешно установлено И после этого я
16:29
возвращаюсь на эту вкладку вот у меня мой домен я нажимаю обновить ничего не
16:34
происходит потому что у меня здесь закроюсь то есть мне нужно сейчас
16:40
почистить видите проблема уже решена Попробуйте сбросить кэш Если в вашем случае какая-то проблема наблюдается да
16:45
То есть вы уже установили WordPress но у вас не открывается сайт Да такое случается Поэтому вот как можно проблему
16:52
решить сейчас я почи почищу кэш и мы вернёмся всё кэш я почистил и теперь
16:57
пробуем Обновить сайт открылся в моём случае он выглядит вот так вот когда вы
17:03
делаете Это видео он может выглядеть по-другому Но если что-то открылось то всё в порядке Мы в правильном
17:08
направлении движемся следующее нам нужно авторизоваться сейчас мы видим соответственно Как ваш пользователь
17:14
видет сайт нам нужно зайти внутрь то есть в админ панель вордпрессе
17:29
секунду VP тире Admin
17:35
нажимаю здесь я пишу Admin 11 и здесь пароль
Заходим в админку
17:43
который я задавал можно поставить запомнить меня и я нажимаю
17:50
войти так здесь нажимаю сохранить всё супер мы попали в админ-панель вашего
17:56
нового сайта и Первое что я обычно делаю Когда устанавливаю WordPress я очищаю
18:01
вот эту вот область Здесь слишком много Всё я не люблю когда это всё мешает и поэтому я эти вещи закрываю нажимаю
18:08
закрыть здесь я нажимаю настройки экрана и убираю вот эти вот а чекбоксы оставляю
18:15
только на виду вот когда я буду устанавливать новые плагины здесь будут появляться соответственно новые такие
18:20
вот окошки А и уже нужно смотреть если нужно это окошко Да здесь вот вы его оставляете если нет Я предпочитаю убрать
18:27
чтобы Здесь было вот так вот чистенько следующее что мы сделаем установим плагин который обеспечит корректную
18:32
работу ssl сертификата А хотя сейчас у меня и уже есть https то есть защищённое
18:39
соединение Да и в браузере это будет отображаться в браузере пользователя а всё-таки нужно поставить ещё один плагин
18:46
чтобы ну полностью так сказать доктис сертификат А смотрите я иду в раздел плагины Добавить
18:53
новый Затем в поиске плагинов я пишу
19:00
ли Simple ssl все все названия плагинов я дам в
Really Simple SSL
19:06
описании к видео так нажимаю установить смотрите более 5 млн активных установок
19:12
Всё я нажимаю установить и нажимаю
19:19
активировать мне сообщают что был обнаружен SS сертификат Отлично я нажимаю активировать
19:27
ssl ра авторизован авторизоваться снова всё в порядке Нажимаю
19:33
войти так здесь нам предлагают различные Про версии я нажимаю здесь просто
19:39
Skip также я могу оставить свой электронный адрес чтобы мне приходили
19:44
сообщения от этого плагина в принципе это не обязательно я нажимаю тоже Skip Skip фиш
19:52
всё здесь немножко он конечно ругается Да но на самом деле всё всё нормально
19:57
уже здесь в принципе делать ничего не нужно так открою главную страницу
20:02
консоли у меня почему-то опять всё это нарисовалась здесь Да не знаю почему Давайте ещё раз это
20:10
уберём вот так вот так хорошо а следующее что мы сделаем
20:16
это установим тему которая обеспечит нам ну так скажем внешний вид нашего сайта
Установка темы
20:24
для этого нужно Перейти в раздел внешний вид темы далее я нажимаю добавить новую
20:30
тему и пишу её название
20:35
вариа Да если по-русски произносить вообще это variations немножко
20:40
опускаемся вниз и вот находим её вот она наша тема variations А вот так вот она выглядит Да постарайтесь найти именно её
20:47
потому что вот эта вот заставок она может меняться а нужно установить именно эту тему потому что весь урок У нас ну
20:54
основан на этой теме и искуственный интеллект нам будет создавать контент именно для этой темы а нажимаю
21:03
установить и нажимаю активировать новая тема активирована
21:09
перейти на сайт нажимаю и А сейчас наш сайт представляет из себя вот такую вот
21:17
заготовку а всё правильно мы всё делаем правильно Да и Давайте двигаться дальше
21:22
давайте я закрою вот эти вот лишние сейчас они нам не нужны
21:29
Теперь смотрите Я хочу немножко с вами поговорить я уже более 10 лет Обучаю
21:36
ребят новичков созданию сайта и я уже говорил в начале Да что я заметил что очень многие начинают Но вообще
21:44
буквально единица Да может быть один из дети может быть чуть больше человек чуть больше процентов заканчивают до конца
21:51
доводят дело и это потому я пришёл к такому выводу что это потому что люди
21:58
действуют в неправильном порядке создания сайта Как обычно происходит
22:04
человек Ну вот доходит до этого этапа Да условно и он начинает делать главную
22:09
страницу он начинает писать текст подбирать изображения делать
22:15
определённый наклон шрифта определённый цвет оттенок В общем И это всё
22:20
очень-очень медленно продвигается затягивается на дни даже на недели и в итоге человек устаёт и он Возможно даже
22:29
не закончит главную страницу но нужно понимать что сайт – это не только главная страница сайт – Это несколько
22:36
страниц а и я вам сейчас предлагаю абсолютно Другой путь который позволит
22:43
большинству из вас уже в ближайшие дни Может быть кто-то сегодня закончит Да слава Богу нам будет помогать
22:48
искусственный интеллект а но я хочу сказать что я э постарался сделать такое
22:54
руководство которое доведёт каждого из вас до конца Вы должны сейчас
22:59
согласиться что сайт который мы с вами сделаем пускай он не совершенен Да он вы
23:06
его сможете сделать совершенным впоследствии постепенно дорабатывать Да но у вас уже будет готовый сайт который
23:14
будет работать и который будет приносить вам какую-то пользу да Клиентов в бизнес там я не знаю читателей и так далее я
23:21
предлагаю вам действовать Именно таким образом И сейчас мы с вами сделаем
23:27
сначала структуру сайта то есть мы добавим все страницы мы пока не будем добавлять контент на эти страницы Но мы
23:33
сделаем сюда вот в меню выведем все эти страницы Давайте приступим так А
23:40
смотрите значит я нажимаю добавить и нажимаю
Создаем страницы
23:46
страницу нажимаю закрыть А я должен сделать страницу
23:52
главное нажимаю опубликовать ещё раз опубликовать
23:58
затем здесь же нажимаю добавить страницу услуги следующая страница А мы
24:08
будем делать Я буду делать общую такую структуру которая в принципе подойдёт многим и многим бизнесам а нужно
24:14
рассказать чем вы занимаетесь Кто вы и соответственно контакты как с вами можно
24:20
связаться нажимаю добавить страницу о нас или о компании Да как
24:27
хотите нажимаю опубликовать нажимаю опубликовать нажимаю добавить
24:35
страницу контакты нажимаю опубликовать нажимаю
24:41
опубликовать так можно нажать посмотреть страницу вот смотрите теперь у нас когда
24:47
мы нажимаем главная страница Да у нас вот оно наше меню главная контакты примени и
24:55
услуги изменить поря здесь сейчас всё вперемешку как это можно сделать нужно
25:02
перейти в нашу консоль а затем найдём внешний вид редактор нажимаю а здесь я
Порядок страниц меню
25:10
должен найти навигация нажимаю и вот у нас есть главная контакта о на с пример странице и услуги А смотрите что мы
25:18
делаем допустим главное у меня в правильном месте Да следующее Я хочу чтобы шла страница о нас Я просто
25:25
зажимаю появляется вот такое сообщение з отсоединить и вот так вот у нас я могу
25:32
перемещать оп видите у меня поменялось следующая будет у меня идти страница
25:39
услуги и уже последняя будет идти страница контакты ещё есть страница пример страницы которая у нас была по
25:45
умолчанию мы её просто удалим вот так вот всё Главное о нас
25:51
услуги контакты Вот такие у нас появились здесь страниц кстати сразу же
25:58
хочу показать вам что есть возможность добавлять меню второго уровня Да если например зажать и вот смотрите видите появляется
26:05
вот эта Синяя синяя полоска укорачивается Если я сделаю так то у меня видите куда услуги ушли в общем это
26:12
называется подменю Сейчас я этого делать не буду но вы об этом теперь знаете всё
26:19
оставляю значит вот так вот как задумано главное она с услуги контакт всё нажимаю просмотр изменения и здесь нажимаю
26:26
сохранить обнон Теперь если я нажму на значок преса здесь ещ раз перейти на
26:31
сайт вот пожалуйста у меня эти страницы в правильном порядке Но есть ещё один
26:37
момент да у нас эти страницы они пустые на них ничего нету Если на главной есть
26:44
хотя бы что-то Да вернее видите у нас сейчас главная страница даже не работает потому что мы ещё не установили её как
26:49
главной ну к этому мы перейм следующее что мы сделаем Давайте
26:56
мым контент добавим контент добавим внешний вид дизайн для каждой этой
27:02
внутренней страницы и добавим контент который для нас напишет искусственный интеллект Давайте откроем редактор
27:09
страниц для этого иду в консоль страницы все страницы Вот они
27:17
наши страницы кстати можно удалить те страницы которые нам не нужны удалю вот этот пример страница политика
27:23
конфиденциальности в принципе она на сайтах должна быть да мы её не будем в этом видео настраивать но я её оставлю
27:29
Так давайте я удалю пример страницы Всё теперь иду сюда вот в главное нажимаю
27:36
изменить И вот так у нас выглядит редактор страниц в данном случае главный здесь мы можем создавать сайт как бы с
27:44
чистого листа Да собирая его по блокам также есть возможность использовать готовые блоки но есть другой способ Да
27:50
который мы и будем использовать он гораздо быстрее гораздо эффективнее и позволит вам уже сегодня закончить свой
27:57
сайт что для этого нужно сделать нужно открыть сайт А который располагается по
28:04
адресу t.com в описании к видео оставлю ссылку затем здесь настоящая магия Да вы
Генерация контента для главной
28:11
описываете бизнес которым вы занимаетесь Я пишу про то что я инструктор сёрфинга Да помним про нашу параллельную
28:17
реальность В общем чем я занимаюсь а обязательно Напишите попросите написать
28:23
на русском языке затем так а далее нам нужно выбрать здесь у вас
28:29
должно быть modify templates Да у меня немножко уже изменилось в общем нам нужно выбрать тот дизайн который мы
28:36
будем использовать я Смотрите если вы начинаете здесь больше минуты Да этот
28:41
или этот или этот ну гадаете я вам рекомендую не заморачиваться а выбрать
28:48
самый простой дизайн вот этот вот потом изменяя контент изменяя картинки и к
28:54
этому дизайну можно будет добавлять другие блоки от других дизайнов Да я тоже покажу как это делать то есть вы
29:00
сможете превратить этот дизайн во всё что захотите поэтому я выбираю его вот
29:05
этот Island нажимаю затем А смотрите вот здесь у меня есть Business Information вот у
29:12
меня здесь всё уже написано Да нажимаю update и что нужно сделать нужно нажать
29:19
generate Content нажимаю и искусственный интеллект начал
29:26
работать вот так вот
29:31
он значит заполняет пишет нам этот текст сейчас он
29:37
всё это дело напишет И после этого мы сможем скопировать целиком
29:43
страницу так давайте дадим ему немного времени
29:56
да всё генерация завершена И теперь мы можем эту страницу целиком скопировать
30:03
ещё один момент друзья забыл упомянуть Если вдруг у вас сайт t.com недоступен по каким-то причинам пробуйте через VPN
30:11
VPN сейчас это наше всё вот поэтому Ну просто такое замечание Да Если вдруг не доступен пробуйте через VPN далее
30:18
смотрите нажимаю Copy entire page оп скопировано иду сюда к себе на главную
Копировать – вставить Главная
30:24
ставлю курсор мыши и на Ctrl V копировать вставить и вся моя
30:33
страница пожалуйста здесь сейчас у многих может возникнуть желание начать
30:40
здесь редактировать что-то
30:48
подправки нажимаю обновить нажимаю посмотреть вот у меня страница одна
30:54
готова далее страница ос и нажимаю здесь редактировать
31:00
страницу так возвращаю сюда tayer com иду в раздел
31:06
АС и нажимаю сгенерировать
31:13
контент а страница готова нажимаю опять копировать всю страницу возвращаю сюда
Копировать – вставить О нас
31:21
Вставляю готово нажимаю обновить нажимаю посмотреть страницу дальше иду в раздел
31:27
Услуги нажимаю редактировать страницу сюда возвращаюсь иду в раздел
31:34
Услуги и нажимаю сгенерировать контент контент сгенерирован и я нажимаю
31:39
копировать всю страницу идм сюда и привычно уже вставляем нажимаю
31:46
обновить нажимаю посмотреть страницу и осталась последняя страница
31:52
контакты нажимаю редактировать страницу возвращаюсь сюда вот иду в контакты
31:57
нажимаю сгенерировать контент страница сгенерирована нажимаю копировать идём сюда ВКонтакты и нажимаю
Копировать – вставить Контакты
32:07
вставить что интересно да смотрите он даже электронную почту мне придумал номер телефона ну здесь он просто по
32:14
порядку Да здесь почему-то он на русском не написал время
32:19
работы придумал также адрес Да пляжный проспект 5 Сочи Сочи Россия есть один момент да здесь у нас
32:26
есть форма здесь вот мы можем посмотреть здесь у нас есть форма обратной связи где можно пользователь может написать
32:33
вам письмо написать сообщения у нас пока здесь ничего не скопировала Да потому
32:39
что у нас не хватает тут кое-какой плагина мы этим займёмся позже пока не обращаем внимания В общем я нажимаю
32:45
обновить и нажимаю посмотреть страницу так давайте посмотрим что у нас
32:52
значит у нас есть страница главная нас услуги контакта Но есть один момент смотрите если я нажимаю на название
32:58
сайта то у меня почему-то открывается та наша самая первая прежняя страница не
Установка главной страницы
33:08
редактировалось искусственного интеллекта у неё есть адрес вот такой вот СШ главная да Нам же нужно чтобы эта
33:15
главная страница была просто по адресу размещалась просто по адресу нашего домена Да без каких-либо добавок как это
33:23
можно изменить нужно Перейти в раздел значит в
33:28
консоль инструменты Простите настройки
33:34
чтени И здесь нужно на главной странице отображать статическую страницу и
33:39
главную страницу нужно выбрать главное Вот так вот нажимаю сохранить
33:45
изменение Теперь если я перейду на сайт Всё теперь всё О’кей вот у меня есть значит главная страница Да вот она
33:52
которую мы с вами сгенерирована
33:57
страница услуги и страница контакты все страницы у нас готовы да здесь ещё
34:05
конечно же контент не Ну не прям супер но он уже есть да По крайней мере И это
34:12
гораздо лучше чем 90% тех кто пытается создать создавать сайт кстати смотрите
34:19
один почему-то отзыв У нас тоже здесь не написал очень странно обращаю внимание
34:25
что помните мы говорили про Моби версию Да уже всё у нас работает как надо и меню прячется у нас
34:36
сюда вот так вот А я думаю что вы уже достигли большого прогресса если вам
34:41
нравится моё руководство Да пожалуйста Поставьте лайк и мы будем продолжать и следующее с чем я предлагаю вам
34:48
поработать – это фотография изображения картинки любой медиаконтент который вы
34:53
используете на сайте то есть что такое ваш сайт Да это во-первых тексты во-вторых это какие-то изображения и
35:00
можно представить что это как бы ингредиенты блюда да Если у вас плохие ингредиенты плохой контент плохие
35:06
картинки то и конечное блюдо получится не очень Если же у вас хорошие ингредиенты хорошие картинки
35:12
качественные фотографии и хорошие тексты то можно надеяться что финальное блюдо
35:18
будет классное и вкусное а Я рекомендую Если у вас есть такая возможность Да и
35:23
если у вас вообще ну как бы есть что с фотографировать сделайте свои
35:29
собственные фотографии вы можете даже попросить профессионального фотографа продумать какую-то концепцию Да и
35:35
сделать фотографии вашего бизнеса это будет работать лучше всего
35:40
а также Если вы хотите добавить на свой сайт какие-то
35:46
классные стоковые изображения то Я рекомендую сайт unsplash.com вот так пишется название в
Фотки для сайта unsplash.com
35:53
описании к видео оставлю ссылку на этот сайт и здесь много классных высококачественных фотографий а которые
36:00
вы можете абсолютно легально использовать например допустим вот допустим Люди работают
36:06
да смотрите что-то можете подобрать под свой бизнес нажимаете загрузить ещё и
36:13
здесь достаточно много различных различных фотографий допустим офис Да
36:19
фотографии офиса вот я сейчас напишу
36:25
здесь сёрфинг и вот здесь у меня также масса Обратите
36:32
внимание здесь есть платные вот они здесь наверху Есть бесплатные там где нету п Ну короче без этого вот лейбла
36:40
они все бесплатные их можно скачать и использовать на своём сайте например Ну
36:45
вот допустим вот эта фотография Что вы делаете вот здесь
36:50
справа наверху Смотри не использовать бой ме
36:56
что изображение может много весить да Я рекомендую остановиться на размере
37:02
медиум и таким образом вы скачиваете себе нужные фотографии нужные
37:09
изображения и в дальнейшем можете использовать их на своём сайте я для
37:15
себя уже все эти фотографии которые буду использовать Я подготовил вы их Если вы
37:20
повторяете за мной то есть делаете такой же сайт как я по поводу сёрфинга то вы можете в описании Вио я оставлю ссылку
37:27
Вы можете скачать эти фотографии к себе на компьютер Так что дальше Давайте
Редактирование сайта – Главная
37:34
займёмся конкретно изменениям внешнего вида нашего сайта с помощью этих фотографий Мы с вами уже знаем что нажав
37:42
сюда вот редактировать страницу У нас открывается редактор страницы Также
37:47
можно сделать это через консоль страницы и нажать там изменить Давайте немножко Познакомимся с
37:55
этим редактором а смотрите если вот здесь вот наверху нажать вот эти три полоски это обзор документа и здесь мы
38:01
можем видеть сгруппированный по сути всю нашу Вот эту вот главную
38:08
страницу Вот она состоит значит из обложки потом первая группа вот этот вот
38:15
блок вторая группа Весь вот этот вот блок третья группа О нас говорят
38:21
четвёртая группа отзывы и в конце вот эта вот обложка
38:27
Когда у нас открыт любой из Ну вот этих элементов у нас смотрите
38:34
справа появляется вот такая вот такая панель Да она вызывается с помощью
38:40
нажатия вот на эту вот кнопку настройки и как правило в зависимости от того что
38:45
это за элемент У нас есть настройки и есть стили настройки это как правило
38:53
Здесь вы можете управ фокусом
38:58
можно менять чтобы фон был фиксированный вот так вот обратить внимание либо чтобы
39:04
он был повторяющийся так только наоборот Ну
39:10
здесь повторяющийся не отображается так как большое изображение его хватает если бы изображение было меньше то можно
39:17
сделать чтобы он был повторяющийся вот если вы
39:22
кликните в раздел ль то здесь чаще всего здесь можно во-первых редактировать цвет
39:30
текста цвет заголовка наложение это у нас такая
39:35
история например смотрите вам нужно У вас слишком Тёмное например изображение и у
39:41
вас Тёмное меню навигации Да где-то вы можете что вы можете сделать Вы можете выбрать белый
39:48
цвет вот так вот да И затем управлять прозрачностью видите у нас изображение
39:55
осветляется и вот Также можно как осветлять так и затемнять то есть это позволяет В некоторых случаях повысить
40:03
читабельность Да как бы текста на фоне изображения вот здесь также есть некоторые другие
40:11
параметры как то внутренний отступ внешний отступ высота обложки размер
40:17
рамки и другие другие различные параметры есть раздел
40:24
типографика в общем здесь с помощью этих настроек можно полностью полностью
40:31
менять всё что вы Ну соответственно видите в том или ином блоке А давайте
40:37
вернёмся к самому первому к самой нашей первой обложке Да немножко поработаем с текстом смотрите можно естественно
40:45
задавать размер текста можно делать его
40:53
жирным полужирным средним Да и так далее можно вернуть по умолчанию высота строки
40:59
можно менять то есть расстояние между элементами можно менять регистр букв в
41:05
общем производить разные настройки такие цвет соответственно Конечно же можно
41:10
менять текста того или иного выделяет ветственно меняете если что-то пошло не
41:17
так как вы хотели Да хотите вернуть просто нажимаете и так см низ вот вот алексе Вот то есть
41:27
Ctrl Z – это тоже очень удобная штука Вы можете откатить назад изменения так а
41:35
Давайте закроем Вот эту вот настройку и смотрите как добавлять фотографии я просто
41:41
беру А и
41:49
перетягивают внимание как с появлением Просто я поменял одну фотографию и уже сайт выглядит абсолютно подруго
41:56
дальше смотрите Я значит выбираю эту обложку можно свернуть открываю раздел настроек и допустим я
42:04
хочу немножко изменить фокус пусть будет Ну пусть будет Вот так вот идём дальше
42:13
так уберу вот эти настройки и теперь мне нужно индивидуально знати групповой урок и прокат досок Так значит прокат досок
42:21
Пускай у меня будет Вот это вот групповой урок
42:30
и индивидуальное занятия Вот это изображение вот Обратите внимание как
42:36
прямо на глазах сайт уже приобретает финальный свой
42:41
вид Так теперь значит сюда вот мы вставим вот это вот
42:47
изображение идём ниже так отзыва здесь у нас изображений нету И в самый низ я
42:52
поставлю Вот эту вот картинку так нажимаю обновить и нажимаю
43:00
посмотреть страницу и вот смотрите буквально за несколько минут Да мы превратили наш нашу заготовку уже во
43:07
что-то похожее на самый настоящий сайт Давайте здесь ещё я покажу вам некоторые
43:14
возможности редактирования Да и потом мы продолжим со следующими страницами перехожу значит редактировать
43:21
страницу допустим смотрите Ладно с первым изображением меня вс з ничего
43:26
делать не буду вот здесь вот мне бы хотелось Ну так как у нас речь идт о море океане Да волны Мне кажется что вот
43:34
эти вот изображения Они слишком строгие они такие прямоугольные Да я бы хотел чтобы они были со срезанными углами для
43:41
этого что нужно сделать нажимаете так нажимаете на какое-то изображение открываете настройки и здесь
43:50
есть стиль и вот есть радиус и я просто добавляю радиус 30 сделаю так для всех
43:58
изображений стиль 30
44:05
стиль 30 вот так гораздо лучше для этого изображения сделаю тоже
44:13
самое стиль радиус 30 вот так Вот так
44:20
допустим смотрите есть у меня так открою весь документ открою
44:30
допустим я использую какое-то изображение но мне не нравится как оно допустим ложится относительно текста Я
44:35
хочу что-то поменять допустим в этом случае я бы хотел сделать меньше убрать
44:41
немножко Вот эту вот воду да как это сделать смотрите нажимаете вот здесь вот
44:46
заменить открыть библиотеку файлов библиотека файлов находите изображение
44:51
которое вы хотите изменить вот оно и я здесь нажимаю редактировать
44:57
и смотрите здесь я нажимаю обрезать и примерно поровну чтобы было и песка и
45:04
воды Да нажимаю применить кадрирование нажимаю сохранить
45:12
изменения убеждаюсь что выбрано у меня правильное изображение и нажимаю выбрать а видите у меня теперь немножко
45:20
изменилось то есть текст У меня теперь на на уровне песка так скажем так
45:26
смотрите что можно ещё делать можно просто изменять например изображение того или
45:32
иного вернее размер того или иного блока плюс Теперь у меня текст слишком как бы
45:38
близко сюда вот наверх да я бы хотел чтобы он у меня был посредине так как это мы можем сделать
45:47
как это можно сделать выбираем обложку и здесь находим стиль и вот смотрите у нас
45:52
задан здесь некий отступ есть внутрений есть внешний отступ внутренний отступ это есть у нас некий контейнер некий
46:00
блок Да и внутри него есть отступы например текста внешний отступ – это отступ
46:06
одного блока от другого блока то есть этого блока от этого блока например и вот здесь у меня есть задан отступ Да я
46:13
его хочу поменять просто на ноль оп и у меня видите текст сместился по центру то
46:19
есть никах отступов вот так мне нравится гораздо больше так
46:29
нажимаю я обновить и нажимаю посмотреть страницу Давайте посмотрим что у нас
46:37
получилось О’Кей О’Кей О’Кей О’Кей О’Кей единственный момент вот этот отзыв Да у
46:43
меня почему-то он не изменился схл торил искусственный интеллект Ну в общем я не
46:49
думаю что в вашем случае это тоже произошло я сейчас не буду его редактировать В общем Ну проверьте Да
46:54
если что можно просто дважды попросить написать сгенерировать контент
47:01
искусственный интеллект вот а теперь я вам покажу ещё на главной странице
47:06
покажу ещё несколько фишек Как вы можете Ну работать так скажем с внешним видом с дизайном любой страницы любого блога для
47:14
этого опять нажимаю редактировать страницу и предположим мы хотим изменить
47:19
конкретный какой-то блок например вот этот блок нам не нравится да мы хотим его на что-то поменять
47:26
что для этого нужно сделать открываем обзор документа находим всю эту группу и
47:32
делаем что мы делаем нажимаем удалить оп всё этого блока нету затем смотрите
47:40
нажимаем на обложку у нас уже выделена она затем нажимаем вот эти три точки и
47:46
нажимаем здесь добавить после и у нас появляется блок после нашего изображения
47:52
Да который мы под которые мы хотим добавить другой блок следующее что нужно
47:58
сделать это снова открыть сайт t.com и Давайте покажу для начала закрою вот
48:05
эти вот ненужные вкладки так идём сюда мы затем
48:11
смотрите заново идём так просто t.com вот у меня здесь по-прежнему есть
48:18
описание моего бизнеса и следующее что я могу сделать это выбрать
48:23
другую например вот этот вот шаблон Да допустим я хочу вот этот
48:29
вот Experience The excellence вот этот блок Я хочу вот этот блок Я хочу чтобы
48:34
для меня сделал искусственный интеллект и я этот блок вставлю к себе на сайт нажимаю сгенерировать
48:41
контент когда секция закончена я нажимаю копировать секцию вот так вот
48:47
возвращаюсь на свой сайт и уже привычно нажимаю Ctrl V и вот пожалуйста у меня
48:53
этот блок ставился вот так вот и выглядит кстати
48:59
Ну в принципе неплохо конечно же мы можем тут что-то поменять по тексту а но
49:04
я сейчас этого делать не буду просто нажимаю обновить и нажимаю посмотреть
49:12
страницу вот так вот ну если не брать во внимание не совсем понятный вот этот вот заголовок то очень даже неплохо всё это
49:20
дело выглядит следующее что я хочу сделать это есть у меня вот эти вот кнопки да Но сейчас они не работают
49:27
видите ничего не происходит при нажатии на кнопку вот у меня есть несколько кнопок которые не активны Мне нужно
49:33
добавить на них ссылки чтобы при нажатии у меня что-то происходило нажимаю редактировать
Ссылки на кнопки
49:40
страницу нахожу эту значит кнопку а нажимаю на неё и вот здесь у меня есть
49:48
ссылка Да нажимаю далее мне можно сюда во-первых вставить любую ссылку кою хочу
49:55
даже с другого сайта Да но я не рекомендую этого делать лучше все кнопки У вас должны Ну то есть куда-то перенаправлять на внутренние страницы
50:02
вашего сайта и соответственно Начни сейчас я бы отправил пользователей куда
50:08
на страницу контакта конечно же так а Обратите внимание можно открыть в новой
50:14
вкладке тогда будет открываться новая вкладка иногда это бывает Нужно так найдём следующую
50:20
ссылку нажимаю тоже контакты вообще в принципе у меня все кнопки будут вести на
50:27
страницу контакты что мне нужно Да если бы Ну на самом деле это был мой бизнес Мне нужно
50:33
чтобы люди со мной связались Написали мне в WhatsApp в Telegram куда угодно и
50:38
соответственно записались на пробное занятие какое-то так всё кнопки я сделал
50:43
Пока не сохранил ещё я хочу Что сделать Я хочу вот этот
50:49
цвет скопирую вот этот цвет и хочу изменить вот этот цвет
50:56
а вот здесь можно вставить вот так вот так окей Всё нажимаю обновить и
51:03
могу посмотреть страницу и теперь у нас кнопки
51:09
работают все кнопки проверим Да всё окей записаться тоже сюда всё супер Так
Редактирование всех страниц
51:19
теперь следующее что мы сделаем это закончим полностью все страницы
51:26
сайта и для начала сделаем страницу о нас причём сделаем её немного необычно
51:32
вернее покажу ещё один ну так скажем ещё один путь по созданию
51:38
внутренних страниц Давайте перейдём в раздел А нас нажму Я редактировать
51:45
страницу открою обзор всего документа и допустим выделю все элементы которые я
51:52
здесь вижу и нажму Delete всё у меня этой страни не что дальше закрою лишнюю
51:58
вкладку идм мы сюда вот и допустим так открою я сейчас главную
52:05
страницу t.com допустим я хочу чтобы у меня страница внутренняя Ну пускай она будет
52:13
Вот из этого дизайна не из этого дизайна который я выбрал изначально Да а из
52:19
другого дизайна допустим это как бы е раз Ну я этим хочу подчеркнуть что не
52:25
обязательно Ну как бы сосредотачиваться конкретно На дизайне не следует потому что вы можете впоследствии изменять а
52:32
делать внутренней страницы того дизайна которого вы захотите так вот у меня страница о наз
52:40
Да и я нажимаю здесь сгенерировать контент Давайте подождём пока
52:47
сгенерирует И затем я скопирую эту страницу копируем целиком страницу идём сюда и вставляем и вот смотрите
52:56
очень кстати неплохой текст я здесь пробежался Да особенно вот это наша философия сёрфинга очень интересны
53:02
всё-таки искуственный интеллект всё это дело пишет Да и прям прям нравится Мне здесь почему-то некоторые моменты он не
53:09
принимает не воспринимает не берёт во внимание Да здесь соответственно Нам нужно будет постараться самим но я думаю
53:14
таких мест совсем немного Так у нас также есть кнопки да А И если мы просто
53:21
я заменю сейчас вот эту вот картинку у нас здесь ещё просит
53:26
написать что-нибудь Да ну допустим скопирую и вставлю Surfing Сочи Ну можно
53:32
здесь ничего вообще не вставлять нажимаю
53:37
обновить и нажимаю посмотреть и вот такая вот у меня
53:44
получилась страница из другого дизайна да То есть вы можете я хочу вам показать
53:50
просто что вы можете миксовать различные шаблоны и в итоге что-то делать своё собственное уникальное Хотя
53:57
в тоже время я не рекомендую сильно увлекаться таким вот миксовать такой винегрет не очень
54:05
симпатичный вот лучше всё-таки делать из как-то одного стиля придерживаться одного стиля давайте сейчас я верну
54:12
обратно нашу страницу ос для этого опять иду в
54:18
раздел вернее иду на наш сайт не на наш сайт на сайт t.com выбираю вот этот вот
54:26
выбираю страницу about и нажимаю сгенерировать контент подождём Пока
54:32
сгенерирует Так проверим контент готов нажимаю
54:38
копировать всю страницу целиком возвращаюсь сюда вот выделяю всё что у меня здесь так
54:46
нужно так с шифтом зажимаем Shift выделяем все блоки
54:52
нажимаем удалить и просто вставляем сюда наш привычный
54:58
вставить вот так вот я предлагаю вам ребята сильно не
55:04
усложнять сделайте просто и вы удивитесь как это хорошо Может в то же время работать Я сейчас просто поменяю все
55:11
фотографии которые здесь заменю вот эти картинки на фотографии которые Я
55:17
подготовил так вот так вот
55:24
затем вот так вот и вот так
55:30
вот хорошо А теперь я хочу здесь немножко
55:37
подревателя сейчас делать но повторение Как
55:44
говорится мать учения смотрите выбираю значит я обложку опускаюсь чуть ниже и
55:49
поднимаю вот этот вот точку фокуса наверх а сейчас это не сильно изменилось но после того как мы обновим страницу и
55:56
посмотрим то надпись она поднимется здесь выше а затем здесь что я хочу
56:02
сделать здесь я хочу тоже скруглить вот эти вот углы так идём в раздел
56:10
стиль 30 и то же самое хочу сделать
56:15
здесь а во-первых я м уберу так Иду опять в стиль уберу вот
56:23
этот вот отступ чтобы у меня по тексту по центру стал текст и также
56:32
я здесь в разделе настроек подниму наверх точку фокуса и
56:39
она у меня тоже должна сместиться будет когда мы обновим страницу Давайте
56:45
попробуем нажимаю посмотреть страницу так видите выше поднялась У меня надпись
56:50
это да Ну кстати можно чуть пониже её опустить Ну ладно это уже такие тонкости И здесь тоже у меня выше Горизонт Мне
56:57
кажется смотрится очень даже симпатично всё хорошо с этой страницей
57:02
Мы закончили и теперь займёмся страницей услуги так закрою я лишнюю вот эту
57:10
вкладку иду на страницу услуги и сейчас я хочу показать вам ещё
57:17
одну очень крутую фишку которую именно вот стандартный редактор преса позволяет
57:23
делать смотрите нажимаю здесь редактировать страницу Затем в новой вкладке Вы можете
Паттерны
57:29
открыть следующий адрес wordpress.org patterns я в описании обязательно
57:36
оставлю ссылку на эту страничку и смотрите что у нас здесь есть называется это всё паттерны Но на самом деле это
57:43
просто секции для вашего сайта смотрите здесь есть во-первых различные вкладки
57:48
да то есть ну направление так скажем этих секций посты тексты галереи Call To
57:54
Action дест баннеры хиде фуры wame это ну такие наборы короче но
58:01
важный момент смотрите здесь есть и две таких вот есть в общем на выбор Да есть
58:08
те которые созданы разработчиками преса Ну командой А есть те которые созданы
58:14
коммьюнити Вот вы выбираете допустим коммьюнити и здесь ну здесь можно ничего
58:19
не менять и смотрите допустим если брать паттерны постов
58:25
варианта есть у коммьюнити созданные текстовые
58:31
1078 Ну я не знаю По какому принципу они их размещают в ту или иную категорию Да
58:36
но вы можете просто вот так вот смотреть и искать то что вам нужно допустим
58:42
галереи 271 галерея различно То есть вы можете эти все паттерны эти все секции
58:48
абсолютно бесплатно брать простым копировать вставить переносить на свой
58:55
немножко стилизовать под себя использовать свои цвета и Вуаля у вас всё это готово то есть вам не нужно всё
59:00
это делать своими руками это экономит массу времени допустим вот Call To Action 171 Call To Action пожалуйста на
59:07
разный вкус и цвет то есть есть из чего выбрать Причём здесь Эта библиотека она
59:13
будет расширяться Поэтому ну поэтому в общем Пользуйтесь Так сейчас я попробую
59:20
найти смотрите можно пытаться попытаться найти паттерн Например я хочу
59:25
прайн ну здесь по-английски придётся писать но прайн – это цены да то
59:31
есть если вам нужно на какой-то блог с ценами на свой сайт то пожалуйста здесь
59:36
куча вариантов Давайте посмотрим вторую страницу Вот видите ну не все конечно из них супер классные но я думаю что Вполне
59:43
себе сколько-то есть хороших которые вам подойдут и они видите Они созданы
59:48
разными программистами разными разработчиками И поэтому они ну очень разные и я уверен что вы сможете найти
59:55
всё что вам Ну на самом деле заблагорассудится здесь найти Ну вот допустим мне нравится вот этот вот вот
1:00:01
эта секция Я просто нажимаю копировать возвращаюсь сюда где у нас редактировать
1:00:07
страницу значит услуги а открываю обзор документа а затем выбираю куда мне
1:00:13
допустим вставить этот Прай Синг эти цены допустим я хочу вот здесь вот предпоследним блоком поэтому я выбираю
1:00:19
обложку последнюю здесь выбираю вставить добавить перед
1:00:25
появляется вот такой вот небольшой абзац у меня блок и я нажимаю Ctrl V и у меня
1:00:30
пожалуйста вставляется Это история сюда Я конечно же здесь могу всё это
1:00:37
дело Давайте обновим открою страницу и вот пожалуйста у меня полностью
1:00:44
адаптивная вот эта вся история здесь вставила кнопки ну не работают да нужно конечно же их тут настроить в общем цвет
1:00:51
можно поменять текст поменять и пожалуйста у вас готовый который вы делаете за о минуту вместо там 25 минут
1:00:58
30 минут которые вы бы потратили для того чтобы её сделать самостоятельно причём Нужно ещё уметь это делать Да не
1:01:04
сразу это и получится так смотрите здесь ещё важный какой момент вы можете Ну
1:01:10
открывать так скажем посмотреть как это всё будет выглядеть и
1:01:15
можете посмотреть как это будет выглядеть на разных размерах экрана то есть проверить как будет работать
1:01:21
мобильная версия вот така супер супер такая библиотека которую вы
1:01:27
можете использовать для того чтобы создавать свой сайт пожалуйста Пользуйтесь так закрою я это дело закрою
1:01:34
страницу услуги пока давайте я удалю а вот наша секция она не сгруппированы вот
1:01:39
у нас интервал сам прайн абзац колонка интервал То есть у нас если до этого у нас элементы
1:01:48
сгруппированы то этот элемент не сгруппировать например да чтобы вы понимали как это делается вот так вот
1:01:54
группировать и тогда у нас это одна единая группа Да вот теперь мы просто берём эту группу и удаляем
1:02:02
так Всё вернулось Всё у нас как было до того как я использовал этот паттерн
1:02:09
Давайте нажмём обновить И теперь я заменю эти фотографии добавлю здесь фотографии
1:02:15
Они у меня уже готовы Так сейчас секундочку назад услуги так
1:02:24
это сюда Это сюда так групповые занятия сюда вам это
1:02:31
уже знакомо да но мы просто повторяем для того чтобы запомнить и
1:02:37
здесь вниз Я Вставляю то же самое что у меня было в странице about так вот
1:02:45
так Окей теперь проделаем те же самые вещи
1:02:50
так здесь такла Давайте посмотрим это буде выглядеть в итоге здесь я хочу
1:02:56
также скруглить углы
1:03:07
30
1:03:14
30 30 Так давайте нажимаю обновить и
1:03:19
нажимаю посмотреть Ну в принципе достаточно достаточно симпатично всё это
1:03:25
выглядит Мне нравится как это всё у нас В итоге легло Ну вот здесь немножко Я бы хотел кнопку допустим поднять Чуть
1:03:31
повыше возвращаюсь сюда выбираю так последнюю вот эту
1:03:37
обложку и поднимаю Чуть повыше вот так вот допустим обновляю идём сюда
1:03:44
обновляем Ну вот так уже гораздо лучше всё страница услуги у нас готова и мы
1:03:51
можем двигаться дальше только у нас остался один маленький момент вернусь сюда вот редактировать страницу и здесь
1:03:58
выберу обложку и мне нужно в разделе во вкладки стиль убрать вот этот вот отступ
1:04:05
сделать его Ноль вот так вот я хотел сделать нажимаю ещё раз обновить нажимаю
1:04:13
посмотреть вот теперь Теперь всё О’кей Ну можно разве что чуть-чуть поднять
1:04:18
повыше так чуть-чуть поднять повыше Так значит выбираем
1:04:26
настройки и ещё подниму выше вот эту точку фокусировки нажимаю обновить идём
1:04:32
сюда здесь обновляем Да вот так вот Вот так вот мне нравится гораздо лучше всё
1:04:38
страница услуги закончена идём теперь сделаем страницу контакты так закрою эту
1:04:44
вкладку закрою эту вкладку перейду в страницу контакты и нажму редактировать
1:04:50
страницу на странице контакты Мне необходимо поменять они у меня уже тоже подготовлены сейчас
1:04:57
я их открою так Вставляю сюда и сюда вот в самый низ
1:05:06
Вставляю вот это вот изображение здесь у нас будет контактная форма она пока не у
1:05:13
нас не поддерживается потому что мы ещё не установили не разобрались с этим плагином но мы к этому вернёмся что я
1:05:18
сделаю здесь здесь я напишу вместо связи Сейчас я напишу контакты а затем Давайте
1:05:26
откроем обзор документа откроем обложку и здесь я
1:05:33
немножко Ну давайте пока оставим так сейчас попробуем посмотрим как это будет выглядеть так здесь смотрите я не получа
1:05:41
не получится выбрать правильно чтобы открылись у меня
1:05:46
настройки этой фотографии этой картинки поэтому мне нужно здесь вот с помощью схемы документа выбрать обложку И вот
1:05:53
тогда я могу это дело сделать так Ну пусть будет Вот так вот
1:06:00
так во вкладке стиль так никаких отступов у меня здесь нету Так давайте
1:06:06
нажму обновить нажму посмотреть страницу так видите контакты совсем мне не нравится а здесь здесь Вполне себе даже
1:06:14
симпатично так окей ой ой Давайте здесь я вс-таки
1:06:22
сделаю немного подруго открою обложку так наверное Нужно опустить чуть
1:06:27
пониже может быть Вот так вот нажимаю обновить нажимаю
1:06:32
обновить чуть-чуть повыше хочу Ну пусть вот так нажимаю обновить
1:06:41
идём сюда здесь нажимаем обновить Ну в общем Почти то что я хотел
1:06:47
чуть-чуть ниже Вот так вот обновить вот так вот отлично вол
1:06:54
красивые Вот теперь страница выглядит абсолютно по-другому Мне очень нравится так друзья мы с вами
1:07:02
закончили редактирование всех страниц Да мы не меняли тексты где-то у нас даже
1:07:08
остался текст не изменённый с английского Но это всё нюансы я вам Предлагаю сначала вы дошли досюда
1:07:15
доделали все страницы ваши текст вам написал искусственный интеллект и после того как вы уже полностью закончите сайт
1:07:22
Давайте этого плана Когда вы полностью закончите сайт тогда вы уже сможете отредактировать те места которые вам
1:07:30
хочется улучшить но пока Мы двигаемся по нашему плану И сейчас мы с вами будем
1:07:37
разбираться с хиде или шапкой сайта Да это то Где располагается название сайта
1:07:43
мы сюда разместим логотип и здесь поработаем вот с этим вот меню добавим
1:07:49
сюда кнопку в общем вы поймёте как этим делом всем управлять И также у нас есть
1:07:54
футер это подвал сайта где мы тоже изменим некоторые моменты которые у нас
1:08:00
пока выглядят Ну как они были по умолчанию так Окей давайте сделаем это а для того
Редактируем шапку
1:08:07
чтобы нам редактировать эти вещи смотрите Что нужно сделать переходим в
1:08:12
консоль идём внешний вид редактор здесь в редакторе находим
1:08:19
шаблоны затем находим управление всеми шаблонами и здесь найти нам страницы Не
1:08:25
пугайтесь здесь достаточно много различных элементов Но нам нужно найти вот эти вот страницы нажимаю и
1:08:33
открывается у нас собственно редактор хира футера и то что мы видим
1:08:43
посередине этот блок здесь располагается контент страницы Мы научились в принципе
1:08:48
как мы можем работать вот с этим контентом посредине между шапкой и подвалом сейчас мы с Вами рассмотрим Как
1:08:55
вы можете настраивать эти вещи Да смотрите Что нужно сделать нужно нажимать
1:09:01
нажать обзор документа и вот у нас есть хидер да вот есть футер содержимое мы
1:09:07
здесь не трогаем нажимаем параметры для ider и находим здесь заменять хидер
1:09:13
нажимаем и здесь есть достаточно большое количество
1:09:19
различных готовых теров которые можем использовать
1:09:24
для своего сайта Давайте например мы возьмём Ну пускай будет вот этот вот
1:09:32
допустим понравился нам вот этот вот хидер кстати как это можно удобней
1:09:38
смотреть Да на сайте t.com Просто без продолжения Да t.com вы
1:09:46
видите здесь все вот эти вот заготовки сайта и у них они подписаны Да есть название Вы можете выбрать футер
1:09:55
Простите хидер который Вам нравится и просто найти по названию например вот
1:10:01
Давайте Ну пусть будет так Sky Меня интересует Sky где он Ну вот этот вот
1:10:07
допустим мне понравился вот такой вот хидер я просто в поиске вот здесь вот
1:10:15
пишу Sky И вот он всё нажимаю и у меня
1:10:20
он заменяется так нажму вот эти три точки чтобы Вот это окошко здесь
1:10:25
например я могу написать пробный
1:10:31
урок вот так вот такая кнопка будет да и допустим Ну давайте посмотрим что
1:10:37
получится нажимаю сохранить нажимаю сохранить ещё раз так и теперь мне нужно давайте я
1:10:45
здесь просто напишу Wave перейду на главную страницу А
1:10:54
смотрите друзья когда мы меняем я забыл сказать когда мы меняем эти вещи здесь и здесь да то для всего сайта у нас это
1:11:01
дело меняется то есть вот смотрите главная страница открываю АС И здесь тоже У нас шапка поменялась А вообще на
1:11:10
самом деле нам эта шапка не очень подходит потому что она непрозрачная а та прозрачная шапка которая стояла до
1:11:17
этого она выглядела гораздо лучше поэтому я сейчас а вернусь сюда вот в редактирование и с помощью кнопки Ctrl Z
1:11:24
верну Всё назад а теперь давайте посмотрим как вы можете сами добавлять
1:11:30
например сюда кнопки или какой-то Ну какую-то ссылку какой-то пункт Меню сюда
1:11:36
добавлять Так во-первых я хочу нажать сохранить сохранить ещё раз давайте
1:11:41
обновим здесь проверим всё ли у нас вернулось на место Да у нас вернулся старый наш а хидер шапка так идём сюда а
1:11:50
здесь Нам необходимо нажать сюда вот на вот эти вот вот пункты меню и нажать
Кнопка в шапке
1:11:55
настройки чтобы у меня появись появились настройки вот тогда у меня появляется Видите вот этот вот добавить блок Плюс
1:12:01
Да нажимаю его и здесь я могу написать кнопка нажимаю а кнопка
1:12:10
появилась Но мы видим здесь внизу у нас есть небольшая проблемка Да
1:12:15
у нас эта кнопка появилась здесь внизу сейчас не обращаем на это внимание у нас Дело в том что эти они взаимосвязаны то
1:12:23
есть что мы делаем Здесь оно у нас дублируется сюда но мы Позже это изменим А давайте здесь Допустим хочу я чтобы у
1:12:30
меня кнопка была кнопка контакта не просто контакты да как один из пунктов меню потому что он
1:12:38
ну типа теряется например на фоне остальных а была кнопка Да чтобы это бросалось в глаза я напишу здесь
1:12:45
контакты а затем перейду в раздел стиль в раздел
1:12:52
фон и здесь смотрите что мне нужно сделать я выберу Ну я могу выбрать любой цвет например белый а но затем здесь вот
1:13:00
мм в прозрачности я должен сделать полностью прозрачный вот так
1:13:06
вот так сейчас секунду Ага вот так вот а
1:13:14
но я должен нажать также здесь вот контур смотрите нажимаю контур чтобы у
1:13:20
меня был вот ну то есть вот так вот как оно сейчас выглядит Давайте посмотрим а нет Давайте сначала что мы ещё можем
1:13:27
здесь сделать а смотрите если Нас интересуют какие-то настройки текста то
1:13:32
вот есть типографика да но если мы нажмём сюда вот настройки типографики то у нас здесь есть больше инструментов
1:13:39
семейство шрифтов внешний вид высота строки короче другие различные элементы
1:13:44
так а допустим нажму Я семейство шрифтов внешний вид высота строки и смотрите у
1:13:52
меня здесь вот эти вот все ве сюда добавились Дополнительные настройки и
1:13:58
здесь я могу менять размер моей кнопки так также я могу сделать например
1:14:04
его средней жирности и я могу менять ещё в
1:14:10
зависимости от Ну короче как бы это расстояние от кнопки до контура Ну
1:14:16
допустим я хочу сделать это ВС дело вот так вот мне нравится в принципе нажимаю сохранить нажимаю
1:14:22
сохранить тепер Мне нужно Давайте здесь вот я вернусь в контакты и
1:14:27
обновлю вот так вот мне в принципе в принципе нравится страничка Давайте
1:14:33
перейдём на главную бросается в глаза контакты и это как бы побуждает пользователя нажать да
1:14:39
посмотреть какие же там у меня контакты и связаться со мной но есть проблема Да у нас во-первых есть лишние здесь вот
1:14:46
эти контакты которые в принципе тоже самое И а сама Кнопка не работает то есть Нам нужно сюда поместить ссылку
1:14:51
давайте это и сделаем удалить ссылку на контакты очень просто
1:14:58
нажимаете нажимаете удалить контакты здесь на кнопку идём и вот
1:15:05
здесь выбираем ссылка здесь я пишу контакты вот так вот всё нажимаю
1:15:11
сохранить нажимаю сохранить идём сюда обновляем всё замечательно теперь у нас вот такая вот
1:15:18
классная кнопка контакты но у нас эта проблема здесь вот сохранилась
1:15:24
да давайте мы изменим нижнее меню для того чтобы оно у нас не дублировались
Меню футер
1:15:29
так Для этого перейду я сюда вот в эти настройки идём сюда вот так Затем что мне нужно сделать
1:15:39
дальше А дальше Мне нужно найти вот здесь вот справа в блоке настроек
1:15:44
навигация нажимаю и нажимаю создать новое меню оп всё остальное у меня пропало нажимаю плюс и здесь я добавляю
1:15:52
какую-то страницу Да например ну пускай будет анас так сначала я должен сделать ссылку
1:15:59
страницы и написать Ну вот так вот анас плюс ссылка
1:16:06
страницы услуги плюс А ссылка
1:16:11
страницы контакты Всё теперь у меня эти меню они друг друга не повторяют Да
1:16:16
Обратите внимание А кстати я уж Ну просто сделал те же то же самое меню но
1:16:22
по сути у вас должны быть ещё страницы политика конфиденциальности и страницы условия использования то есть какие-то
1:16:28
служебные страницы которые как раз отлично разместить в меню футера в меню
1:16:33
подвала поэтому вы сюда соответственно можете разместить другие страницы вашего сайта Всё я оставлю это как есть и
1:16:41
нажимаю сохранить нажимаю сохранить ещё два момента которые хотел показать вам с
1:16:46
кнопкой А значит смотрите ещё раз нажимаем а идём в сюда вот в стиле и
1:16:53
смотрите допустим если мы хотим здесь вот у нас есть шрифты на выбор Да маленький средний большой или очень
1:16:59
большой Есть такая же У нас вот смотрите здесь такая установить пользовательский размер нажимаете и тогда вы можете в
1:17:06
пикселях выбрать размер например хочу я сделать 18 Пусть так ну пусть 17 будет
1:17:13
О’кей затем также я хочу немножко сделать скругление побольше
1:17:18
делаю 13 нажимаю всё так немножко У меня
1:17:23
всё перекрыло вот такая кнопочка мне нравится больше хорошо теперь у нас разное меню в хидери и футере и у нас
1:17:31
есть кнопка и вот что у нас получилось всё работает здесь у нас
1:17:38
другое меню в общем всё О’кей Ну как я уже сказал Здесь вы можете разместить другие страницы вашего сайта например
1:17:44
технические так Давайте ещё раз вернёмся сюда вот и смотрите например мне конечно
1:17:49
же не нравится что здесь написано например вот это да я хотел из что мы здесь можем написать можно
1:17:56
вообще в принципе Удалить это дело вот так
1:18:01
вот Затем что здесь например мне конечно же не нужно чтобы Здесь было написано T
1:18:08
Я могу написать здесь во-первых изменить год на верный а затем написать Ну не
1:18:13
знаю допустим сделано с любовью что-то такое нажимаю
1:18:20
сохранить нажимаю сохранить так идём сюда обновляем всё у меня здесь ничего нету
1:18:27
допустим Сюда можно кстати разместить кнопки социальных сетей Давайте попробуем это сейчас сделать здесь у
Социальные сети в футер
1:18:33
меня вот есть область для размещения здесь я ищу значки соцсетей
1:18:41
так затем нажимаю добавить и могу я выбрать например так вот Я нажимаю
1:18:47
посмотреть все что у нас тут есть далеко не все конечно подходят для России вот есть например Skype подойдёт Есть кстати
1:18:53
Telegram Давайте добавим Лего добавим ВК Добавим что можно добавить ещё ну
1:19:01
WhatsApp можно добавить Давайте попробуем найти YouTube
1:19:07
так допустим YouTube вот так вот так затем нужно попробовать
1:19:13
выровнять всё это по центру нажимаем выравнивание по центру вот так вот эти
1:19:21
ссылки конечно же нужно настроить вот так Вот наводите И выбираете ссылку на социальную сеть наводите ссылку на
1:19:27
группу наводите ссылку на ваш Telegram чат вот так вот гораздо лучше мне наш
1:19:33
подвал нравится гораздо больше нажимаем сохранить здесь Смотрим Да что было изменено части шаблонов футер нажимаем
1:19:39
сохранить всё супер прекрасно нажимаем обновить Так а где у нас социальные сети
1:19:45
а есть проблема Да мы так как мы не указали никакие ссылки оно соответственно и не отобразилась давайте
1:19:50
сейчас я какие-то ссылки сюда быстренько ужу чтобы у нас вс-таки значки определились так нажимаю сохранить я
1:19:58
добавил просто речки туда и вс должно быть сейчас нормально так нет так я здесь не нажал сохранить ещё раз вот так
1:20:04
вот теперь Должно быть нормально всё Вот супер смотрите вообще как получилось классно и такая вот анимация при
1:20:10
наведении футер мне очень нравится выглядит Просто отлично так давайте посмотрим что у нас с мобильным с
1:20:17
мобильным мен смотрите при сужении у меня тби в мбур хотите что-то здесь настроить
Цвета мобильное меню
1:20:24
дополнительно кстати Обратите внимание кнопки в мобильном меню тоже У нас отобрази ну кнопка появилась здесь Да
1:20:30
всё в принципе выглядит классно Ну допустим я хочу здесь что-то поменять а допустим хочу поменять фон здесь Да так
1:20:38
закрою мобильное меню развернув опять идём сюда затем Мы открываем наше меню
1:20:47
открываем настройки сюда переходим в раздел стили затем подменю и текст
1:20:53
наложения подменю и фон наложения Мне нужно вот этот пункт подменю и фон наложения выбираю здесь например
1:20:59
нравится мне какой-нибудь ну такой голубенький цвет всё нажимаю сохранить
1:21:06
нажимаю сохранить Так давайте обновляем здесь страницу и если мы соответственно сужаем
1:21:15
а появилось Да смотрите цвет у меня изменился но мне не нравится что у меня
1:21:20
допустим здесь чёрным да А сам цвет текста Я бы хотел его видеть белым
1:21:25
давайте сделаем это для этого нужно подменю и текст наложения иду сюда так и
1:21:31
значит здесь я должен выбрать белое Вот так вот Вот теперь должно быть всё окей
1:21:37
нажимаю сохранить два раза нажимаю обновить здесь обновляю сужа разворачивают Так выглядит совсем
1:21:45
по-другому да гораздо симпатичнее Мне нравится о закончили мы
1:21:52
с этими со всеми делами и Давайте займёмся другими вопросами а именно
1:21:59
поговорим о том как можно менять здесь вот это название во-первых Как можно сюда вставить логотип Вот и пойдём
1:22:06
дальше по нашей программе А давайте Сначала я покажу как вы сможете сделать простенький логотип для своего сайта
1:22:13
делается это быстро и легко а всё что нам нужно сделать это открыть сервис
Делаем логотип и фавикон logomakr.com
1:22:19
logomaker.com сейчас я открою новую вкладку и напишу здесь лого смотрите Не logomaker.com а
1:22:27
Log logomaker.com вот так вот ну будет в описании тоже ссылочка так затем я
1:22:34
нажимаю Start My Design открывается у
1:22:40
нас нажимаю я создать новый дизайн затем следующее что мне нужно сделать – это написать здесь начну с
1:22:48
поиска иконки здесь 3 млн различных иконок вы что-нибудь до найдёте ите на и
1:22:53
обязательно найте я напишу здесь Wave то есть волна нажимаю
1:22:59
Enter здесь куча разных волн одних только волн наверное штук 200
1:23:06
смотрите я выберу вот эту иконку Я хочу чтобы она у меня была во-первых круглая чтобы Я использовал её
1:23:13
и для фавикона тоже нажимаю вот она у меня
1:23:18
сюда скопировала есть од проблема Да у меня волна как бы уходит влево но я бы
1:23:25
хотел чтобы волна шла вправо что для этого нужно сделать нажимаем на эту иконку нажимаем options и нажимаю Flip
1:23:32
horizont то есть ну повернуть горизонтально Хорошо теперь я хочу
1:23:37
добавить текст нажимаю сюда вот на текст У меня появляется Да я напишу здесь
1:23:45
просто Сочи Wave то есть дублирую название моего домена так во-первых я
1:23:53
сделаю меньше иконку так затем Сочи ве Я
1:24:01
немножко саму область сделаю уже и сделаю вот так вот побольше шрифт Пускай
1:24:08
Да и здесь можно отцентровать по центру а затем что мне нужно сделать я выделю
1:24:16
обе оба элемента и я смогу тогда поменять для них цвет вместе смотрите
1:24:21
как бы я здесь поступил я иду сюда в раздел контакты вернее Ну короче
1:24:28
Открываю сайт допустим я хочу сделать вот Такого же цвета Так это не подходит давайте я Нет
1:24:36
это нужно оставить нажму здесь редактировать страницу нажму сюда Вот на этот шрифт нажму текст и я могу
1:24:45
скопировать вот этот вот код копирую его так надеюсь скопилось
1:24:50
возвращаюсь сюда и тогда я могу вставить Вот вот теперь у
1:24:57
меня будет точ в точ такой же цвет текста затем я могу здесь смотрите
1:25:02
наверху изменить шрифт А есть тут один момент если вы используете кириллический
1:25:10
шрифт то если вы используете кириллицу в общем то для вас для кириллицы не так
1:25:15
много вариантов Ну то есть нету шрифтов для кириллицы поэтому имейте это в виду То
1:25:22
есть если у вас ничего вдруг не меняется то это значит что у вас просто нету
1:25:28
кириллических букв для этого того или иного шрифта в общем здесь в принципе
1:25:33
есть из чего выбрать Ну в принципе мне Вполне себе нравится то что у меня уже
1:25:39
здесь получилось а так ну в
1:25:44
принципе я думаю не буду я заниматься перфекционизмом лучше закончить да чем
1:25:50
заниматься бесконечно перфекционизмом всё so Wave супер Отлично следующее что
1:25:55
я делаю нахожу вот здесь такую дискет справа наверху нажимаю сохранить затем у меня здесь во-первых
1:26:02
мой логотип размещается на разных на разных Короче штучках да ну мне тут
1:26:07
пытаются на самом деле продать чтобы я купил этот логотип его разработку Мне же
1:26:12
нужно нажать здесь download Low resolution png File нажимаю затем мне нужно написать свою электронную почту
1:26:21
собака ру Кстати это моя почта куда вы можете писать свои вопросы Я по возможности отвечаю и нажимаю отправить
1:26:29
мне файл всё файл отправлен а что я сделаю сейчас дальше так как мне нужна
1:26:37
закрою эту штучку Мне нужна ещё нужен ficon Обратите внимание Да вот если у меня открыто несколько вкладок
1:26:44
то каждая вкладка имеет такую небольшую иконку это называется ficon И сейчас у меня стандартная вордпрессе лого здесь Я
1:26:52
хочу чтобы сайт выглядел вообще ну как бы ещ лучше чем он выглядит Сейчас я хочу сюда разместить свою Вот эту вот
1:26:59
иконку волны для этого что я делаю я просто удалю вот это вот Дело это
1:27:06
увеличу Пусть вот так вот и просто ещё раз нажимаю
1:27:11
сохранить опять выбираю download Low resolution опять пишу здесь свою
1:27:19
почту ставлю галочку и нажимаю отправить мне на почту закрываю вкладку
1:27:26
раз закрываю вкладку два а теперь я открою свою почту и найду эти
1:27:32
письма вот у меня эти письма от сервиса захожу в само письмо и нажимаю download
1:27:41
фа сохраняю возвращаюсь назад открываю
1:27:47
следующее письмо Down и нажима
1:27:53
сохранить так вот у меня так вы не видите Да но у меня здесь ВС на месте значит иконка и сам
1:28:01
логотип вот он так дальше что мне нужно сделать закрою свою почту А смотрите
1:28:08
значит навожу я вот у меня редактор моего шаблона страниц Да если вы не
1:28:14
помните то мы как мы это делали давайте я сделаю это заново закрою во-первых
1:28:19
затем найду здесь Сочи Wave зайдём в консоль идём внешний
1:28:28
вид редактор в редакторе должен найти шаблоны управление всеми шаблонами и
Установка лого и фавикона
1:28:35
здесь найти просто страницы просто без ничего страницы так где-то я пропустил а
1:28:43
вот они в самом верху нажимаю и вот у меня опять этот редактор У нас открылся
1:28:48
Да помним вот мы социальные сети делали так смотрите теперь я нажимаю
1:28:53
на наш Ну это называется заголовок сайта Да кстати мы здесь можем просто в принципе
1:28:59
что-то менять Например я напишу Surf Camp или всё что угодно также смотрите
1:29:04
здесь есть если вы откроете раздел стиль то вы можете во-первых менять цвет этого
1:29:10
текста Да Также вы можете менять фон этого текста в общем много что делать
1:29:17
можно вот Перейти в раздел типографика изменить размеры В общем все те настройки которы нам доступны для любого
1:29:23
другого элемента тоже но сейчас я сделаю сюда вместо этого заголовка логотип вот
1:29:29
здесь вот есть вот такая вот такой вот символ Да нажимаете на него и здесь появляется преобразовать в и я выбираю
1:29:36
логотип сайта всё выбрал теперь нажимаю добавить логотип загрузить файл нажимаю
1:29:42
выберите файлы и загружаю Свои два логотипа вот так
1:29:47
вот нажимаю Так у меня здесь видно вот нажимаю открыть всё вот у меня логотип и
1:29:55
мой ficon загрузился я выбираю здесь галочку логотип и нажимаю выбрать и вот у меня логотип установился
1:30:03
далее смотрите когда у меня он выделен да здесь справа в настройках я могу управлять его
1:30:09
размером вот так вот я увеличиваю можно просто ну смотрите есть определённое
1:30:16
ограничение у нас логотип который мы сделали он шириной 250 пикселей и сделать его больше не получится Вот так
1:30:23
вот могу сделать максимально Это 250 пикселей также смотрите у меня вот здесь
1:30:29
вот по умолчанию стоит вот так вот использовать как значок сайта Да я должен это дело выключить нажимаю и
1:30:37
нажимаю сохранить нажимаю сохранить Теперь давайте посмотрим что у нас получилось открою просто главную
1:30:45
страницу сайта и вот наш логотип Он установился супер выглядит очень даже
1:30:52
симпатично А теперь я хочу вот этот вот ну как бы
1:31:05
иконочный значка сайта не знаю к сожалению Как
1:31:13
по-другому попасть в эти настройки Поэтому приходится так нажимаю затем здесь нужно выбрать вот
1:31:21
здесь вот выберите иконку сайта нажимаю и здесь я должен соответственно выбрать
1:31:26
Вот эту вот иконку нажимаю выбрать и здесь нажимаю не обрезать и нажимаю
1:31:33
опубликовать всё могу закрыть это дело И теперь у меня вместо стандартной иконки WordPress
1:31:40
наша иконка с волной и всё это выглядит очень так в одном стиле во-первых одного цвет во-вторых всё связано с волнами да
1:31:48
Мы кстати можем логотип разместить также сюда вообще можно много куда его разместить логотип но я думаю что его
1:31:56
будет достаточно здесь наверху а также Давайте посмотрим как у нас а в
1:32:01
мобильной версии тоже логотип выглядит Отлично Так здесь у нас всё
1:32:07
работает О’кей с логотипом и с хиде и с футером с шапкой с подвалом Мы закончили
1:32:13
и теперь займёмся формой обратной связи А так давайте я закрою вот эти
1:32:20
страницы они нам пока не понадобится перейдём на страницу
Форма обратной связи
1:32:25
контакты именно здесь у нас должна располагаться форма обратной связи Да вот здесь вот она у нас должна быть
1:32:32
сейчас её нету но мы сейчас это исправим конечно же ваши пользователи Да
1:32:37
потенциальные покупатели в общем те кто представляют для вашего бизнеса какой-то
1:32:43
интерес они могут связаться с вами во-первых по телефону который здесь вот есть через электронную
1:32:50
почту бы неплохо если бы тем более смотрите в нашем случае это будет не
1:32:55
просто форма обратной связи а форма записи на пробный урок очень популярная
1:33:00
м ну такая маркетинговая как бы фишка Да когда первое какое-то занятие будь это
1:33:07
массаж будь это не знаю бассейн плавание там вождение всё что угодно бесплатное
1:33:13
пробное занятие человек во-первых может сразу же оценить Подходит ли ему та
1:33:19
услуга которую вы предлагаете а вы соответственно можете Ну лучшим видом в
1:33:24
лучшем виде продемонстрировать свой профессионализм и человек значит будет
1:33:30
вашим клиентом становиться вот поэтому здесь у нас будет форма записи на пробный
1:33:36
урок Давайте её сделаем Для начала я иду
1:33:41
в консоль иду в раздел плагины и выбираю здесь добавить новый Мы в самом начале
1:33:50
помните мы уже устанавливали плагин really Simple ssl вообще плагины – это
1:33:56
такие Ну можно сказать такие программы которые позволяют вам существенно расширить возможности движка WordPress
1:34:05
Несмотря на то что по умолчанию в вордпрессе нету формы обратной связи она
1:34:10
есть реализована с помощью множества плагинов и как раз один из таких плагинов мы будем использовать вообще с
1:34:17
помощью плагинов можно сделать со своим сайтом на вордпрессе всё что угодно
1:34:23
давайте я открою раздел популярные А и мы немножко посмотрим например есть вот
1:34:29
page Builder elementer с которым я очень много работаю и в своих видео тоже работаю один из самых популярных в мире
1:34:35
пей билдеров вот допустим форма обратной связи Contact form 7 есть плагины для
1:34:40
SEO есть плагины защиты от спама есть Очень популярный плагин W комес который
1:34:46
позволяет вам сделать из своего сайта на вордпрессе интернет-магазин но у меня такие уроки тоже есть а и вот есть
1:34:52
кстати вот он плагин wpforms который мы как раз и будем с вами использовать есть также плагин для бэкапа для переноса
1:34:59
сайта А кстати плагин really Simple exl здесь у нас да отображается тоже очень популярная история есть плагины для
1:35:06
кэширования для ускорения работы сайта Ну нашему сайту Кстати это не понадобится в общем Огромное огромное
1:35:12
количество их тысячи может быть Ну где-то под 50.000 может быть больше только в официальной репозитории преса
1:35:19
То есть если вам нужен какой-то функционал на вашем сайте то почти наверняка это уже реализовано и
1:35:24
буквально в несколько кликов вы получаете Готовое решение раз и оно у вас есть в этом прелесть
1:35:32
пресса такого ну далеко не я не знаю такой ЦМС в которой бы это было
1:35:37
реализовано а Не говоря уже о конструкторах так Смотрите если вы не
1:35:42
можете найти здесь в популярных wp forms Вы можете просто написать вот здесь вот
1:35:48
в поиске плагинов VP VPS нажимаете
1:35:53
Enter и вот наш плагин VPS более 5 млн
1:35:58
активных установок и Пять звёзд да более 13.000 отзывов нажимаю
1:36:05
установить и нажимаю активировать обычно как правило после установки плагинов
1:36:10
слева здесь вот в этом общем меню появляется Ну новый раздел в нашем
1:36:16
случае вот он появился и здесь у нас определённые настройки есть здесь же у на такое окошко приветствия и здесь я
1:36:23
нажимаю Создайте свою первую форму далее А я выбираю простая
1:36:31
контактная форма это готовые шаблоны Я думаю они не все нам доступны потому что
1:36:37
Ну им нужно продать про версию Ну вот простая контактная форма нам доступна нажимаю использовать
1:36:44
шаблон далее Вот она наша простая контактная форма и нам её здесь нужно редактировать так смотрите во-первых
1:36:51
название здесь не совсем корректно переведено я пишу здесь ваше имя затем мне не так интересна фамилия
1:36:59
Мне нужно просто чтобы человек оставил своё имя Да даже в принципе имя мне не обязательно мне нужен его номер телефона
1:37:05
в первую очередь поэтому я могу убрать эту галочку обязательное поле видите звёздочка пропала затем я нажимаю
1:37:12
добавить поля К сожалению нам недоступен вй версии В бесплатной нам недоступен
1:37:17
недоступно поле телефон сложное поле телефон но у нас есть решение мы берём просто вот так вот нажимаю
1:37:24
перетаскивают здесь я пишу номер телефона а и здесь я ставлю
1:37:32
галочку обязательное поле А смотрите электронка она мне в принципе как бы не
1:37:38
нужна я могу оставить для того чтобы впоследствии у меня ну я мог какие-то рекламные материалы например отправлять
1:37:44
на эту электронную почту но для меня необязательно поэтому я уберу эту галочку то есть человек может
1:37:51
игнорировать это поле также смотрите в принципе вот она форма готова Да но так как я делаю форму
1:37:58
записи на бесплатный пробный урок сейчас мы это
1:38:04
переименую да здесь это дело Я хочу добавить сюда такое небольшое маркетинговое исследование для этого я
1:38:10
нажимаю снова добавить поле и здесь есть такой множественный выбор и я сюда Вот его
1:38:17
перетаскивают пишу как вы обо мне узнали ставлю знак вопроса и
1:38:27
Какие есть варианты например от друзей а затем Например у меня есть
1:38:35
реклама ВКонтакте и третий вариант допустим баннеры баннер в кафе пляж
1:38:43
пусть будет Вот так вот А вот такой вот маленькая маркетинговая такая анкетка Да
1:38:48
Человеку нужно просто поставить один чекбокс и отправить форму всё комментарий сообщения тоже можно Ну
1:38:54
здесь можно изменить Например если
1:38:59
есть Если есть что
1:39:07
сказать дополнительно например так так смотрите нажимаю наверху
1:39:15
сохранить затем Какие ещ Мне нужны здесь настройки смотрите чтобы номер телефона
1:39:21
меня был в определённом формате я могу здесь вот перейти здесь раздел общий
1:39:26
есть во-первых кликаю на номер телефона затем иду в дополнительные и есть такое понятие как Маска ввода что это за маска
1:39:35
ввода смотрите вам Ну вот я показываю Как я действую да я нажимаю посмотреть
1:39:40
примеры и документы правда на английском языке всё это дело открывается но Если захотите переве смотрите Я хочу чтобы у
1:39:48
меня номер приходил в определённом формате а именно п 7 допустим 927 там
1:39:54
333 3333 И для этого для того чтобы использовать в общем для того чтобы
1:40:01
задать людям ограничения по номеру телефона чтобы он использовал только цифры я делаю следующее так вот смотрите
1:40:09
есть телефонный номер и соответственно для того чтобы у меня была Вот такая вот
1:40:14
маска ввода я должен Вот это дело скопировать копирую идём обратно и сюда вот в маску
1:40:22
ввода я пишу плюс о только вместо плюс О я ставлю плюс 7 Скорее всего я в России
1:40:27
нахожусь Да скорее всего номер будет именно такой очень маленькая вероятность что кто-то будет с другим номером Ну
1:40:35
опять же смотрите сами Да это необязательно можно здесь вот эту например Семёрку не ставить тоже поставить плюс де потому что девятка
1:40:42
служит отвечает здесь не за саму девятку а просто за то что это будет номер
1:40:47
телефона Ну в общем Сейчас всё сами увидите так дальше нажимаю сохранить
1:40:53
а затем иду в следующую вот здесь вот вкладку называется настройки здесь я
1:40:59
пишу форма записи на пробный
1:41:06
урок сёрфинга вот так вот так здесь больше я ничего не меняю нажимаю
1:41:13
сохранить на всякий случай следующее Иду вот сюда вот в уведомление и вот здесь смотрите здесь важно а на вот этот вот
1:41:20
email по умолчанию здесь стоит админ Ну email администратора то есть тот email
1:41:25
который вы указали для сайта на вордпрессе для вашего WordPress сайта сюда и будут приходить уведомления если
1:41:32
вам нужно какой-то другой сюда email да вы просто его и вписывай я напишу сейчас здесь
1:41:38
help.ru вот так вот затем здесь я пишу тема письма Какая будет новая
1:41:46
запись на пробный урок А здесь у меня поставилась автоматически название моего
1:41:55
Surf Camp Помните я писал там на одном из этапов ну здесь можно писать тоже всё что угодно и дальше Вот этот важный
1:42:01
момент здесь нам такое вот уведомление приходит и вообще эта штука не будет работать если здесь оставить вот такие
1:42:07
вот данные как это решается очень просто признаться я сам раньше ну заморачивался
1:42:12
по-другому через вот этот плагин VP mail smtp оказывается решается проблема легче
1:42:17
Ну по крайней мере у меня так сработало и я думаю что Вам следует тоже попробовать просто сюда вставляете No
1:42:23
Reply собака swave ru то есть ваш домен естественно не soci Wave А ваш домен всё
1:42:29
у меня уведомление пропало супер здесь больше я ничего не делаю нажимаю ещё раз
1:42:36
сохранить так всё с формой Мы закончили теперь я иду открываю в новой вкладке
1:42:45
сайт so Wave Давайте просто перейдём на главную страницу иду в раздел контакт
1:42:51
вот у меня здесь должна быть моя форма Да так смотрите нажимаю редактировать
1:43:00
страницу Спускаюсь ниже и смотрите у меня здесь уже всё подготовлено то есть
1:43:07
У меня появляется выпадающий список выберите форму и я выбираю просто форма записи на пробный урок здесь вместо
1:43:14
напишите мне я пишу запишись на пробный урок на пробный
1:43:22
можно писать пробный бесплатный не знаю в общем как-то вот так вот и в чём
1:43:28
прелесть вот этих шаблонов Да которые мы использовали в самом начале Обратите внимание форма у нас стилизована сразу
1:43:35
же под дизайн нашего сайта Вот то есть вам не нужно самому заморачиваться там
1:43:42
потому что целый код то есть тот человек Вообще это та мор я ему безмерно
1:43:47
благодарен за его работу он всё это подготовил уже и сделал как бы всё за вас Это просто супер всё вот она наша
1:43:55
форма Она готова и я нажимаю здесь обновить и нажимаю посмотреть страницу
1:44:01
Вот моя страница контакты и здесь такое значит такая вот небольшая анкетка
1:44:07
запишись на пробный бесплатный урок Поймай волну Стань сферо а свяжись и начни сегодня Давайте попробуем её
1:44:13
заполнить пишу Алексей дальше пишу видите у меня появляется маска ввода 927
1:44:19
35 35 5 Ну в общем номер телефона дальше электронную почту я не указываю например
1:44:25
откуда узнал баннер в кафе пляж и здесь я могу ещ написать хочу стать
1:44:35
сферо Кстати классный сайт всё и нажимаю
1:44:42
отправить появляется сообщение спасибо что написали Да мы свяжем с вами шее время всё форма отправлена сейчас я
1:44:48
открою свою электронную почту и вот обратить внимание Письмо пришло от
1:44:54
смпа новая запись на пробный урок значит вы открываете и видите имя того кто
1:45:00
записался его номер телефона откуда узнали и сообщение которое мы только что
1:45:05
написали супер супер вот так вот буквально за считанные минуты вы
1:45:11
получаете для своего сайта классную форму обратной связи а мы идм дальше
1:45:17
следующее что я хочу вам продемонстрировать чему научить это как вы можете быстро и легко менять шрифты
1:45:25
на вашем сайте опять мы пользуемся мощью Word и
1:45:31
для того чтобы менять шрифты нам не нужно что-то колдовать мы просто устанавливаем плагин Давайте я покажу
1:45:38
как это сделать переходим в консоль переходим в плагины Добавить
1:45:44
новый добавить плагин здесь я пишу FS
Плагин шрифтов Fonts Plugin
1:45:51
нажимаю Enter и плагин который нам нужен называется fonts plugin Google fonts
1:45:57
typography 200.000 активных установок пятизвёздочный рейтинг более тысячи отзывов нажимаю
1:46:03
установить нажимаю активировать после активации у нас появляется а слева в
1:46:09
меню FS plugin иду в раздел настроить шрифты и иду в подпункт основные
1:46:17
настройки нажимаю и вот у нас смотрите семейство шрифтов а есть основное оформление есть оформление заголовков и
1:46:24
оформление кнопок и полей ввода сейчас у меня везде здесь стандартный шрифт смотрите значит нажимаете у вас
1:46:30
выпадающий список он просто огромен Здесь наверное может быть под 1.000
1:46:36
может быть даже больше различных шрифтов Но есть один нюанс далеко не все из этих
1:46:41
шрифтов поддерживают кириллические буквы а поэтому смотрите какой у нас выход из
1:46:46
ситуации вы просто в Яндексе пишете Google fonts для кириллицы выпадает вам тут поисковая выдача И вот
1:46:54
я смотрите открыл буквально парочку сайтов допустим Смотрим Да шрифт адика и
1:47:00
вот он выглядит вот так вот например шрифт вот так вот следующий следующий Вот например сри Да вот такой вот
1:47:08
самописный шрифт Давайте попробуем его здесь в семейство шрифтов я
1:47:15
пишу Ири рури который я Настоятельно вам
1:47:21
рекомендую не использовать потому что ну потому что смотрите мне приглянулся
1:47:27
шрифт Комфорта а возвращаемся сюда и здесь я
1:47:33
выбираю Комфорта А вот видите у меня теперь все
1:47:40
все шрифты так как здесь у меня Комфорт А здесь стандартные соответственно везде установился одинаковый шрифт но допустим
1:47:46
для заголовков Я хочу немножко другой шрифт а и пусть он у меня
1:47:53
будет так вот этот вот мне понравился exa 2 идём сюда здесь я пишу exa 2 вот так
1:48:03
вот а также смотрите здесь есть Дополнительные настройки можно задать во-первых толщину шрифта и можно задать
1:48:11
ещё и стиль шрифта можете с этим поиграться я этого сейчас делать не буду и также у меня есть отдельные настройки
1:48:17
для кнопки сейчас у меня здесь в принципе а для кнопки те же самые
1:48:22
настройки что и Комфорта да то есть что и основной шрифт вот этих вот э
1:48:28
а меню и вообще везде по тексту Да вот этот шрифт а но допустим я хочу здесь
1:48:34
тоже сделать exa 2 вот так вот и таким образом у меня на
1:48:41
кнопках А вот такой вот шрифт Мне так нравится больше а Ребят я вам рекомендую
1:48:47
использовать не больше двух шрифтов на сайте больше не надо потому что вы просто путаете своего посетителя и это
1:48:54
выглядит не очень поэтому выберите два хороших шрифта один для заголовков один для
1:49:01
основного текста для разных текстов для абзацев и так далее и Остановитесь на них всё дальше я нажимаю опубликовать
1:49:10
закрываю иду на сайт и вот всё у меня здесь отлично работает так
1:49:16
закрою я эти вкладки с сделаем это поговорим о бэка смотрите в процессе
Делаем бэкап сайта
1:49:25
создания сайта бывает что вы начинаете какие-то эксперименты и Ну можно короче
1:49:32
наломать дров поэтому я Настоятельно рекомендую особенно новичкам Да вообще даже всем Ну профессионалы и сами
1:49:37
понимают что это необходимо нужно перед тем как вы делаете какие-то серьёзные
1:49:43
изменения что-то пробуете что-то экспериментируйте делайте бэкап вы сохраните себе нервы и время а это как
1:49:51
знаете вот если вы играли в компьютерные игры можно сохраняться Да на каком-то этапе вы сохраняете потом идёте дальше
1:49:57
там не знаю вас убивает какой-то Босс вы восстанавливается и по новой с ним боретесь значит То же самое Здесь вы
1:50:04
сохраняете что-то пробуете Если всё получилось идёте дальше там снова сохраняете если что-то не получилось
1:50:10
пошло не так вы всегда можете откатиться на это место и Давайте установим такой
1:50:16
плагин иду в консоль иду в раздел плагины кстати видите после того как у
1:50:22
нас установился какой-то плагин у нас появляется вот эта вот плашка такая этого плагина опять же мы можем идти
1:50:29
сюда вот в настройки и убрать её также у нас есть вот новости типографики от
1:50:35
плагина шрифтов Мы тоже это можем убрать чтобы нам это не мешало А это я нажму закрыть вот так вот мне нравится чтобы
1:50:41
здесь Было чистенько Так значит плагины Добавить
1:50:47
новый и в названии я пишу
1:50:52
Так секундочку Мне нравится этот плагин Вы
1:50:57
можете пользоваться другим но Я рекомендую этот вот он миграция резервное копирование тестирование п
1:51:04
звёзд 400.000 установок всё отлично обновлено 2 недели назад нажимаю установить название всех плагинов
1:51:10
которые мы использовали в этом уроке я отдам в описании к видео нажимаю
1:51:15
активировать далее смотри данных плю файлы то есть полностью сайт
1:51:24
сохранять резервные копии локально Это значит что копии будут сохраняться на вашем хостинге это очень
1:51:31
удобно так и следующее что нам нужно сделать получается вот здесь есть
1:51:36
кнопочка создать резервную копию Да целиком Не влезло просто нажимаете создать резервную
1:51:43
копию затем какое-то время должно пройти ВС
1:51:48
готовом внизу Вот она наша резервная копия есть её дата и можно как скачать
1:51:55
её себе на компьютер Также можно допустим Вы что-то наворотил заходите сюда в vpv Backup plugin и нажимаете
1:52:01
восстановить и откатывается на вот эту вот дату рекомендую регулярно пользоваться плагином бэкапа Ребята у
1:52:08
нас осталось два момента прежде чем мы закончим и один из них заключается в
Формат ссылок Cyr-to-Lat
1:52:14
следующем Смотрите если вы были внимательны То могли обратить внимание что например открою страницу ос и тогда
1:52:23
адрес нашего сайта выглядит следующим образом so Wave ruas а
1:52:29
СШ то есть латиница да и кириллица такой микс – Это не очень хорошо не очень
1:52:36
хорошо Как для поисковых систем так и для того чтобы просто делиться этими ссылками А например в социальных сетях
1:52:42
Если вы её попытаетесь кому-то отправить эту ссылку то там будут такие вот каракули длиной там не знаю в 100
1:52:48
символов нам это абсолютно не нужно а поэтому нам нужно привести это всё к
1:52:54
общему виду и делается это на вордпрессе очень и очень легко и вы догадались наверное Что делать с помощью плагина А
1:53:02
смотрите иду я в консоль иду я в раздел плагины Добавить новый А здесь я должен
1:53:11
написать цир тулат а в описании к видео это тоже
1:53:19
будет и вот он наш плагин смотрите что он делает преобразует не латинские символы
1:53:24
в ярлыках записей страниц и рубрик в латинские именно он нам и нужен нажимаю
1:53:31
установить и нажимаю активировать а здесь у нас ничего не появилось но в
1:53:37
настройках смотрите в настройках У нас появился новый пункт ртут
1:53:43
нажимаю а затем здесь мы ничего менять не будем а перейдём в раздел конвертер
1:53:51
и нам нужно найти вот эту красную кнопочку конвертировать существующие ярлыки нажимаю а друзья обращаю Ваше
1:53:59
внимание что это желательно сделать именно вот в самом начале создания сайта Потому что если вы будете кому-то
1:54:05
пересылать какие-то ссылки либо где-то эти ссылки размещать оставлять да то после того как мы конвертируем те ссылки
1:54:12
станут не действительными поэтому Сделайте это как можно раньше и нажимаю Окей А теперь перейду на сайт открою
1:54:21
например страницу У нас и я вижу сообщение что страница не найдена а к
1:54:27
сожалению автоматически у нас не поменялись вот эти вот пункты меню и нам
1:54:32
придётся сделать это вручную но сделать это в любом случае нужно поэтому ничего не поделаешь смотрите как нам следует
1:54:40
действовать во-первых открываем консоль открываем страницы Вот они все страницы
1:54:46
Да смотрите например страница Контакт так момент попробую нажать свойства Ну
1:54:52
вот в принципе есть да ярлык контакты теперь страница называется вот так вот а
1:54:58
так открою ещё раз soci Wave А здесь у нас страница контакты она
1:55:05
вот если вы Обратите внимание Ну в принципе можно вот так вот нажать смотрите здесь у нас остались те же
1:55:10
самые та же самая кирилица Наша задача сейчас вручную это поменять причём
1:55:17
поменять и Для верхнего меню и для нижнего меню потому что это к сожалению не сработало автоматически Ну ничего
1:55:24
займёт минуточек пять смотрите значит наши действия Да мы
1:55:31
идём в консоль идём внешний вид
1:55:37
редактор затем находим здесь навигация У нас два меню навигация и навигация
1:55:43
подвал Давайте начнём с навигации верхней нажимаем навигация затем вот здесь вот я должен нажать изменить
1:55:50
и вот смотрите главное у меня главное Так
1:55:55
кстати главное у меня главное но почему-то здесь тоже что-то добавлено
1:56:00
давайте-ка вот так вот сделаем сохраним сохраним так идём в страницу о
1:56:07
нас вот это я должен дело удалить и здесь я должен написать
1:56:14
о нас и ещё один СШ нажимаю сохранить
1:56:20
нажимаю сохранить затем иду в раздел Услуги чтобы узнать как у меня теперь Ну
1:56:27
в принципе можно догадаться что услуги будут вот так вот
1:56:33
услуги так но чтобы это проверить вы переходите в страницы идёте сюда вот в
1:56:38
услуги нажимаете свойства да Видите услуги вот так вот называется и здесь
1:56:44
свойство Т контакты вот так вот Я вот это скопирую отсюда идём сюда в
1:56:50
навигацию открою контакты и здесь в принципе кстати здесь можно сделать следующим образом нажимаете просто
1:56:56
изменить и пишите здесь страница контакта вот здесь уже
1:57:03
всё у нас поменялось всё так а мы провели необходимые действия с верхнем
1:57:09
меню нажимаю сохранить нажимаю сохранить затем нажимаю а сюда вот на на
1:57:16
наш на иконом мы сюда в навигацию идём назад и теперь навигация подвала нужно
1:57:22
сделать Тоже самое страница значит делаю редактировать страница о нас у
1:57:29
нас о нас так секундочку
1:57:35
не удаляю О так что ж такое О вот так Вот потому
1:57:43
что Кири у меня стоял поэтому он всякую чепуху сюда пишет нажимаю Так
1:57:49
ладно не буду каждый раз сохранять перехожу в услуги
1:57:54
удаляю услуги и контакты
1:58:01
удаляю так и здесь я Вставляю контакты вот так вот всё вроде бы всё нажимаю
1:58:07
сохранить навигация подвала изменена так хорошо иду сюда иду сюда И перехожу на
1:58:16
главную страницу сайта Так у нас значит главная страни всё О’кей работает страница АС отлично работает видите
1:58:23
адрес изменился Теперь всё на латинице услуги открывается контакты открываются
1:58:29
Давайте посмотрим внизу о нас работает услуги работают контакты работают всё
1:58:39
супер с этим справились пожалуйста обязательно это проделайте так и закрою
1:58:45
я вот эту страничку и у меня остался последний последний момент который я
1:58:51
хочу вам поведать смотрите вот если вы навед давайте откроем главную страницу навед курсор на вкладку то здесь такое
ИИ генератор описания сайта
1:58:59
всплывающее окошечко и написано Surf Camp и адрес сайта а для поисковых систем для индексации
1:59:07
Яндексом Гуглом Да ну любыми поисковыми системами Ну в принципе я вам рекомендую делать акцент на Яндекс Если вы будете
1:59:14
нравиться Яндекс в принципе значит вы и другим поисковым системам тоже будете нравиться Ну вообще в России имеет смысл
1:59:21
конечно же развиваться под Яндекс А смотрите у нас здесь просто Surf c Я бы хотел
1:59:27
сюда добавить некоторые ключевые слова вообще более подробно
1:59:33
описать свой Ну как бы бизнес Да смотрите
1:59:38
а здесь нам на помощь опять приходит искусственный интеллект и сайт t.com в
1:59:44
описании к видео Найдите пожалуйста вот эту ссылочку либо можете сами написать t.com tagline Generator затем у меня
1:59:49
здесь описан мой бизнес Да уже всё вставлено даже не пришлось писать и мне он смотрите он мне на выбор предлагает
1:59:58
некоторые варианты дескрипшн так скажем описани здесь будет название сайта и через тире такое
2:00:04
описание Аа Например у меня будет написано Surf а
2:00:11
Ну будет название сайта А так soci Wave смотрите значит идём
2:00:17
консоль настройки так написание а нет Простите настройки
2:00:26
чтения Господи Настройки общие вот здесь вот я
2:00:35
напишу Сочи волны Ну Сочи Да по-русски я переи начал
2:00:41
Ну давайте лучше напишем всё-таки
2:00:46
вот вот без вот этих вот вещей и сюда вот в краткое описание я отсюда копирую
2:00:54
допустим у меня будет S Wave Научись сёрфить в Сочи или волны Ждут тебя можно
2:00:59
Ну ключевые слова лучше использовать Вот то есть сёрфить и в Сочи то есть СФ или Алексей твой СФ git
2:01:08
или покори волну с прои или даже Сёрфинг в Сочи с инструктором Алексеем Давайте вот эту я
2:01:14
кликаю У меня она копируется Вставляю сюда и и
2:01:19
сохраняю нажимаю сохранить изменения А теперь Открываю сайт и Теперь смотрите
2:01:25
при наведении курсора мыши у меня следующая информация soci wf.ru Surfing в Сочи с инструктором Алексеем Именно
2:01:32
так я хочу чтобы в поисковой выдаче мой сайт и был представлен вот друзья на этом видеоурок
2:01:41
окончен я вас поздравляю с созданием собственного сайта и я вас уверяю что
2:01:46
если вы дошли до этого момента то вы сделали больше чем на 90% новичков
2:01:52
которые создают сайт а именно вы полностью закончили все страницы сайта наполнили контентом пусть не совершенным
2:01:59
но ничто не мешает вам его постепенно улучшать Ребят я постарался в этом уроки
2:02:05
дать самые-самые основы Но конечно же я не могу растягивать На многие часы урок
2:02:10
Хотя мне ещё есть что сказать если вас интересует дополнительная информация которая поможет вам сделать ваш сайт
2:02:17
более посещаемым вообще с делать его более качественным то я Приглашаю вас посетить сайт моей онлайн-школы для
2:02:24
этого можете в браузере написать делай точка сайт оставлю
2:02:31
ссылочку конечно же в описании к видео а и здесь у меня есть такой раздел платно
2:02:37
я вам рекомендую присмотреться вот к этому курсу запуск сайта на WordPress в нём я постарался
Продолжай обучение
2:02:43
изложить 11 лет своего опыта получилось более 4 часов видео и я думаю что это
2:02:49
будет для вас очень полезно Тем более что его стоимость по сравнению с его пользой минимальна Ну всё на этом я с
2:02:57
вами прощаюсь пожалуйста если было полезно Поставьте лайк этому видео можете задать вопрос в комментарии а
2:03:03
также я буду очень благодарен если вы Поделитесь этим видео в социальных сетях С вами был кальсон Алексей и до встречи
2:03:10
в новых обучающих видео пока

Поделиться: