Как сделать бизнес сайт используя WordPress & Elementor

Узнайте, как создать веб-сайт для вашего бизнеса, используя WordPress, Elementor и Astra. Это все 100% бесплатные инструменты, которые я лично использую.


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

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

Вещи, которые нужно:

  • Хостинг. Я рекомендую SiteGround.
  • доменное имя.
  • Тема WordPress. Для этого урока мы используем бесплатную тему Astra.
  • WordPress Page Builder. Для этого мы используем бесплатный конструктор страниц Elementor.

Давайте начнем!

Шаг 1: Купить хостинг и доменное имя.

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

Одна вещь, на которую я бы хотел обратить внимание, – это как можно больше избегать компаний EIG и GoDaddy. EIG означает Endurance International Group и контролирует более 60 хостинговых компаний. Это увольняет их внутренний обслуживающий персонал и объединяет все под одним зонтиком. Что происходит, так это поддержка клиентов, качество хостинга и общее качество обслуживания..

Вот некоторые из известных компаний EIG:

  • Hostgator
  • BlueHost
  • Ipage
  • Arvixe
  • Жирная корова
  • HostMonster Маленький Оранжевый

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

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

Вы также хотите выбрать хостинг, который предоставляет бесплатные SSL-сертификаты. Без SSL-сертификата на вашем веб-сайте будет размещена эта уродливая метка «Незащищенный»:

не является безопасным

Если вы занимаетесь бизнесом, вы можете практически попрощаться с потенциальными клиентами с этим лейблом. Если ваш хостинг не предоставляет SSL-сертификаты бесплатно, один SSL-сертификат может стоить вам $ 50-100 в год за сайт.

Вам также нужен сервис, который позволит вам перейти на что-то под названием PHP7, что сделает ваш сайт намного быстрее.

Siteground, мой любимый веб-хостинг

Хостинг, который я обнаружил и удовлетворяет всем этим критериям, – это SiteGround. SiteGround предлагает бесплатный SSL-сертификат, позволяет обновиться до PHP7, имеет качественный хостинг и потрясающую поддержку клиентов. Это действительно лучшее, что есть.

Вот основные функции SiteGround:

  • Бесплатный сертификат SSL
  • FAST Knowledgable Поддержка
  • Сценарий WordPress
  • Бесплатная миграция сайта
  • 30 дней резервного копирования

Я заключил с ними удивительную сделку, чтобы дать 70% скидку всем, кто подписывается с помощью эта ссылка. Так что если вы хотите сэкономить на своем хостинге, нажмите на эту ссылку и купи свой хостинг сейчас.

Чтобы купить ваш хостинг от SiteGround, нажмите на эту ссылку. Зайдя на их домашнюю страницу, вы увидите четыре разных типа хостинга:

выбрать план площадки

Выберите хостинг WordPress и нажмите Начать. Затем вы увидите три тарифных плана:

WordPress цены на хостинг

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

Выбрав план, нажмите Получить план. После этого вы перейдете к следующему шагу – выбору домена. Если у вас уже есть доменное имя, выберите «У меня уже есть домен». Но если у вас его нет, выберите «Зарегистрировать новый домен» так что вы можете купить домен прямо внутри SiteGround. Это стоит $ 15,95 в год.

выбрать домен

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

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

Шаг 2: Установите WordPress.

WordPress – это инструмент для создания веб-сайтов, который мы будем использовать для создания вашего бизнес-сайта. Он абсолютно бесплатный, очень простой в использовании, но очень мощный. Он поставляется с тысячами плагинов и тем, которые позволят вам делать все, что вы хотите с вашим сайтом.

SiteGround поставляется с установкой WordPress в один клик, которая быстро установит WordPress для вас..

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

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

установить WordPress

Чтобы завершить процесс, вам нужно будет предоставить данные для входа администратора (адрес электронной почты, имя пользователя и пароль) для вашего веб-сайта. Это данные, которые вы будете использовать для доступа к серверной части вашего сайта, поэтому убедитесь, что они защищены.

Как только это будет сделано, нажмите Подтверждение > Полная настройка. И теперь у вас есть живой, самодостаточный веб-сайт WordPress.

Шаг 3: Установите сертификат SSL.

Прежде чем делать что-либо еще, я хочу сначала показать вам, как установить SSL-сертификат, чтобы избавиться от ярлыка Not Secure, который я вам показывал ранее. Под Мои счета, щелчок Иди в cPanel.

