„Кто-то отдыхает сегодня в тени, потому что кто-то посадил дерево много лет назад.“ — Уоррен Баффетт
При работе в сети Интернет Вам всегда прийдется переключаться от одного вида работ к другим, от привычных рутинных процессов к новому и неизвестному. И это нормально. Суть и сила информационных технологий в бизнесе в том, что повторяющиеся процессы автоматизируются и уже не требуют Вашего участвия. Однако, на начальном этапе, Вам нужно приложить не мало усилий, чтобы сдвинуться с места. И порой выполнять много механической и рутинной работы.
ШАГ 4.1 Создание структуры и разделов сайта
Мы создали уникальную модель, где можно получить поддержку в Вашем вопросе всего за 1 токен!
„Даже если вы очень талантливы и прилагаете большие усилия, для некоторых результатов просто требуется время: вы не получите ребенка через месяц, даже если заставите забеременеть девять женщин.“ — Уоррен Баффетт
Вы закончили этап установки и основной настройки нашего сайта. Теперь дело за тем, чтобы сформировать структуру сайта и начать его наполнять контентом.
Если ранее было достаточно следовать инструкциям и выполнять простые установки, то сейчас от Вас требуется больше творчества и комплексного мышления.
Только Вы четко понимаете каким должен быть Ваш бизнес и как должен выглядеть сайт и его структура.
Мы начнем со стандартных моделей структуры сайтов, которые являются универсальными для 90% всех случаев, однако, если Ваши требования отличаются от стандартных решений, не бойтесь креативить и создавать что-то свое, опираясь на базовые принципы описанные в этой инструкции. Не зацикливайтесь на четкой последовательности и копировании, а старайтесь понять логику, тогда работа с любыми новыми действиями у Вас будет происходить легко и быстро.
Любые не понятные моменты старайтесь решать сразу, если это не занимает много времени, в противном случае, оставьте решение на потом. Часто бывает, что решение приходит само по себе, с истечением определенного времени.
Создание Рубрик сайта
Рубрики сайта – это категории, обычно разбитые по темам или направлениям, в которые будут попадать Ваши записи. Таким образом, пользователи нажимая на определенную категорию будут видеть отсортированные записи определенного направления. Например, Вы можете создать рубрики: новости, публикации, блог автора и т.д. Для создания Рубрики WordPress – перейдите в панель управления WordPress и в левом сайдбаре выберите меню Записи – Рубрики и в строке Добавить новую рубрику – Название укажите название Вашей рубрики, а в строке Ярлык – укажите латиницей название рубрики, затем нажмите кнопку Добавить новую рубрику. Повторите данное действия для создания такого количества рубрик, какое Вам необходимо.
Создание Меню сайта
Меню сайта – это основная панель навигации по сайту с содержанием ссылок в виде текста или кнопок на главные страницы или разделы сайта. Для создания меню перейдите в панель управления WordPress и в левом сайдбаре выберите меню Внешний вид – Меню. Укажите название для меню и выберите страницы, записи или рубрики которые вы хотите добавить в Меню (меню Добавьте элементы меню). Также Вы можете добавить любые ссылки в меню – выбрав опцию Произвольные ссылки. После добавления всех нужных ссылок нажмите Сохранить меню.
Создание страницы сайта на WordPress.
Для создания новой страницы перейдите в панель управления Вордпресс, в левом сайдбаре Страницы – Добавить или, предварительно войдя как администратор, находясь на любой странице сайта, на панели вверху страницы нажмите Добавить – Страницу. Введите заголовок страницы (Например, “О нас”). Наш предварительно установленный плагин перевода кириллицы в латиницу автоматически создал ссылку с латинскими символами. Если мы хотим изменить адрес страницы, мы можем нажать кнопку изменить напротив ссылки и ввести свое значение. Далее следует в правом сайдбаре выбрать Атрибуты страницы – Холст Elementor и нажать кнопку Опубликовать. После этого страница будет создана. Для того чтобы отредактировать её, нажмите кнопку Редактировать Elementor. Вы попадете в конструктор Elementor.
Обратите внимание! Вы можете не использовать Elementor, а продолжить работать в редакторе Вордпресс, добавляя в текстовую область текст и медиафайлы. Однако, при этом страницы сайта будет отображаться с использованием установленной темы (дизайна). В Атрибутах страницы указывается Базовый шаблон.
Редактирование страницы в Elementor WordPress.
При переходе в редактор Элементор нам открывается левый сайдбар с инструментами Elementor и пустая страница с двумя кнопками: плюс и папка. Конструктор Elementor реализован по принципу drag and drop (перетаскивания) и редактирования при нажатии. Это означает, что мы просто нажимаем на нужный нам элемент из левого сайдбара и перетаскиваем в необходимое место на странице, а затем редактируем.
Использование шаблонов страниц Elementor.
Мы предлагаем начинать с простого и воспользоваться готовыми шаблонами дизайна и изменить их под свои нужды. А затем уже создавать уникальные страницы на свой вкус.
В области страницы нажмите кнопку Папки. Вам откроется меню шаблонов с вкладками Блоки (отдельные элементы страницы, например, футер), Страницы (полноценные дизайны готовых страниц сайта), Мои шаблоны (Ваши личные шаблоны, которые вы можете сохранять и вставлять в свой сайт).
Перейдите по одному из них и нажмите внопку Вставить. Вам откроется запрос на подключение к библиотеке, выполните вход. После этого выбранный шаблон страницы будет вставлен и вы сможете его редактировать (изменить тексты, изображения, добавить медиа, изменить дизайн). Гораздо легче создать страницу используя уже готовые шаблоны, поэтому, если у Вас нет жестких требований к дизайну или уникальности страницы, Вы можете остановиться на использовании шаблонов с незначительными изменениями в них.
Создание новой укикальной страницы Elementor
Часто бывает необходимо создать свою страницу, не используя шаблоны Elementor. Для этого, перейдите в редактор Elementor и в области страницы нажмите кнопку с плюсом (там где ранее мы нажимали кнопку с папками).
Вам будет предложено создать структуру страницы. Структура страницы представляет собой скелет областей страницы в виде колонок. Это может быть страница на всю ширину с одной колонкой, с двумя колонками и т.д. Таких областей можно выбирать сколько угодно, т.е. страница может иметь и одну и несколько колонок сразу. Также, Вы сможете удалять или добавлять колонки уже в процессе редактирования, поэтому, Вы смело можете выбрать вариант с одной и двумя колонками одновременно.
Каждая такая область будет иметь собственное меню настроек (значок шести точек на голубой области секции). Для редактирования содержимого секции (например, колонки, изображения), можно нажать правой клавишей мыши на любом элементе.
Оставим эти настройки на потом. Сейчас мы имеем две секции: первую с одной колонкой и вторую с двумя колонками. Перейдем в меню элементов на панели Elements – значок с 9 точками. И перетянем например элемент Заголовок в секцию с одной колонкой, а элемент Текстовый редактор в левую колонку секции с двумя колонками. Добавим картинку перетянув элемент Изображение в правую колонку.
Вот что мы получили:
Нажимая кнопку Обновить мы опубликуем нашу страницу сайта и можем её посмотреть перейдя по адресу страницы, который мы указали при её странице. Предварительный просмотр изменений на странице можно просмотреть нажав значок с глазом справа от кнопки Обновить. Рядом также находится кнопка истории изменений, где вы можете отменить последние шаги и просмотреть историю редактирования. Работают также комбинации CTRL (CMD) + Z.
Меню редактирования содержимого Elementor очень простое и вы сможете с ним разобраться, без дополнительных инструкций. Изучите основы и развивайте свое мастерство с созданием каждой новой страницы.
Практика – это всегда что-то большее чем применение теоретических навыков. Никогда нельзя все предусмотреть наперед. А тем более, в таком деле как создание сайта.
Создание сайта часто сравнивают со строительством. Это действительно очень похожий процесс, особенно, когда инструментом создания сайта выступает конструктор. Однако, это точно не строительство стандартного много квартирного дома, а, скорее, процесс проектирования и строительство уникального дома по индивидуальному дизайну.
В Интернете не принято создавать копии сайтов, любой сайт должен быть уникален, как минимум в плане дизайна. Поэтому, вероятность того, что Вам потребуется что-то особенное, – очень велика.
Часто, Вы будете брать за основу примеры других веб-мастеров, заимствовать частичные блоки или элементы. В этих случаях потребуется их видоизменять и подгонять под свои потребности.
Если Вы подойдете к этому делу с энтузиазмом, у Вас обязательно все получится. Однако, порой на это может уйти много времени.
КАТАЛОГ РЕШЕНИЙ!
Мы имеем богатый каталог уже готовых решений под любой вид бизнеса. И мы можем помочь Вам установить и настроить любые необходимые Вам элементы.
ШАГ 4.2 Наполнение сайта контентом
Мы создали уникальную модель, где можно получить поддержку в Вашем вопросе всего за 1 токен!
„Понимание того, на что не стоит обращать внимания, столь же важно, как понимание того, на чем следует сфокусироваться.“ — Уоррен Баффетт
В предыдущем шаге мы рассмотрели два варианта создания сайта на базе Elementor – использование шаблонов тем и создание страниц с нуля используя конструктор.
Выбор, – использовать шаблоны Elementor или разрабатывать страницу собственными силами, мы оставим за Вами. Независимо от вашего выбора, Вам придется изучить основы работы с конструктором Elementor, как минимум на минимальном уровне.
Создав свою первую страницу вы сделаете большой рывок, поскольку все созданные страницы Вы сможете копировать (частично или полностью) и создавать по их аналогии десятки других страниц сайта.
Мы возьмем для примера первый шаблон страницы, которую нам предлагает Elementor в своем каталоге. После вставки на странице он будет выглядеть так:
Очевидно что это страница гостиницы. В качестве примера мы разберем её. Она очень простая, поэтому мы несколько видоизменим её и добавим необходимые нам элементы уже в процессе. А для начала, пройдемся по всем элементам страницы и отредактируем их для демонстрации.
- Элемент Заголовок – Your Logo. Изменим заголовок на “Гостиница Океан”. Нажмите на название и Вам откроется меню Заголовок в правом сайдбаре Elementor, введите там текст “Гостиница Океан”. Затем нажмите вкладку Стили и там настройте семейство (типографика), размер и цвет шрифта. После завершения редактирования нажмите зеленую кнопку Обновить внизу страницы.
- Элемент социальных иконок. Нажмите на иконки и Вам отроется меню Иконки соцсетей. Нажмите, например. на Facebook и в строке ссылка напишите адрес вашей Фейсбук странички. Тоже самое проделайте с иконками других социальных сетей. В пункте Форма – выберите квадрат. А в пункте выравнивание – выберите По центру. Нажмите кнопку Обновить для сохранения изменений.
- Элемент – Изображение. Нажмите правой кнопкой мыши на картинке – Редактировать Hero. Вам откроется меню настройки секции изображения. Нажмите на картинку в левом сайдбаре Элементора – Выберите изображение. Кликните на любое другое из каталога или загрузите новое изображение (вкладка Загрузить файлы).
- Элемент Заголовок – Your Dream Vacation is Here. Заменим заголовок подобно пункту 1.
- Элемент Кнопка. Изменим текст на кнопке. Нажмите на кнопку и Вам откроется меню редактирования кнопки. Введите новый текст кнопки. В строке Ссылка укажем ссылку на нашу будущую форму заказа. Пока её нет, поэтому можем написать любой адрес, а затем пропишем его при создании страницы формы заказа. Адрес нужно указывать полностью (например, http://24hit.com/edu/orderpage). Во вкладке Стиль поменяем размер шрифта и фор цвета кнопки. Вкладка Наведение отвечает за стиль кнопки в тот момент, когда на нее наводится мышка. Задайте здесь цвет кнопки при наведении. Нажмите кнопку Обновить.
- Элемент Секция. В нашем случае под секцией мы подразумеваем то место с синим фоном, где расположен Заголовок и Кнопка. Давайте поменяем фон секции. Нажмите иконку с 6 точками вверху секции и Вам откроется меню редактирования секции. Перейдите во вкладку Стили и замените цвет фона на другой. Нажмите кнопку Обновить.
- Обратите внимание, после изменения цвета блока, осталась небольшая линия старого цвета. Для того чтобы её также изменить, нам нужно возвратиться на блок с изображением и нажать Редактировать секцию (пиктограмма с 6 точками) – Стиль – Разделитель секции – Открываем вкладку Низ – Цвет. Выберите такой же цвет, какой вы задали для секции в пункте 6. Скопировать в цвет в Elementor очень просто. В поле цвет нажмите на иконку цвета и внизу палитры будет код цвета (например. #2195BC). Скопируйте этот код и вставьте в необходимом Вам месте.
- Элемент Заголовок – Enjoy Some You-Time. Заменим заголовок подобно пункту 1.
- Элемент Текстовый блок – I am text block. Click edit button to change this text. Lorem ipsum… Заменим текст в текстовом блоке редактора. Затем нажмите вкладку Стили и там настройте размер и цвет шрифта. После завершения нажмите зеленую кнопку Обновить.
- Элемент Кнопка – Read More. Заменим текст на кнопке и вставим свою ссылку подобно пункту 5.
- Выполним аналогичную процедуру для следующих двух секций.
- Элемент Секция. Поменяем цвет блока с зеленого на другой подобно пункту 6. Мы видим что в этом блоке заливка фона не однородна, а содержит градиент из двух цветов. Эта настройка производится во вкладке Стиль – Фон – Тип фона – пиктограмма Градиентный (если вы хотите однотонный фон – выберите Классический). В качестве фона также можно установить видео или слайдшоу. При выборе Тип фона – Градиентный – в поле цвет задается 1 цвет, а в поле Второй цвет задается другой. Обратите внимание в палитре цветов можно указывать прозрачность цвета. Более прозрачный цвет будет взаимодействовать с фоном секции. Менее прозрачный цвет будет перекрывать его. Опция Угол – меняет расположение градиентной заливки. Сохраним – кнопка Обновить.
- Элемент Видео. Для того чтобы заменить видео – наведите мышкой на видео и нажмите на появившуюся пиктограмму с карандашем в правом верхнем углу видео. Вам откроется сайдбар с редактором Видео Elementor. В поле ссылка введите новую ссылку на видео (например, YouTube). В параметрах видео Вы можете установить слайдер напротив Проигрывать видео автоматически, если хотите чтобы видео стартовало сразу при загрузке страницы.
- Элемент Отзыв. Нажмите на данный элемент и поменяйте текст и картинку для отзыва. Обратите внимание, изменения текстовых блоков также можно производить прямо на странице, удаляя или добавляя текст, без необходимости делать это в сайдбаре Elementor. Сохраним изменения кнопкой Обновить.
- Выполним изменения для последнего блока страницы по аналогии с пунктом 6 и 5.
Форма по умолчанию имеет прозрачный стиль, но мы можем отредактировать стиль формы нажав на форму и выбрав в левом сайдбаре Elementor вкладку Стиль. В этой вкладке перейдите в раскрывающееся меню Form Fields Styles и в поле Input Field Background выберите цвет (например, белый). Цвет текста формы мы можем изменить в выпадающем меню Color & Typography – поле Label Colour. Размер внешнего текста формы задается в меню Label Typography, а текста внутри поле в меню Input Fields Typography. Стиль кнопки формы можно задать в выпадающем меню Submit Button Styles. Внесите необходимые изменения и сохраните результат нажав зеленую кнопку кнопку Обновить. После изменения форма видоизменится и страница будет выглядеть так:
Много талантливых предпринимателей и амбициозных компаний часто испытывают сложности на каком-либо этапе развития или даже на старте. Нашей целью является упрощение процесса запуска и развития бизнеса в Интернет и создание такой инфраструктуры, где предпринимателям остается только следовать пошаговым инструкциям и работать над своим продуктом и сервисом.
Наша самая большая ценность – это успех наших клиентов. И мы настолько уверены в нашем продукте, что гарантируем вам 100% результат. Это означает, что единственная возможность, когда вы можете не достичь цели, – это упустить данное предложение. В обучении, построенному по принципу двоичного кода 101010, у Вас обязательно будет положительный результат.
Уникальный полный курс
+ 100% сопровождение
и гарантия результата!
- только проверенные и самые эффективные инструменты для бизнеса в Интернет
- доступ 24 часа в сутки 7 дней в неделю
- уникальная разработка – автоматическая система комплексного пошагового обучения онлайн
- персональная сопровождение и поддержка
- 100% гарантия достижения результата
Полная программа обучения увеличивает скорость трансформации бизнеса в цифровой формат в 10 раз и поможет избежать ошибок при внедрении того или иного инструмента. Главным преимуществом полного комплекта курса в том, что он уже содержит проверенные готовые практические разработки, шаблоны, скрипты, воронки и все то, что может Вам потребоваться в работе.
Простые рецепты работают лучше, потому что состоят из ингредиентов, которые легко усваиваются.
10X преимущества полной программы!
“Единственный шанс избежать ошибок – ничего не делать. В тоже время, это и будет Ваша самая большая ошибка.”
Автоматическое обучение
Готовые шаблоны сайтов
Настроенные скрипты и воронки
Видеоуроки и мастер-классы
Инфографика и слайды
Персональная поддержка
Получите сейчас гарантированный 10Х практический результат!
+ уникальный обучающий робот в комплекте
1X
2X
3X
4X
5X
6X
7X
8X
9X
10X