Астра пейдж: О Компании «Астра Пейдж»

Установите WordPress на свой домен

В этом руководстве предполагается, что у вас уже есть домен и хостинг, а также установлен WordPress на вашем домене.

• У нас есть информация о том, как купить домен и организовать хостинг в этой записи блога здесь
• У нас есть демонстрационное видео процесса установки WordPress на ваш домен здесь

Установка темы Astra и необходимых плагинов

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

Для этого: —

• Перейдите в меню Внешний вид в левой части области администрирования и выберите Темы
• Нажмите кнопку Добавить новую в правом верхнем углу рядом с Темами. заголовок
• Найдите Astra в поисковых темах поле
• Нажмите Установите и затем Активируйте
  • Теперь вы переключились с темы WordPress по умолчанию на тему Astra

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

• Перейдите в меню Плагины в левой части административной области и выберите Добавить новый
• Процесс поиска и установки плагинов такой же, как и процесс, который вы только что использовали для установить свою тему.
• Найдите, установите и активируйте плагин Stackable — Page Builder Gutenberg Blocks и myStickyMenu 9Плагин 0211

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

Создание вашей страницы

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

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

Далее вам нужно создать новую страницу. Нажмите кнопку Добавить новый вверху рядом с заголовком Страницы . Откроется пустая страница с мигающим курсором в поле Добавить заголовок . Назовите свою страницу «Главная» и нажмите кнопку «Опубликовать » в правом верхнем углу.

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

Убедитесь, что вы опубликовали свою страницу. Теперь идите к Внешний вид меню в левой части административной области и выберите Настройка.

Удалить боковую панель

Щелкните параметр Боковая панель , а затем используйте раскрывающееся меню, чтобы изменить макет по умолчанию на Без боковой панели. Опубликуйте это изменение, нажав кнопку Опубликовать , а затем используйте стрелку <, чтобы вернуться к общим параметрам Настроить .

Сделать страницу на всю ширину

Перейти к Global , а затем выберите Container , затем используйте раскрывающееся меню, чтобы изменить макет на Full Width / Stretched . Опубликуйте это изменение, а затем используйте стрелку <, чтобы вернуться к общим параметрам Настроить .

Добавьте свой логотип в заголовок

В меню Настройка выберите Конструктор заголовков , а затем Название сайта и логотип .

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

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

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

Если у вас есть Favicon, вы можете загрузить его, используя тот же процесс через раздел Значок сайта в нижней части раздела Логотип . Вы можете использовать Display Site Title , чтобы включить или выключить заголовок вашего сайта и остановить его отображение в заголовке, если хотите, и вы также можете изменить формулировку заголовка сайта, если хотите.

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

Последнее изменение, которое вам нужно внести в область Настроить , — сообщить WordPress, что страница, которую вы только что настроили под названием Home , на самом деле является вашей домашней страницей. Для этого перейдите к параметрам настроек домашней страницы в нижней части Customize 9.0175 меню.

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

Щелкните Опубликовать , а затем щелкните крестик в верхнем левом углу, чтобы выйти из параметров Настроить .

Добавить заголовок

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

Наведите указатель мыши на кнопку + в верхнем левом углу и нажмите , чтобы добавить новый блок .

Вам будет представлен список возможных блоков, которые вы можете добавить. Прокрутите этот список до тех пор, пока не дойдете до раздела Stackable и выберите Design Library из вариантов, а затем щелкните Open Design Library.

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

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

Для этой демонстрации мы будем использовать Elevate Hero One (прокрутите вниз, чтобы увидеть его) — просто нажмите на него, и он автоматически установится на вашу страницу.

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

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

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

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

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

Нажмите на текст кнопки и измените формулировку на Свяжитесь с нами или аналогичный.

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

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

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

Последнее изменение, которое вам нужно сделать, это указать WordPress не отображать слово Home вверху страницы. Для этого вам нужно щелкнуть значок Astra Settings в правом верхнем углу (см. изображение ниже), чтобы просмотреть настройки, которые применяются ко всей странице, а не только к блоку, в котором вы сейчас находитесь. затем прокрутите вниз и в Элементы страницы переключить Отключить заголовок , чтобы он был включен.

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

Добавление раздела «Что мы делаем»

Либо наведите указатель мыши на первый блок, пока не появится значок + добавить блок, либо щелкните значок + добавить блок в левом верхнем углу. Любой вариант добавит новый блок под новый блок заголовка. Еще раз вы должны выбрать Stackable Design Library. На этот раз вы добавите Feature Grid. Нажмите на Feature и прокрутите вниз, пока не увидите Feature Grid Block / Heights feature 2 . Нажмите на это, чтобы перетащить его на свою страницу.

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