перейти к cpanel

CPanel – это место, где вы можете установить различное программное обеспечение и инструменты для вашего сайта. Если вы прокрутите весь путь вниз, вы должны увидеть раздел Безопасность. В этом разделе нажмите на Давай зашифруем.

давайте зашифруем

Выберите домен, на который вы хотите установить сертификат SSL, выберите Давайте зашифруем SSL, и нажмите устанавливать.

Теперь пришло время войти на ваш новый сайт. щелчок Мои счета снова вверху и нажмите сооружения Вкладка. Здесь вы увидите доменное имя, которое вы зарегистрировали. Через это зеленый Перейти на портал администратора кнопка. Нажмите на эту кнопку, чтобы перейти на страницу входа в WordPress..

перейти к панели администратора WordPress

Страницы входа в WordPress обычно имеют следующие форматы: yourdomain.com/wp-admin а также yourdomain.com/wp-login. Ваш может быть другим. Но вы должны запомнить или записать URL-адрес своей страницы входа в систему, чтобы в следующий раз вы могли получить к нему доступ, введя URL-адрес непосредственно в адресную строку и больше не входя в Siteground..

Страница входа в WordPress выглядит следующим образом:

страница входа в WordPress

Введите здесь имя пользователя и пароль, чтобы войти на свой сайт в первый раз.

Когда вы окажетесь внутри, первое, что вам нужно сделать, это сказать WordPress, что у вас есть SSL-сертификат. Это довольно просто сделать.

На левой боковой панели перейдите к настройки > генеральный. На экране вы увидите два поля с вашим доменным именем: адрес WordPress (URL) и адрес сайта (URL). Вы должны ввести букву «s» после «http» и перед двоеточием «:» для обоих полей.

добавление SSL-сертификата в WordPress

Когда вы закончите, нажмите Сохранить изменения. Ваш веб-сайт должен теперь иметь значок замка рядом с доменным именем:

защищенный сайт с https

Теперь последнее, что нам нужно сделать для SSL-сертификата, это убедиться, что люди, которые вводят «http» в свой адрес, будут перенаправлены на ваш «https» URL. Нам нужен плагин, чтобы сделать это.

Чтобы установить плагин, перейдите на Плагины > Добавить новое. В строке поиска вверху справа найдите плагин Действительно простой SSL. Установите и активируйте его.

установить действительно простой ssl

Затем вы увидите это всплывающее сообщение на панели инструментов:

активировать действительно простой SSL

Нажмите синий Вперед, активируйте SSL! кнопка. Вы выйдете из системы, и как только вы снова войдете в систему, плагин Really Simple SSL будет работать в полную силу.

Шаг 4: Установите тему Astra и сайты Astra.

Для бизнес-сайта вам нужна тема с чистым кодом и гибкими функциями, чтобы сделать настройку максимально простой и быстрой. Существует множество качественных тем WordPress, но темой, которую мы собираемся здесь использовать, является Astra Theme..

Astra Theme – бесплатная тема WordPress, которая отличается превосходной скоростью и простотой. Что мне больше всего нравится в этом, так это то, что он настраивается на основе инструментов, которые вам нужны, и это облегчает вашу задачу. Существует также версия Pro, если вы хотите получить доступ к премиум-функциям.

Астра тема

Вот особенности, которые я люблю больше всего в Astra:

  • Одна из самых быстрых доступных тем
  • Более 100 стартовых сайтов (большинство из них бесплатны)
  • Гибкая функция мегаменю
  • Мощный пакет дополнений
  • Расширенная поддержка WooCommerce

Чтобы установить Astra, перейдите на Внешность > тема > Добавить новое. Поиск Astra, нажмите устанавливать, а также Активировать.

установка астра

Еще одна удивительная вещь об Astra – тот факт, что у него есть плагин под названием Astra Starter Сайты. Этот плагин имеет библиотеку предварительно созданных бесплатных и премиальных шаблонов, которые вы можете использовать на своем собственном веб-сайте всего несколькими щелчками мыши. Мы будем использовать шаблон сайта Astra, чтобы сократить время создания нашего сайта в два раза.

После установки Astra вы увидите это сообщение на своей панели инструментов:

начать работу с сайтом astra

щелчок Начать. Это установит Astra Starter Sites для вас. Вы также можете установить сайты Astra, перейдя в Плагины > Добавить новое. Ищи Астра Сайты и установить и активировать его. Чтобы получить доступ к сайтам Astra, перейдите на Появления >Astra Starter Сайты.

