Конструктор сайтов на вордпресс - Антикризисные новости
S-p.su

Антикризисные новости
2 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Конструктор сайтов на вордпресс

Обзор Elementor — конструктор сайтов на WordPress. Подробный гайд-обзор плагина для новичков

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

Эту статью я сверстаю также в Elementor и периодически буду вставлять красивые блоки, чтобы сразу наглядно показывать преимущества конструктора. Поехали? 🙂

Обзор мощного конструктора для WordPress — Elementor Page Builder

Что такое Elementor и для чего он нужен

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

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

Установка

Элементор это плагин для CMS WordPress, то есть чтобы его использовать сначала нужно создать сайт на WordPress (если не знаете как это сделать, вам в помощь мой гайд), установить шаблон (про шаблоны читайте ниже) и установить плагин, Elementor готов к работе. Да, так все просто!)

Хотите научиться делать сайты?
Чтобы сэкономить на разработке или зарабатывать деньги создавая сайты для других? Недавно я записал новый курс «Идеальный сайт на WordPress» и «Лендинг в Elementor» , где рассказал пошаговый план как создавать крутые сайты. Разработкой занимаюсь более 7-ми лет, на сайтах зарабатываю более 50 тысяч в месяц и в курсе я выложил всю технологию как делать такие сайты. Курс новый — 2020 года. Берите пока свежий. Подробнее читайте по ссылке.

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

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

Возможности бесплатной версии

Редактирование в live режиме

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

Секция

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

30+ элементов

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

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

Читать еще:  Шаблоны сайтов it компании

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

Есть три варианта макета:

  • По умолчанию — в таком виде редактирование будет происходить той колонке, где сейчас располагается контент (учитывая сайдбар, шапку и подвал)
  • Холст Elementor — в таком виде перед вами будет пустая страница, без шапки, сайдбара и подвала
  • Elementor полная ширина — в таком виде останется шапка и подвал, а контент растянется на ширину сайта, отключится сайдбар.

Настройки элементов, секций, колонок (Содержимое, Стиль, Расширенные)

У каждого элемента, секции или колонки есть дополнительные настройки, которые разбиты на три вкладки:

  1. Содержимое — здесь добавляете контент, текста, картинки, ссылки на кнопки и пр.
  2. Стиль — здесь задаете настройки типографики, цветов, тени и пр.
  3. Расширенные — здесь задаете отступы, эффекты движения и пр.

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

Настройка адаптивности на разных устройствах (Компьютер, Планшет, Телефон)

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

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

Сохранить как шаблон

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

Плагин переведен на русский язык

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

История изменений

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

Разделитель секций

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

Анимация при появлении

У Elementor’a очень обширный функционал для анимации, движения, parallax-эффекта, но в бесплатной версии доступен выбор анимации только при появлении.

Произвольное позиционирование

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

Видео в котором показано как это работает:

Есть олды, которые верстали сайты еще в Adobe muse? Там было очень удобно простым перетаскиванием ставить элементы в любом месте. Здесь такой же функционал.

Тонкие настройки типографики

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

Конструктор точно понравится людям, которые понимают в типографике и делают красивую верстку за счет шрифта.

Пошаговый план создания первой страницы

Шаг 1. Установите плагин Elementor из репозитория WordPress или скачайте с официального сайта. Если вы сразу купили Elementor Pro версии, то также установите и его;

Шаг 2. Переходите Страницы > Добавить новую > и увидите кнопку Редактировать в Elementor;

Шаг 3. После нажатия на эту кнопку, слева подгружаются элементы управления, а справа холст где будем делать настройки;

Читать еще:  Проверить позиции сайта в поисковиках

Шаг 4. Добавьте первую секцию, нажав на белый плюс в красном кружке и добавьте любой элемент из столбца слева;

Шаг 5. Сохраните или опубликуйте страницу;

Блог повелителя ИТ-активов Александра Бабаева

Установка или переустановка Windows на платной основе, продвижение сообществ вк, статьи по ремонту и обслуживанию компьютера.

Главная страница »»»» Сайт »»»» Как создать сайт бесплатно на WordPress в 2020 году.

Как создать сайт бесплатно на WordPress в 2020 году.

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

Всем привет. Меня зовут Александр. В данной статье я собрал краткую пошаговую инструкцию по созданию сайта на CMS WordPress. Мы с вами будем создавать сайт в виде блога, используя услуги хостинг-провайдера Beget. Beget— один из немногих хостинг-провайдеров, кто предоставляет начинающим веб-мастерам бесплатный хостинг и домен. Бесплатный хостинг удобен, если ваш проект еще не достиг больших размеров, данный хостинг предлагает всем желающим размещать свои сайты абсолютно бесплатно и без рекламы. Это отличная возможность проверить работу своего сайта на настоящем хостинге! Я начал с бесплатного хостинга, затем перешёл на платный.

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

Для создания сайта нужно следующее:

Выбор тематики.
У меня блог в области информационных технологий. Вы можете создать блог в той области или сфере деятельности, в которой вы являетесь экспертом.
Для примера 2 моих сайта:

Для создания сайта нам потребуются:

Домен, хостинг, CMS:

Домен — это имя сайта, то название, по которому посетители будут попадать на ваш блог. Рекомендую сразу приобрести домен от аккредитованных регистраторов в зонах .RU и .РФ. Примерная стоимость 179 рублей в год. Сумма небольшая. Пример домена, который приобрёл я : it88.ru. На сайте Beget.ru можно для начала использовать бесплатный домен, но правда он будет такого вида: p917254l.beget.tech
Вам нужно будет придумать домен, в соответствии с вашей тематикой сайта. Проверить свободен ли он, если свободен — зарегистрировать. Если пока не решили купить домен, то можно использовать бесплатный, затем при необходимости купить и прикрепить его к своему сайту через панель управления хостингом. В принципе, всё интуитивно понятно.
Как выбрать домен?:
а) Чем короче слово, тем лучше;
б) Если нужный домен занят, попробуйте добавить цифры или тире, если подходит по логике и продолжает понятно читаться. Чуть ниже представлен сервис по проверке доменов:
Beget

2. Хостинг — это место, где хранятся все файлы и база данных сайта. Я пользуюсь платным хостингом. Тариф «Блог». Стоимость тарифа — 190 рублей в месяц. Но для начала, можно воспользоваться и бесплатным хостингом, при необходимости перейти на платный.
Основные отличия платного хостинга от бесплатного:

  • Неограниченное количество доменов и поддоменов
  • Собственную панель управления;
  • PHP 4/5/7, Perl 5, Python, Zend, phpMyAdmin;
  • SSH, sFTP/FTP доступ;
  • Возможность заказа дополнительных IP-адресов;
  • Неограниченный трафик;
  • Автоматическую установку CMS;
  • Управление CronTab (задания по расписанию);
  • Управление DNS-записями;
  • POP3, IMAP, SMTP для работы с почтой;
  • Автоматическое резервное копирование;
  • Управление журналами веб-сервера;
  • Круглосуточную техническую поддержку;
  • Разрешённую нагрузку 65 CP в день;
  • Разрешённую нагрузку 2500 CP для MySQL в день.
    Технические характеристики сервера на платном хостинге:

  • Дисковое пространство: 1000 Мб
  • Количество:
  • сайтов — 1 сайт
  • дополнительных FTP: 1 аккаунт
  • баз данных MySQL: 1 база
  • доменов и поддоменов:
  • Максимальное количество файлов: 25 000
  • Разрешённая нагрузка (CP): 10
Читать еще:  Сайт яндекс толока регистрация

Что еще включает бесплатный
хостинг?

  • Удобную панель управления
  • Возможность:
  • установки популярных CMS в один клик
  • перехода на платный хостинг с сохранением всех данных
  • прикреплять к сайту свои домены
  • MySQL 5, PHP 5/7, Zend, phpMyAdmin
  • Access и Error журналы (логи сервера)
    Технические характеристики сервера на бесплатном хостинге:

Для того,чтобы воспользоваться бесплатным хостингом, нужно перейти по ссылке: https://beget.com/ru/free-hosting и зарегистрироваться.

После регистрации вам будут доступны логин и пароль для входа панель управления хостингом ( выводятся на экране и приходят в виде смс на ваш номер телефона), так же вам предоставляется бесплатный домен ( пример домена,который предоставили мне — o908333s.beget.tech )
Вид панели управления хостингом :

Установка SSL-сертификата.

Если вы купили домен, то рекомендую сразу заказать SSL сертификат. SSL сертификат обеспечивает безопасное соединение между сайтом и посетителем. В последнее время это обязательная настройка, чтобы и поисковые системы и посетители считали ваш сайт безопасным. В итоге ваш проект будет доступен по ссылке https://, а не просто http://. Пример с моего сайта:

Я рекомендую устанавливать бесплатный сертификат Let’s encrypt. Сегодня он почти ничем не отличается от платного. Установили один раз и хостер сам будет его обновлять.
Пример установки на хостинге Beget. Заходим в панель управления хостингом — пункт «домены и поддомены»

На данном хостинге можете просто оставить заявку на установку сертификата и администраторы его установят.

3. CMS (Content Management System) — это программа, которая обеспечит удобное и совместное управление Вашим сайтом. Мы с вами будем создавать сайт на CMS WordPress. Вордпресс — полностью бесплатна. Но в отличие от любых других конструкторов, ее функционал огромен, на WP можно сделать сайт практически любого уровня сложности — это становится возможным благодаря открытому коду и плагинам!

Нам нужно развернуть CMS WordPress на нашем хостинге, делаем следующее:
Кликаем на CMS, как показано на рисунке ниже

Настройка перед установкой CMS

Директорию установки WP я обычно не меняю, оставляем так как есть, если покупали домен, то в поле
«домен по умолчанию» — выбираем ваш домен, далее указываем название нашего сайта, например: «Блог ИТ«, придумываем логин администратора ( я оставил адрес электронной почты), придумываем пароль для входа в админ панель нашего сайта ( у меня это 8 символов), указываем e-mail администратора, нажимаем: «установить«:

НЕ Забудьте логин и пароль администратора, рекомендую записать в какой-нибудь текстовый редактор и сохранить отдельно. Эти учётные данные вам понадобятся для входа в админ панель вашего сайта!

Ждём пару минут пока CMS WordPress «развернётся» на хостинге. В результате получается:

Кликаем в моём случае на o908333s.beget.tech (у вас будет такого же вида, но в другими цифрами) и заходим на наш сайт. Нам открывается вот такая картина, это и есть созданный нами сайт:

Поздравляю! Наш сайт уже виден в интернете и можно публиковать статьи. Мы можем сделать его еще лучше, если сделаем дополнительные настройки. Заходим в админ панель нашего сайта для его настройки. Для этого наберём адрес нашего сайта в адресной строке браузера o908333s.beget.tech (вместо o908333s у вас будет свой домен) и добавим в конце /wp-admin . Получается следующее:
o908333s.beget.tech/wp-admin

Вводим логин и пароль:

После ввода логина и пароля — заходим в админ панель, выглядит она так:

Ссылка на основную публикацию
Adblock
detector