• Нажмите на текст заголовка в верхней части блока и измените его на Подробнее о том, что мы делаем или на любую другую формулировку.
• Измените текст описания под заголовком тем же способом. Вы также можете удалить элементы, если не собираетесь их использовать.
• Я удалил все кнопки в приведенном ниже примере, потому что это одностраничный веб-сайт, поэтому у нас нет других страниц, на которые мы могли бы ссылаться. Для этого я нажал рядом с каждой кнопкой и выбрал Удалить группу кнопок из опций. Важно щелкнуть рядом с кнопкой, а не на самой кнопке, если вы хотите это сделать.
• Чтобы добавить тень за каждым из разделов, щелкните вверху каждого столбца. Это показывает вам настройки для столбцов. В настройках Стиль перейдите к Границы контейнера и тень и переместите ползунок Тень/контур на 5.0174 Обновление.

Добавьте свой блок Meet the Team

Перед добавлением следующего блока мы добавим блок Spacer , чтобы оставить некоторое пространство между нашими блоками. Для этого нажмите кнопку + внизу страницы и введите Spacer в поле поиска. Выберите первый вариант. По умолчанию он вставляет 100 пикселей пространства, но вы можете изменить это значение на большее или меньшее в зависимости от ваших предпочтений. Здесь я добавил 50px пространства.

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

Для начала нажмите +, чтобы добавить новый блок, найдите блок Columns/Containers и выберите один столбец шириной 100.

Добавляет на страницу пустой контейнер. Вы добавите следующие блоки 90 174 внутри 90 175 этого контейнера, а не под ним. Взгляните на снимок экрана ниже. Вы можете увидеть разделитель в 50 пикселей, который мы добавили. Ниже этого синего прямоугольника показан контур контейнера, который мы только что добавили. Знак «плюс» внутри этого синего прямоугольника добавит еще один блок в контейнер. Знак «плюс» за пределами нижней части блока с правой стороны добавит еще один блок за пределами контейнера.

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

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

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

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

Для этого мы добавим еще один блок прямо под нашим заголовком. Нажмите на заголовок «Познакомьтесь с командой». Из вариантов, которые появляются выше, нажмите на три точки справа и выберите Вставить после . Это даст вам возможность добавить еще один блок в ваш контейнер. Нажмите на +, чтобы добавить блок в свой контейнер, и выберите другой блок Колонки/контейнеры . Установите для этого три столбца (или столько столбцов, сколько вам нужно).

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

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

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

Добавление раздела «Отзывы»

Добавьте еще один разделитель шириной 50 пикселей под блоком «Встреча с командой» (будьте осторожны и добавляйте его под блоком, а не внутри него). Нажмите +, чтобы добавить блок под разделителем. Откройте библиотеку дизайна Stackable, прокрутите вниз, чтобы просмотреть блоки Testimonial, и выберите Elevate Testimonial 1 .

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

Добавьте блок «Свяжитесь с нами»

Добавьте еще один разделительный блок под блоком отзывов, вставив отступ в 50 пикселей.

Откройте Stackable Design Library и просмотрите блоки Feature . Мы используем Elevate Feature 1 в качестве блока «Свяжитесь с нами», поэтому установите его на свою страницу. Используя тот же процесс, что и с предыдущими блоками, внесите следующие изменения:

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

Редактирование текста нижнего колонтитула

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

Для этого перейдите в меню Внешний вид в левой части страницы и выберите Настройка. Когда вы окажетесь в меню Настроить , прокрутите вниз, чтобы щелкнуть Нижний колонтитул Builder , а затем выберите Copyright . Здесь вы можете редактировать текст, который отображается в нижнем колонтитуле. Вы можете просто удалить информацию о теме из Раздела 1 и оставить уведомление об авторских правах без изменений, затем нажать Опубликовать , чтобы убедиться, что это изменение сохранено, а затем выйти из Настройка области .

Создание меню

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

Размещение якорей на вашей странице

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

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

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

• команда
• отзывы
• контакт

Убедитесь, что вы публикуете свои изменения по мере продвижения.

Создание вашего меню

Заключительный этап заключается в создании меню и ссылки на только что созданные якоря.

Перейдите в меню Внешний вид и выберите Меню .

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

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

• Раскрывающийся список Пользовательские ссылки слева
• В поле URL введите имя вашего первого якоря с решеткой перед ним, например. #about – здесь вы настраиваете вещь, которая будет связана с
• . В поле Текст ссылки введите слова, которые вы хотите отобразить в меню, например, О нас
• Нажмите Добавить в меню
• Повторите этот процесс для трех оставшихся якорных ссылок и добавьте каждую в меню
• Убедитесь, что вы отметили флажок в поле Настройки меню , который устанавливает местоположение отображения Главное меню
• Когда вы закончите это, убедитесь, что вы нажали Сохранить меню

Сделать меню липким

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

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

Следующие шаги

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