Выбор вашего конструктора страниц

После установки Astra Sites вам будет задан вопрос о том, какой конструктор страниц вы предпочитаете: Gutenberg, Elementor, Beaver Builder или Brizy. В этом уроке я собираюсь использовать Elementor.

Elementor – это конструктор страниц WordPress, который вывел процесс создания страниц на новый уровень. У него глубокий набор функций, но он очень прост в использовании и освоении. Для создания достойной веб-страницы достаточно бесплатной версии, но если вам нужны более продвинутые функции, такие как возможность добавления контактных форм, ползунков, таблиц цен и т. Д., Вы можете перейти на версию Pro.

Выбор темы сайта Astra

Выбрав конструктор страниц, вы попадете в библиотеку шаблонов сайтов Astra. Вы можете выбрать из множества тонких, профессионально выглядящих шаблонов – как бесплатных, так и премиум. Шаблоны организованы по следующим категориям: блог, бизнес, электронная коммерция, бесплатные и другие. Поскольку вы создаете бизнес-сайт, лучше всего просмотреть Бизнес раздел.

Не торопитесь с выбором шаблона, который, по вашему мнению, будет наиболее точно соответствовать вашему бренду. Эти шаблоны полностью редактируются с выбранным вами конструктором страниц, что означает, что вы можете легко изменять текст, изображения, макет, кнопки и в основном все на странице.

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

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

коробки астра сайтов тема

Если вы заметите, есть окно с надписью «Установите необходимые плагины». Установка этого флажка установит все необходимые плагины, чтобы тема выглядела именно так, как она есть. Для этой темы был установлен плагин WPForms Lite, позволяющий создавать простые контактные формы, и Elementor, конструктор страниц, который я буду использовать. Вы можете нажать на маленький вопросительный знак рядом с ним, чтобы увидеть, какие плагины будут установлены.

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

установка темы сайта astra

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

Шаг 5. Выбор элементов дизайна.

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

Давайте начнем с вашей цветовой палитры. Если у вас уже есть цвет вашего бренда, это будет проще.

Выбор цветовой палитры

Веб-сайт обычно имеет набор из 2-3 цветов: основной, акцентный и поп-цвет. Основной цвет является доминирующим цветом вашего сайта и, скорее всего, цвет вашего бренда. Это цвет, которым вы хотите, чтобы люди запомнили ваш бренд.

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

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

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

Есть два инструмента, которые я люблю использовать при выборе цветовой палитры. Первый из них Coolors.co, веб-сайт, где вы можете просматривать различные цветовые палитры, чтобы получить идеи или вдохновение. Если вы видите что-то, что вам нравится, вы можете быстро скопировать шестнадцатеричный код, чтобы использовать его в WordPress.

Если вы нажмете Исследовать в заголовке вы увидите эту обширную коллекцию палитр:

палитры цветов

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

шестнадцатеричные коды цветовых палитр

Эти шестнадцатеричные коды – то, что вам нужно, чтобы использовать эти цвета на вашем сайте. Позже я покажу вам, как использовать эти шестнадцатеричные коды на бэкэнде WordPress..

Еще один крутой инструмент – Colorzilla. Это расширение Google Chrome, которое позволяет вам получить шестнадцатеричный код любого цвета, который вы видите на любом веб-сайте, просто нажав на него.

Если вы хотите получить расширение Colorzilla, кликните сюда. Затем нажмите Добавить в хром.

ColorZilla

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

Цветная иконка

Итак, теперь, если вы хотите знать шестнадцатеричный код цвета, который вы видели на веб-сайте, просто щелкните этот значок, затем щелкните цвет, который вы хотите скопировать. Шестнадцатеричный код будет автоматически скопирован. Вы можете вставить этот шестнадцатеричный код в определенных областях в WordPress.

Настройка типографии

Вы также хотите использовать свою собственную типографику, которая соответствует вашему бренду и помогает вашему сайту выделиться. Сайты обычно имеют 2-3 шрифта. Так же, как с цветами, у вас будет основной шрифт которые являются шрифтами для заголовков или меню. Вам также нужно Шрифт тела для абзацев текстов, а также дополнительные «поп шрифтПомочь некоторым текстам выделиться.

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

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

fontpair.co

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

