Как за один час оформить главную страницу сайта

Однажды надоело мне смотреть на голую главную страницу с текстовыми ссылками на разделы сайта. А если мне самому не нравится, значит найдутся еще посетители, которые скажут «Фи…» и закроют окно.

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

Дизайн главной страницы

Итак засекаем время и приступаем.

Шаг 1. Находим подходящие картинки.

Иду в youtube.com, через поиск нахожу подходящее видео в HD качестве и при помощи «ножниц Windows 7» или программы PicPick вырезаю нужные картинки.

Шаг 2. Превращаем картинки в кругляшки.

Есть хороший онлайн-сервис для скругления картинок, который еще работает по адресу https://www.awesome.com.ru/.

awesome сервис скругления изображений

Загружаю картинку, выбираю форму скругления, скачиваю. Получается картинка в формате PNG с прозрачными краями.

Круглое изображение

Далее в программе Microsoft Office Picture Manager изменяю размер изображений до 300х300 px или 500х500 px.

Всё, изображения готовы к загрузке на сайт.

Шаг 3. Настройка WordPress

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

Настройка в wordpress главной страницы

Шаг 4. Готовим сетку для упорядочивания картинок

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

Пару кликов

Пару кликов и «резиновая» табличка готова.

1
2
3
4
5
[symple_column size="one-third" position="first" fade_in="false"]1[/symple_column]
 
[symple_column size="one-third" position="middle" fade_in="false"]2[/symple_column]
 
[symple_column size="one-third" position="last" fade_in="false"]3[/symple_column]
kalkulator-karkas-300
skolko-stoit-300
krasota-dom-300

Шаг 5. Переносим картинки и ссылки в блоки

Осталось копипастом вставить ссылки, загрузить картинки, и главная страница сайта готова.

Дизайн главной страницы

Я управился за сорок минут. А вы знаете более быстрый способ?


Шкала интереса
93%

Рассылка новостей сайта vashshop.com

Реклама

Реклама