Создание сайта за 3 часа c ИИ | WordPress + Elementor + Deepseek + Qwen | Пошаговый гайд!

В этом подробном видеоуроке я покажу, как создать одностраничный сайт на WordPress с помощью Elementor, активно используя нейросети DeepSeek и Qwen. Вы узнаете, как ускорить процесс разработки, автоматизировать задачи и создать профессиональный сайт всего за 3 часа. Покажу как сделать первоначальную SEO оптимизацию сайта под поисковые системы, установить продвинутую систему аналитики Я. Метрика и лучший инструмент для взаимодействия с поисковой системы Яндекс — Я.Вебмастер.
Этот видеоурок по созданию сайта на wordpress подходит как для новичков, так и для опытных пользователей!

Таймкоды

00:00:00 Введение и описание сайта

• Автор показывает пошаговую разработку сайта для церемонии Камба в Уфе.
• Сайт будет включать кнопку для записи на церемонию с переходом в чат Telegram.
• Информационные блоки и уникальные изображения будут созданы с помощью нейросети.

00:00:53 Структура сайта и использование нейросетей

• Блок с отзывами участников, большинство из которых будут реальными.
• Тексты на сайте будут генерироваться нейросетью DALL-E.
• Призыв к действию и переход на Telegram для записи.

00:01:46 План действий и возможности сайта

• Создание мобильной версии сайта.
• Возможность расширения сайта до многостраничного и добавления интернет-магазина.

00:02:44 Затраты и ресурсы

• Хостинг: 30 дней бесплатно, затем 320 рублей в месяц.
• Домен в зоне .ru: 179 рублей в год.
• Создание главной страницы, текстового и графического контента с помощью нейросетей.
• SEO-оптимизация и подключение к Яндекс Вебмастеру и Метрике.

00:03:38 Преимущества и обучение

• Сайт будет полностью в собственности без ограничений.
• Обучение работе с WordPress, Elementor, SEO и нейросетями.
• Скидка 95% на профессиональные инструменты для создания сайта.

00:04:29 Начало работы и рекомендации хостинга

• Получение аккаунта хостинга через ссылку под видео.
• Рекомендация хостинга Beget: тарифы Block и Start.
• Преимущества хостинга: скорость, бесплатные SSL-сертификаты.

00:05:57 Регистрация на хостинге

• Заполните личные данные: ФИО, номер телефона, email.
• Укажите логин и код партнёра 110928.
• После регистрации доступ к контрольной панели по адресу cpp.beget.ru.

00:06:57 Регистрация домена

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

00:07:47 Процесс регистрации домена

• Найдите раздел «Домены и поддомены», выберите «Регистрация домена».
• Введите название домена, например, «комбо-уфа.ру».
• Если домен уже зарегистрирован, выберите другой.
• Используйте нейросеть для генерации названий доменов.

00:08:47 Выбор зоны домена

• Для России и СНГ выбирайте зону .ru.
• Избегайте экзотических зон, таких как .online или .store, из-за высоких затрат на продление.
• Простой домен в зоне .ru или .com предпочтительнее.

00:10:40 Завершение регистрации домена

• Заполните паспортные данные администратора домена.
• Пополните баланс на стоимость регистрации домена.
• Оставьте настройки по умолчанию: делегирование, автоматическое продление, бесплатный сертификат.
• Дождитесь сообщения о регистрации домена и выпуске SSL-сертификата.

00:12:55 Установка WordPress

• После получения сообщения о выпуске сертификата можно устанавливать WordPress.
• Создайте поддомен для учебных или бизнес-сайтов.
• В разделе «Хостинг» выберите «Установка системы управления контентом», затем «WordPress».
• Укажите зарегистрированный домен и логин администратора, отличный от «admin».

00:14:47 Безопасность аккаунта

• Не используйте логин «admin» для администратора, чтобы избежать уязвимостей.

00:14:53 Установка WordPress

• Устанавливаем пароль, рекомендуется использовать надёжный пароль.
• Указываем рабочий email.
• Нажимаем «Установить».

00:15:48 Вход в панель управления

• В адресной строке браузера вводим домен сайта.
• Открывается главная страница WordPress.
• Для входа в панель управления добавляем к адресу сайта косую черту и «/wp-admin».

00:16:48 Авторизация и настройки

• Вводим логин и пароль, ставим галочку «Запомнить меня».
• Закрываем ненужные вкладки, настраиваем экран.
• Удаляем автоматически установленные плагины.

00:18:06 Настройки видимости для поисковых систем

• Отключаем индексацию сайта поисковыми системами.
• Настраиваем постоянные ссылки.

00:19:04 Установка темы Astra

• Удаляем автоматически установленные темы.
• Добавляем тему Astra, активируем её.

00:21:12 Установка плагинов

• Устанавливаем плагин Starter Template.
• Активируем плагин Reliable Simple SSL для защиты сайта.
• Устанавливаем плагин Elementor для создания страниц.

00:25:13 Создание бэкапа

• Устанавливаем плагин WP Migrate Backup.
• Создаём резервную копию сайта.
• Проверяем доступность бэкапа для восстановления.

00:26:31 Подготовка к дизайну

• Подготавливаемся к дизайну главной страницы.

00:26:57 Настройка рабочего пространства

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

00:27:32 Работа с редактором Elementor

• Используем редактор Elementor вместо стандартного редактора WordPress.
• В левой части экрана находим виджеты и глобальные элементы.
• Бесплатные виджеты достаточны для создания хороших сайтов.

00:28:31 Обзор шаблонов и блоков

• Рассматриваем готовые шаблоны Elementor, большинство из которых доступны в платной версии.
• Нажимаем на кругляшок с буквой «С» для доступа к страницам и блокам.
• Импортируем готовые шаблоны на страницу.

00:30:20 Использование блоков для создания сайта

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

00:31:01 Применение искусственного интеллекта DeepSik

• Используем DeepSik для создания структуры и текста посадочной страницы.
• Отправляем запрос DeepSik, например: «Привет, я создаю сайт. Тема сайта — церемония Камбо в Уфе. Пожалуйста, составь для меня структуру и текст для посадочной страницы».
• DeepSik быстро генерирует структуру и текст, адаптируясь к запросу.

00:36:18 Импорт блоков в Elementor

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

00:38:39 Добавление блоков преимуществ

• Добавляем блок с изображением и текстом для преимуществ церемонии.
• Перемещаем и стилизуем блоки на странице.

00:39:38 Добавление блока «Как проходит церемония»

• Импортируем блок «Как проходит церемония».
• Стилизуем блок и добавляем его на страницу.

00:40:51 Завершение работы над структурой

• Находим и импортируем блок «Отзывы участников ритуала».
• Дублируем блок и стилизуем его.

00:41:51 Работа с блоками

• Добавление блока «Отзывы».
• Импорт блока «Частые вопросы о камбо церемонии».
• Выбор и импорт блока «Колту экшн».
• Импорт блоков «Цитата» и «Социальные сети».

00:44:38 Преобразование блоков в контейнеры

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

00:45:59 Работа с пейдж билдером Element

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

00:47:54 Настройка контейнеров

• Удаление ненужного контейнера и растяжение оставшегося контейнера на всю ширину.
• Настройка отступов в процентах: справа — 46%, слева — 5%.
• Отключение параметра «связать значение» для независимого изменения параметров.

00:50:46 Добавление текста и изображения

• Вставка текста «Легендарная церемония камбо в Уфе» в контейнер.
• Изменение размера и цвета шрифта.
• Размещение фотографии лягушки, занимающей весь размер контейнера.

00:51:29 Настройка фона

• Вкладка «Стиль» позволяет выбрать тип фона: классический, градиент, видео или слайд-шоу.
• Можно задать цвет или загрузить изображение.
• Изображения можно создавать с помощью нейросети или находить в интернете.

00:52:24 Качество изображений

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

00:53:21 Редактирование изображений

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

00:54:21 Ключевые слова и позиционирование

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

00:55:16 Настройка текста

• Выравнивание текста слева.
• Настройка типографики: выбор глобальных шрифтов, например, «Монтсеррат» и «Работа».
• Установка цвета текста и размера шрифта.

00:58:50 Дополнительные настройки текста

• Настройка произвольной ширины и отступов для текста.
• Пример настройки: ширина 76 пикселей, отступ сверху 10 пикселей.

01:01:28 Настройка кнопки

• Позиционирование кнопки слева.
• Написание текста на кнопке: «Записаться на церемонию».
• Настройка цвета и типографики кнопки.
• Скругление углов кнопки для более округлого вида.

01:02:26 Финальные настройки контейнера

• Настройка отступов внутри контейнера для идентичности первого экрана.
• Пример настройки отступов: 180 пикселей, 30 пикселей.
• Проверка идентичности первого экрана после всех настроек.

01:03:26 Работа с редактором и публикация изменений

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

01:04:19 Настройка кнопки для записи на церемонию

• Переход в настройки кнопки, выбор вкладки «Содержимое».
• Ввод ссылки на Telegram-аккаунт.
• Настройка параметров ссылки: «Открыть в новом окне».

01:06:17 Настройка главной страницы

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

01:07:39 Перемещение блока на странице

• Перенос блока с готового сайта на текущую страницу.
• Перемещение блока наверх с помощью перетаскивания или окна «Структура».

01:10:33 Настройка контейнера и отступов

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

01:12:24 Настройка фона и шрифта

• Изменение цвета фона с помощью экранной пипетки.
• Настройка шрифта «Монцерат» и цвета текста.

01:15:23 Добавление разделителя

• Добавление виджета-разделителя в контейнер.
• Настройка параметров разделителя: ширина 12%, центр, толщина 2.

01:16:18 Завершение настройки блока

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

01:17:16 Введение в нейросеть QVN

• Автор начинает с блока преимуществ камбо церемонии, добавляя анимацию.
• Объявляет о намерении использовать нейросеть QVN для генерации картинок для сайта.
• Призывает зрителей зарегистрироваться на платформе QVN через Google аккаунт или почту.

01:18:11 Возможности QVN

• QVN не только рисует, но и отвечает на вопросы, подобно DeepMind.
• Автор создаёт новый чат и задаёт QVN задачу: создать картинки в едином стиле для блока преимуществ камбо церемонии.
• Использует текст, созданный DeepMind, для задания QVN.

01:19:08 Работа с заголовками

• Автор просит QVN добавить тексты под заголовки.
• Рекомендует зрителям пробовать самостоятельно, так как платформа бесплатная и обучение происходит через практику.

01:21:04 Создание промтов

• QVN создаёт промты для будущих картинок на основе заданных текстов.
• Автор вставляет промты в QVN и задаёт размер картинок.

01:22:02 Генерация картинок

• QVN генерирует картинки, иногда с ошибками, например, вместо золотого тона выдаёт цветной.
• Автор корректирует настройки, чтобы получить картинки в едином стиле.
• В итоге все преимущества камбо церемонии нарисованы в золотом тоне.

01:23:01 Заключение

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

01:23:34 Начало работы над главной страницей

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

01:24:00 Работа с изображениями и ключевыми словами

• Удаление и добавление изображений.
• Ввод ключевых слов для улучшения индексации сайта.
• Пример ключевых слов: «комбо Уфа», «очищение энергетической структуры».

01:24:56 Настройка изображения

• Изменение ширины изображения.
• Скругление углов изображения.

01:25:44 Настройка заголовка и текста

• Выравнивание заголовка по центру.
• Настройка типографики: шрифт «монсерат», чёрный цвет.
• Копирование и вставка текста с курсивным выделением.

01:26:21 Удаление границы контейнера

• Удаление границы контейнера, содержащего заголовок и изображение.

01:27:18 Дублирование и изменение блоков

• Дублирование и удаление блоков для экономии времени.
• Изменение ключевых слов в дублированных блоках.

01:29:00 Настройка отступов и добавление заголовка

• Настройка отступов между блоками.
• Добавление заголовка с текстом «Преимущество камбо церемонии».
• Настройка отступа сверху для заголовка.

01:30:52 Использование тэк-брейка

• Объяснение использования тэк-брейка для переноса текста на новую строку.

01:31:51 Добавление анимации

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

01:34:25 Проверка анимации

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

01:35:02 Создание блока с иконкой

• Создание нового контейнера с направлением «дирекшн-роуд» для блока.
• Вставка двух контейнеров с шириной 50% каждый.
• Настройка виджета «блок с иконкой»: изменение позиции иконки относительно текста, удаление лишнего текста, замена иконки.

01:36:56 Настройка иконок и заголовков

• Выбор иконки из набора по умолчанию.
• Установка цвета иконки и содержимого на чёрный.
• Вставка заголовка, настройка вертикального выравнивания и размера иконки 25 пикселей.
• Настройка шрифта: типографика 22, Montserrat, 226.

01:39:36 Дублирование элементов

• Дублирование контейнера и текста для создания блока.
• Важность установки направления «столбец» для вертикального выравнивания элементов.

01:40:27 Создание заголовка

• Добавление заголовка с выравниванием по центру и цветом «монсеррат».
• Текст заголовка: «Прямые показания камба церемонии».

01:41:55 Использование нейросети для выбора иконок

• Запрос нейросети DeepMind для подбора иконок из библиотеки Font Awesome.
• Получение иконок для пунктов «подготовка», «ритуал очищения», «восстановление».
• Настройка иконок и текста в редакторе.

01:48:15 Завершение блока

• Настройка отступов: 40 пикселей сверху и 80 пикселей снизу.
• Проверка готового блока.

01:48:23 Создание изображения с помощью QnA

• Автор использует QnA для создания изображения, вводя запрос «создай изображение».
• Упоминается проблема с соотношением сторон и необходимость квадратного изображения.
• Промты для генерации изображений создаются с помощью нейросети DeepMind.

01:51:10 Вставка изображения и настройка атрибутов

• Изображение вставляется с атрибутами alt и заголовок, содержащими ключевые слова.
• Настраиваются размер изображения 172 пикселя и скругление углов 88 пикселей.
• Текст «опытные проводники» оформляется в чёрном стиле.

01:53:42 Работа с контейнерами и заголовками

• Объясняется использование контейнеров для организации контента.
• Добавляется заголовок с помощью flex-box.
• Подчёркивается важность публикации изменений для сохранения прогресса.

01:57:15 Добавление отзывов с помощью DeepMind

• Реальные отзывы участников используются как пример для генерации новых отзывов с помощью DeepMind.
• Нейросеть генерирует три новых отзыва, один от девушки и один от парня.
• Отзывы настраиваются: изменяется стиль, размер, выравниваются элементы.

02:03:38 Вставка частых вопросов

• Частые вопросы о комбо-церемонии генерируются с помощью DeepMind.
• Вопросы и ответы вставляются в блок, настраивается стиль содержимого.
• После вставки вопросов не забывается нажать «опубликовать» для сохранения изменений.

02:05:33 Начало работы над дизайном

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

02:06:31 Работа с текстовым блоком

• Вставка текстового блока и настройка его стиля.
• Применение отрицательного отступа для поднятия кнопки.

02:07:48 Добавление социальных сетей

• Удаление Facebook и добавление иконок ВКонтакте и Telegram.
• Вставка ссылок на социальные сети.
• Настройка размеров и отступов иконок.

02:09:53 Завершение дизайна страницы

• Публикация страницы и проверка результатов.
• Настройка отступов для блоков.
• Добавление футера и кнопки для быстрого подъёма.

02:11:08 Сервис для создания уникальных изображений

• Описание сервиса Nomo-Copy.com для создания уникальных изображений на основе реальных фотографий.
• Процесс загрузки фотографии и генерации уникального изображения.

02:13:00 Удаление шапки и подвала сайта

• Объяснение необходимости шапки и подвала для многостраничных сайтов.
• Выключение шапки и подвала через настройки темы Astra Free.
• Упоминание о расширенном функционале Astra Pro для многостраничных сайтов и интернет-магазинов.

02:14:54 Финальная проверка

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

02:15:46 Введение в Astra Pro

• Автор вспоминает начало карьеры веб-разработчика в 2012 году и сложности создания сайтов на WordPress.
• Подчёркивается, что раньше было сложно работать с различными шаблонами из-за несовместимости пейджбилдеров и шорткодов.

02:16:41 Преимущества Astra Pro

• Astra Pro решает проблему необходимости освоения новых тем для каждого проекта.
• Сравниваются возможности бесплатной и платной версий Astra Pro.

02:18:27 Готовые дизайны в Astra Pro

• В Astra Pro доступно более 300 готовых дизайнов для различных типов сайтов: ресторанных, музыкальных, лендингов, интернет-магазинов и блогов.
• Дизайны можно импортировать в один клик.

02:20:22 Стоимость и предложение

• Пожизненная лицензия на Astra Pro стоит 199 долларов, а пакет с премиум-шаблонами — 399 долларов.
• Автор предлагает приобрести пожизненную лицензию и премиум-шаблоны за 990 рублей, что составляет около 5% от реальной стоимости.
• После покупки можно приобретать набор шаблонов для следующих сайтов за 500 рублей.

02:22:12 SEO-оптимизация сайта

• SEO-оптимизация помогает сайту лучше ранжироваться в поисковой выдаче и привлекать больше посетителей.
• Рекомендуется регулярно создавать резервные копии сайта.

02:23:47 Основные настройки SEO

• Основные настройки SEO включают название сайта, краткое описание и иконку сайта.
• Эти настройки влияют на снипет поисковой выдачи, который определяет вероятность клика на сайт.

02:24:42 Влияние снипета на видимость сайта

• Снипет поисковой выдачи определяет, насколько вероятно, что пользователь кликнет на сайт.
• Важно правильно настроить название, описание и иконку сайта для повышения видимости в поисковой выдаче.

02:26:15 Использование DeepCrawl для оптимизации

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

02:27:07 Основные настройки сайта

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

02:28:08 Установка SEO-плагина

• Выбор плагина для SEO: ES SEO, Rank Math SEO, All in One SEO.
• Подчёркивание важности работы над контентом сайта, а не только установки плагинов.

02:29:33 Активация плагина и настройка

• Активация плагина и пропуск настройки при необходимости.
• Решение проблемы с блокировкой доступа для поисковых роботов.

02:30:30 Оценка страниц и оптимизация

• Оценка страниц сайта с помощью плагина.
• Оптимизация одной страницы сложнее, чем многостраничного сайта.
• Использование DeepC для создания метаописаний.

02:31:50 Настройка фокусного ключевого слова

• Определение фокусного ключевого слова для страницы.
• Пример настройки: «комбо Уфа».

02:32:43 Настройка SEO-заголовка

• Вставка переменных в SEO-заголовок: название сайта и разделитель.
• Пример заголовка: «Церемония Камбо в Уфе, сакральная медицина Амазонии».

02:34:35 Настройка метаописания

• Рекомендации по длине метаописания для Яндекса.
• Использование DeepC для генерации метаописания.

02:36:29 Анализ проблем и улучшений

• Результаты анализа проблем и улучшений.
• Игнорирование некоторых рекомендаций плагина из-за особенностей страницы.

02:38:23 Эксперимент с ключевыми словами

• Эксперимент с ключевым словом «комбо Уфа» для проверки восприятия плагина.
• Подтверждение, что плагин не всегда корректно воспринимает кириллицу.

02:39:46 Проблемы с ключевыми словами и атрибутами изображений

• Изменение ключевого слова на «камба в уфе» уменьшает количество проблем.
• Яндекс понимает кириллицу, поэтому «камба уфа» и «камба в уфе» воспринимаются как одно и то же.
• Из 16 изображений на странице только три имеют атрибут «альт», что нужно исправить.

02:40:44 Ключевые фразы в заголовке и общие настройки SEO

• Точная копия ключевой фразы должна быть в заголовке, но не в начале.
• Настройка SEO для каждой страницы сайта занимает около 15 минут.
• Регулярная настройка поможет занять высокие позиции в региональном топе Яндекса.

02:41:44 Добавление изображения в сниппет

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

02:42:42 Установка Яндекс Метрики

• Яндекс Метрика позволяет анализировать поведение пользователей на сайте.
• Для установки Метрики нужен аккаунт на Яндексе.
• Создание счётчика Метрики: ввод имени, адреса сайта, часового пояса и включение Веб-Визора.

02:45:35 Установка плагина Яндекс Метрики для WordPress

• Установка плагина Яндекс Метрики через «Плагины» в WordPress.
• Ввод номера счётчика в настройки плагина.
• Проверка установки счётчика через плагин.

02:47:11 Анализ данных в Яндекс Метрике

• Через неделю после установки счётчика появятся первые данные.
• Веб-Визор позволяет анализировать поведение пользователей на сайте.
• Данные помогают улучшать сайт и оптимизировать его под требования Яндекса.

02:49:04 Добавление сайта в Яндекс Вебмастер

• Добавление сайта в Яндекс Вебмастер через «Добавить сайт».
• Подтверждение прав через HTML-файл, DNS-запись или метатег.
• Оптимальный вариант — подтверждение через HTML-файл.

02:51:23 Уведомления от Яндекс Вебмастера

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

02:51:58 Завершение работы с вебмастером

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

02:52:11 Адаптация сайта для мобильных устройств

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

02:53:56 Настройка шрифта и центровки

• Изменение размера шрифта для мобильных устройств.
• Центровка элементов на мобильных устройствах.

02:54:54 Замена фона и настройка прозрачности

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

02:56:38 Проверка и публикация изменений

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

02:58:42 Открытие сайта для индексации

• Переход в раздел «Настройки» → «Чтение».
• Снятие галочки с опции «Попросить поисковую систему не индексировать сайт».
• Сохранение изменений.

02:58:42 Завершение урока

• Благодарность за просмотр.
• Призыв поставить лайк, подписаться на канал и поделиться видео.

^{Таймкоды в нейросети https://300.ya.ru/v_E5IwnF0Z/}

Начали
0:00
друзья Всем привет в этом видеоуроке я вам хочу показать пошаговую разработку
0:05
реального сайта который я делал для своего друга который в Уфе проводит церемонию камбо что это такое позже Чуть
0:13
узнаете а сейчас давайте Прежде чем говорить о том что мы сделаем в уроки я покажу вам сайт который мы
0:21
сделаем внимание на экран Вот такая вот у нас будет такой у нас будет первый
0:27
экран при клике на кнопку записаться на церемонии у нас переход в чат Telegram и
0:33
а человек сразу может уже задать вопрос организации будут у нас информационные
0:38
блоки затем будет блок такой преимущество камба церемонии все вот эти вот изображения они Уникальны мы их
0:46
нигде не возьмём мы их создадим с помощью нейросети абсолютно бесплатно
0:51
Всё покажу по шагам от и до а затем у нас будет Вот такой вот блок а затем
0:56
блок Как проходит церемония все эти иконки тоже покажу как это всё легко и просто делается эти изображения Почему
1:04
стоит пройти камба с нами Мы тоже сделаем с помощью нейросети а таким образом вы не только научитесь
1:11
делать сайты но и научитесь работать с нейросетями А смотрите будет Вот такой
1:16
блок отзывы участников здесь будут у нас реальные отзывы а участников почти все
1:22
реальные а в общем все тексты которые здесь вы на сайте видите Мы тоже мало
1:28
будем принимать участие в их написании мы будем использовать неть deeps всё
1:33
научу Всё покажу вы удивитесь насколько круто э китайская нейросеть делает ваши
1:39
задачи выполняет будет Вот такой блок в конце Call To Action призыв к действию
1:44
готова к трансформации записаться за 60 секунд тоже при клике переход на
1:50
Telegram в Telegram чат и человек сразу может уже задать вопрос и записаться и Вот такой у нас будет футер ссылки на
1:56
социальные сети в общем всё это всё что вы видите на экранах мы с вами создадим
2:02
абсолютно с нуля без специальных навыков без каких-то дополнительных знаний То есть вам ничего уметь к этому моменту не
2:09
нужно у сайта естественно будет мобильная версия он будет открываться на всех мобильных устройствах и э в общем
2:17
помимо того что вы научитесь делать мы с вами за урок сделаем вот эту вот посадочную страницу одностраничный сайт
2:23
вы сможете впоследствии расширить этот сайт до многостраничного даже добавить интернет-магазин в общем по ходу урока
2:30
буду всё рассказывать и Ну расскажу много личных фишек и так далее А давайте
2:36
вернёмся к плану действий смотрите значит что мы сделаем в уроке Давайте сразу к делу во-первых мы получим
План действий
2:43
классный быстрый хостинг 30 дней будет бесплатно далее 320 руб в месяц получим Дон в zone.ru 179 руб в год сделаем
2:51
главную страницу создадим текстовый контент с помощью пка создадим графический контект с помощью н я покажу
2:57
вам как сделать се оптимизацию вы на научитесь по сути оптимизировать сайты
3:03
для поисковых систем для того чтобы занимать высокие позиции в поисковой выдаче затем мы добавим сайт Яндекс webm
3:09
и подключим в Яндекс метрику Простите и подключим Яндекс webm параллельно всю дорогу буду
3:15
рассказывать советы фишки и личный опыт который у меня есть смотрите друзья все
3:20
затраты которые вообще мы понесём в этом уроки они на экране остальное полностью
3:27
бесплатно таким образом год владения сатом обойдется всего около 4000 руб не
3:34
одного сайта ТХ сайтов но три сайта — это минимальный тариф на хостинге то есть у вас может быть три сайта за 4.000
3:40
руб В год примерно плюс ещё регистрация домина там 179 руб в зоне ру смотрите
3:48
что очень важно да сайт в вашей полной собственности никаких конструкторов никаких ограничений функционала
3:53
абонентских плат и прочего То есть это полностью ваша собственность и вы с ней делаете всё что хотите стал устраивать
4:00
хостинг просто переехали на другой вообще No problem урок для новичков Я уже сказал
4:06
никаких знаний не требуется Я всему вас научу Вы научитесь во-первых работать с прессом работать с классным пе билдером
4:12
Element освоите основы SEO и что особенно важно научитесь работать с
4:18
двумя крутыми нейросетями которые вам дают в руки такие возможности о которых мы не могли просто
4:24
даже мечтать всего лишь там 1 2 3 года назад так также друзья очень важный
4:30
момент все кто будет делать по видео получат от меня скидку 95% То есть за 5%
4:35
стоимости я предложу вам крутые про инструменты для создания сайта в пожизненное пользование так Прошу
4:42
прощения а вот в общем вот такой вот урок У нас планируется пожалуйста
4:48
Поставьте лайк Если нравится то чем мы будем заниматься я буду очень благодарен если вы напишите какой-то комментарий к
4:55
видео потому что это помогает его продвижению Итак давайте не будем тянуть и начали и первое что нам нужно для
Получаем акк. хостинга
5:02
создания сайта — это получить аккаунт хостинга Пожалуйста найдите под видео ссылку на вот эту страницу нажмите её и
5:10
Давайте перейдём сюда вот чуть пониже к тарифам а Я рекомендую хостинг bget я им сам уже около 10 даже 11 лет пользуюсь У
5:18
меня только приятные впечатление и я могу его смело рекомендовать так вот здесь есть
5:24
несколько тарифов у меня уже давно тариф й вам же для начала вполне пойдёт тариф
5:30
блок а либо потом есть возможность перейти на тариф Старт это уже 10 сайтов
5:36
на тарифе блок три сайта всё летает всё быстро а ssl сертификаты бесплатно в
5:41
общем классный хостинг с которым вы не будете знать никаких проблем А что нужно
5:47
сделать соответственно Вы можете выбрать либо тариф блок либо тариф Старт Ну давайте я вот покажу А на тарифе Старт
5:54
нажимаете попробовать бесплатно далее здесь нужно как в
6:00
паспорте всё по-честному заполнить фамилия имя отчество ваш номер телефона и ваш email никакого спама не будет не
6:06
переживайте только важная информация о вашем аккаунте хостинга а затем здесь есть вот указать логин Если вы привыкли
6:14
к какому-то логину Вы можете его здесь написать и ещё важный момент указать код
6:19
партнёра если здесь ничего не написано пожалуйста Впишите код 110 928 для вас
6:25
это на цену никак не повлияет А для меня это очень важно и это будет ваша небольшая благодарность за мои
6:32
бесплатные видеоуроки Спасибо вам за это в общем заполняете и нажимаете
6:37
регистрация после того как вы зарегистрируетесь Вам станет доступна контрольная панель по вот этому адресу
6:43
cp.beget.ru А здесь вся информация о состоянии вашего аккаунта хостинга А нам здесь
6:51
мало что понадобится поэтому не пугайтесь большому количеству всяких
6:56
иконок мы здесь сделаем некоторые действия и потом про хостинг вообще забудем нужно будет только оплачивать
7:01
его и всё собственно мы с ним больше работать не будем Итак первое что нам нужно сделать здесь в аккаунте хостинга
7:08

это зарегистрировать до до он же адрес сайта А вот для этого урока я
7:14
регистрировал domin cambo ufa.ru а yandex.ru Да google.com понимаете это
7:21
адрес по которому пользователи попадают на ваш сайт так вот если вы всерьёз
7:27
планируете заниматься вашим сайтом и ваш проект не просто какая-то шутка так скажем Да а
7:33
реаль Реальный проект который вы планируете вести в долгосрок то конечно
7:40
же вам нужен свой собственный домен это такой первый важный шаг на пути к успеху
7:47
хорошо смотрите находим здесь домины и поддомены нажимаем на следующий страни находим
Регистрация домена
7:54
регистрация домена и вот здесь вот вать
8:01
до Здесь вам нужно написать название того домена который вы хотите зарегистрировать вот
8:09
допустим ufa.ru напишу Я попробую зарегистрировать нажимаю
8:16
далее он скажет такой домен уже зарегистрирован соответственно Если вы
8:21
видите такое уведомление нужно выбрать другой домен я вас призываю во-первых два
8:28
важных момента долго не раздувай вы можете также использовать не для того
8:34
чтобы она вам наге нери названий доменов потенциальных она может хоть 100 вам названий Да сделать чуть позже когда
8:40
перейдём к ПКУ Да ну вы поймёте как это делать второй момент важный это
8:45
Пожалуйста послушайте меня не надо регистрировать домен в зоне например онлай Store даже ко не нужно если Т два
8:54
Смотрите если вы ориентированы на Россию или на СН делайте стоит 179 руб в год продление
9:01
будет 390 руб в год ком дороже Да но если вы думаете о каком-то международном
9:07
деле пожалуйста не нужно регистрировать домены какие-то экзотические потому что
9:12
регистрация это О’кей вот допустим онлайн будет стоить 300 руб но продление будет стоить уже больше 4.000 руб а я
9:19
много раз встречал когда ребята вместо того чтобы просто вложить деньги Например оплатить год хостинга Они
9:25
покупают зачем-то красивый домен потом проходит год и они понимают что блин Вот она типа ну как бы расстаться со своей
9:32
мечтой или сейчас заплатить 5.000 за продление у меня у самого есть домен в зоне точ Сай онлайн Школа Да делать
9:39
точка сайт Я уже 1.000 раз пожалел Ну не тысячу раз а сколько раз я продл Я пожалел что не сделал просто в зоне
9:45
ru поймите важный момент вот есть такая поговорка не имя красит человека а человек имя красивый домен вам ровным
9:53
счётом ничего не даёт а поисковые системы абсолютно одинаково относятся к любым доменным именам поэтому
10:00
послушайте мой опыт Да внемлите ему и зарегистрируйте простой до в zone.ru
10:05
либо Если уж прямо Вам сильно надо то в зоне Ко и тогда для вас это финансово
10:10
никакой нагрузки в будущем оказывать не будет В общем Окей не будем здесь долго останавливаться вы взрослый человек да
10:17
вы сможете разобраться с этим самостоятельно выбираете домен вписывает название и нажимаете зарегистрировать
10:24
нажимаете продолжить давайте я напишу допустим один вот так вот я регистрировать не
10:32
буду смотрите здесь важный момент он нам предлагает ещё бесплатно поучаствовать в акции за до в зоне Store бесплатно я
10:40
откажусь от участия потому что я использовать его не буду а domin Store он тоже стоит продление очень-очень в 10
10:47
раз дороже стоит в общем далее нажимаете продолжить если вас пропустила дальше
10:52
значит всё ой затем следующий момент так как у меня на этом аккаунте уже много
10:58
паспортных данных разных на который я регистрировал до у вас такого такой
11:03
анкеты нету И вам здесь будет предложено заполнить паспортные данные для администратора домена идёте за паспортом
11:10
и в пря прямо всё как в паспорте заполняете до — Это серьёзная штука да он оформляется как сим-карта на
11:17
паспортные данные то есть Чьи паспортные данные указаны того и домен если ваш
11:22
сайт в последстви вы добьётесь успеха Да это будет очень важное критическое значение для вас иметь
11:29
пожалуйста вносите свои личные данные в общем добавляете здесь персону администратора вносите всё как в
11:36
паспорте а нажимаете далее а затем на следующем этапе вас попросят пополнить баланс выбираете удобный способ
11:43
пополнения баланса есть сбп есть банковская карта в общем много разных способов найдёте обязательно тот который
11:49
вам больше подходит пополняйте баланс на стоимость регистрации домена всё и отправляете домен на регистрацию а здесь
11:58
смотрите здесь такой нюанс интернет такая штука неповоротливые да но немножко медленная инерционная и чтобы
12:04
ваш домен по факту появился Так давайте сейчас вниз немножко опустимся ещё пару
12:10
моментов смотрите Здесь всё оставляете делегировать домен после регистрации оставляете продлевать автоматически
12:16
оставляете и защитить сайт бесплатным с сертификатом тоже обязательно устанавливаете то есть здесь мы ничего с
12:22
вами не трогаем вот всё нажимаете зарегистрировать после того как вы отправите на регистрацию должно пройти
12:29
какое-то время сам домен регистрируется достаточно быстро может быть час а вот выпуск ssl сертификата иногда занимает
12:34
4-5 часов а в конечном счёте вам на электронку которую вы указывали при
12:40
регистрации на Гете придёт сообщение что с домен зарегистрирован всё о’кей и
12:45
придёт сообщение что ssl сертификат выпущен вот вам нужно дождаться этот email и только после этого приступать к
12:51
следующему шагу А я уверен вас всё получится и Давайте продолжим хорошо А
12:56
вы дождались письма что сертификат выпущен И теперь мы можем на ваш домен установить WordPress А я домен не
Установка wordpress на домен
13:04
регистрировал и поэтому я буду использовать домен третьего уровня смотрите что это такое Вот у меня здесь
13:10
есть Вот мой домен делай точ Сай и у меня к нему Смотрите сколько есть доменов третьего уровня то есть а адрес
13:18
точка делай точ сайт вот у меня их столько много всяких обучающих А и прочих демонстрационных сайтов и я
13:25
создал ещё один c.d. Сай Вы можете в принципе тоже это делать для своего домена смотрите как
13:31
это делается Вот у вас в списке В разделе домены и поддомены вот вы находите свой у вас будет единственный
13:37
там домен и здесь вот нажимаете вот эти три точки и появляется добавить под домен и можно добавить под домен
13:43
какое-то название написать Да и нажать добавить под домен это бывает очень полезно если вам а нужно например
13:51
создать какой-то либо учебный сайт либо это может быть какое-то направление вашего бизнеса в общем для разных целей
13:57
это используется так В общем ВС у меня до под домен есть у
14:02
вас есть ваш зарегистрированный домен что дальше идм в раздел хостинг находим
14:08
МС управление установка систем управления контентом находим здесь WordPress вот
14:14
он и всё смотрите он у меня автоматически подставляет мой домен здесь соответственно Вы должны увидеть
14:21
ваш зарегистрированный домен Я здесь
14:26
напишу тоже пока чтото название это потом можно будет поменять
14:31
идём далее смотрите логин администратора я Настоятельно вам рекомендую сделать что-то отличное от админ Даже например
14:40
админ Admin 22 либо любое другое дополнение к админу
14:46
работает Пожалуйста не оставляйте просто Админ это с точки зрения безопасности большая
14:52
ошибка хорошо дальше устанавливаем пароль я установлю Ну не очень сложный
15:00
пароль потому что у меня это сайт как бы демонстрационный в вашем же случае Я рекомендую взять здесь хороший хороший
15:06
надёжный пароль а дальше указываете свой email Я укажу здесь свой рабочий email
15:12
который использую так
15:18
cs.ru Ох ты Господи cs.ru вот так вот расширенную настройку
15:25
базы данных не трогаем и нажимаем установить
15:31
а буквально за минуту всё это дело произойдёт здесь я нажимаю хорошо а всё
15:37
cms WordPress успешно установлено Теперь я могу найти так найдём
15:44
сейчас а здесь пока не появилось наверное
15:49
смотрите как это делается То есть вы можете просто в адресной строке браузера написать Combo
15:56
тодей то сайт Ну соответственно вы здесь просто пишете свой домен который вы
16:02
зарегистрировали нажимаю Enter и вот у меня открывается вот такой
16:07
вот такая вот главная страница это главная страница стандартной темы
16:12
вордпрессе в двадцать шестом году и далее да она выглядит по-другому Ну если вы что-то
16:19
подобное увидели Привет мир Добро пожаловать в WordPress значит вы всё сделали правильно и мы можем продолжать
16:26
И сейчас нам нужно зайти в Панель управление прессом а или по-простому
16:31
админка смотрите как это делается запоминайте на всю жизнь а к адресу вашего сайта вы ставите ещё одну вот
Заходим в админку wordpress
16:39
такую вот косую черту и пишите сюда VP VP Admin нажимаете
16:47
Enter и открывается вот такая вот страница авторизации вводите сюда логин
16:53
и пароль так Admin 22 я вроде бы указывал и пароль
17:01
и ставлю галочку запомнить меня Нажимаю
17:07
войти нажимаю сохранить и мы оказываемся в
17:12
консоли далее смотрите Какие действия я обычно
17:18
предпринимают точно так же во-первых закрываем эту вкладку затем Здесь слишком много визуального шума Я не
17:24
люблю этого я нажимаю здесь наверху настройки экрана и убираю все вот эти вот
17:29
чекбоксы оставляю только на виду вот так вот следующее что я сделаю я иду в
17:38
раздел плагины установленные нажимаю и нам автоматически два вот этих
17:43
плагина установились я выделяю нажимаю действия и нажимаю удалить выбираю
17:49
удалить и нажимаю применить нажимаю Окей всё Никаких левых плагинов у нас теперь
17:55
здесь больше нет затем что я делаю дальше я иду в раздел Настройки а и в
Закрываем сайт от индексации
18:01
раздел чтение нажимаю а смотрите Какая история значит здесь
18:08
пока наверху ничего не трогаем вот здесь внизу видимость для поисковых систем так как у нас сайт уже в интернете и он
18:15
может проиндексировать то есть роботы Яндекса Гугла могут попасть на него и как бы занести уже то что они увидят в
18:22
свою базу Нам сейчас этого не нужно потому что у нас сайт в работе что я делаю Я ставлю вот этот чекбокс
18:28
попросить поисковой системы не индексировать сайт и нажимаю сохранить О’кей А дальше куда я иду Я
18:35
иду в раздел постоянные ссылки нажимаю а сейчас у нас на адреса наших страниц
18:42
выглядят косая черта И какие-то там цифры Это неправильно Нам нужно выбрать
18:48
вот это вот название записи ставлю выбираю этот чекбокс Спускаюсь чуть
18:54
пониже и не забываю обязательно нажимать сохранить изменения всё а такие
18:59
первоначальные основные настройки мы проделали И теперь мы можем приступать уже к работе над сайтом и Первое что я
19:06
сейчас сделаю это установлю тему Astro с которой мы и будем работать которая
19:11
будет управлять контентом на нашем сайте смотрите как это делается идём в раздел внешний вид темы А кстати ещё момент
19:20
здесь у нас автоматически устанавливается А тема двадцать четвёртого года видите 24 и 23 они нам в
19:28
принципе тоже не нужны Я люблю чтобы была такая частота нажимаю на Вот это окошко и нажимаю удалить нажимаю Окей
19:35
нажимаю сюда нажимаю удалить нажимаю Окей эта тема сейчас у нас активна
19:41
поэтому её Удалить Нельзя и нам нужно сначала добавить новую тему тогда мы сможем удалить эту смотрите нажимаю
19:48
добавить новую тему и здесь в поиске Тем я пишу
Установка темы Astra
19:54
Astra вообще Вот она здесь есть но если вы здесь её не увидите а просто Напишите
20:00
Astra Astra — это одна из самых популярных тем для пресса она бесплатная Она быстрая она удобная и она идеально
20:08
подходит для новичков и в то же время Она позволяет создавать ну вполне себе такие профессиональные сайты А в паре с
20:15
элементом А вообще практически нет никаких ограничений В общем находим её и нажимаем
20:22
установить и нажимаем активировать у нас появляется вот такой
20:29
вот баннер я пока его закрою смотрите теперь у нас активна
20:35
тема Астра соответственно вот эта тема у нас неактивна и мы тоже можем её Удалить всё вот так вот смотрите новая
20:43
тема активирована перейти на сайт Давайте нажмём вот так сейчас у нас выглядит
20:50
наша главная страница сайта пока вообще ничего не понятно не похоже на то что мы будем делать номы э
20:58
мся С вами снова смотрите идём в раздел
21:04
консоль далее идём в раздел плагины добавить
Устанавливаем необходимые плагины
21:11
плагин и здесь в поиске плагинов я напишу
21:19
старте templates все названия будут в описании в описании к
21:24
видео всех плагинов которые мы используем вот так вот выглядит превьюшка этого плагина старте template
21:31
шаблонные элементор WordPress и Beer Builder автор Brainstorm forms то что нам нужно более миллион активных
21:37
установок пять баллов нажимаем установить сейчас нажимаем активировать А сейчас
21:44
пока здесь ничего не трогаем нажимаю крестик вот здесь выход в Панель управления снова закрываю этот баннер
21:51
или можно нажать я буду делать сайт с нуля Окей смотрите друзья ещё
21:57
один плагин нужно поставить он как бы со временем по-моему становится менее необходим но всё-таки лучше его
22:04
поставить онн дополняет ваш ssl сертификат в общем давайте идём в раздел
22:09
плагин добавить плагин здесь
22:15
пишем really Simple ssl для чего мы это делаем
22:21
А вообще как вы помните мы на хостинге ssl сертификат выпустили сейчас у нас
22:26
здесь защищённое соединение Да есть вот этот https всё всё в порядке но бывает
22:32
такое что некоторые пользователи почему-то каким-то образом попадают на незащищённый если у вас вот этого
22:38
плагина не будет установлено то они увидят сообщение что сайт небезопасен дабы этого избежать нужно вот этот
22:45
плагин активировать а здесь смотрите нужно выбрать bget видите был обнаружен sss сертификат
22:52
Если такого сообщения вы здесь не видите не активируйте этот плагин только если Видите вот эту зелёную галочку и
22:58
активировать ssl нас должно ратовать мы должны заново
23:04
авторизоваться теперь так как я сохранял То есть мне это легко сделать
23:10
Нажимаю войти здесь он нам будет предлагать ещё некоторые разные такие вещички я могу
23:18
нажимать это всё пропустить пропустить пропустить Нам будут продавать Премиум версию но мы в общем
23:23
нажимаем не обращаем внимания что у нас здесь 38% в общем основные как бы э
23:29
вопросы безопасности мы пока закрыли остальное — это уже более такой ну более продвинутый уровень сейчас мы об этом а
23:36
об этом заботиться нам не стоит наш сайт сейчас не является как бы целью злоумышленников ни на данный момент так
23:42
А смотрите Значит у нас из плагинов сейчас на данной к данной минуте у вас должно быть установлено а два вот этих
23:49
плагина и у нас должна быть активирована тема Astra А теперь мы должны установить
23:55
плагин Element который как раз будет нам помогать создавать нашу главную страницу
24:01
либо вообще все страницы на сайте которые мы будем впоследствии с делать нажимаем добавить
24:06
плагин и здесь пишем
24:14
Element и вот он более 10 млн активных установок 4 с по рейтинг В общем один из
24:20
самых популярных й билдеров в мире для преса
24:27
устанавливаем нажимаем активировать всё супер Отлично
24:33
Подготовительная такая работа у нас проделана и смотрите ещё один момент хочу вот вас сразу тоже на личном опыте
24:40
Хочу вас научить и уберечь вас от Ну будущих проблем от лишних лишней работы
24:47
Возможно вы слышали есть такое понятие как п п — это как бы снимок вашего сайта
24:53
как вот если кто в игры играл Да раньше можно было сохраняться что-то делаешь там сохраняешь
24:58
потом идёшь там пытаешься босса убить проигрываешь и тебе не нужно заново весь уровень проходить Ты просто
25:04
восстанавливаешь к этому сохранению и делаешь ещё одну попытку это очень и очень удобно то же самое справедливо для
25:12
для ну для вордпрессе бэкап и я Настоятельно вам рекомендую научиться
25:17
делать бэкапы это просто Это быстро но может сэкономить вам кучу времени
25:22
впоследствии Давайте я покажу как делать бэкап смотрите нажимаете в плагинах в разделе нажимаете добавить плагин
25:30
здесь пишите полное название будет тоже в
25:35
описании к ролику Вот так он сечас называется migration backing Back нажимаю установить
25:42
сейчас нажимаю активировать и нас на странице
25:48
открывается как раз уже Back PL его настройки и он Обрати внимание что мы с вами
25:55
устанавливаем расшит нашего пресса Вот видите вот элементы мы
26:00
установили вот Безопасность это ssl И вот vpv Backup plin и вот первая вкладка
26:06
резервное копирование и восстановление смотрите Здесь всё очень просто оставляете здесь как есть и здесь оставляете как есть и вам нужно нажать
26:13
создать резервную копию по-русски не поместилось в общем сделать бэкап нажимаете вот прямо на этом на этом
26:19
моменте Вы сделайте пожалуйста бэкап займёт там не знаю 15-20 секунд так как
26:25
сайта ещё по сути нету
26:31
бэкап сделан и вот смотрите у нас внизу вот здесь появилось наши бэкапы во-первых мы можем скачать сайт на
26:37
компьютер и можем также восстановить сайт на эту точку если мы что-то сделали неправильно и хотим вернуться всё супер
26:44
Вы большой молодец Вы уже очень много освоили в вордпрессе В общем я вами
26:50
горжусь Теперь мы уже можем непосредственно приступить к дизайну нашей главной страницы Давайте начнём А
26:59
друзья после того как мы активируем плагины на нашем сайте а на нашей вот этой основной рабочей зоне Да на консоли
Знакомство с elementor
27:06
могут появляться дополнительные вот эти окошки А как я уже сказал я этого не люблю И вам тоже рекомендую их сразу
27:12
выбирать нажимаете настройки экрана и убираете элементор на виду вот так гораздо лучше теперь А нам
27:19
нужно создать новую страницу которая и будет у нас впоследствии главной смотрите наводим курсор страницы и
27:26
нажимаем добавить страницу закрываем
27:31
этот это окошечко и следующее что нам нужно сделать смотрите наверху находим редактировать В элементар то есть вот
27:38
это стандартный редактор пресса он тоже как бы Вполне себе ОК но он не такой
27:44
понятный на данный момент по крайней мере возможно в будущем изменится сейчас же мы будем работать с элементом я
27:51
нажимаю редактировать В элемен и у меня загружается
27:59
редактор уведомления появляется закрываем уведомления А здесь появляется вот такая вот структура она нам пока
28:05
тоже не нужна закрываем крестиком А сейчас давайте посмотрим на левую сторону экрана и здесь у нас есть
28:11
элементы и подраздел виджеты и глобальный и вот смотрите здесь у нас есть виджеты которые мы можем
28:17
использовать для того чтобы создавать страницу на нашем сайте а те которые под замочком это опять же про версия но в
28:24
принципе как я уже говорил бесплатных виджетов вполне достаточно для создания
28:29
хороших сайтов сейчас мы здесь ничего трогать не будем мы потом к этому ещё
28:34
вернёмся А давайте пока по центру посмотрим здесь у нас есть вот такой вот плюс это добавить новый контейнер тоже
28:40
мы пока это не трогаем есть такая вот Папочка добавить шаблон здесь готовые
28:45
шаблоны от элементо они почти все под шильдиком Pro То есть их использовать особо тоже У нас не получится Ну и не
28:52
надо Я сейчас вам Всё покажу как мы будем делать есть ещё у нас искуственный интеллект он в платной версии чуть-чуть
28:59
там демо доступно да и только в платной на платном тарифе элементе уже доступен
29:05
полностью и сейчас нас с вами интересует вот этот вот кругляшок с S Давайте
29:10
нажмём его и А здесь смотрите есть у нас страницы и есть блоки и вот в Премиум
29:17
вернее в Starter templates Да смотрите те которые под премиумом они доступны только для платных пользователей А все
29:25
же остальные где нету шильдика Премиум они вам доступны прямо сейчас и это реально Крутые возможности здесь
29:32
полностью готовый например выбираете например какой-то тех стартап нажимаем плюс и можем посмотреть во-первых
29:38
смотрите есть главная страница Есть страница о компании Есть страница наши преимущества и планы да Давайте
29:44
посмотрим нажимаем например Home и вот смотрите у вас вот такой вот готовый дизайн сделанный в элементаре который вы
29:52
можете под себя настраивать есть кнопка и template и то есть на эту страницу
29:57
получается вот это вот на нашу страницу которую мы с вами создали вот этот вот дизайн он перенес и он будет сделан с
30:04
помощью элементе и соответственно вы это сможете всё редактировать ну к этому мы ещё перейдём И вот так получается так
30:11
вот я закрыл Давайте ещё раз нажмём получается вот эти все сайты Да здесь их больше больше 200 многие Многие из них
30:19
доступны бесплатно если интересно да посмотрите и это реально даёт большие
30:24
большие возможности по дизайну именно в руки таких новичков Как вы А сейчас нас
30:30
даже не это интересует Хоть это и круто нас сейчас интересует не это мы идём в раздел блоки нажимаем и вот здесь вот
30:38
есть готовые вот в таком вот спокойном дизайне блоки их тоже очень много и из
30:45
этих конкретно блоков и собрать ваш первый сайт — это самое
30:51
верное решение и как раз наш сайт который мы с вами сейчас будем делать мы
30:57
будем собирать из ких вот блоков и редактировать их под себя вот
31:02
так Но прежде чем мы приступим нам нужно понимать да Нам нужна структура чтобы не
31:08
просто лепить как бы на Аум а нам нужно понимать как правильно грамотно расположить эти блоки что в них написать
31:16
чтобы всё это было Ну как повествовательная история и человек в конце вашей посадочной страницы вашего
31:22
сайта был уже подогреть и был готов пойти на контакт то есть стать клиентом
31:27
заказать услугу и так далее И вот тут нам на помощь приходит искусственный интеллект сейчас мы с Вами познакомимся
31:34
с классным китайским искусственным интеллектом deeps Давайте смотреть а пожалуйста
31:42
перейдите по адресу
Делаем структуру и текст страницы с помощью deepseek
31:56
deepscale но пишем мы ему по-русски и соответственно смотрите здесь ну как
32:02
если вы до этого с искусственным интеллектом не работали то здесь Всё достаточно Просто вы с ним
32:08
разговариваете как просто с человеком я ему пишу Привет а Я создаю сайт
32:16
А тема сайта церемония кам в Уфе
32:23
а пожалуйста [музыка] Составь для
32:31
меня структуру и текст
32:36
для посадочной страницы можно написать Я создаю Я создаю
32:44
сайт Дин тема сайта церемония кае пожалуйста Составь для меня структуру и
32:49
текст для посадочной страницы обязательно смотрите нажимаем
32:54
Вот это и отправляем запрос а я заранее э Извиняюсь за дипси
33:04
сейчас э вот конкретно в данный момент на него идёт атака А ну с целью того
33:09
чтобы его замедлить поэтому мне приходится как бы пробиваться Вот я ему отправил запрос он видите не отвечает
33:15
думает а в вашем случае тоже так может получаться а но с первого второго Вот видите раздуплиться и поехали и э просто
33:23
читайте Да это очень интересно
33:42
это он в данный момент он ещё не отвечает это он ещё думает просто мы как бы ну читаем его мысли которые у него в
33:50
голове сейчас ну не в голове там не знаю в процессоре
33:59
и он начал нам делать
34:19
страницу Вуаля прошло меньше минуты и у меня есть
34:26
готовая разбитая по блокам и с текстами причём Ребята это ну получается я уже
34:33
делаю второй запрос третий у меня здесь вот здесь списке где-то там давно уже
34:38
есть этот запрос и эта страница она не похожа Ну по секциям она ещё более-менее
34:44
похожа но по тексту он написал мне абсолютно Ну как бы схоже да но это не
34:50
слово в слово это другое другой лендинг другой текст То есть он ещё раз подумал он не выдаёт
34:57
ответы просто как робот да спрашиваешь Ответ один и тот же он размышляет делает
35:02
выводы а какие-то у него там в голове процессы происходит и он выдаёт новую
35:07
страницу соответственно здесь на этом дело не заканчивается мы можем ему сказать Смотри а мне например не
35:13
нравится футер сделай-ка мне другие варианты футера и он это нам сделает вот так вот это ну просто что-то
35:20
с чем-то А раньше чтобы вот эту структуру составить Мне нужно было 3 часа сидеть думать гуглить искать В
35:28
общем скрипеть мозгами своими Да и потом уже всё это сделать здесь же я ему просто написал И он мне за минуту всё
35:35
это сделал вы представляете вообще что это за инструмент и какие он возможности вам даёт а по сути для того чтобы вот
35:43
это создавать вам нужно было набираться опыта не один месяц Сейчас вы за минуту
35:49
получаете готовый результат пожалуйста если вам это понравилось поставьте
35:56
Поставьте лайк Напишите комментарии и Давайте продолжать смотрите Короче у нас
36:03
есть структура всё супер О’кей я сейчас не буду прямо копировать в Один в один эту структуру но я думаю вам А ну как бы
36:11
порядок наших действий Вполне себе понятен возвращаюсь я я вам предлагаю сразу пси
36:16
куда-то добавить в Избранное у вас вот этот чат чтобы всегда сохранялся и начинаете работать с нейросетью
36:22
задавайте вопросы бытовые вопросы какие-то э реально штука помогает Я уже с ней
36:28
я начал Сейчас работаю с дипком Блин это реально облегчает жизнь Окей смотрите
36:34
возвращаемся назад вернее смотрите как допустим вот Смотрим Да что нам говорит главный экран
36:42
her SE Оке нам Значит нужно нужна секция Hero идём сюда и вот здесь смотрите
Собираем главную из готовых блоков по структуре от ИИ
36:49
слева можно выбрать вот у нас вот вот
36:58
секци из которых мы можем выбрать сейчас я буду вспоминать какую я изначально
37:05
выбирал для своего лендинга Так что я
37:11
выбирал возможно я дорабатывать да не использовал прямо Один в один так ну ладно давайте сейчас я
37:18
покажу вам как как это всё делается Допустим хочу я вот такой
37:24
вот главный экран здесь у меня будет кнопкой здесь у меня будет изображение
37:29
Ну единственное я не буду использовать Это изображение я сделаю полностью картинку во всю ширину экрана я нажимаю
37:36
импорт блок раз всё у меня блок импортировала пока я его не трогаю А я
37:43
иду снова в дисик следующее у нас преимущество Окей А я нажимаю вот здесь
37:50
опять S нажимаю блоки нажимаю Hero преимущество — это futures
37:57
и соответственно Так давайте я вернусь на уже готовый наш сайт А вернее у нас
38:04
следующая У меня идёт вот такой вот блок Ну ладно его сейчас пропустим вот у нас идёт преимущество комбо церемонии и у
38:10
меня соответственно картинка и текст картинка и текст так так
38:17
Простите вот сюда вот идём картинка и
38:23
текст Так что же я выбирал вспомнить по-моему Я выбрал Вот эту вот
38:29
просто по-другому А нет я выбрал квадратные и потом их центровая Вот эту вот нажимаю
38:38
импорт раз вот у меня пожалуйста блок импортировала мне таких нужно два что я
38:44
делаю навожу сюда курсор нажимаю правой кнопкой выше мыши и нажимаю дублировать
38:50
оп всё у меня две секции преимуществ затем здесь у меня в странице
38:56
соответственно е вот такой вот есть текстовый блок А давайте я его вот он здесь что такое
39:03
комбо Просто я потом эти блоки немного относительно друг друга перемещал так ну
39:10
в принципе сейчас я пока Добавлю его вниз блоки Можно туда-сюда вверх-вниз потом изменять так мне это нужно так
39:18
по-моему это у меня about Да что-то подобное Так сейчас я по памяти кажется
39:23
я вот этот использовал блок так да Ну пускай этот будет
39:29
Да давай такой нажимаем портировать Вот он у нас появился Да
39:36
хорошо смотрим дальше так что он нам предлагает Как проходит церемония Окей
39:42
вообще не вопрос нажимаем сюда блоки
39:49
так сейчас надо вспомнить как так давайте смотреть по всем блокам
39:55
сейчас я попробую увидеть это выбирал блок тоже преимущество преимущество он называется
40:02
Но вот вот это вот этот блок да Вот видите он более-менее похож Я использовал его как вот этот вот блок
40:09
вот как проходит церемония всё нажимаю
40:15
импортировать раз готово пока я его не не Лизу Да я просто накидывают эти вот
40:21
блоки готовым рекомендую поступить также Почему стоит пром с нами вот такой вот
40:27
блок так хорошо давайте сейчас подумаем Ну в принципе Здесь тоже самое Да вернее
40:33
здесь он предлагает намм блок о Мастере как я говорил что он немного по-другому вообще предложил мне другие в данный
40:42
момент предложил мне другую структуру она похожа но она немного другая я сейчас не буду придерживаться этой а
40:48
именно буду работать вот по этому сайту так как мы я вам показал этот сайт мы этот сайт к концу урока и сделаем так
40:55
Ладно давайте вот эту структуру найдём Простите блок вот этот вот
41:03
так так так так интересно как он у нас а
41:08
я страничку делал наверное где-то недельку назад уже из головы конечно вылетело Давайте откроем все блоки
41:13
Сейчас посмотрим так по-моему я делал так давайте посмотрим четыре Да
41:23
здесь 4 4
41:28
Так давайте я сейчас найду и ускорю наверное Я использовал вот этот
41:33
блок просто его задвоился
41:43
[музыка] стилизуем так Ладно отзывы участников
41:50
ритуала следующий блок отзывы с отзывами всё понятно у нас есть смотрите раздел в
41:57
блоках нахожу так testimonials должны
42:02
быть Вот они и у нас это было так вот этот
42:11
блок здесь Раз 2 3 четвёртый можно будет просто добавить
42:18
оп готово смотрим дальше частые вопросы о кам церемонии
42:26
Окей Локи частый вопрос — Это у нас вот этот вот
42:33
раздел Можно несколько вариантов я вас Ну я буду делать Один в один в принципе
42:38
здесь есть и другие прикольные например есть вот так вот с раскрывающимся списком нажимаете и такой аккордеон
42:44
выползает нажимаете этот задвигается этот выползает тоже в принципе симпатичная история Ну ладно я использую
42:50
то же самый который у меня уже есть вот так вот так что
42:58
дальше Вот такой вот Call To Action если мне не изменяет память так
43:05
блоки находим Call To
43:11
Action вот он кажется вот этот вот был нажимаем
43:19
импортировать готово так Ладно потом у нас
43:24
идт вот этот блок сейчас я вспомню что это за блок по-моему цитата и социальные
43:29
сети так Окей блоки так находим здесь цитата вот так
43:37
вот сил код вот этот
43:43
вот нажимаю импортировать есть и самое последнее
43:50
социальные сети блоки ребят Не могу сейчас вспомнить какой блок использовал
43:55
Ну вот этот в принципе Я просто уберу вот эту кнопку и здесь изменю эти социальные сети Пока
44:02
импортируйте этот блок вот так вот вроде я его использовал собственно поднимаемся наверх и в
44:09
принципе смотрите мы накидали Да у нас есть her две преимущество потом блок
44:14
который мы перенесём наверх Как проходит церемония преимущество без заголовка
44:20
пока добавим отзывы в общем все наши блоки здесь
44:27
Так как эти блоки разрабатывались не знаю может быть несколько лет назад А
44:33
после этого самый Эмен перешёл на более быстрые флексбокс А вот смотрите сейчас
44:39
я нажимаю допустим поднимитесь На самый верх Нажмите на вот эти точечки шесть и смотрите видите макет и у нас здесь
44:46
появляется такая штука преобразовать В контейнер то есть нам вот эти вот готовые блоки нужно все Сейчас по
44:52
очереди преобразовать в новый в новый формат блоков элементо Давайте это и
44:57
сделаем вот смотрите нажимаете преобразовать и под нашим блоком который
45:02
мы только что преобразовали появляется точно такой же блок но уже сделанный как
45:08
контейнер что нам нужно сделать просто Удалить предыдущий немножко тут кое что изменится немножко поедет Но ничего
45:14
страшного не думаем вообще об этом сейчас снова нажимаем нажимаем преобразовать этот
45:21
удаляем тут у нас контейнер можно удалить который мы помните два Мы
45:40
импортировались со всеми Да время видео затягивать не буду всё друзья супер-пупер все блоки Я преобразовал в
45:48
контейнеры И теперь у меня полностью Вот такая вот готовая заготовка страницы без пока стилизации и без текста отлично и
45:56
двигаемся дальше хорошо а сейчас Наша задача разобраться с печ билдером
Стилизуем готовые блоки под себя
46:03
Element потому что это основной инструмент для создания страниц на вашем
46:08
сайте а это может быть немного Ну как бы сложно По началу но с
46:14
опытом вы набьёт получаться гораздо быстрее
46:19
единственное Что отличает меня от вас это просто практика и некая
46:25
насмотренность То есть я знаю Ну видел как бы много разных сайтов
46:31
как люди профессионалы размещают те или иные элементы относительно друг друга
46:37
как будет смотреться лучше в общем у меня никаких особых талантов нету вот
46:43
что я хочу сказать просто практика и создание разных блоков вот
46:50
смотрите значит как как это всё в элементаре устроено вот есть некий контейнер Видите вот этот заметная такая
46:59
граница розоватая она отделяет один контейнер от другого а сейчас я на этой
47:05
странице прежде чем записывать этот кусок видео я
47:11
создал ещё одну Ну получается создал то что я сейчас буду показывать вам Как создавать чтобы это было у меня на одной
47:17
странице и чтобы я мог подглядывать какие и где расстояния потому что
47:22
Поверьте мне вот когда Я создаю сайт Это не то что я у меня таки и выверенные
47:27
движения я это сюда Это сюда Это сюда любая страница любой блог — это
47:33
много-много много попыток перемещения изменения позиционирования относительно
47:38
друг друга В общем это достаточно много итераций и в результате рождается
47:44
какая-то страница какой-то блог а поэтому не думайте что если у вас там
47:49
сразу что-то не получается что ну то у вас не получится нет а нужно просто чуть
47:55
больше практики значит смотрим вот смотрите есть у нас вот один контейнер да Вот видите редактировать контейнер
48:02
при нажатии соответственно на эти шесть точек открываются у нас настройки этого контейнера здесь есть макет стиль и
48:08
расширенный во всех виджетах куда бы мы не нажали будет вот эти вот три вкладки
48:14
А дальше Вот соответственно здесь у нас уже идёт следующий контейнер Да вот он
48:19
Ну и там и так далее Давайте разберёмся с этим первым экраном смотрите во-первых у меня здесь
48:28
эта заготовка она немного отличается от того что мне нужно мне внутри Вот видите у нас есть один
48:35
большой контейнер и внутри него ещё два контейнера вот этот контейнер в котором
48:40
размещается заголовок кусок текста и кнопка так и есть второй контейнер в
48:48
котором располагается виджет изображения вот весь этот второй контейнер Он мне не
48:53
нужен поэтому что я делаю я навожу вот так вот курсор нажимаю правую кнопку мыши и нажимаю
49:00
удалить оп У меня контейнер удалился и так как
49:06
место освободилось то соответственно вот этот контейнер он у меня во всю ширину он у меня сразу же собственно и
49:11
растянулся хорошо так смотрите значит что мы делаем
49:17
далее У меня есть здесь вот ну это финальная версия да Как должна выглядеть
49:22
главный экран соответственно у меня у этого контейнера заданы определённые параметры Вот они смотрите вкладка
49:29
расширенные и здесь у меня есть отступ внутри вот такой параметр и смотрите справа 46 и слева 5 и это в процентах
49:38
обращаю Ваше внимание здесь вот смотрите могут быть разные параметры и соответственно будет разные расстояния у
49:44
меня здесь в процентах что я делаю смотрите Я иду в этот контейнер открываю
49:50
вкладку расширенные убираю вот здесь вот сверху У меня этого нету расстояния ноль ставлю
49:56
затем смотрите есть такой параметр связать значение Это если его оставить то все я вот меняю только одну один
50:04
параметр Да все меняются одновременно с ним то есть связывать значения нам в
50:10
данном случае не нужно я отключаю это дело затем вместо пикселей здесь я
50:15
выбираю проценты и просто по памяти Да здесь 46 и здесь пять а вот у меня
50:24
теперь всё сместилось относительно То есть я задал отступ внутри получается справа отступ 46% и слева отступ
50:34
5% от размера всего экрана Хорошо а теперь Что теперь смотрите
50:41
соответственно у меня здесь а текст а легендарная церемония cambo в Уфе Я
50:47
просто сейчас скопирую Вот этот текст чтобы заново его не набивать вот я скопировал идём сюда и вот во вкладке
50:54
содержимое соответственно я могу его заменить просто Вставляю Окей вставило а
51:00
затем у меня здесь во-первых другой размер шрифта и другой цвет шрифта Но прежде чем менять шрифт Если я
51:09
сейчас поставлю белый будет не видно и будет неудобно редактировать поэтому Давайте первым делом я размещу сюда вот
51:14
эту вот фотографию вот этой замечательной лягушки смотрите как это делается у меня получается лягушка эта
51:21
картинка занимает весь размер контейнера как это сделать очень просто смотрите нажимаем эти точки то есть выбираем
51:28
полностью весь контейнер затем идм во вкладку стиль и здесь у нас есть вот
51:33
такой параметр фон тип фона может быть разным он может быть классический может быть Градиент может быть видео и может
51:39
быть даже слайд-шоу всё это потом можете по дороге уже освоить с опытом Да сейчас самые простые
51:46
настройки смотрите это может быть как цвет Например я могу задать здесь цвет
51:52
видите меняется так это может быть изображение нужно изображение я нажимаю выберите
51:59
изображение затем я уже загрузил эту картинку Да в принципе Давайте покажу как это делать Вот нажимаете загрузить
52:05
файл нажимаете выберите файл А большинство изображений которые я
52:12
использую я создал с помощью нейросети Н до этого дойдём в следующих блоках но
52:18
некоторые картинки изображения Да я просто нашл на Гугле это как бы важный момент
52:24
постарайтесь для вашего сайта вообще для тех сайтов которые вы когда-либо будете выполнять находить хорошие исходники
52:32
если у вас будут Ну как бы некачественные размытые какие-то фотографии разного левого размера то вы
52:37
не сможете из плохих ингредиентов сделать хороший сайт поэтому это я тоже говорю это в своих видео нужно м
52:44
подготовить те изображения те иконки картинки которые вы будете на сайте
52:51
использовать если вы их не генерирует с помощью нейросети и тогда из хороших исходников можно соответственно сделать
52:57
хороший продукт вот смотрите у меня вот это вот изображение просто нашёл в Гугле
53:02
нажимаю открыть оно у меня
53:08
загружается есть А смотрите какой момент у меня лягушка слева справа чёрная у
53:14
меня в финальной версии наоборот что делать вы находите здесь вот эту
53:19
кнопочку редактировать В вордпрессе есть встроенный редактор простенький Да
53:25
простенький редактор изображений можно обрезать картинки загружаемые можно их масштабировать и вот есть такой поворот
53:31
изображения нажимаю и мне нужно отразить по горизонтали Опа всё лягушка у меня видите
53:38
перепрыгнула на правую сторону не забываю нажать сохранить изменения затем смотрите важный момент
53:44
это личный мой опыт и нимай вот здесь вот есть такой атрибут
53:50
ALT здесь в этих двух смотрите есть заголовок и есть атрибут ALT в этих двух
53:57
полях лучше использовать ключевые слова которые Вы хотите чтобы в поиске Ну
54:04
ранжировать например в моём случае я напишу здесь лягушка для
54:12
cambo церемонии То есть я уже использую слово камба Я хочу чтобы мой Вот этот лендос
54:19
находили по запросу кам соответственно Ну как бы я здесь ничего такого не придумал здесь это реально лягушка для
54:24
камба церемонии написал написал а здесь в заголовке я пишу комбо ритуал
54:31
в Уфе опять я использую ключевые слова то есть человек может искать камбо ритуал Может искать камбо церемония и
54:38
очень важно Я привязываюсь к географии пишу здесь в Уфе О’кей всё нажимаю выбрать А вот у
54:47
меня там что-то произошло Да пока ничего непонятно какая-то чернота в чём же дело
54:52
всё очень просто смотрите здесь вот если мы опустимся чуть ниже У нас
54:58
есть размер дисплея и здесь есть разные варианты в моём случае нужно
55:04
перекрыть нажимаю всё у меня видите лягушка теперь по крайней мере её стало
55:10
видно Да но всё равно выглядит немножко иначе в чём же дело во-первых у нас
55:17
разное расстояние сейчас здесь и ещё нужно сделать смотрите что здесь вот есть такой параметр
55:24
позиционирование и мне нужно сделать если я ничего не путаю центр право оп
55:30
вот у меня лягушка Чуть повыше теперь разместилась то есть этот параметр позиционирования он
55:36
отвечает за то как картинка будет ну размещаться там на заднем фоне то есть ну в процессе Короче разберётесь просто
55:44
пробуйте и с опытом это всё у вас дело придёт затем так смотрите Теперь мы
55:49
можем заняться уже непосредственно вот этим вот текстом что я тут должен сделать смотрите нажимаю настройки этого
55:58
затем иду в раздел стиль и Первое что я сделаю — это отцентровать
56:03
выравнивание слева затем смотрите типографика и там где типографика у нас
56:10
есть вот такой вот такой земной шар там да и есть ещё
56:17
просто карандашик что Я рекомендую сделать смотрите нажимаю я вот сюда вот и у меня есть такие вот глобальные
56:25
шрифты и А это удобно Вот я например на сайте обычно Использую два ну максимум
56:31
три различных шрифта и вас тоже призываю за этим тщательно следить новички частая
56:37
ошибка они там мешают пять разных шрифтов И это всё выглядит очень непрофессионально Используйте Ну
56:44
основных два шрифта и э Ну возможно какой-то третий там курсив например смотрите у нас есть возможность через
56:51
глобальные шрифты сразу настроить те шрифты которые у нас будут основными вот я нажимаю управлять глобальными
56:59
шрифтами вот у меня там что-то здесь произошло мы сюда не смотрим мы нажимаем смотрите системные шрифты первый я
57:06
нажимаю первый и первый шрифт у меня это монсерат меняю шрифт Монт сет оп так
57:16
полужирный он так остаётся не меняю так закрываю первый шрифт второй
57:23
шрифт у меня работа сла просто робото вот так вот
57:30
всё закрываю это дело кстати вот есть здесь вернуться к к умолчанию Ну к тем
57:37
настройкам которые были до того как вы сюда что-то здесь меняли удобная тоже штука я просто закрываю И сейчас я нажму
57:44
сохранить изменения и здесь нажму вернуться в
57:49
Редактор немножко долго всё это подгрузило Но слава Богу вс-таки всё у нас вернулось хорошо смотрите Теперь
57:56
значит снова нажимаю настройки этого шрифта и здесь в типографике соответственно у меня первый выбран и у
58:02
меня уже установилась мой шрифт мацерат затем я смотрите перехожу в цвет текста
58:08
кстати в цветах тоже можно установить а какие-то нет здесь нету глобальных а нет
58:13
вообще-то Есть глобальные И здесь тоже можно а ну так скажем задать те цвета которые
58:19
будут чаще всего использоваться в моём случае здесь прям а полностью белого нету ну это не проблема вы нажимаете
58:26
просто на вот этот вот квадратик цвета Да и находите белый цвет О’кей всё установили А теперь я снова должен
58:33
перейти в типографи потому что у меня здесь а другие настройки во-первых
58:39
800 если я ничего не путаю Да и размер шрифта давайте я здесь подгляд его так
58:46
Смотрим смотрим 50800 Всё верно Так значит 50 800
58:52
смотрите оп оп и здесь я должен написать 50 пикселей
58:57
не написать а задать 50 800 так Окей но мы всё равно видим что
59:04
что-то не так что-то по-другому Да так давайте посмотрим какие настройки у нас здесь ещё есть смотрите в расширенных У
59:11
нас есть ещё такой параметр как произвольная ширина и он у нас задан здесь на 76 И отступ сверху 10 Да
59:19
запомнили вернусь я сюда так расширенные смотрите ширина по
59:27
умолчанию я делаю произвольно и делаю ширину 76 То есть я просто хочу
59:32
чуть-чуть Ещё правее сдвинуть Вот теперь похоже И сверху задать нужно отступ 10
59:39
опять я убираю связать значение и здесь делаю 10 пикселей Обратите внимание Да здесь пиксели у
59:45
меня то есть не проценты пиксели внимательно пожалуйста так Окей есть Да
59:52
уже что-то у нас вырисовывается похожее идм дальше значит давайте я перейду сюда
59:57
вот и посмотрю какие у нас здесь финальные настройки отступ внутри 160 низ 10 в пикселях так скопирую этот
1:00:06
текст во-первых идём сюда Вставляю так затем я
1:00:13
вижу что у меня здесь выравнивание по центру здесь выравнивание по левому краю соответственно Опа поменял затем цвет
1:00:21
текста У меня пускай будет полностью белый и у ня уже установлена
1:00:29
первый так Давайте проверим какой здесь
1:00:34
типографика а здесь у меня работа Прошу прощения второй и 400 значит здесь я
1:00:39
должен сделать вот так вот второй и здесь
1:00:45
сделать 400 но размер текста У нас так я не посмотрел
1:00:50
какой ну здесь его нету короче чуть Надо хотя вме
1:00:56
уже одинаковый Ладно так и теперь мне нужно задать отступы 160 и 10 отступ
1:01:04
внутри идём сюда расширенные здесь я во-первых
1:01:10
убираю связать значения здесь я задаю 160 и снизу 10 кнопка чуть отодвинула
1:01:19
Так похоже
1:01:24
похоже ещё не похоже но уже более-менее Похоже да Теперь давайте перейдём к кнопке соответственно нажимаю настройки
1:01:32
кнопки стиль позиционирование слева затем мне нужно написать здесь
1:01:38
записаться на церемонию иду в содержимое здесь пишу меняю шрифт на английский
1:01:45
записаться на церемонию О’кей а шрифт у меня здесь
1:01:50
тоже монсерат иду в стиль так по цвету Здесь всё в порядке а типографика значит
1:01:57
у меня первый мацерат и Ну вроде вроде уже О’кей так и у меня
1:02:05
ещё есть скругление углов такой параметр видите здесь такая более квадратная кнопка Да если вот убрать видите она такая более квадратная А здесь она у
1:02:12
меня такая более округлая так идём сюда и соответственно скругление углов здесь
1:02:17
я значение не убираю связать вот этот параметр и я задаю параметр Здесь 16 на
1:02:24
всё Вот так вот так смотрите теперь у нас как бы видно да что здесь У меня
1:02:31
достаточно маленький вот этот размер а здесь в финальной версии у меня он больше в чём дело Давайте проверим
1:02:38
смотрите я перейду сюда вот в настройки всего этого контейнера и у меня здесь есть отступ внутри и он равен следующем
1:02:47
180 30 180 30 соответственно здесь мне нужно это повторить иду в расширенные и
1:02:54
вот здесь у меня отступ соответственно 180
1:02:59
30 180 30 Вот
1:03:05
теперь как мы можем видеть у меня получился полностью идентичный первый
1:03:12
экран и он точно такой же как у меня на
1:03:18
Так давайте я сейчас нажму здесь просмотр страницы
1:03:26
закрою вот у меня вот такой вот первый экран это на финальном Да comb ufa.ru И
1:03:32
вот мы работаем вот с этой страницей кстати смотрите есть такая вот
1:03:38
кнопочка убрать редактор задвигается туда весь редактор и мы можем увидеть Ну
1:03:45
вот так вот получается вот в принципе мы с вами сделали первый
1:03:51
экран так верну назад
1:03:56
и смотрите нажимаю я очень важно друзья не забываем нажать опубликовать потому что те изменения которые вы делаете они
1:04:03
могут просто не сохранится всё нажимаю опубликовать а только единственное что я
1:04:10
удалю за двоен секцию Вот теперь нажимаю ещё раз опубликовать и нажимаю посмотреть
1:04:18
изменения и вот сейчас наш главный экран Ну бы главная страница здесь
1:04:23
единственное что у этого
1:04:29
хиде у нас здесь сейчас есть хидер здесь же у нас хиде нету ну мы до этого с вами
1:04:34
дойдём А так у нас первый экран готов а единственный момент что я вам не показал это записаться на церемонию Как сделать
1:04:41
здесь кнопку делается очень просто смотрите вот переходим в настройки кнопки в первую вкладку содержимое и вот
1:04:47
здесь у нас есть ссылка соответственно для чего Вам кнопка нужна
1:04:53
Ну то вы и используете эту ссылку а в моём случае это ссылка на Telegram поэтому она выглядит примерно следующим
1:04:59
образом А ну там полностью нужно писать https А я же напишу вот так вот Telegram
1:05:06
me СШ
1:05:12
Алексей кальн кажется как-то так у меня написано может быть могу совершить
1:05:17
ошибку Ну давайте сейчас посмотрим нажимаю я опубликовать после того как я нажал опубликовать Если Вы заметили у
1:05:23
меня вот эта страничка тоже обновилась и при клике переход Ну я неправильно
1:05:29
написал ссылку Да но видите переход на Telegram состоялся то есть проверяете ссылку на ваш аккаунт если речь конечно
1:05:35
о телеграме и тогда уже вставляете просто сюда эту ссылку причём есть
1:05:41
возможность смотрите здесь есть настройки параметры ссылки и можно сделать открыть в новом
1:05:49
окне вот так вот сделано Давайте нажимаю опубликовать страничка у меня обновилась
1:05:56
и Теперь смотрите у меня эта страница не закрылась у меня Telegram открылся в новом окне соответственно Вот она моя
1:06:02
страница здесь Осталась супер супер Ну соответственно
1:06:08
ссылка Может быть куда угодно она может Как быть на внешний источник Так может быть и на какую-то внутреннюю страницу
1:06:13
вашего же сайта так А смотрите какой момент вот у нас получается наша
1:06:19
страница которой мы занимаемся Да но если мы вдруг нажмём например на перейм на
1:06:26
страниц нашего сайта то мы здесь по-прежнему видим что-то вот такое Почему где наша главная страница в чём
1:06:32
же дело Да всё очень просто смотрите нужно перейти в меню настроить вот здесь вот есть меню
1:06:39
настроить нужно нам просто установить главную страницу так идём
1:06:46
здесь настройки главной страницы в самом низу находим и вот здесь смотрите есть
1:06:52
два выбора либо Это последняя запись сечас установ записи я сейчас выбираю статическую страницу и в этих
1:06:59
статических страницах я выбираю вот эту страницу Эмен номер се мы пока её никак по-другому не называли Мы её не
1:07:05
настраивали с точки зрения Мета тегов но мне просто будет так удобнее работать если у меня на главной странице уже
1:07:11
будет та страница собственно которая и будет впоследствии главной Всё короче сделал нажимаю опубликовать закрываю эти
1:07:17
настройки и теперь по адресу по главному адресу сайта По главной странице у нас
1:07:23
собственно открывается та страница с которой мы начали с вами работу Супер Супер Теперь мы можем продолжить
1:07:31
смотрите значит вернусь я в Редактор нашей страницы а что я здесь сделал за
1:07:37
кадром А я с нашего сайта который который у меня уже готов А я перенёс
1:07:45
сюда вот этот вот блок для примера тот блок который мы с вами будем настраивать
1:07:50
Вот он у меня здесь ниже а получается это второй блок под
1:07:55
нашим главным экраном первым и сейчас мы его с вами сделаем Смотрите во-первых
1:08:02
мне его нужно переместить наверх у меня он сейчас идёт получается получается первый блок Да вот
1:08:08
этот вот ну это у нас блок преимущества Просто он состоит из двух одинаковых блоков этого у вас естественно нету это
1:08:16
есть только у меня то есть на это не обращаем внимания Это мне для примера потом идт этот блок и соответственно
1:08:21
четвёртым блоком идт вот этот вот который сечас будем настраивать он
1:08:26
должен быть у нас вторым как его переместить наверх смотрите во-первых можно его перетаскивать просто вот так
1:08:33
берёте за эти шесть точек и тащите вот так вот его наверх не всегда получается не всегда это удобно Ну вот сейчас у
1:08:39
меня в данном случае получилось в принципе можно да есть ещё
1:08:44
смотрите вот есть на самом верху слева есть вот такой кнопочка есть структура нажимаем
1:08:51
её и здесь весь наш сайт вот они все наши контейнеры имы можем по ним вот так вот перекликаются
1:09:25
зажимаю мышь и вот так вот его вверх тащу оп и теперь он у меня должен здесь вот
1:09:31
сюда вот перенестись всё то есть структура позволяет нам перетаскивать например бывает что нужно с самого низа
1:09:37
контейнер перенести Наверх вы его замучить из перетаскивать вот так вот здесь ну как бы по-живому и тогда его
1:09:43
можно соответственно перетаскивать вот с помощью вот этого вот окошка структуры Кстати она видите перемещается То есть
1:09:49
если где-то мешается вы её просто перемещает можно закрыть и она соответственно у нас всегда прячется вот
1:09:54
здесь вот по этой кнопке Отлично Так а значит что сейчас я
1:10:01
сделаю я сейчас вот этот вот перемещён у меня для примера Здесь
1:10:08
был так Смотрим А значит что у нас здесь Какая в чём у нас разница у нас здесь
1:10:15
получается контейнер внутри него ещё один контейнер в котором располагается
1:10:21
заголовок располагается Вот такая вот полоска разделитель и располагается у
1:10:27
нас текстовый редактор здесь же у нас следующее смотри смотрите во-первых у
1:10:34
нас этот контейнер он уже вот невооружённым глазом видно да что здесь
1:10:40
он как бы ну гораздо шире то есть Нам нужно расширить этот контейнер Скорее
1:10:45
всего в расширенных стоят так Нет скорее всего тогда вот этот контейнер и у него
1:10:52
Видите какая Рина 750 у нас ширина
1:10:57
110 соответственно нужно это изменить перевозим сюда переводим и здесь пишем 11 40 Вот теперь у нас он даже стал шире
1:11:09
чем он у нас стал шире Ну сейчас по дороге разберёмся Почему И в чём дело
1:11:16
так во-первых смотрите сразу Давайте разберёмся идём в расширенное и смотрим вот у нас видите отступ внутри 80 слева
1:11:23
80 справа вот в чём дело соответственно идём в настройки этого всего контейнера идём в расширенные и отступ внутри у нас
1:11:31
здесь сверху и снизу у нас там по-моему по нулям я пока сделаю по нулям так А
1:11:38
давайте-ка ещё раз посмотрю здесь у нас получается а верх и низ по 80 Нет я
1:11:44
немножко перепутал Ну в любом случае нужно поменять здесь 80 и здесь 80 Вот
1:11:51
теперь у нас одинаковая ширина Ну практически затем Давайте по порядку
1:11:56
значит у нас есть здесь заголовок здесь у нас есть заголовок один и здесь у нас
1:12:01
вообще два заголовка один Мне не нужен соответственно я навожу сюда курсор правой кнопкой и нажимаю Удалить всё у
1:12:08
нас остался только один заголовок я скопирую сейчас вот этот вот текст вот так вот беру копирую иду сюда
1:12:17
в содержимое и Вставляю оп цвет нужно поменять цвет у меня здесь чёрным
1:12:22
соответственно здесь нужно поменять шрифт по-моему у нас одинаковые Давайте я проверю по типографике Да у нас
1:12:28
мацерат а здесь у нас что стиль Да здесь у нас тоже мацерат но чёрный соответственно цвет
1:12:36
меняю на чёрный вот так вот затем давайте я скопирую отсюда вот текст идём
1:12:44
сюда выделяю полностью Вставляю и здесь он тоже
1:12:50
почернеет стиль сюда и делаю его
1:12:56
чёрным так затем здесь видно что у меня фон у этого так я чуть приоткрой
1:13:04
занавеску смотрите у меня здесь другой фон здесь фон белый а здесь фон такой серенький что здесь соответственно нужно
1:13:12
сделать мы уже с этим немного знакомы нажимаем редактировать нажимаем стиль и вот у нас есть тип фона классический и у
1:13:19
нас он видите белый смотрите нажимаем допустим хотите вы какой-то
1:13:24
цвет откуда-то взять да как его взять А есть вот такая вот пипетка ну здесь называется почему-то образец цвета А
1:13:31
вообще называется это экранная пипетка нажимаете и вот вы наводите курсор на то место цвет которого Вам интересен
1:13:38
нажимаете и соответственно вот он вот этот цвет видите F5 F5 F5 я его
1:13:45
копирую и вот у меня цвет такой же здесь установился хорошо так следующий
1:13:54
момент так так так Давайте всё-таки проверим Почему у нас так здесь
1:14:00
808 1140 и по центру Так ладно макет А вот так вот надо сделать
1:14:08
Ну это так ничего не изменилось у нас так расширенные Так ладно давайте пока по
1:14:15
дороге чуть шире всё-таки получается ну Сейчас разберёмся так можно посмотреть вот
1:14:21
здесь вот расширенные нет здесь тоже отступа
1:14:28
нету расширенные здесь только снизу Да Хм интересно ну смотрите ребят в целом
1:14:36
очень даже похоже Да только не хватает вот этого вот разделителя а зачастую вот
1:14:41
мне на самом деле по-честному Да гораздо проще сделать это всё молча Да там Ну конечно много попыток нужно Ну когда я
1:14:48
это записываю то всегда бывают вот такие вот небольшой ступор Да но я надеюсь вы
1:14:54
понимаете как То есть сейчас задача не просто Ну в принципе у вас такая задача
1:14:59
скопируйте пока один в один То есть Повторяйте за мной как я делаю вам главное сейчас
1:15:06
начать вот это вот ознакомление с элементом с этим Пеш билдером и потихоньку только с опытом у вас придёт
1:15:13
Вот эта вот ну как бы и скорость и навыки по-другому никак этому не научишься к сожаление А давайте виджет
1:15:20
разделитель Мне нужно поставить смотрите как это делается А я нажимаю
1:15:26
так так так так значит мне нужен в этот контейнер так смотрите вот здесь у нас
1:15:32
есть вот у нас есть такой плюс вот здесь вот видите нажимаем плюс здесь находим
1:15:38
разделитель разделитель И вот так вот его перетаскивай оп
1:15:44
разделили единственное здесь у нас разделитель на шириной 12% и по центру
1:15:49
Да сплошная 12 по центру так наводим сюда здесь я делаю
1:15:56
12 по центру а стиль толщина два по-моему у нас стоит
1:16:04
Ну вот примерно так всё плюс-минус практически Похоже да А сейчас я
1:16:12
всё-таки разберусь Почему у меня немного по-разному это дело выглядит Да и вернусь к вам а друзья Ну конечно я не
1:16:20
знаю зачем я усложнил у нас здесь просто стоит вот получается вот у этого контейнера отступ справа и слева по 40
1:16:27
не знаю у меня немножко глаз замылился может Поэтому я не увидел всё в общем здесь убираем
1:16:34
40 40 Вот так вот а плюс у нас ещё немножко другой здесь по-моему размер
1:16:39
шрифта насколько мне кажется 17 работа 17 400 смотрим
1:16:47
здесь стиль типографика работа надо сделать здесь 17
1:16:56
400 всё готово Теперь у нас два
1:17:02
идентичных блока всё один удаляю и теперь обязательно не забываю нажать
1:17:09
опубликовать и у нас теперь готов второй блок А теперь мы можем
1:17:17
приступить к блоку Давайте посмотрим так а здесь я немножко работал вот у нас
1:17:23
блок преимущество камба церемонии и соответственно Я здесь
1:17:28
немножко добавил анимацию да Вы только что видели Давайте в общем сделаем этот блок
1:17:33
и заодно познакомимся с нейросетью н и научимся генерировать для вашего сайта
Рисуем картинки с QWEN
1:17:40
для ваших будущих сайтов любые картинки которые вам понадобятся двигаемся
1:17:47
вперёд ребят Найдите пожалуйста ссылку под видео
1:17:52
Наро переходите регистрируйтесь можно через Google аккаунт зарегистрироваться
1:17:57
можно через почту в общем открывается у нас в принципе стандартный интерфейс который ещё у чата gpt появился и вот
1:18:04
теперь у нас в принципе У всех более-менее одно и тоже так смотрите
1:18:10
какая ситуация — это нейросеть которая Она не только рисует она в принципе
1:18:15
также может отвечать на вопросы в общем она такая же какк Но помимо этого она ещ
1:18:22
и рисует с Что я сделал Я значит ну создал новый чат и я сказал ему
1:18:30
нети Мне нужны картинки в Едином стиле для блока преимущества ком церемонии Вот
1:18:36
это всё вот этот весь текст я взял из дипка так вот у меня
1:18:41
пси и вот у меня Ну вот здесь у меня немножко по-другому написано Да но в
1:18:46
целом понятность преимущество вот глубокая детоксикация укреп энерги изв
1:18:54
писал мне соответственно это написал ПК я иду в кН С этой историей и говорю Мне
1:19:00
нужны картинки в Едином стиле для блока преимущества комбо церемоний и вот пишу детоксикация организма глубокое очищение
1:19:06
клеточном уровне избавление от шлаков и токсинов так здесь смотрите что здесь Здесь у меня нету только заголовок
1:19:14
только у меня заголовки я в том чате когда я создавал непосредственно са страницу я написа Слушай нуж
1:19:23
при нужны ещё тексты для пункта
1:19:32
два преимущество камбо
1:19:38
за Вот например Ну так вот Вот ты написал
1:19:46
заголовки можно перечислить вот так
1:19:53
вот вот писал
1:20:00
заголовки так Ну я отправил ему в общем на нажал Enter Так давайте остановим
1:20:08
смотрите вот так вот можно изменять Edit mess к ним пожалуйста напиши ещё по
1:20:19
одному предложению текста снизу под
1:20:26
заголовок я не помню конкретно как я ему задавал
1:20:32
эти а задавал ему конкретно эти задания
1:20:37
я вам рекомендую просто пробовать штука бесплатная и опять же через практику через опыт Вы научитесь В
1:20:44
общем как-то так я ему отправил В итоге он мне к этим заголовком Сегодня он
1:20:50
подтупливает Ну вот Хотя вроде думает Давайте посмотрим
1:21:04
Вот видите он у меня по одному приложению предложению добавляет к этим заголовкам То есть изначально я как-то
1:21:10
так вот это сделал затем соответственно я иду в квен и то что он мне написал
1:21:16
детоксикация и вот по предложению снизу Ну я не помню может быть я это и сам писал может быть мне
1:21:22
помогал дисик а не суть Короче я это всё
1:21:27
скармливают для создания единого стиля иллюстрации для блока бла-бла-бла бла-бла бла-бла и вот он мне он сам мне
1:21:34
создаёт пром для будущих картинок
1:21:40
улавливает было думать что изобразить на картинке Мне нужно было сказать что мне
1:21:45
нужны картинки под эту идею и он сам для себя же написал Пром это вообще просто
1:21:52
снос башки дальше смотрите теперь я беру соответственно детоксикация организма
1:21:58
капли жидкости и так далее Я иду ниже и пишу детоксикация организма капли жидкости просто Вставляю и вот здесь вот
1:22:05
Я нажимаю Image Generation и можно задать размер а какие будет какие будут
1:22:11
картинки на выходе И всё И вот он мне раз рисует первую Я задаю вторую ему
1:22:18
строчку рисует вторую энергетическое ощущение ясность ума смотрите ясность
1:22:23
ума у него что-то подг чала он мне вместо золотого даёт вот такой вот рисунок я думаю ну ладно давай идём
1:22:29
дальше духовный рост опять мне вместо золотого даёт вот такой вот рисунок и я
1:22:34
ему в дополнение говорю Слушай то же самое ему скармливают золотой тон
1:22:40
картинки и Вуаля он мне рисует примерно то же самое но уже в золоте чтобы в Едином стиле опять он мне укрепление
1:22:46
иммунитета он мне опять цветное что-то даёт Я им говорю Нет так не пойдёт давай-ка золотой тон картинки пожалуйста
1:22:52
он мне делает золотой тон В общем и таким образом я вот все эти
1:22:57
преимущества и нарисовал вот так вот это просто делается если хотите поэкспериментировать Попробуйте для
1:23:03
своих каких-то целей опять же нужны только промт то есть нужны только идеи а реализация полностью за ним Старайтесь
1:23:09
максимально переложить всю вот эту механическую работу Ну она даже не механическая Да можно сказать Она
1:23:15
творческая но мы можем перекладывать эту творческую работу которая отнимает наше личное время на нейросеть которая делает
1:23:21
это всё гораздо быстрее и иногда даже ну гораздо лучше что уж там говорить ВС потом Здесь есть
1:23:28
кнопка загрузить соответственно вы все эти изображения скачиваете я их все уже
1:23:33
скачал Теперь смотрите идём Так куда мы идём Так у нас главная страница Так это
1:23:40
Кафа Ага всё вот с этой страницей Мы работаем Так давайте я вот эту страницу
1:23:45
закрою чтобы не путаться А вот у нас значит вот этот блок который мы изначально им портировали готовый что мы
Продолжаем стилизацию главной
1:23:53
зде во-первых Нам нужен заголовок так Давайте попробуем заголовок
1:23:59
добавить нет заголовок так не добавится Ладно заголовок чуть сделаем позже
1:24:04
потому что это должен быть отдельный блок так смотрите Ладно давайте сначала
1:24:10
самими преимуществами разберёмся во-первых я нажимаю на эту картинку удаляю её нажимаю добавить выбрать
1:24:17
изображение у меня уже здесь всё загружено Я думаю как загружать вы поняли картинки у меня загружены опять
1:24:24
смотрите когда вы загружаете картинки сюда пишите какие-то ключевые слова которые относятся Ну к вашему бизнесу к вашей
1:24:32
сфере деятельности по которым вы хотите хорошо и высоко индексироваться Я здесь напишу просто можно повторяться
1:24:39
кофа Кафа проводники Ну лучше что-то
1:24:45
добавлять то есть как-то ну разбавлять так скажем здесь я напишу так я напишу здесь
1:24:53
ВМ там у меня
1:24:59
очищение энергетической структуры я это просто из
1:25:05
головы что-то написал в общем Ну примерно пишите то что к чему это относится у нас здесь Было так давайте
1:25:11
посмотрим что у нас было детоксикация организма В общем там нужно было написать детоксикация организма что-то в этом роде всё у меня смотрите вставила
1:25:18
картинка но она у меня квадратная Мне нужно с ней поработать иду в ль и у меня
1:25:23
проде меньше ширина я задавал ширину 61 вот так вот а теперь мне нужно скруглить
1:25:31
углы смотрите вот здесь очень важный момент скругление углов включаете проценты и делаете связать значение и
1:25:39
надо сделать 50 всё есть
1:25:47
есть идентично идентично отлично дальше Что Дальше идём
1:25:53
соответственно вот в этот заголовок сразу его выравниваем по центру затем
1:25:58
идём в типографи у нас первый мацерат отлично затем А так здесь всё тоже самое не трогаю
1:26:06
здесь Единственное что делаю чёрным вот так вот а затем иду Так давайте я просто
1:26:13
возьму отсюда и скопирую текст чтобы не тратить время на
1:26:20
написание оп детоксикация организма и Отсюда тоже скопирую курсив оп оп
1:26:29
копирую Вставляю и выравниваю по центру готово
1:26:35
Готово так смотрите Теперь у меня здесь есть граница ну вот видите такая рамка
1:26:40
она мне не нужна в финальной версии я захожу в настройки всего вот этого контейнера Где помещается этот заголовок
1:26:47
с текстом и с картинкой Спускаюсь
1:26:53
ль граница и убираю границу всё видите у меня рамки теперь
1:26:59
здесь нету супер супер дальше смотрите я не Не берусь и не иду настраивать вот
1:27:05
эти вот штуки с нуля полностью это ни к чему смотрите что я делаю я беру нажимаю
1:27:10
правой кнопкой нажимаю дублировать нажимаю правой кнопкой нажимаю дублировать теперь нажимаю сюда правой
1:27:16
кнопкой нажимаю удалить нажимаю правой кнопкой нажимаю Удалить всё у меня
1:27:22
теперь уже готовые как бы бло Ну изменить только сами картинки переходим сюда
1:27:28
опоп Так что у нас там избавление от зависимости Да вот оно избавление от
1:27:33
зависимости Здесь вы [музыка]
1:27:43
пишите Я почаще использую кам здесь я пишу церемония кам в Уфе использую эти
1:27:52
ключевые слова так соответственно здесь
1:27:59
копирую избавление от зависимости и
1:28:04
здесь мне кстати не нравится вот это вот тело и разум нужно возможно я изменю потом финальной версии Ну
1:28:11
ладно понятно Я думаю Понятно смотрите
1:28:18
сейчас что я сделаю далее да беру вот у меня есть смотрите у меня
1:28:26
вот есть как бы уже почти готовая и здесь есть которая ещё даже не тронута мне не
1:28:34
нужно естественно всю вот эту переделывать по новой Я экономлю своё время я удаляю её сюда навожу и нажимаю
1:28:41
дублировать оп оп У меня две одинаковых А теперь соответственно
1:28:49
давайте я за кадром оформлю эти блоки и после того как я их оформлю мы уже
1:28:56
зададим между ними расстояние и добавим заголовок смотрите в общем Я подготовил
1:29:02
все наши преимущества и теперь что нужно сделать во-первых нужно задать между
1:29:08
ними расстояние смотрите в общем здесь они у меня с большими пробелами А здесь у меня
1:29:15
они достаточно ну как бы компактны друг другу Давайте посмотрим какие здесь расстояния здесь отступ сверху 60 60 и
1:29:22
остальное ВС по нулям так так идём сюда оставляем здесь 60 и снизу
1:29:28
ноль оп Так теперь посмотрим какой здесь отступ у нас расширенные здесь снизу
1:29:35
только 10 остальное по нулям хорошо идём сюда
1:29:41
но 10 вот так вот так вот так теперь нам
1:29:48
осталось добавить заголовок смотрите как это делается во-первых Я создам просто новый здесь
1:29:54
добавляю кбо вот такой вот затем иду Во все
1:30:00
элементы виджеты И добавляю заголовок заголовок я делаю по
1:30:06
центру Так у нас он мацерат Цвет чёрный и в заголовке я напишу преимущество
1:30:14
камба церемонии преимущество ка церемонии и
1:30:22
чуть-чуть мне нужно отступ сверху Давайте посмотрим какой здесь отступ сверху 60 сверху пикселей всё очень
1:30:29
просто 60 пикселей сверху так убираю связать
1:30:36
значение вот так вот так смотрим Что здесь смотрите здесь
1:30:41
у нас ещё белый фон Кстати да белый или фон не могу понять так
1:30:50
стиль Да как будто белый нуно Здесь тоже белой что-то я глаз замылился видимо
1:30:58
немножко сероватым отдаёт Давайте проверим Да здесь в принципе всё белое Окей Ну вот в принципе у нас этот блок
1:31:04
сделан так пока не забыл один момент я упустил смотрите возвращаемся назад смотрите как я сделал так чтобы у меня
1:31:10
на две разных строчки было смотрите здесь небольшой фокус если я вот этот уберу брейк видите у меня переносится Ну
1:31:17
вернее не переносится А всё в одну строчку А как я сделал чтобы переносилась если вы сделаете просто здесь пробел здесь ничего не изменится и
1:31:25
здесь на помощь приходит Tag Break смотрите то есть две стрелочки вправо-влево И здесь нужно написать BR А
1:31:33
вообще это по-моему с PHP Tag Ну вот здесь работает то есть видите как я
1:31:39
задал так чтобы было на другом на следующей строчке то есть вот
1:31:44
Пользуйтесь Break называется так здесь значит сделали Всё преимущество Каба
1:31:49
церемонии сделали А смотрите значит прикол так а не прикол в смысле а
1:31:56
небольшую фишку которую я здесь реализовал так нажимаю смотрите при первом открытии
1:32:02
страницы У нас вот такая вот анимация появление вот этих вот штук Давайте я Вам сразу покажу как вы можете это
1:32:09
сделать вообще я не сторонник всяких таких анимаций потому что они Ну всё-таки немножко замедляют работу сайта
1:32:15
А ну не знаю Дают ли они какое-то повышение конверсии Я думаю что они на
1:32:21
неё практически никак не влияют А может быть даже влияют отрицательно Поэтому с этим пожалуйста не нужно Ну не нужно с
1:32:28
этим перебарщивать В общем аккуратненько как-то что-то можно сделать Ну давайте я вам покажу потому что вы можете подумать
1:32:36
что в элементаре только можно простые сайты делать Нет можно сделать очень даже прикольные разные анимации используя простые как
1:32:43
бы простые способы анимирования простая анимация можно Ну сайт делать более
1:32:50
привлекательным смотрите как это делается допустим Я хочу чтобы вот эти получались
1:32:56
изображения по моей задумке допустим вот этот вот левый он заезжает слева Центральный появляется сверху и правый
1:33:04
появляется справа как это делается наводим на изображение расширенные идём сюда вот в эффекты
1:33:12
движения вообще больше гораздо эффекта движения но они доступны только в Про
1:33:18
версии плагина Element и у нас есть В бесплатной версии только анимация При появлении и вот по умолча
1:33:25
много Т разных вариантов появлений я сечас все рассматривать конечно же не буду просто вот есть у
1:33:32
нас получается слева оп видите появляется слева здесь можно задать также
1:33:38
длительность быстро медленно Ну можно ти быстро сделать можно задержка анимации
1:33:44
ещё добавить в общем Попробуйте поиграться посмотреть как это работает до
1:33:53
При появлении Это здесь получается й й Down оп и быстро
1:34:01
оп и здесь стиль А простите
1:34:07
расширенные эффекты движения по умолчанию так перепутал так во-первых
1:34:15
быстро Да но не Left а Right вот так
1:34:20
вот Давайте опубликуем
1:34:25
нажмём посмотреть и вот смотрите при первой загрузке страницы оп Ну как бы
1:34:33
симпатично Так кстати нижние тоже у меня так заехали потому что я их скопировал
1:34:38
Да с того сайта вот ну вы видели как их настроить Да в этом ничего сложного нету то есть
1:34:44
эти появляются слева сверху справа А эти появляется соответственно справа снизу и
1:34:50
слева Ну так как бы по кругу достаточно прикольно всё это выглядит всё супер
1:34:55
друзья мы с вами сделали первый второй третий экраны И теперь мы опускаемся
1:35:01
сюда ниже осталось у нас ну где-то работа ещё половина именно По главной странице А что-то я буду пропускать если
1:35:09
это Никакой смысловой нагрузки не несёт до Нового ничего не ничему вас не учит
1:35:14
чтобы не затягивать видео Окей давайте сделаем закрою эту страницу и давайте
1:35:21
сделаем вот этот вот блок он у нас так он у нас называется А смотрите у нас
1:35:26
ещ есть прямые показания церемонии этот блок я сделал полностью с нуля Ну давайте его собственно тогда и
1:35:34
сделаем двигаемся вперёд так хорошо давайте сделаем этот блок возвращаюсь Я в Редактор соответственно так вот у нас
1:35:41
все блоки здесь и нам нужен новый новый контейнер нажимаю плюс
1:35:48
нажимаю п нажимаю выбираю контейнер Конте
1:35:55
Row Вот это получается колонка ряд вернее так хорошо есть Да теперь мне
1:36:02
нужно в этот контейнер вставить ещё два контейнера смотрите как это делаем нажимаем плюс берём контейнер
1:36:07
перетаскивая затем идём в настройки этого контейнера А и здесь ширина
1:36:13
пишем 50% вот так вот и можно его
1:36:19
задубровье как и здесь Раз и два ещ будет заголовок Ну заголовок сделаем
1:36:26
следующим затем смотрите нажимаем плюс и здесь мы используем виджет он называется
1:36:33
блок блок с иконкой вот так вот переношу сюда сейчас выглядит вот так вот не
1:36:39
подходит Да но Сейчас исправим смотрите идём в стиль и здесь вот есть позиция иконки относительно текста нажимаю слева
1:36:49
вот уже по-другому похоже затем У меня идт только иконка и заголовок То есть я
1:36:54
не использую вот этот вот текст который здесь есть соответственно иду Во вкладку содержимое и
1:37:00
удаляю этот текст Так ещё лучше стало Похоже да Теперь давайте заменим иконку
1:37:06
нажимаем сюда вот вот у меня какая-то звёздочка Да смотрите здесь идут по
1:37:11
умолчанию вернее в элементаре есть набор иконок Их достаточно Здесь много вот
1:37:18
смотрите если вот так вот полистать ну много короче 300 может быть 500 в общем есть
1:37:25
из чего выбрать вот с иконками ещё потом прикол Чуть позже расскажу как
1:37:30
вообще можно не заморачиваться так смотрите Значит у меня это просто
1:37:36
чекбокс вот такой вот Вставляю можно кстати квадратный Ну в общем оставляем такое
1:37:41
Ладно есть а затем соответственно у меня цвет да м цвет Мне нужен
1:37:47
чёрный так вот иконка Цвет чёрный а затем
1:37:54
содержимое Да тоже чёрного цвета в содержимом соответственно есть заголовок
1:38:00
и есть описание описания у меня здесь не будет так Теперь давайте я Ну давайте
1:38:08
возьмём первое скопирую просто текст чтобы не набивать так идём в
1:38:14
содержимое не сюда заголовок Вставляю вот так вот а затем иду снова в
1:38:22
стиль и у меня нужно вертикальное выравнивание посредине вот так вот надо
1:38:27
сделать отступ иконки оставляем сам размер иконки давайте я сейчас
1:38:34
посмотрю вот здесь у меня есть размер иконки так стиль иконка размер иконки 25
1:38:41
пикселей Я выбрал 25 пикселей так
1:38:48
25 так и соответственно шрифт Давайте посмотрим Какой у меня
1:38:55
размер шрифта здесь содержимое заголовок типографика 22 Мора 22600 Угу Так
1:39:04
содержимое типографика монсерат 22 600 всё О’кей сделали А
1:39:12
теперь можно заметить здесь что смотрите у меня иконка она не совсем по центру Да
1:39:17
так сейчас я вспомню как я это сделал так в стиль А вот здесь вот ну с
1:39:23
делать Ноль вот так Вот всё Теперь у меня
1:39:29
готово смотрите что дальше соответственно дальше я беру просто И вот так вот
1:39:35
дублирую дублирую и беру следующую
1:39:43
текст и меняю понятно понятно обращаю Ваше внимание что смотрите должно быть
1:39:50
направление если здесь вот сечас не установлено если бы бы Тае вот направление ряд горизонтальный да то у
1:39:56
нас бы было всё вот так вот криво коса Нам нужен вот такой вот например столбец
1:40:01
вертикальный вертикальное выравнивание и тогда они будут друг за другом Ну и собственно здесь та же самая
1:40:08
история можно просто взять дублировать и просто перенести
1:40:14
сюда и здесь соответственно дублировать дублировать дублировать вот и всё
1:40:20
собственно Таким образом мы этот блок сделали так фон
1:40:26
белый хорошо осталось сделать заголовок Ну заголовок смотрите очень просто Значит так так
1:40:33
fxb так вот нажимаем плюс прита скивакс
1:40:43
В смысле Цвет чёрный и пишем здесь прямые показания
1:40:50
камба церемонии содержимое прямые показания кам
1:40:57
церемонии вот так вот в общем не буду занимать время видео сейчас просто
1:41:03
сделаю все вот эти вот штуки за кадром и мы продолжим всё здесь Я закончил А давайте
1:41:09
уберём редактор Ну вот сейчас наша страничка выглядит вот так вот уже
1:41:16
наверное половину пути мы с вами прошли Теперь мы можем сделать блок Как проходит церемония Давайте
1:41:23
займёмся этим А давайте я посмотрю как у нас А что у нас здесь в общем как
1:41:28
проходит церемония значит заголовок текст Ну давайте сразу начнём копировать Как проходит
1:41:35
церемония Аа в стиль
1:41:42
чёрный хорошо так а затем значит копирую Вот это дело
1:41:58
так так здесь Окей немножко другие расстояние Но это сейчас нам не
1:42:03
принципиально так а затем смотрите у нас вот такой здесь значит контейнер и в нём
1:42:10
раздва контейнер Да в нём 1 2 3 4 контейнера 1 2 3 4 смотрите в чём Как
1:42:19
можно ускорить процесс Я сначала сел такой и начинаю искать в общем Какие же иконки выбрать Да так ну в общем выбираю
1:42:26
Потом думаю А что же я сам-то надо Просто спросить ПК смотрите идём в дисик
1:42:31
так как я вот с этим лендингов чём фишка нейросети Да Она
1:42:38
запоминает ваше общение то есть она понимает О чём вы спрашивали ранее там даже Ну много дней назад и может как бы
1:42:44
это всё ну соединять в своей голове да и ну как бы она держит в голове контекст И
1:42:51
вот я не помню сейчас не буду искать куда я конкретно писал я и пишу у меня есть блок с
1:42:58
иконками иконками там четыре
1:43:05
иконки можешь помочь мне подобрать иконки
1:43:10
из библиотеки фонт так момент из
1:43:17
библиотеки НТ называется так
1:43:23
используется в элемен Так что я ещё и говорю я говорю так ну по тексту Давайте
1:43:29
значит подготовка ритуал очищение и восстановление так ПК
1:43:39
такн иконки нужны для следующих
1:43:47
пунктов подготовка
1:43:53
тов ритуал ритуал
1:43:59
восстановление очищение и поехали даю
1:44:08
задание и вот он начинает
1:44:19
соображать Ну и вот он мне выдаёт даже со ссылками так сейчас попробуем
1:44:25
откроется в новом
1:44:30
окошке Так ну он мне смотрите выдал вот такой вот компас драфтинг Да так что
1:44:38
там вот он он ещё даёт календарь вот он так Давайте попробуем сейчас найти вот
1:44:43
этот календарь в общем он не даёт прямо не показывает саму иконку потому что пси не графически не не даёт графически
1:44:51
графику на выходе но мы что можем делать Мы соответственно нажимаем сюда вот настройки удаляю эту
1:44:58
иконку нажимаю и вот здесь можно написать календарь вот так вот оп
1:45:06
Вставляю есть календарь так Смотрим дальше что он тут мне писал можно ритуал
1:45:12
например в общем он мне здесь немножко другие дал Я вообще лягушку просто
1:45:18
выбрал так смотрите в общем вы пробуйте хоть 50 вариантов различных выдать здесь
1:45:25
я напишу просто так кстати здесь будет удобнее знаете как сделать Сначала сделать одну настроить так смотрите что
1:45:34
мы сделаем мы переходим сюда получается иду в стиль так иду в стиль так иду
1:45:40
содержимое А давайте я скопирую значит
1:45:48
подготовка так здесь я пишу
1:45:56
подготовка Вставляю смотрите в чём у меня он даёт подчёркивание Это потому что здесь стоит
1:46:02
ссылка если я уберу подчёркивание исчезнет затем иду я в раздел стиль
1:46:08
иконка цвет иконки чёрный иду ниже содержимое Цвет
1:46:16
чёрный так посмотрим здесь у нас шрифтами я ничего не менял в принципе
1:46:22
вот уже готово да А теперь смотрите я не настраиваю каждый соответственно я
1:46:29
беру вот так вот и нажимаю дублировать затем
1:46:36
беру перетаскивают удаляю так Давайте попробуем вот так
1:46:43
дублировать целиком дублировать Да отлично работает
1:46:48
дублировать эти два удалить удалить
1:46:55
оп готово Готово Единственное что так
1:47:00
смотрите значит дальше Просто смотрим в пке что он нам предлагает тут молитва
1:47:05
духовность что-то Да связь с природой например ну-ка попробуем вот так
1:47:14
скопировать удаляем эту иконку нет види
1:47:21
ВМ вот нужно выбрать одно слово вот оно например или в моём случае это был
1:47:29
фг лягушка оп Вставляю вот так вот всё затем соответственно Ну
1:47:37
подготавливаю Все сейчас не буду на камеру делать и просто нужно задать расстояние
1:47:43
получается у меня в расширенных отступ 40 сверху и 80 снизу всё иду сюда
1:47:50
расширенные
1:47:56
40 80 Всё правильно 4080 да 4080 всё блок готов ну там ещё может
1:48:06
быть какие-то расстояния здесь чуть-чуть другие Ну нет в принципе одно и тоже Вот давайте я сейчас доделаю этот блок Да и
1:48:14
мы продолжим Окей сделал Я блок Давайте
1:48:19
посмотрим всё супер так следующий наш
1:48:24
блок в общем смотрите этот блок у нас Ну практически практически Он уже у нас так
1:48:31
и выглядит Вот он у нас как он должен выглядеть Да вот наша заготовка здесь Ребят давайте не будем
1:48:40
тратить много времени Что я сделал Я просто Ну давайте на одном покажем Да а потом остальные Я уже показывать
1:48:46
естественно не буду что касается изображений идм в Вот смотри
1:48:52
делал так сначала я ему написал Ну создай изображение просто без всякой без
1:48:59
всякой подготовки я ему пишу создай изображение вот я тут первые попытки пробовал видите я выбрал неправильный
1:49:06
соотношение сторон А мне нужен квадратный Да вот я вам пишу просто создай изображение Ну я нажимаю вот этот
1:49:13
IM Generation и появляется вот эта вот приставка далее я пишу мудрый Шаман с лицом освещённый огнём так нет Кстати я
1:49:21
это не сам писал я это также Попросил у дипси Я ему сказал смотри у меня есть
1:49:26
там блок сейчас не буду искать У меня есть там блок который у меня соответственно
1:49:32
называется Почему стоит пройти камба с нами и там у нас есть типа четыре пункта
1:49:37
опытные проводники безопасность индивидуальный подход и уютная атмосфера и он мне написал соответственно вот эти
1:49:46
вот так вот эти вот пром я не сам написал мне их написал
1:49:54
дипси Я просто их взял оттуда и вставил В Н И пожалуйста мудрый Шаман бла-бла-бла в стиле цифровой живописи
1:50:01
есть есть далее человек окружённый защитным кругом из света и листьев символи безопасность шаманом проводящий
1:50:06
ритуал на фоне уютного пространства в стиле СРО есть есть вот и всё то есть
1:50:12
моя ну как бы я здесь сделал по сути немного Ну тут ещё разные мои эксперименты Немножко погла там и здесь
1:50:20
Да ну в общем через попытки Да просто пробуйте если что-то не получается меняйте промт Обращайтесь к дипси
1:50:27
просите просите написать его ну промт как бы в Едином стиле В общем просто соединяйте две нер сети Я кстати
1:50:34
пробовал в кне Да текстовые какие-то задачи мне почему-то пси всё-таки больше нравится и у кна нету вот этого
1:50:41
рассуждения да Когда можно посмотреть как он соображает В общем я соединял просто брал
1:50:46
текстовые описания мне писал ПК я их вставлял сюда и просил сгенерировать
1:50:52
картки И вот так вот у меня получился получился такой крутой симбиоз хорошо Так давайте посмотрим что
1:51:00
у нас здесь соответственно А так смотрим а сначала нужно вставить Это изображение
1:51:06
соответственно удаляю так Вставляю этого Шамана не
1:51:12
забываем ребят при при вставке изображения не забываем писать атрибут ALT и заголовок Я в каждое писал либо
1:51:18
комбо там либо Шаман Шаман комбо с огнём что-то такое то есть добавляете Используйте ваши главные ключевые слова
1:51:25
ну Старайтесь конечно как-то разбавить это по смыслу но тем не менее поисковая
1:51:31
система Она видит эти картинки она не знает вернее она не смотрит как бы глазами Она читает вот эти как раз
1:51:37
данные которые вы здесь задаёте атрибут ALT и заголовок и соответственно вписывая сюда ключевые слова вы
1:51:44
помогаете
1:51:53
Теперь нужно соответственно
1:51:59
размер так так так так давайте посмотрим как у нас здесь сделано стиль размер 172
1:52:07
пикселя и скругление углов 88 172
1:52:14
88 172 и в пикселях 88 вот так вот
1:52:19
скругление кстати если бы было например в процентах то можно сделать 50 вот так
1:52:25
вот готово Готово Ну здесь соответственно ничего нового Да меняем
1:52:31
цвет меняем м так
1:52:39
да опытные
1:52:46
проводники стиль чёрный текст
1:52:55
Вставляю копирую
1:53:02
Вставляю так вот так вот Вот и всё сделали да оформили до
1:53:07
конца потом что делаем берём дублируем это
1:53:13
удаляем раз два в общем и таким образом делаем так у нас ещё есть Почему стоит
1:53:19
пройти комбо с нами да
1:53:26
так а давайте
1:53:33
сделаем так попробуем сейчас заголовок так
1:53:40
добавить нет у нас так заголовок не добавится Так сейчас секундочку я разберусь как я его сделал и продолжим А
1:53:49
понял У меня немножко по-другому было сделано здесь смотрите у меня здесь вот этот большой контейнер потом ещё один
1:53:55
контейнер внутри который включает в себя соответственно вот этот заголовок И включает в себя ещё вот эти вот четыре
1:54:04
четыре контейнера в которых ещё есть даже вернее один общем контейнер смотрите большой контейнер в нём ещё
1:54:10
один контейнер затем контейнер на два и в каждом ещё по контейнеру для Ну вот
1:54:17
этого контента соответственно здесь при создании я ну допустил у меня идт сразу
1:54:23
контейнер и уже вот эти внутренние контейнеры сейчас сюда контейнер не засунешь поэтому сделаем по-другому
1:54:28
Просто добавим для заголовка добавим ещё один контейнер кбо
1:54:34
вниз Ну и вы уже знаете как это делается заголовок В общем стиль по центру цвет и
1:54:42
так далее вот чуть-чуть тут нужно будет задать изменить расстояние Да например
1:54:48
Так что у на здесь отступ здесь наверно сверху ит 20 ну сделаем там
1:54:54
100 или даже 80 в общем немножко по-другому но выглядить это будет
1:55:01
идентично А вообще контейнеры они могут в себя один контейнер в нём другой в нём
1:55:07
третий в нём четвёртый и вплоть до бесконечности это на производительность никак не влияет и это даёт нам такую
1:55:12
определённую гибкость в элементаре В общем сделать можно разными
1:55:18
способами можно так можно эк есть ещё и другие варианты да Но это опять же придёт уже к вам только с опытом В общем
1:55:25
я сейчас просто закончу вот этот блок Да и будем двигаться дальше так всё здесь готово
1:55:32
ребят забываю говорить Да обязательно нажимайте опубликовать что-то сделали публикуйте Потому что если не нажмёте да
1:55:40
вдруг у вас страничка закроется и весь Прогресс пропадёт Ну хотя автоматическое сохранение какое-то там тоже У нас
1:55:47
присутствует так всё давайте у нас следующий блок — это отзывы
1:55:52
посмотрим что у нас здесь отзывы участников Виртуал Давайте просто скопирую Да по-быстрому
1:56:01
уже стиль чёрный а
1:56:07
затем этот
1:56:13
текст Так у нас тут
1:56:22
Так у нас во всю ширину контейнер здесь он у нас тоже во всю ширину видимо отступы есть какие-то а вот здесь есть
1:56:29
во-первых Так сверху ладно Так у нас видите блок вот этих
1:56:35
отзывов у него размер 1.000 пикселей А у нас в финальной версии должно быть
1:56:42
1140 копирую Вставляю вот так вот хорошо
1:56:49
смотрите что здесь отзыва вот эти два отзыва мне прислал вот эта девушка это реальная
1:56:56
девушка да проходи видите у него на плече даже вот эти вот ожоги и вот есть вторая девушка она тоже реальная и вот
1:57:01
эти два отзыва реальных А так как два отзыва Маловато да А ребята ну они не так давно проводят эту камбо церемонию
1:57:07
вот нужно было добавить ещё отзывы А смотрите допустим у вас есть один отзыв
1:57:13
или два отзыва как я поступил я взял реальный отзыв вот этой девушки
1:57:18
Нелли скопировал его вот так вот перешёл в дип сик и сказал смотри смотри
1:57:27
есть отзыв участницы Вот как он
Пишем отзывы с deepseek
1:57:35
написан Вставляю Напиши мне пожалуйста ещё три
1:57:43
отзыва Ну вернее я скормил получается два отзыва настоящих и сказал напиши мне
1:57:48
е два отзыва один от девушки один от здесь я просто скажу сейчас напиши мне
1:57:54
пожалуйста ещё три отзыва в похожем в похожем
1:58:00
стиле два от девушек один от
1:58:08
парня поехали и он
1:58:17
поехал смотрите он соображает здесь у нас чит эмо и так далее значит Девушка
1:58:23
пишет Так парень пишет так в общем вот он сейчас он мне выдаст просто ещё три отзыва пока он всё это пишет Давайте
1:58:30
здесь настроим что я здесь собственно делал так давайте глянем А я немножко упростил эти блоки А так что я
1:58:39
сделал Я убрал а вот этот стиль сделал
1:58:46
белым так затем изменил фотографию соответственно здесь у нас вот эта девушка нель
1:58:53
выбрать Затем в стиле я чуть-чуть сделал побольше значит
1:59:00
размер Ну сколько-то там сделал размер затем я написал значит Нели просто да
1:59:05
без всяких дополнений N стиль Цвет
1:59:12
чёрный н модель Ну дополнительно Я убрал оставил вот так вот всё вроде бы я даже
1:59:20
больше ничего не менял идём сюда эти звёзды убираем это есть такой виджет
1:59:25
рейтинг я его убрал А сюда заместо этого текста соответственно я
1:59:31
Вставляю реальный отзыв девушки оп стиль опять же там чёрным Ну можно
1:59:38
чуть Вот так вот допустим серым Да А так заголовок значит идём А здесь у
1:59:45
нас пускай будет не мацерат а работа и размер
1:59:55
В общем как-то так сейчас один в один не буду Ну чуть даже поменьше можно сделать
2:00:00
шрифт 16 например Так а затем разместить нужно эти все
2:00:09
штуки так отступ сверху так макет Подождите
2:00:15
секундочку вот так вот смотрите выровнять элементы центрировать вот тогда они друг напротив друг друга друг
2:00:22
напротив друга Вот так вот так значит следующий отзыв идём в пси что он там
2:00:30
нам написал отзыв оди значит
2:00:37
копируем идём сюда так не сюда А сюда вот оп а
2:00:42
так Ну да лучше смотрите как сделать
2:00:49
так так и так ну-ка сейчас Поу сделаем вот так вот
2:00:55
дублировать Потом возьмём вот этот и перенесём это
2:01:01
сюда немножко здесь вот это как бы немножко так скажем не
2:01:09
очень сложно
2:01:14
попасть Так давайте подождите-ка не будем трогать так сделаем Чуть поменьше
2:01:21
размер ну-ка сейчас получится вот так оп во отлично
2:01:28
перенесло с В общем я для чего это сделал чтобы а не настраивать В общем
2:01:33
эти можно удалить удалить вот у нас два отзыва значит
2:01:40
слева справа всё потом я просто взял Опять скопировал
2:01:55
а ну Так подождите А ну да я понял не полностью
2:02:00
копировал просто почему так коротко В общем копирую
2:02:07
Вставляю вот так вот так то что я здесь менял так нужно
2:02:15
посмотреть сколько здесь 80 80 вот так
2:02:24
вот ну в общем я думаю вы понимаете что к чему меняю здесь Значит на девушку
2:02:35
Другую так Почему у нас
2:02:42
она размер 120 и по
2:02:48
100 А ну вот нормально стал
2:02:53
Вот в общем вот так вот мы соответственно сделали отзывы теперь берём Значит нам нужно ещё
2:03:00
один нажимаю дублировать и переношу его сюда вот вниз
2:03:07
оп нажимаю здесь дублировать и переношу
2:03:16
его вот так вот вниз всё и у меня значит отзыв
2:03:22
фотография слева справа отзыв справа слева слева справа справа слева в общем как-то
2:03:30
так вот в общем-то и блок отзывов У нас тоже
2:03:36
готов Отлично так не забываем нажать сохранить и двигаться дальше нажимаю
2:03:44
опубликовать не сохранить а публиковать Да и можно идти дальше так что у нас
2:03:50
дальше соответственно дальше у нас вот эти частые вопросы о камбо церемонии Ну
2:03:55
здесь вообще всё просто у нас уже практически подготовлено всё так значит
2:04:01
вставляем сюда частый вопрос о камба церемонии стиль видите Чем дальше уже как бы даже
2:04:07
я вот ну какое-то время где-то неделька наверно может быть 2 недели прошло от того как я создавал
2:04:15
сайт иже немножко дабы как и что толь
2:04:22
бы ИТ Так давайте здесь вот да частые вопросы естественно я их тоже писал не
2:04:27
сам я просто зашел в пси сказал мне нужен блог Мне нужен
2:04:33
блог частые вопросы
2:04:38
напиши сть частых вопросов с
2:04:45
ответами Поехали И он мне накатал Вот соответственно все вот эти вот частые вопросы как
2:04:57
НИИ стиль содержимое
2:05:06
чёрным копируем
2:05:12
содержимое вставляем всё понятно также делаем остальные давайте я
2:05:19
сейчас сделаю Да и потом продолжим так вот я вставил
2:05:24
скопировал вставил частые вопросы не забываем нажимать опубликовать чтобы у нас всё сохранилось и у нас идёт
2:05:31
следующий блок Так давайте посмотрим как у нас здесь выглядит Ну в принципе очень похоже да Готово к трансформации в общем
2:05:38
смотрите здесь опять же всё тоже самое Я не вижу смысла вам сейчас опять это показывать цвет что не надо я допустим
2:05:45
просто удаляем лишнее Да чтобы мне показалось В общем изменяем цвет как бы
2:05:50
всё понятно просто расстояние между кнопкой Чуть повыше поднимаем кнопку пишем текст в общем абсолютно всё тоже
2:05:57
самое Единственное что Ну вот смотрите здесь Давайте вот этот момент покажу смотрите текстовый редактор сейчас
2:06:04
смотрите под кнопкой я решил разместить такой вот первый шаг Это просто разговор мы поможем подготовиться Это не я тоже
2:06:10
придумал Кстати это всё мне написал дисик я ему сказал смотри мне нужен Call
2:06:16
Action в конце бло Call Action Пожалуйста сделай для меня такой блок с кнопкой вот описа неско вариантов Я
2:06:23
просто выбрал вот этот вот готово трансформации Оставьте сомнения за порогом это ВС придумал не
2:06:28
я вот смотрите здесь вот отрицательный отрицательное расстояние вот допустим у
2:06:34
нас есть кнопка Да сейчас мы нажмём плюсик найдём здесь текстовый блок разместим его под вот так вот затем
2:06:42
значит поменяем сюда вставляем вот вот н нужно поднять повыше
2:06:53
смотрите что есть и получается это отступ снаружи и мы задаём отрицательный отрицательный отступ
2:06:59
видите у меня подтягивается кнопки
2:07:05
Понимаете вот вот в принципе это всё что я вам хотел показать из этого блока
2:07:10
остальное всё тоже самое дальше идём ну здесь в принципе тоже ничего ничего
2:07:17
нового Так давайте посмотрим что здесь нового
2:07:22
Да ничего здесь нового всё вам уже знакомо
2:07:28
текст фотография В общем всё тоже самое ребят Не вижу смысла тоже тут тратить
2:07:34
время на этот блок Ну как бы и внизу что всё тоже в принципе всё тоже самое
2:07:40
Просто я убрал кнопку здесь написал
2:07:47
значит наши социальные сети так затем смотрите вот есть у нас блок
2:07:53
социальных сетей иконок убираем этот убираем Facebook А и соответственно у
2:08:00
нас есть ВК здесь смотрите иконка находим
2:08:06
VK оп вставляем вот иконка ВК и иконка
2:08:13
телеграма значит вместо юба у
2:08:19
нас Telegram вот так вот затем соответственно есть некоторые
2:08:27
тут у нас настройки есть официальные цвета можно задать разные цвета для
2:08:33
иконки Но я этого сейчас делать не буду соответственно вот сюда вот в ссылку вставляете вы ссылку на Telegram А сюда
2:08:40
вставляете ссылку на ВКонтакте так смотрите значит что здесь есть в
2:08:46
стиле можно соответственно размер этих иконок задать Да отступ внутри
2:08:55
отступ друг от друга ещё отступ колонок есть Ну это сейчас не работает в общем Здесь тоже
2:09:02
как бы ничего нового я вам не покажу Вот видите Чем дальше как бы в принципе
2:09:08
научились работать с одним блоком со вторым с третьим И потихоньку потихоньку да будете делать десятый блок уже будете
2:09:14
понимать как что и к чему в принципе так проходит любое обучение без этого никуда не деться хотите делать классные сайты
2:09:21
хотите сделать свой классный сайт хотите делать сайты на заказ допустим Вы даже можете сначала для себя создать потом
2:09:27
понимая что это в принципе-то как бы ну не не высокая Наука это просто небольшой
2:09:33
опыт Да и практика и вы сможете делать эти сайты вообще в лёгкую Так а что я
2:09:39
сейчас сделаю Давайте я просто сейчас вот эти все блоки скопирую чтобы нам уже полностью была законченная страница Да и
2:09:46
мы будем уже там двигаться дальше Всё оставайтесь
2:09:51
на связи да идём дальше А всё на первый взгляд Я вроде как закончил полностью с
2:09:56
дизайном нашей страницы нажимаю опубликовать Давайте посмотрим что мы
2:10:02
здесь с вами наделали так пока вверх не смотрим Ну и вот в общем поехали да
2:10:09
анимация а в общем Ну в целом здесь немножко Вот
2:10:14
с отступами Да не закончено но ничего нового опять же нету Просто задаёте отступ отступ либо от этого либо снизу
2:10:22
от этого блока либо сверху от этого блока просто меняете эти расстояния и блоки друг к другу
2:10:51
мы будем работать уже над другими вещами и Давайте продолжать урок ребят чуть
2:10:56
было не забыл показать вам один сервис который поможет вам в создании ваших
2:11:01
сайтов смотрите Что за сервис Вот видите Вот это изображение оно было
2:11:07
сделано вот этот вот Шаман он был сделан а не просто я Нера сеть попросил его
2:11:14
нарисовать я взял другую вообще это была фотография какого-то Шамана настоящего
2:11:20
Да ну настоящего фотография не сделанная и и я с помощью сервиса скормил в общем
2:11:26
реальную фотографию в этот сервис и он мне сделал вот эту фотографию а это бывает очень полезно Когда вы хотите а
2:11:34
использовать какую-то картинку какую-то фотографию но вы не хотите брать именно эту То есть вы хотите её уникализировать
2:11:39
сделать её персональной именно для вашего проекта смотрите значит ссылка будет под Видео сервис называется N
2:11:47
copyright coom а вроде бы регистрация не нужна вот загружаете вот смотрите я нашл такую
2:11:54
фотографию на поиске какого-то Шамана в джунглях Да здесь можно выбрать Как
2:12:00
какое будет соотношение сторон у результата Да и нажимаете генерировать изображение так вот он меня просит
2:12:08
зарегистрироваться так Ну я по-моему регистрировался сейчас я попробую попасть внутрь В общем по-моему одно
2:12:15
изображение можно сделать бесплатно для следующих нужно
2:12:21
зарегистрироваться Ну бесплатно Всё нажимаем генерировать и вот результат то есть он
2:12:27
берёт за основу то что мы иму дали и делает нам уникальное изображение похожее Ну так или иначе на исходник в
2:12:34
общем классный сервис пожалуйста пользуйтесь А всё здесь по-моему Мы закончили так
2:12:41
давайте посмотрим Давайте посмотрим да Мы закончили и Давайте перейдём далее
2:12:49
следующее что мы сделаем это берм шапку сайта и уберём подвал сайта Давайте
2:12:55
перейдём на наш на текущую версию нашего сайта смотрите То есть у нас по задумке
2:13:02
Да этого сайта у нас одна страница без вот этой вот шапки без вот этого меню и
2:13:09
заканчивается всё тоже без футера но WordPress позволяет делать
2:13:16
многостраничные сайты и конечно же в этом случае и шапка и футер они бывают
2:13:21
очень нужны футер может быть гораздо больше здесь может быть я имею в виду в
2:13:27
шапке сайта размещаться мегамен то есть здесь может быть прямо большая-большая структура сайта сейчас нам это не нужно
2:13:33
поэтому я хочу это выключить но вы имеете в виду что на вордпрессе Вы можете делать многостраничные сайты
2:13:40
корпоративные порталы интернет-магазины блоги форумы В общем всё что вам заблагорассудится А смотрите как
2:13:47
выключить шапку и подвал здесь вот есть такое меню настроить и здесь находятся
2:13:53
все настройки нашей темы Astra бесплатной и здесь вот есть смотрите
2:13:58
конструктор шапки нажимаю и как можно выключить шапку смотрите нажимаете вот
2:14:05
сюда вот primary header здесь у нас сейчас размещается название и логотип сайта и основное меню и можно просто
2:14:11
сделать вот есть видимость Да можно выключить на всех устройствах компьютер планшет и мобильный телефон убираем вот
2:14:19
эти вот боксами Да их можно назвать в общем Выключаем эти параметры и у нас всё у
2:14:24
нас Шапки нету возвращаемся чуть назад ещё раз назад и находим конструктор
2:14:30
подвала вот он нас сразу же перебрасывает сюда вниз а в Астре В
2:14:36
бесплатной версии надо понимать очень ограниченный функционал А вот в as3 Pro
2:14:42
этот функционал Ну по-настоящему огромен У меня есть видеокурс видеоуроки Да там
2:14:48
около наверное не знаю пти может быть 6 часов Я уже не помню посвящено чисто возможностям ast Pro То есть если
2:14:56
создавать сайт если планируется создавать многостраничный сайт либо тем более интернет-магазин потому что в As в
2:15:02
Astra Pro есть очень тонкие настройки именно для плагина интернет-торговли в
2:15:08
ucce то конечно же Astra Pro это прям Ну хороший хороший вариант для создания
2:15:14
сайта Так значит корай у нас здесь располагается и можно тоже просто его вот так вот выключить видимость
2:15:21
Это не единственный способ кстати убрать шапку и подвал Но вот один из вариантов
2:15:27
всё нажимаю опубликовать и нажимаю закрыть Отлично вот теперь наш наш НС
2:15:36
наша посадочная страница наш одностраничный сайт похож уже один в один на то на что я вам показывал в
2:15:43
самом начале нашего видео а Раз уж ре зала
2:15:49
про хочу вам как раз сейчас сделать то предложение очень выгодное предложение о
2:15:55
котором говорил в самом начале видео Пожалуйста послушайте а ребят предлагаю
SUPER предложение
2:16:00
вам воспользоваться машиной времени и перенестись В далёкий 2012 год я только
2:16:05
начинал тогда карьеру веб-разработчика и создавал сайты для клиентов вот сейчас я открыл веб-архив и
2:16:13
это страница сайта tem Forest на котором мне приходилось покупать шаблоны Ну темы
2:16:21
оформление для сайтов а вот так вот примерно тогда всё это дело выглядело Вот и на самом деле вообще
2:16:29
просто создать сайт на вордпрессе Да было гораздо сложнее чем сейчас не было там не то что ну как бы не то что
2:16:35
нейросетей даже просто элемента не было каждая такая тема у неё был допустим свой пей Билдер какая-то использовала
2:16:42
шорткоды они друг другу не подходили и это было каждый раз такое мучение что
2:16:48
клиенту понравился например такой дизайн и тебе приходилось осваивать по-новому каждый из этих шаблонов вот и это Ну
2:16:55
действительно очень и очень усложняет а сейчас выглядит фст вот так
2:17:02
вот да конечно всё стало гораздо удобнее темы стали более навороченные но тем не
2:17:07
менее по-прежнему Многие из них обладают своими собственными какими-то настройками и приходится Ну от темы к
2:17:14
темы приходится заново обучаться вот и это по-прежнему остаётся проблемой но в
2:17:21
тот день когда я познакомился с Темой астро вот сейчас мы на главной странице
2:17:26
темы астро В общем когда я начал работать с астро мои мучения прекратились во-первых Мне теперь не
2:17:34
нужно было каждый раз искать тему конкретную отдельную для каждого проекта
2:17:40
я делал всё на Астре потому что её возможности вот эти все сайты видите на
2:17:45
экранах чуть позже посмотрим более пристально их все можно на одной только
2:17:52
Астре на этом сайте который мы с вами сейчас делаем стоит Astra fre есть также про версия
2:17:59
Астры у неё гораздо больше возможностей по сути с АСТ Pro весь сайт вашей власти
2:18:06
в общем Сейчас я не буду останавливаться на всех настройках потому что это может занять очень и очень много времени что я
2:18:13
вам хочу здесь только показать вот допустим сравнение Астры и Ары Pro бесплатный и платный смотрите слева ап
2:18:21
справа платно и вот такой длинный список длинный список что есть в Astra Pro но нету Astra fre достаточно много здесь
2:18:30
всего классного что мы сможете настраивать в Астре Pro плюс Сейчас вы
2:18:37
знаете к чему я всё это говорю смотрите есть более 300 готовых дизайнов
2:18:43
профессиональных сайта которые вы сможете использовать для своих проектов Давайте посмотрим Некоторые из них
2:18:49
смотрите вот такой вот сайт например на ресторанную тему вот такой вот
2:18:55
музыкальный это Н вот такой сайт все эти сайты сделаны на Астре и
2:19:03
мало того Вы можете Вот любой из этих дизайнов который я вам показываю в один клик импортировать на свой сайт и там не
2:19:10
просто одна какая-то главная страница там есть многостраничные сайты есть интернет-магазины есть блоги в общем
2:19:15
огромная работа Была проведена профессионалами А вы можете её очень и очень выгодно получить с моим супер
2:19:22
предложением сейчас позже Чуть уже всё озвучу вот такой вот интернет-магазин
2:19:28
одежды Да с плагином woocommerce очень много тут всяких настроек например быстрый просмотр этого всего нету В
2:19:34
бесплатной версии Астры а такой вот сайт медицинский В общем там разные тематики
2:19:39
Можно даже идёте к клиенту например Договаривайтесь Вы показываете ему какой-то сайт из его сферы и можно даже
2:19:48
ну как бы человек может выбрать Уже готовы Дин просто его с помощью дипси
2:19:53
элементо адаптирует конкретного клиента такой вот сайт В общем много-много разных вариантов и даже не
2:20:00
скажешь что это Всё сделано на одной теме астро вот такой вот
2:20:05
интернет-магазин в общем к чему я всё это веду сама Астра стоит смотрите лата
2:20:12

это пожизненная лицензия и для одного сайта asra стоит 199 долларов ну
2:20:18
единовременный лаж долла сами вот эти готовые дизайны
2:20:25
шаблоны Да Премиум Они вообще отдельно не продаются они продаются только в пакете за 399 баксов В общем что я
2:20:32
предлагаю вам моё предложение максимально простое и выгодная Пожалуйста найдите вот эту страницу
2:20:39
перейдите она будет по адресу десай Что за предложение Я вам предлагаю
2:20:46
приобрести пожизненную лицензию на ast Pro плю Premium Starter templates То
2:20:52
есть все те шаблоны с шильдиком премиум которые вы видели всего лишь за 990 руб
2:20:57
Это около 5% от реальной стоимости этого предложения вернее Оно даже такого предложения нету потому что а приобрести
2:21:04
например Premium Starter tls можно только за 399 долларов То есть предложение очень и очень выгодно плюс
2:21:11
это ещё не всё Если вы воспользуетесь этим предложением то для всех следующих
2:21:17
ваших сайтов вы сможете приобрести весь набор всего лишь за 500 руб То есть если
2:21:22
вы планируете создавать сайты под заказ то это супер выгодно потому что всё что вам нужно будет для создания сайта вы
2:21:28
будете покупать за 500 руб а продавать вы такие сайты можете за 20 за 30 за 50
2:21:33
и больше тысяч рублей А смотрите ребят Это предложение будет точно ограничено
2:21:38
по количеству копий возможно будет ограничено по времени а здесь на странице всё будет написано поэтому даже
2:21:44
если вы прямо сейчас не планируете создавать сайты либо оно для вас ну как
2:21:50
бы остро актуально Сейчас да я вам рекомендую его не упускать приобрести и
2:21:56
вы сможете всё это дело активировать спустя месяцы и даже годы на самом деле
2:22:01
самое лучшее что вы можете сделать для облегчения себе жизни в будущем да для создания для лёгкого простого создания
2:22:08
классных сайтов это воспользоваться этим предложением поэтому нажимаете забрать
2:22:13
сейчас читайте условия получения оплачивайте и получайте классные
2:22:19
инструменты за эту смехотворно цену Всё спасибо за внимание и мы продолжаем урок
2:22:25
хорошо Следующее о чём мы с вами поговорим что изучим это первоначальная
Делаем SEO оптимизацию с плагином Yoast SEO
2:22:30
SEO оптимизация сайта это важный момент потому что даже самая простая SEO
2:22:35
оптимизация позволит вашему сайту выше ранжировать в поисковой выдаче А это будет значить что пользователи люди ваши
2:22:43
потенциальные клиенты будут легче находить ваш сайт в Яндексе в Гугле ну и соответственно будут попадать на сайт и
2:22:50
возможно становиться вашими клиентами давайте это сделаем смотрите идём во-первых в консоль можно было сразу
2:22:58
перейти в плагины в общем А в деле SEO оптимизации нам помогает плагин а кстати
2:23:05
когда вы видите уведомление Что можно обновить тот или иной плагин вы это
2:23:11
обязательно делайте но перед любыми обновлениями Я рекомендую вам Перейти в
2:23:17
раздел VP vivit Backup и создать резервную копию Давайте её кстати
2:23:24
сделаем те которые были сделаны ранее Ну не нужно хранить там 10 резервных копий
2:23:31
храните три-четыре последних копии а те которые ну устарели
2:23:37
так скажем их можно просто удалять чтобы не занимать место на хостинге А давайте дождёмся пока
2:23:46
закончится всё резервная копия сделана закрой я это уведомление это тоже можно
2:23:52
закрыть В общем я вам рекомендую по опыту до делайте бэкап почаще Кстати
2:23:57
если даже вдруг что-то пошло не так и у вас не оказалось бэкапа тоже не расстраивайтесь так как мы используем
2:24:03
классный хостинг А если вы используете бегет конечно там есть авторезерв то
2:24:09
есть резервные копии создаются автоматически не так часто не каждый день но тем не менее это иногда выручает
2:24:15
А друзья прежде чем устанавливать SE плагин нам нужно сделать основные SEO
2:24:21
настройки которые делаются без плагина просто в самом вордпрессе смотрите находим Настройки общие и вот смотрите у
2:24:27
нас есть здесь в общих настройках такие два параметра название сайта краткое
2:24:32
описание и есть иконка сайта и они все непосредственно влияют на снипет
2:24:39
поисковой выдачи Что за снипет поисковой выдачи Давайте я вам покажу смотрите открываю в режиме
2:24:45
инкогнито новое окно я напишу здесь
2:24:52
поиск и вот смотрите сайт вот этот который я сделал До этого по адресу кофа
2:24:58
он индексируется на первом месте потому что во-первых у меня здесь встречаются значит комбо феда Ну то есть два
2:25:05
ключевых слова затем адрес правильно написан В общем вот это всё что вы в общем-то видите это называется снипет
2:25:11
поисковой выдачи вот следующий снипет следующий снипет и так далее здесь пока нету не отображается
2:25:17
иконка сайта потому что она е обновилась Да и вообще сам снит
2:25:23
он Я немножко его потом уже в плагине SEO после создания сайта изменял но
2:25:29
видимо в базе данных Яндекса ещё этого обновления не произошло в общем что вы
2:25:34
должны понять что то как выглядит ваш снипет в поисковой выдаче влияет на то насколько
2:25:40
велика вероятность что по нему кликнуть Когда сайт на первом месте Да
2:25:46
ну это максимальная вероятность Если же вы уже где-то ну ниже находитесь то
2:25:51
соответственно вы с помощью вот этого спета можете так или иначе Прив привлечь внимание к вашему сайту поэтому очень
2:25:57
важно что вы напишите вот в этих вот настройках соответственно здесь я
2:26:04
напишу церемония ка в Уфе Вы когда будете создавать ваши сайты на ваши темы
2:26:12
Да ну Подумайте также Конечно же можно обратиться к ПКУ и написать ему смотри у
2:26:19
меня вот есть такой Я хочу написать для него название краткое описание сделай
2:26:24
пожалуйста такой снипет который будет привлекать более больше вероятности клика И вам ПК
2:26:31
с удовольствием в этом поможет в краткое описание я напишу так у меня здесь было написано сакральная медицина Озоне в
2:26:38
нашем городе вот так вот так что-то больно много
2:26:46
получилось всё равно Яндекс не возьмёт это так давайте-ка я поправлю не знаю почему
2:26:54
у меня тут так
2:27:06
много вот так вот оставим сохраню здесь на этом сайте В общем много писать не надо я оставлю вот так церемония кафе
2:27:13
сохра медицина амазони дальше идт иконка сайта да то что тоже ну как бы в поис выдачи
2:27:20
отображается если у вас иконки совсем не будет это будет понижать шансы того что по снипет кликнуть В общем
2:27:26
устанавливаете иконку вот всё это собственно были основные настройки смотрите после того
2:27:33
как я нажму сохранить изменения у меня вот здесь вот эта иконка появилась и соответственно поменялось название сайта церемония ка в Уфе и
2:27:39
э в кратком описании Ну сейчас здесь здесь не видно
2:27:45
будет да А вообще краткое описание тоже отображается в некоторых местах
2:27:50
Окей Теперь давайте установим плагин для SEO идём в раздел плагины Добавить
2:27:57
новый и здесь я напишу
2:28:03
OST OST — это по-моему по-английски дрожжи вот он наш OST SEO plin нажимаю
2:28:11
установить сейчас вообще Существует несколько Ну вот такая тройка лидеров это SEO R SEO и allin SEO есть ещё
2:28:19
несколько игроков так скажем на этом SEO рынке плагинов Вот Но по сути смотрите
2:28:24
друзья ни в коем случае не нужно устанавливать там два-три плагина думаю что это как-то поможет вообще ни один
2:28:30
SEO плагин сам по себе для вашего сайта он мало что сделает а сами сами по себе В чём отличие между
2:28:38
допустим SEO плагинами это как сотовые операторы есть бе Мегафон MTS они ну
2:28:45
оказывают те же самые услуги просто цвета разные тарифы разные да Но какие-то небольшие отличия то есть
2:28:50
не нужно думать что есть ну как бы какой-то плагин лучший и вот я его установлю у меня будет лучши результаты
2:28:57
нет Результат полностью зависит от вас И то как вы работаете над сайтом Как вы работаете над контентом вашего сайта а
2:29:04
плагин — это уже такой помощник он помогает Вот и есть некоторые такие
2:29:10
предрассудки Да что SEO это какая-то ну что-то там нужно где-то какие-то секретные вещи сделать что-то там
2:29:16
подкрутить и типа будет у тебя результат нет это ошибка потому что поисковые
2:29:22
системы давно научились отлично анализировать сайт и задача поисковой системы привлечь привести вернее задача
2:29:30
поисковой системы ответить на вопрос пользователя Если вы сумеете поисковую систему убедить что ваш сайт вот на
2:29:37
такую-то тему и всячески эту тему на страницах вашего сайта раскрывается
2:29:42
соответственно Вы можете рассчитывать на то что поисковая система на ваш сайт
2:29:48
будет привлекать заире посетителей так нажимаю я активировать
2:29:53
смотрите после первой активации у вас должно появиться провести настройку и там будет кнопочка пропустить Просто я
2:30:00
сюда уже плагин устанавливал поэтому у меня этого окошко сейчас не появилось в
2:30:05
общем не нужно никакой там проходить никакую конфигурацию просто нажмите пропустить а также у нас здесь такая
2:30:13
ошибка серьёзная проблема для себя вы блокируйте доступ для поисковых роботов Если вы помните в самом начале урока мы закрыли сайт от индексации потому что он
2:30:20
у нас был не готов После того как мы его закончим тогда мы галочку уберём и сайт уже будет индексироваться так Смотрим
2:30:27
значит что Что мы делаем дальше смотрите после того как вы плагин активировали
2:30:33
вот если мы перейдём в раздел все страницы у нас появляется вот здесь вот оценка по SEO И как мы сейчас видим У
2:30:39
нас вот эти все вот оценочный Светофор Да и в общем-то смотрите вот когда речь
2:30:45
идёт об одном об одной странице то с точки зрения SEO Конечно можно сделать
2:30:51
все вот эти Ну как бы настройки первоначальные Но когда у вас всего одна страница с контентом А ей будет
2:30:58
невозможно конкурировать с многостраничный на эту тему но если вы
2:31:04
создаёте многостраничный сайт и правильно его SEO оптимизирует естественно Сначала вы как
2:31:10
бы вкладываете свои мыслительные ресурсы именно в создание контента в ответы на вопросы пользователей сейчас всё стало
2:31:17
гораздо проще вы используете ПК вот тогда SEO становится очень мощным
2:31:22
инструментом смотрите вот у нас есть значит Эмен 7 главная страница во-первых
2:31:28
нам нужно её изменить Вот это название Эмен 7 оно нам не подходит нажимаю я
2:31:34
изменить так закрою я напишу здесь так как у нас это главная страница церемония
2:31:42
ка в Уфе вот так вот так будет гораздо лучше смотрите дальше идём вниз вот это
2:31:48
можно так вот свернуть после того как вы плагин установили у наск каждой записи каждой странице
2:31:55
вашего сайта появляется вот такая вот дополнительная настройка от плагина yost
2:32:00
SEO и Давайте посмотрим что у нас здесь есть за настройки начинается всё с
2:32:05
фокусного ключевого слова Что за фокусное ключевое слово это то слово по которому мы хотим чтобы наша страница
2:32:11
занимала высокие позиции в поисковой выдаче Я здесь напишу ко Уфа так как у
2:32:16
меня одна страница сайт из одной страницы в принципе у меня особого выбора нету Как только я написал Кафа
2:32:23
видите у меня здесь вот этот вот красненький человечек изменился на жёлтого чуть позже посмотрим что это
2:32:29
значит ниже спускаемся здесь мы можем увидеть как у нас будет выглядеть снипет
2:32:36
в поисковой выдаче но здесь идёт Google есть результат мобильный результат и
2:32:41
результат для ПК и как раз Наша задача с помощью вот этой вот этих вот SEO
2:32:47
настроек сделать этот снипет максимально привлекательным То есть даже вот эти вот простые действия если вы сделаете эти
2:32:55
настройки для каждой страницы вашего сайта я сейчас говорю о не об этом сайте конкретно а о других сайтах которые вы
2:33:01
возможно впоследствии будете делать либо этот сайт будете превращать в многостраничный то есть эта настройка
2:33:06
делается для каждой страницы сайта и для каждой записи сайта то есть для любой
2:33:12
страницы с каким-то адресом на которой есть контент Вот Значит первое что у нас
2:33:17
идёт — это SEO заголовок у вас по умолчанию здесь когда вы будете это делать ну здесь какие-то параметры
2:33:22
заданные мне пришлось это всё дело удалить потому что в общем это не первая не первый дубль этого видео в общем об
2:33:28
этом сейчас не думаем здесь Я хочу написать во-первых Я здесь напишу А
2:33:34
название сайта смотрите можно вставить переменную название сайта у меня название сайта
2:33:40
сейчас которое мы делали на предыдущем шаге помните в восе церемонию камба в Уфе супер супер дальше я Вставляю
2:33:46
переменную разделитель разделитель задаётся в настройках тоже SE плагина не
2:33:51
здесь а в общих настройках и его соответственно можно менять централизованно для всех страниц записей
2:33:57
вашего сайта Вот у меня сейчас разделитель — это просто вот эта чёрточка дальше здесь я напишу
2:34:06
сакральная или с большой буквой лучше сакральная
2:34:11
медицина Амазонии Вот такой вот у меня будет заголовок в моём сниппете что
2:34:18
дальше дальше смотрите можно в принципе оставить так как у меня это главная страница у неё адрес всё равно будет ну
2:34:25
по основному домену здесь же я могу написать например
2:34:33
комбо Уфа тоже будет полезно потому что человек который Ну что-то ищет вернее
2:34:39
эту церемонию кам в Уфе соответственно он будет использовать слово кам будет использовать слово Уфа вот и в таком
2:34:45
случае вот этот вот ярлык он тоже будет как бы поисковой системе говорит Смотри
2:34:50
мой сайт как раз об этом то есть здесь Вы уже думаете своей головой Что написать в вашем случае для продвижения
2:34:57
той страница которую вы создаёте дальше Мета описание Мета описание оно вот у нас здесь на вот этом вот сниппете идёт
2:35:05
тоже очень важный момент а для одного сниппета можно написать и самостоятельно но Я рекомендую опять же обратиться к
2:35:12
дипси смотрите А вот я буквально несколько минут назад написал ему привет Напиши для меня Мета описания для
2:35:18
главной страницы заполнение плагина OS SEO он там думает выбирает количество символов в общем делает какие-то выводы
2:35:26
и пишет мне вот такой вот SE Мета описания Всё я просто его копирую
2:35:35
Так Так Подождите где А вот и вот Вставляю сюда Это мето описание убираю
2:35:41
кавычки Мне они не особо нравятся вот и опять же сам мне плагин
2:35:46
говорит что смотри у тебя слишком длинная не знаю почему дисик не соображает немножко Да пишет всё-таки
2:35:51
больше чем надо в принципе для Яндекса Да если брать снипет Яндекса вот у меня заголовок смотрите поместилась только
2:35:58
вот церемония кафе сакральная медицина амазоне больше не поместилась и соответственно Мета описание оно тоже
2:36:04
вот а это не я писал это Яндекс сам взял со страницы соответственно Ну Здесь
2:36:10
гораздо меньше чем у меня там написано в общем Я рекомендую посчитать вам количество вот этих вот символов которые
2:36:16
берётся в Яндексе для Мета описания и ПКУ сказать Пиши вот ровно столько и он
2:36:22
будет это исправно делать Сейчас я просто уберу вот этот вот призыв к действию и оставлю вот так вот то есть
2:36:30
Камо безопасное очищение тела и духа с опытными проводниками детоксикации укрепление ите духовный рост Ну в
2:36:35
принципе вот такой снипет мне уже более-менее нравится а дальше смотрите у нас плагин выполняет се анализ можно вот
2:36:42
здесь нажать выпадающий список и он нам говорит смотрите результаты анализа проблем улучшений одно результаты тоже
2:36:50
се как правило для текстовых страниц для страниц которые я хочу чтобы заняли
2:36:57
высокую позицию выдачи я настраиваю так чтобы у меня оставалось две-три проблемы
2:37:02
максимум здесь же так как у меня это всё-таки посадочная страница здесь у меня не просто текст здесь у меня
2:37:07
всё-таки есть ну как бы преимущество вот это то есть здесь я на одной странице разместил
2:37:13
очень много контента который ну как бы он по основной теме но тем не менее я Я
2:37:19
не готов в ущерб так скажем пользователю Да сейчас настраивать под этот плагин
2:37:25
соответственно Я не все вещи которые он мне здесь рекомендует исправить Я не все
2:37:30
ну принимаю к исполнению например он мне говорит что нет внутренних ссылок внутренних ссылок У меня нету потому что у меня всего лишь одна страница и
2:37:37
ссылаться мне кроме неё некуда Затем он говорит ключевая фраза во вступлении у вас ключевая фраза во вступлению Нету А
2:37:43
здесь Я предполагаю что он просто вот этот вот предлог в уже не засчитывает то
2:37:49
есть человек в сниппете видит человек пишет в Яндексе комбо Уфа или комбо в Уфе видит снипет нажимает и здесь видит
2:37:56
легендарное церемония комбо в Уфе Ну как бы Куда ещё конкретнее да то есть здесь
2:38:02
я тоже это игнорирую его вот это замечание так потом он говорит плотность
2:38:07
ключевой фразы ключевая фраза найдена ноль раз а опять же я думаю что кириллицу он не совсем как бы адекватно
2:38:13
воспринимает у меня там есть и камба Уфа камба камба много раз повторяется слово
2:38:18
камба может быть не везде с географией Уфа но тем не менее я пишу то есть Яндекс Он Я думаю что он умнее этого OST
2:38:27
SEO вот дальше он говорит ключевая фраза в заголовке не все слова из вашей
2:38:32
ключевой фразы кам Уфа появляются все у заголовке Хотя у меня кам церемония
2:38:38
камбо в Уфе видите То есть у меня опять же он предлог в Я так понимаю что он
2:38:43
воспринимает как что-то лишнее и уже не засчитывает то есть я уже сталкивался с этим то есть здесь вам тоже нужно не по
2:38:49
вери Да немножко всё-таки ну думать своей головой тоже ключевая фраза в мето описани вы добавили мето описание но не
2:38:54
включили в него ключевую фразу Исправьте это давайте смотрите попробуем сейчас эксперимент провести я напишу просто кам
2:39:07
Уфа Да видите он предлог вот то что было написано до
2:39:13
это он не воспринимает видите здесь Ключевая вот эта ошибка у меня было сем Ошибок стало шесть то есть он немножко
2:39:20
не соображает поэтому всё-таки я оставляю как у меня
2:39:25
было написано до этого камба церемония в Уфе Если бы я написал написал например
2:39:31
написал ключевое слово вот так вот Или давайте вот так
2:39:37
вот cambo просто допустим оставим cambo в Уфе вот я хочу по такому слову
2:39:45
продвигаться так видите у меня уже осталось всего пять проблем он опять говорит нет внутренних ссылок ключевая
2:39:50
фраза во выступления она там у меня есть а в общем если изменить просто
2:39:56
Ключевое вернее фокусное слово на кам в Уфе то у меня уже становится здесь меньше проблем а в общем это такие ну
2:40:03
как бы немножко нестыковки Да но тем не менее пожалуйста думайте своей головой
2:40:09
тоже не слепо не верьте что говорит этот плагин Яндекс Всё отлично понимает то
2:40:14
есть Яндекс кириллицу прекрасно понимает и поэтому слово кам Уфа и камба в Уфе он Воспринимает как одно и то же то есть
2:40:21
здесь никаких проблем не будет а затем что дальше идёт он говорит э атрибуты
2:40:27
изображений Alt из шестнадцати изображений на этой странице только три имеют атрибут Аль это Потому что я не задавал их Хотя я вам показывал что
2:40:33
пишите cambo офа ка Уфа То есть если вы будете ваши изображения все э дописывать
2:40:39
ну по правилам то этой Ошибки здесь не будет а ключевая фраза в заголовке
2:40:45
точная копия ключевой фразы содержится в заголовке SEO но не в начале Так а у нас какой заголовок церемония
2:40:53
кафе он из-за того что у меня слово церемония стоит перед кафе он уже немножко ругается то есть опять Мы этот
2:40:59
момент опускаем что дальше есть хорошие результаты да восемь хороших то есть исходящие ссылки есть хороший работа
2:41:05
изображение в общем остальное всё он нас хвалит супер супер смотрите Друзья вот
2:41:11
эти основные настройки если вы просто для каждой страни для каждой записи вашего сайта провед вот такую вот работу
2:41:18
Это буквально минут на каждую запись страницу даже может быть меньше чем
2:41:23
дальше тем вы быстрее это будете делать если вы сделаете таких 50 страниц по вашей теме Ну у вас есть пси да вам Ну
2:41:30
как бы посидеть придётся но А кто сказал что будет легко если вы хотите топ региональный топ по вашему запросу Да в
2:41:37
Яндексе то нужно будет поработать Ну это неделя может быть две работы не не с
2:41:43
утра до ночи да По нескольку часов Но если вы это сделаете то вы удивитесь как на ваш сайт начнут заходить все те кто в
2:41:50
вашем регионе ищут вашу услугу или ваш товар просто проведя вот эти вот настройки которые я вам здесь показал вы
2:41:57
уже будете выше почти всех конкурентов которые есть в вашем регионе просто Сделайте это да И
2:42:05
будет вам счастье Как говорится Вот А смотрите последний момент который я хочу
2:42:10
вам показать здесь Он вот в этот снипет добавил Вот это изображение Он просто взял его со страницы Я хочу это изменить
2:42:16
как это сделать вот здесь справа находим установить изображение страница и здесь я должен выбрать нашу лягушку опять же
2:42:22
здесь вот в атрибуте Alt можно написать кофа в заголовке ко Уфа лишним не будет оп я добавил видите эта картинка
2:42:29
изменилась вообще в Яндексе в сниппете изображения нету но это изображение попадает Например если кто-то ВКонтакте
2:42:37
либо в другой социальной сети делится ссылкой на ваш сайт то это изображение подтягивается и оно отлично дополняет Ну
2:42:43
как бы вот эту вот ссылку то есть с изображением гораздо лучше чем без
2:42:49
изображения то есть задавайте эти картинки тоже всё А я вам показал Как настраивать yos SEO для главной страницы
2:42:56
если вы впоследствии создаёте ещё страницы в общем настраиваете для каждой страницы на вашем сайте и это будет
2:43:02
очень мощный такой бусты вам занять с вашим сайтом высокие позиции в пусковой
2:43:08
выдаче Желаю вам удачи и лёгкого достижения топа А мы идём дальше А на
2:43:13
время отвлечся от работы над сайтом и установим а счётчик Яндекс метрики и и
Ставим Я. Метрика и Я. Вебмастер
2:43:19
добавим сайт в Яндекс webm сейчас по дороге буду рассказывать что и для чего смотрите Что такое Метрика а Метрика
2:43:25
находится по адресу metrika.yandex.ru легко Напишите в Яндексе мерика да найдёте вот эту страницу а нужен конечно
2:43:32
же аккаунт на а Яндексе А зарегистрируйтесь ну это почтовый адрес
2:43:37
по сути да вам он понадобится и для метрики и для Яндекс вебмастера почему это важно Так как у нас в России
2:43:44
всё-таки поисковая система 80% генерирующая трафика — это Яндекс то соответственно мы наши сайты и стараемся
2:43:51
продвигать под неё то есть а слушаем что нам говорит Яндекс
2:43:56
анализируем посетителей м с точки зрения именно того как их видит поисковая
2:44:02
система Яндекс В общем работаем в паре с этой поисковой системой и ваша задача
2:44:08
при создании любого сайта который вы для себя создаёте Для клиента в общем
2:44:13
неважно цели и задачи Нужно обязательно добавлять счётчик метрики и
2:44:20
если коне планируете над этими сайтами работать смотрите значит нажимаете
2:44:25
добавить счётчик после того как у вас есть уже аккаунт затем пишите имя
2:44:32
счётчика учебный напишу Я Затем вы вставляете адрес я не знаю добавит ли у меня сейчас
2:44:38
он так как у меня адрес это до третьего
2:44:48
уровня оставляете тот в котором вы находитесь Я рекомендую оставить цели и
2:44:54
обязательно вот здесь включить ещё webor webvisor классный инструмент позволяет смотреть вам как пользователи прямо
2:45:00
видят на экране ваш сайт очень удобная Классная штука так смотрите всё нажимаем создать счётчик счётчик создаётся а
2:45:08
затем ранее как это делалось Да брался вот этот код и вставлял куда-то на странице вашего сайта Я сам в прошлых
2:45:15
своих видео в старых показывал как это делается через но это не совсем правильно Потому что
2:45:21
при обновлении преса счётчик слетает и Ну соответственно данные уже не передаются поэтому мы будем с помощью
2:45:29
других способов а именно ЦМС и конструкторы сайтов вот смотрите для некоторых систем есть готовые плагины
2:45:35
обычно в плагине достаточно указать только номер вашего счётчика Вот номер счётчика который мне сейчас Метрика
2:45:42
выдала Я иду на наш сайт иду в раздел вернее в раздел консоль закрываю
2:45:48
эти все щ Так давайте я опять вам покажу пожалуйста когда всегда добавляете
2:45:54
какой-то новый плагин или что-то что-то делаете убирайте вот эти вот уведомления
2:45:59
они мешают работе по моему мнению дальше идём значит в плагины добавить
2:46:06
плагин и пишем здесь Яндекс
2:46:15
Метрика находим плагин Яндекс метри для WordPress
2:46:20
нажимаем установить сейчас не пугаемся что он там не тестировался с нашей версией плагин
2:46:26
простой как удар от лопаты В общем ничего страшного Если выйдет какое-то серьёзное
2:46:32
дополнение тогда они Я думаю его обновят так всё видите у нас Яндекс Метрика появился вот здесь вот во всех плагинах
2:46:39
нажимаем настройки и сюда нам нужно вставить номер счётчика копирую Вставляю
2:46:45
Вер галочку оставляем нажимаю сохранить всё смотрите что дальше здесь
2:46:50
соответственно можно вот внизу нажать начать пользоваться нажимаю вот он у меня
2:46:57
появился так а есть смотрите появился вот значит у нас Кафа
2:47:04
учебный и вот здесь вот справа в три точки есть и есть проверить счётчик
2:47:10
нажимаете так и ещё раз нажимаем так вот здесь проверить
2:47:16
нажимаем и вот появляется вот та такая вот зелёное окошечко такое маленькое Да уведомление счётчик найден на странице
2:47:24
всё больше ничего делать не нужно Метрика установлена Теперь вам просто нужно через недельку посмотреть зайти у
2:47:32
вас Соответственно по вот этому адресу метрика yandex.ru здесь появится данные
2:47:39
появится график Сколько было посетителей вы сможете зайти внутрь и здесь Здесь много много много много
2:47:46
разных вещей так как у меня ну только что счётчик установлен соответственно никаких пока данных ещё нету А так можно
2:47:52
наблюдать как А сколько в день какие страницы просматривают в общем много-много всего и вот особенно
2:47:58
прикольно это поведение webvisor То есть можно включаете webvisor и видите каждый сеанс То есть как человек вводит прямо
2:48:05
открывается дополнительное окошко и как он вводит мышкой куда нажимает Какие страницы смотрит что читает что выделяет
2:48:11
в общем очень интересно для того чтобы анализировать поведение пользователей и соответственно это помогает вам работать
2:48:18
шать ваш сайт как сказал основоположник менеджмента друкер Да Петр друкер Питер
2:48:25
друкер он сказал Вы не можете управлять тем что вы не
2:48:36
измеряемую окей с метрикой закончили теперь второй не менее важный инструмент
2:48:41

это Яндекс webm смотрите закрою я эти вкладки Вот есть
2:48:48
такой webmaster.yandex.ru что вы здесь должны сделать смотрите нажимаете вот этот
2:48:54
плюс вводите сюда адрес вашего
2:49:00
сайта нажимаете добавить далее здесь немножко
2:49:06
поинтересней посложнее так скажем установка так есть Значит у нас
2:49:11
подтверждение прав с помощью HTML файла DNS записи Мета тега с мегом тоже можно
2:49:18
но опять же при обновлении вордпрессе тает вообще HTML файл оптимальный
2:49:24
вариант смотрите как это делается немножко сейчас нам нужно будет вернуться на хостинг Ну посмотрите это
2:49:30
полезная штука сейчас я открою аккаунт своего хостинга А вот я открыл контрольную панель хостинга А что дальше
2:49:37
смотрите находим здесь файловый менеджер далее у вас здесь будет гораздо
2:49:43
меньше э вот этих вот папочек в принципе если у вас один домен то только одна
2:49:49
Папочка а затем я должен соответственно найти адрес своего вот этого сайта у меня он так кобо а вот он com. десай
2:49:59
захожу внутрь захожу в папку Public HTML и вот сюда вот смотрите я нажимаю файл
2:50:07
создать новый файл и здесь мне говорят
2:50:12
Создайте в корневой папке сайта Создайте файл с именем
2:50:18
[музыка] копирую нажимаю
2:50:25
Окей так файл создан теперь захожу в него и сюда Вставляю
2:50:32
копирую Вставляю этот код нажимаю закрыть нажимаю обязательно сохранить изменения Всё дело сделано и теперь
2:50:41
можно нажать подтвердить кстати можно было скачать
2:50:47
фай таго не было только что появилось я даже не увидел ну имеется в виду скачать
2:50:53
готовый файл и загрузить его Через файловый менеджер всё видите пользователь управляющий сайтом help.ru
2:51:00
права подтверждены всё И теперь у меня получается в списке всех моих сайтов вот
2:51:07
он появился Сай данных пока никаких тоже
2:51:12
нету но теперь на мою почту которую Я использовал на Яндексе для создания вот этого вебмастера будут приходить важные
2:51:19
уведомления о о том как робот Яндекс взаимодействует с сайтом и здесь очень-очень всякие полезные вещи
2:51:25
оптимизация сайта качество сайта эффективность индексирования В общем много разных инструментов по вебмастеру
2:51:31
можно снимать отдельный видеоурок у меня в платном курсе запуск сайта на
2:51:37
вордпрессе есть хороший раздел посвящённый вебмастеру Ну также куча материалов вообще по вебмастеру на
2:51:43
поиске сможете всё это найти в общем ваша первая Главная задача которая нужно выполнить Вот именно сегодня это просто
2:51:50
добавить сайт в Яндекс webm и пусть он уже всё с него снимает показатели с которыми мы уже вы уже в последствий
2:51:57
сможете работать Всё закончили с веб мастером и теперь давайте вернёмся к
2:52:02
нашему сайту для одной последней настройки закрою все лишние
2:52:10
вкладки перейду на сайт вот смотрите всё как бы
2:52:15
у нас готово всё работает всё классно Мы готовы в принципе открыть сайт для индексации поисковыми
2:52:23
роботами Но есть один момент который мы ещё пока с вами не учли Помните я вам говорил вам что у нашего сайта будет
Адаптация мобильной версии
2:52:30
мобильная версия смотрите Что нужно сделать нажимаем редактировать В элементаре а и я думаю кто внимательный
2:52:37
уже увидел что у нас здесь есть несколько а вариантов А смотрите компьютер есть планшет и есть мобильный
2:52:45
А кстати у меня а смотрите что я в процессе записи видео
2:52:52
в общем у меня та страница которую я создавал она Ну в общем она у меня подпортить и я
2:52:59
просто копировал с готового сайта в чём здесь суть смотрите когда вы после того
2:53:05
как вы создаёте сайт у вас здесь немножко всё криво косо Вот например если убрать вот это изображение да то
2:53:12
видите наше изображение которое у меня стояло для версии Ну вот наша лягушка
2:53:18
для версии с компьютером на мобильном на мобильной версии она не ну как бы Смотрится не очень потом сам шрифт
2:53:26
например он может быть вот допустим вот так вот да может быть понимаете
2:53:32
допустим центровка может быть Вот так вот кнопка тоже может например или вот
2:53:39
здесь вот может быть центровка например вот так вот как-то Видите Видите У меня всё вот это поехало то есть для
2:53:47
мобильного для для мобильных устройств необходимо ваш сайт адаптировать и Давайте я вам покажу на примере одного
2:53:54
блока Как вы можете это легко сделать А вообще Обратите внимание что когда мы делаем настройку Когда например Мы
2:54:01
открываем контейнер например даже вот если мы перейдём в макет то у нас вот здесь вот рядом с некоторыми параметрами
2:54:09
есть вот такой вот выпадающий список и здесь мы можем менять компьютер планшет
2:54:15
мобильный то есть элементор ну как бы настолько крут Да они Молодцы реально Они продумали что разные настройки могут
2:54:22
быть для разных устройств и мы этим с удовольствием пользуемся соответственно нам нужно что нам нужно
2:54:28
сделать нужно сделать просто приличный размер чтобы он на мобильном устройстве читался Ну как бы удобней и вот здесь
2:54:35
соответственно видите у нас размер шрифта конкретно для мобильного устройства супер супер мы просто
2:54:43
уменьшаем примерно так например 42 Отлично Отлично
2:54:48
так как на мобильном устройстве Мне нужно это сделать по центру Я просто выравниваю по центру хочу сказать что
2:54:55
это не ну то есть я думаю вы поняли что эти настройки они не влияют на версию для компьютера То есть если пользователь
2:55:02
заходит с большого компьютера он видит одну версию если заходит с мобильного видит другую и вы можете их настраивать
2:55:07
Независимо друг от друга это очень круто затем кнопку допустим я выравниваю
2:55:14
вебок по центру Вот так вот смотрите например мне не нравится вот
2:55:20
это изображение то есть для мобильного устройства можно подобрать какое-то другое изображение в качестве фона и я в
2:55:25
общем-то так и сделал вот здесь вот нажимаем добавить так А его нету сейчас нажму
2:55:32
загрузить выберите
2:55:37
файл вот это вот изображение мне больше нравится не забываем атрибут и заголовок
2:55:44
писать оп вот так посипати смотрите какая есть какой есть такая
2:55:51
небольшая не фишка Да ну просто такое дизайнерское решение если например у вас
2:55:56
текст пропадает например фотография какая-то картинка Светлая Да и
2:56:01
текст шрифт тоже белого цвета например и может Плохо читаться что вы можете сделать вы
2:56:08
нажимаете редактировать контейнер стиль и есть такое понятие как перекрытие фона
2:56:14
нажимаете выбираете Цвет чёрный и вы можете смотреть регулировать прозрачность Вот например если бы брать
2:56:21
картинку которая изначально была видите не очень Да но если вы просто регулирует
2:56:27
прозрачность и уменьшается прозрачность вот этой картинки то получается Ну как будто ночь
2:56:34
наступает Да и лягушка такая попадает в тень очень классно вот так читается гораздо лучше согласитесь выглядит
2:56:40
профессиональ не забываем нажимать опубликовать чтобы не пропали Наши все эти изменения Ну в целом все
2:56:49
ите вниз и смотрите Ага здесь надо допустим побольше Представьте что изображение например может быть Вот
2:56:55
такое ну Это лишнее да для мобильного устройства соответственно вы здесь раз раз раз
2:57:15
[музыка] поднаема мобильный видно вы это оперативник
2:57:21
исправте вот так вот проходите В общем весь ваш сат все страни кото сделаны смо
2:57:28
Эра проверяете как будет выглядеть на Мом устройстве всё проли всё отлично
2:57:34
выглядит Да например Здесь можно сделать рифт чуть меньше например
2:57:41
и сделать его так видите здесь вот есть отступ например слева
2:57:49
так Ой простите вот убрал отступ Да стало по центру Так получше выглядит В
2:57:54
общем такие вот небольшие тонкие настройки и это в целом меняет восприятие сайта то есть делает его он
2:58:01
выглядит более профессионально всё проверяете проверяете все блоки вашего
2:58:07
сайта и нажимаете опубликовать после этого можно вернуться Word в
2:58:17
Word главную консоль и ребят осталось последнее
2:58:22
действие Да как вот бывает перед тем как судно какой-то Ну корабль
2:58:28
построенный выходит в море Да нужно что-то подобное сделать и с вашим
2:58:33
сайтом а именно нужно открыть его для индексации переходите в раздел Настройки чтение и убираете вот эту вот
Открываем сайт для индексации
2:58:41
галочку попросить поисковой системы не индексировать сайт то есть убираете галочку нажимаете сохранить изменения
2:58:48
и всё сайт открыт для индексации А друзья на этом урок окончен Спасибо что
2:58:54
досмотрели До конца А я надеюсь что было полезно и у вас всё получилось а
2:58:59
пожалуйста если понравилось Поставьте лайк подпишитесь на канал Если ещё этого
2:59:04
не сделали Я буду очень благодарен за любой комментарий который вы оставите к этому видео А если вы Поделитесь этим
2:59:11
видео в своих социальных сетях либо отправите человеку которому нужно создать сайт то я буду вам очень и очень
2:59:18
благодарен А на этом прощаюсь А с вами был кальсон Алексей и до встречи в новых обучающих видео пока