Мне также нравится использовать WhatFont, расширение Google Chrome, которое сообщает вам, какой шрифт используется на любом веб-сайте, просто наведя на него курсор мыши..

Чтобы установить WhatFont, кликните сюда затем нажмите Добавить в хром. Тогда вы увидите этот значок на панели инструментов:

whatfont

Чтобы узнать название шрифта, щелкните этот значок и наведите указатель мыши на текст. WhatFont сообщит вам имя этого шрифта, и если вы нажмете на него, вы также увидите размер, цвет, семейство, стиль, вес и т. Д..

используя Whatfont

Получение логотипа

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

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

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

канва логотипы

Вы также можете нанять дизайнера логотипов, чтобы сделать это для вас. Вы можете попробовать веб-сайты, такие как Fiverr.com или 99design, но вы должны быть осторожны в выборе исполнителя на основе его стиля, послужного списка, отзывов, рейтингов и многого другого..

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

Шаг 6. Настройте свой сайт.

Как только у вас есть цветовая палитра, шрифты и логотип для вашего сайта, пришло время использовать их на вашем сайте. Если вы находитесь на панели инструментов бэкэнда WordPress, перейдите на Внешность > Настроить открыть настройщик темы.

настроить тему

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

настроить внешний вид темы

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

настройщик темы

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

В этой теме, чтобы изменить цвета вашего сайта, перейдите на Цвета и Фон. У вас будет возможность изменить базовые цвета, крошку, верхний колонтитул и нижний колонтитул.

редактор цветного фона

Основные цвета – это цвет темы, цвет ссылки, цвет текста и цвет ссылки на вашем сайте. Чтобы изменить базовые цвета, нажмите Базовые цвета. Внутри вы увидите кнопки с надписью Выберите Цвет. Нажмите на эти кнопки, чтобы изменить определенный цвет.

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

Так что, если вы нашли цвет в Coolors.co или в любом другом месте, вы можете вставить здесь шестнадцатеричный код. Вы также можете выбрать цвет во встроенном инструменте выбора цвета.

редактор базовых цветов

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

типография

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

изменить логотип

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

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

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

Шаг 7. Настройка вашего сайта с Elementor.

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

Существует два способа редактирования страницы с помощью Elementor. Во-первых, если вы находитесь в бэкэнде, перейдите к страницы и вы должны увидеть список всех страниц вашего сайта. Это включает в себя страницы, которые Astra Site автоматически создал. Страницы, созданные с помощью конкретного конструктора страниц (например, Elementor), будут помечены так:

страницы

Наведите указатель мыши на страницу, которую вы хотите редактировать, с помощью Elementor и нажмите Редактировать с Elementor.

редактировать с помощью elementor backend

Это заберет вас внутрь Elementor.

Если вы находитесь на веб-сайте вашего веб-сайта, вы можете войти в Elementor, перейдя на страницу, которую хотите редактировать, и нажав Редактировать с Elementor на черной полосе вверху:

редактировать с помощью elementor

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

Факир

Если вы заметили, заголовок не может быть виден внутри Elementor. Причина в том, что бесплатная версия Elementor не может редактировать верхние и нижние колонтитулы. Эта функция доступна только для Elementor Pro.

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

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

редактирование текста в elementor

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

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

редактирование изображения в elementor

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

удаление изображения в elementor

Чтобы настроить заголовок, наведите на него курсор мыши и щелкните пунктирный значок вверху:

настройка заголовка в elementor

Параметры настройки для заголовка появятся на левой боковой панели. Чтобы изменить фоновое изображение вашего заголовка, нажмите Стиль и перейти к Фон. Здесь вы можете загрузить новый фон.

настройка заголовка

Как видите, после загрузки изображения я настроил наложение фона, чтобы изображение было хорошо видно. Я сделал это, перейдя в Наложение фона и регулируя непрозрачность.

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

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

У меня также есть учебник Elementor, где я покажу вам, как быстро начать работу с Elementor. Вы можете посмотреть это Вот.

Шаг 8. Защитите свой сайт.

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

Лучший плагин для WordPress, который я нашел на данный момент, это iThemes Security. Бесплатная версия этого плагина уже предлагает вам сильные функции безопасности, и вы можете активировать его одним щелчком мыши.

Чтобы установить iThemes Security, зайдите на Плагины > Добавить новое затем искать iThemes Security.

установить ithemes

После активации вы увидите новую опцию в боковой панели под названием Безопасность. Перейти к Безопасность > настройки и вы должны увидеть сообщение о различных функциях, которые iThemes может сделать для вас.

безопасный сайт

Включение всех этих функций занимает всего один клик синего Безопасный сайт кнопка. Как только вы нажмете эту кнопку, вы увидите это сообщение:

активировать защиту от перебора

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

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

Шаг 9. Сделайте резервную копию вашего сайта.

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

Чтобы установить этот плагин, перейдите на Плагины > Добавить новое и искать UpdraftPlus Backup. Установите и активируйте его.

установить updraftplus

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

бекапы в настройках

Как только вы внутри, нажмите настройки. Здесь мы настроим его так, чтобы автоматические резервные копии выполнялись регулярно. Для Расписание резервного копирования файлов, Я рекомендую установить его на еженедельно и сохраняя один резервный. Файлы меняются не часто, и этого достаточно.

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

После того, как вы установили расписание, прокрутите вниз и нажмите Сохранить изменения. Затем снова прокрутите вверх, чтобы выбрать, где вы хотите хранить резервные копии. Я обычно рекомендую Dropbox, потому что он очень прост в использовании, но вы можете использовать что угодно и сколько угодно.

настройка бэкапов UpdraftPlus

Нажмите предпочитаемое удаленное хранилище и нажмите Сохранить изменения снова. Затем вы увидите это сообщение:

аутентификация удаленного хранилища

Вы должны щелкнуть эту ссылку, чтобы авторизовать резервные копии UpdraftPlus для хранения резервных копий в выбранном вами хранилище. В этом примере, поскольку я выбрал Dropbox, нажатие на эту ссылку приведет меня на страницу входа в Dropbox. Как только я войду, я увижу это сообщение:

полная настройка бэкапов Updraftsplus

Я просто должен нажать Полная настройка, и я вернусь к бэкэнду UpdraftsPlus в WordPress с этим сообщением-подтверждением вверху:

проверка подлинности завершена updraftplus

Если я хочу сделать резервную копию, все, что мне нужно сделать, это нажать на синий Резервное копирование сейчас кнопка. UpdraftPlus также будет создавать резервные копии в соответствии с графиком, который я сделал ранее, и помещать их в DropBox.

Если вы хотите восстановить резервную копию, просто нажмите на Существующие резервные копии и нажмите Восстановить.

Шаг 10. Оптимизируйте свой сайт.

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

SEO имеет аспект под названием SEO на странице, и это практики, которые вы можете внедрить на своем веб-сайте прямо в WordPress, чтобы четко сообщить поисковым системам, о чем ваш веб-сайт и контент.

Вот некоторые рекомендации SEO на странице, которые вам необходимо реализовать:

  • Напишите мета-заголовок и мета-описание для каждой страницы и поста.
  • Добавить ключевые слова или ключевые фразы и использовать их во всем контенте.
  • Добавьте ALT TXT для каждого изображения на вашей странице / посте.

Теперь, если вы не знакомы с этими вещами, ничего страшного. Их довольно легко выучить. Мета-заголовок – это заголовок, который отображается в результатах Google, а мета-описание – краткое описание под заголовком. Вот пример:

Пример результатов поиска Google

Ключевое слово – это то, что пользователи вводят в поисковик, чтобы что-то искать. Мета-заголовок – это заголовок результата, а мета-описание – краткое описание ниже. Это важные детали, потому что они сообщают Google, о чем эта страница и что она имеет отношение к ключевой фразе «салон Нью-Йорк».

Это краткий список методов SEO на странице, потому что буквально так много вы здесь делаете. Но сейчас мы собираемся сосредоточиться на этих.

Для этого нам нужен плагин. Один из лучших плагинов для SEO на WordPress – это Yoast SEO, и мы собираемся использовать его в этом руководстве. Чтобы установить этот плагин, просто перейдите на Плагины > Добавить новое и искать Yoast SEO. щелчок Установить сейчас а также Активировать.

установить Yoast SEO

Теперь, когда вы переходите на любую страницу или пост, вы увидите это новое поле под областью редактора:

Yoast SEO Box

Здесь вы можете добавить свой мета-заголовок, мета-описание и ключевые слова. Чтобы добавить ключевое слово, введите его в поле ниже Фокус ключевая фраза:

добавить ключевое слово

Чтобы добавить мета-заголовок и описание, нажмите Изменить фрагмент кнопка.

редактировать фрагмент

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

