Как построить веб-сайт с WP Page Builder Плагин

(Это авторами поста.) WordPress страницы строители являются первым выбором для создания идеального веб-сайта без какой-либо помощи со стороны разработчика. И новый на рынке, что мы собираемся проверить в этой статье. Это WP Page Builder. Мы узнаем, как использовать этот плагин строителя страниц для создания веб-сайта.

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

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

Давайте пройдем через процесс создания реального веб-сайта с помощью плагина WP Page Builder. Мы создам веб-сайт из нескольких простых страниц, связанных с вымышленным Rockhedge Park. Мы узнаем о плагине от установки до запуска веб-сайта.

Наши цели:

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

Давайте начнем с пустой WordPress веб-сайт, с двадцатьсемнадцать тема установлена.

a blank WordPress website, with the Twenty Seventeen theme installed
(Большой предварительный просмотр)

Установка плагина

WP Page Builder является бесплатным, и вы можете скачать его с веб-сайта Themeum. Это также легко установить через WordPress ‘панель админ, а потому, что плагин является новым, вам придется прокрутить вниз список, чтобы найти его.

Ищите один с прохладной синий «P» значок с квадратом внутри.

gif showing how to download WP Page Builder from Themeum’s website
(Большой предварительный просмотр)

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

After installing the WP Page Builder, you will notice a new item in the menu within the admin area.

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

the plugin does not take over the whole admin panel
(Большой предварительный просмотр)

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

After clicking the button, you are taken to a new screen where the page builder really makes an appearance.
(Большой предварительный просмотр)

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

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

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

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

Помимо этих мелочей, мне нравится этот редактор. Давайте приступим к настройке нашей первой страницы!

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

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

By default, you can put the content created with WP Page Builder in one spot, where standard content would appear.
(Большой предварительный просмотр)

Вероятно, именно поэтому плагин поставляется в комплекте с шаблоном страницы под названием WP Page Builder Template. Он распространяет содержимое, построемое по всей странице, и используются только заголовок и колонтитул темы.

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

WP Page Builder spreads the content you build across the whole page, and only the header and footer of the theme are used.
(Большой предварительный просмотр)

Итак, тема установлена, страница строитель установлен, и страница подготовлена. Что мы будем делать дальше? Я уверен, что вы были в таком положении при использовании страницы строителей раньше; вы просто не знаете, что делать со страницей. Вы даже не знаете, что вы можете сделать со страницей. Это стандартная проблема «пустого холста».

Тем не менее, я обнаружил, что-то называется «Layouts» в боковой панели плагина. И то, как это работает, произвело на меня впечатление.

Планы страниц

Макеты страниц являются полными страницами, готовыми к импорту на вашем веб-сайте WordPress. Звучит круто, не так ли? Посмотрите на это:

a quick preview of page layouts that are ready to be imported into your template
(Большой предварительный просмотр)

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

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

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

Составление главной страницы

Моя первоначальная идея для главной страницы было несколько изображений парка и некоторые особенности выделены.

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

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

Я начал с большой раздел изображения прямо под заголовком, с фиксированным фоном и общим названием.

The template has a big image section just beneath the header, with a fixed background and a generic title
(Большой предварительный просмотр)

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

Одна вещь, мне нравится, как вы можете настроить обивка аддона жить на экране:

WP Page Builder lets you adjust the addon’s padding live on the screen
(Большой предварительный просмотр)

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

a quick preview of page layouts that are ready to be imported into your template
(Большой предварительный просмотр)

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

A call-to-action block with very simple content
(Большой предварительный просмотр)

Et вуаля! Процесс создания страницы был очень прост, и мне понравилось.

Создание страницы «Найди нас»

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

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

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

Пользовательские Google Карта Аддон

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

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

Вот как выглядит наш класс:

class JakubMikita_Addon_GoogleMap{

    public function get_name(){
        return 'jakubmikita_googlemap_block';
    }
    public function get_title(){
        return 'Google Map';
    }
    public function get_icon() {
        return 'wppb-font-location-map';
    }

    // Google Map block Settings Fields
    public function get_settings() {

        $settings = array(
            'apikey' => array(
                'type' => 'text',
                'title' => __('Google Maps API key','wp-pagebuilder'),
            ),
            'place' => array(
                'type' => 'text',
                'title' => __('Map place','wp-pagebuilder'),
            ),
            'height' => array(
                'type' => 'number',
                'title' => 'Height',
                'unit' => array( 'px','em','%' ),
                'responsive' => true,
                'std' => array(
                    'md' => '500px',
                    'sm' => '500px',
                    'xs' => '500px',
                ),
                'tab' => 'style',
                'selector' => '{{SELECTOR}} iframe { height: {{data.height}}; }',
            ),
        );
        return $settings;
    }

    // Google Map Render HTML
    public function render($data = null){
        $settings       = $data['settings'];
        $apikey         = isset($settings['apikey']) ? $settings['apikey'] : false;
        $place          = isset($settings['place']) ? $settings['place'] : false;

        $output = '';
        return $output;
    }

    // Google Map Template
    public function getTemplate(){
        $output = '';
        return $output;
    }

}

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

Следующий get_settings() метод, где мы определяем все пользовательские входы. Мы определяем их как массив; Я просто посмотрел на другие аддоны, чтобы выяснить поля я могу добавить. Довольно просто и легко реализовать.

Я понял, что следующий метод, render() используется на передней части. Он получает все настройки пользователя и возвращает картошную карту iframe.

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

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

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

add_filter('wppb_available_addons', function( $addons) {
    $addons[] = 'JakubMikita_Addon_GoogleMap';
    return $addons;
} );

Это всё. Процесс быстрый и простой. Вот наш пользовательский аддон:

A gif showing a full-page map on the template

Теперь у нас есть огромная карта на полной странице на этой странице.

Создание страницы «Контакт с нами»

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

Удивительно, но когда я уронил аддон на страницу, я увидел все поля, которые я хотел уже настроены и выровнены красиво.

The “Form” addon lets you easily create a Contact Us page
(Большой предварительный просмотр)

Самое интересное, что WP Page Builder интегрируется с контактной формой 7 и weForms плагинов. Вы даже можете добавить простой CAPTCHA или использовать ReCAPTCHA Google после предоставления ключей веб-сайта.

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

Сводка

Я должен сказать, что WP Page Builder является твердым плагин. Очевидно, что он имеет некоторые недостатки, но это все еще молодой продукт, и я уверен, что Themeum будет исправить все ошибки и реализовать улучшения, упомянутые в этой статье.

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

Тема права: Создание страницы с плагином просто, но не потому, что плагин является основным. Плагин интуитивно понятен, но упакован с прохладной аддоны.

Я использовал только несколько аддонов, но плагин поставляется с гораздо больше. Блоки, которые обычно тратят часы, пытаясь понять, как реализовать, являются перетаскиванием при использовании плагина WP Page Builder.

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

Источник: smashingmagazine.com

Великолепный Журнал

Великолепный, сокрушительный, разящий (см. перевод smashing) независимый журнал о веб-разработке. Основан в 2006 году в Германии. Имеет няшный дизайн и кучу крутых авторов, которых читают 2 млн человек в месяц.

Добавить комментарий

%d такие блоггеры, как: