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

Первую часть создания простого сайта для фирмы, бизнеса вы найдете здесь – “Создаем простой сайт фирмы, бизнеса на wordpress (часть 1)”.

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

5. Создадим страничку с перечнем оказываемых услуг:

В первой части мы установили и активировали плагин – Column Shortcodes, который добавил в “Редакторе Страниц” новую кнопочку, помогающую создавать колонки – давайте же создадим новую страничку, используя эту кнопку:

И ещё установим для данной странички – Шаблон без боковой колонки – для этого в блоке “Свойства страницы”, в параметре “Шаблон” выберем “Шаблон без боковой колонки”:

Продолжим, при создании колонок, будем использовать вот эти шорткоды, которые делят страницу на 2-е колонки:

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

Для данного примера, создадим следующий дизайн: в одной колонке будет находится картинка, а во второй текст.

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

В итоге у меня получился следующий код странички (закладка “Текст”):

[one_half padding="40px 0 0 0"]
<img class="alignnone size-medium wp-image-33" src="https://mnogoblog.ru/wp-content/uploads/2017/08/auto11.png" alt="" width="300" height="166" />
[/one_half]

[one_half_last padding="40px 0 0 40px"]
<h1>Бесплатный выезд и осмотр автомобиля!</h1>
Осмотр и выезд на место абсолютно бесплатно.
Мы сами приедем и оценим ваш автомобиль.
[/one_half_last]

[one_half padding="40px 0 0 0"]
<h1>Срочный выкуп авто целых и проблемных!</h1>
Мы выкупаем целые полностью исправные автомобили и проблемные.
[/one_half]

[one_half_last padding="40px 0 0 40px"]
<img class="alignnone size-medium wp-image-34" src="https://mnogoblog.ru/wp-content/uploads/2017/08/auto21.png" alt="" width="300" height="166" />
[/one_half_last]

[one_half padding="40px 0 0 0"]
<img class="alignnone size-medium wp-image-35" src="https://mnogoblog.ru/wp-content/uploads/2017/08/auto31.png" alt="" width="300" height="166" />
[/one_half]

[one_half_last padding="40px 0 0 40px"]
<h1>Покупка авто после ДТП!</h1>
Мы выкупаем автомобили после ДТП.
[/one_half_last]

Визуально страничка будет выглядеть так:

6. Создадим страничку с Контактной формой.

Давайте создадим ещё одну страничку – “Связаться с нами” и блоке “Свойства странички” также выберем “Шаблон без боковой колонки”:

Опубликуем страничку, после вставим в неё шорткод Контактной формы.

В первой части мы установили и активировали плагин – Contact Form 7 – после чего в админке wordpress у нас появился новый пункт “Contact Form 7”, кликаем по нему и выбираем подпункт “Добавить новую”:

Здесь во вкладке “Шаблон формы” вставляем следующий код:

<label> Ваше имя (обязательно)
    1 </label>

<label> Ваш номер телефона (обязательно)
    [tel* tel-707] </label>

<label> Марка, модель и год выпуска:
    1 </label>

<label> Опишите состояние автомобиля:
    [textarea your-message] </label>

Загрузите фото автомобиля:
<label> Загрузите Фото1:[file file-550]</label>
<label> Загрузите Фото2:[file file-551]</label>
<label> Загрузите Фото3:[file file-552]</label>

<label>Укажите цену вашего авто (руб):
[number number-223 max:5000000]
</label>

[submit "Отправить"]

То есть здесь наш клиент заполняет все данные о своем авто и может загрузить до 3 фото.

Далее переходим во вкладку “Письмо”:

Здесь мы можем скопировать шорткод для вставки на страничку, также нам необходимо указать почту, на которую будет отправляться заполненная форма – нужно указать @gmail.com почту, так как на другие письма могут вообще не прейти.

И заполняем оставшиеся параметры следующим образом:

Код поля “Тело Письма”:

От: [your-name] <[tel-707]>
Тема: Автовыкуп с сайта

Марка, модель и год выпуска:[text-342]

Опишите состояние автомобиля:
[your-message]

Цена(руб): [number-223]

-- 
Это сообщение отправлено с сайта Автовыкуп ()

Код поля “Прикреплённые файлы”:

[file-550][file-551][file-552]

Далее жмем кнопку “Сохранить” справа вверху.

Теперь осталось вставить Шорткод формы на Страничку “Связаться с нами”:

Теперь заходим на сайт, на страничку “Связаться с нами” и видим результат:

Чтобы выровнять форму по центру можно в Редакторе Страницы “Связаться с нами”, во вкладке “Текст” прописать так:

<div style="text-align: center;">
[contact-form-7 id="52" title="Отправьте заявку"]
</div>

7. Настроим тему Twenty Twelve

Если есть время можно настроить тему Twenty Twelve более тщательно, например: как удалить ссылку в подвале темы, как закруглить углы и установить фон – можно прочитать в моих предыдущих статьях:

А о том как удалить Название Страниц с помощью плагина читайте в моей предыдущей статье здесь – Как удалить название страницы, записи, вижета.

На этом всё, красивых вам сайтов!