Когда вы наберете что-то в поле заголовка SEO и мета-описания, под ним появится оранжевый индикатор выполнения. Это означает, что текст все еще слишком короткий. Как только он станет зеленым, это означает, что длина вашего текста будет правильной. Если он покраснеет, он слишком длинный, и его следует сократить. Длинные заголовки и описания обрезаются в результатах, поэтому лучше оставаться в зеленой зоне.

Еще одна вещь, которую вы хотите сделать, – убедиться, что ваша карта сайта включена и действительно работает. Для этого перейдите в Yoast SEO > генеральный > особенности. Прокрутите вниз, пока не увидите XML-карты сайта. Убедитесь, что это включено, а затем нажмите синий значок вопросительного знака. Затем вы увидите ссылку, которая говорит Посмотреть карту сайта XML. Нажмите на это, чтобы просмотреть карту сайта.

разрешающие карты сайта

Для многих из вас это может привести к 404 странице. Но не волнуйтесь. Исправить это довольно просто. Все, что вам нужно сделать, это пойти настройки > Permalinks. Выбрать Название сообщения и ударил Сохранить изменения.

Постоянная ссылка

Теперь, когда вы попытаетесь снова получить доступ к XML-карте сайта, вы увидите что-то вроде этого:

xml карта сайта

Завершение

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

SiteGround

SiteGround – это очень рекомендуемый веб-хостинг в Интернете, потому что он обслуживает пользователей WordPress и при этом имеет доступную цену. Они наиболее известны за их высокую производительность и одинаково быструю поддержку.

Основные характеристики SiteGround:

  • Бесплатный сертификат SSL
  • FAST Knowledgable Поддержка
  • Постановка WordPress
  • Бесплатная миграция сайта
  • Ежедневные резервные копии

SiteGround – это хороший выбор для ваших нужд веб-хостинга. Они обслуживают сайты WordPress и предлагают меньше ресурсов, чем их конкуренты, но более надежны.

Проверьте SiteGround

Астра Тема

Astra – бесплатная тема WordPress, ориентированная на скорость. При желании вы можете приобрести Pro версию за 59 долларов, которая добавляет некоторые дополнительные настройки и опции.

Ключевые особенности Astra Theme:

  • Не тема Fastes, но это не сутулость
  • Множество бесплатных демонстрационных сайтов
  • Гибкое Мега Меню
  • Параметры пользовательских макетов
  • Поддержка WooCommerce
  • Поддержка LearnDash

Astra Theme – хороший выбор для любого проекта веб-дизайна WordPress. Я предполагаю, что самый большой вопрос в том, нужно ли вам покупать тему в наши дни, так как создатели страниц делают все то же самое, для чего вам нужна тема. Например, у Elementor есть бесплатная тема Hello, которая позволяет вашему разработчику страниц делать всю работу.

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

Для меня, однако, я думаю, что Astra Theme не поспевает за текущими тенденциями, и я больше не рекомендую это.

Существуют гораздо лучшие современные доступные темы, которые предлагают встроенные компоновщики верхнего и нижнего колонтитула по сравнению с ограничением до 3 макетов, а также более гибкие макеты страниц и постов..

Проверьте тему Astra

Факир

Elementor – это конструктор страниц WordPress, который взял штурмом веб-дизайн WordPress. Он имеет самый глубокий набор функций, но очень прост в использовании и освоении. Elementor – самый полнофункциональный бесплатный конструктор страниц. Существует также дополнение Pro для добавления дополнительных функций разработчика.

Ключевые характеристики Elementor:

  • Live Front End Page Редактор
  • Особенности персонализации сайта
  • Библиотека шаблонов и блоков
  • Обширные мобильные отзывчивые варианты
  • Самый мощный Popup Builder
  • PRO Создание пользовательских колонтитулов
  • PRO Создать макеты типов постов

Elementor – самый сильный конструктор страниц в настоящее время. Они постоянно выпускают новые функции, которые соответствуют современным тенденциям дизайна. Это означает, что вы сможете поддерживать актуальность своего сайта..

Elementor Pro – невероятная ценность, учитывая все дополнительные модули и функции питания, которые он включает.

Если бы я начинал новый проект веб-сайта сегодня, Elementor был бы создателем страниц, который я бы выбрал. Я считаю, что необходимо иметь конструктор страниц WordPress, который приятно использовать.

Проверьте Elementor

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Adblock
    detector