Оформление сайта

 

Настроить внешний вид     Добавить фавикон     Добавить горизонтальное меню     Добавить вертикальное меню     Добавить логотип    Добавить иконки социальных сетей   Добавить форму регистрации

 

Очередной шаг в вашей работе привёл вас на  третий этап создания проекта. 

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

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

  Мы разберёмся как всё это делается.  Будем «наводить красоту» с помощью настроек выбранной вами темы. В разделе настроек присутствуют практически все основные функции для оформления. Вы прошли уже целых два этапа и уверена кое-какие навыки по работе с редактором сумели получить.

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

 

Как это сделать смотрите здесь

Настроить внешний вид

Через админпанель нужно перейти на вкладку с настройками.mybabki.ru  Перед вами откроется страница с основными настройками, где вы сможете оформить свой проект на свой вкус и цвет.

mybabki.ru

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

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

Добавить фавикон

  Что такое фавикон — это мини-логотип вашего сайта или блога. Этот значок располагается перед названием страницы в адресной строке браузера,  а также  везде, где фигурирует название этой страницы и добавляет узнаваемость вашему проекту .                                                                                                    mybabki.ru  Это может быть изображение или же начальная буква вашей фирмы, блога или имени автора, но естественно оно должно соответствовать направлению, тематике вашего проекта. Вполне можно использовать совокупность букв, главное, чтобы они не выглядели как размытое или сливающееся пятно. Его вид должен вас выделять и делать индивидуальным среди множества сайтов. 

    Ширина и высота сторон фавикона должны быть одинаковыми, проще говоря он должен быть квадратным. Стандартными размерами фавикона считались размеры 16х16рх и 32х32рх, а стандартный формат — .ico. Но технологии не стоят на месте и современные браузеры начали распознавать формат .png и немного больший размер изображения для них стал не критичен. Лишь бы он не сказался на качестве отображения при сжатии его браузером до нужного размера. И всё же по моему мнению лучше всего подойдёт 32х32рх.

    Так вот, в любом редакторе создайте изображение с таким размером, назовите favicon и выберите формат .png или .ico. Загрузите в библиотеку файлов через админпанель. Затем в настройках внешнего вида найдите вкладку «Значок сайта» или «Свойства сайта» и добавьте туда иконку. mybabki.ru

  Всё! Фавикон появится в адресной строке напротив страницы, как и положено ему быть.mybabki.ru

  Кстати, фавиконы можно создавать и онлайн в генераторах. Не вижу смысла перечислять их, потому что много. Достаточно в поисковик вбить фразу «фавикон создать онлайн» и вам будет предоставлена куча генераторов фавиконов, выбирай — не хочу.

Добавить горизонтальное меню

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

 Благодаря уже знакомым вам настройкам с добавлением меню тоже проблем не возникнет. В них уже имеется и эта функция.mybabki.ru

mybabki.ru  Вам останется только вставить названия страниц.  У меня стоят произвольные названия, вы же вставьте свои с помощью кнопки «Добавить»mybabki.ru   Теперь нужно настроить расположение вашего меню: над шапкой, под ней или в подвале сайта. Это делается во вкладке «Настройки меню».mybabki.ru

mybabki.ru

Не забывайте сохранять настройки.

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

  Чаще всего вертикальное меню располагают справа или слева от контента. И в этом вам помогут виджеты. Перейдите в настройки виджетов на любой странице кроме главной.mybabki.ru

  Выберите левый или правый сайдбар, зависит от вашей задумки.mybabki.ru

   Добавьте виджет «Меню навигации».

  В заголовок напишите название верхнего меню. Если не делали верхнее, то создайте здесь новое. В выпадающем списке выберите своё меню.

mybabki.ru Вот что в итоге получилось.

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

Добавить логотип

 Логотип — это фирменный знак вашего бренда, фирмы, товара, компании или личного блога. Он более значим, чем фавикон, потому что является как бы вашим личным штампом. 

 Логотип может быть и квадратным и прямоугольным, это роли не играет, но не очень большим. Примерный размер используемого изображения 250х100рх. Вы можете создать его самостоятельно в каком-либо редакторе или сгенерировать онлайн, как и фавикон. Изображение делается в формате .png и на прозрачном фоне. И желательно на всех ваших работах сохранять постоянный его размер.

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

mybabki.ru Добавим изображение. Создайте и загрузите его в библиотеку файлов, а потом на сайт, и оно появится в шапке вашего сайта.

mybabki.ru

Добавить иконки социальных сетей

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

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

mybabki.ru

  В админке создайте виджет html-код в подходящем для вас месте на своём проекте

mybabki.ru

и вставьте туда код скрипта, скопированный с яндекса.

mybabki.ruИ пожалуйста, вот вам значки соц сетей готовы.

mybabki.ru

Быстро и удобно. Распологать виджет вы можете где вам удобнее.

Добавить форму регистрации

  Вполне возможно, что в дальнейшем вам понадобится форма регистрации на сайт. Её мы создадим с помощью уже установленного у нас плагина Profile Builder. Нужно просто правильно его настроить. Этим сейчас и займёмся. 

Создайте новую страницу, обзовите «Регистрация». Вставьте на место текста шорткод wppb-register в квадратных скобках, опубликуйте.

mybabki.ru

  Теперь переходите в админ панель WordPress. В боковом меню найдите «Profile Builder»-«Form Fields«, откроется страница, где вы можете редактировать поля регистрации. Например, удалить лишнее, отредактировать и заменить названия полей на свой язык, а можете оставить как есть, смотрите сами.

mybabki.ru

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

  Код кнопки мы поместим в виджет html-код, такой же, как для иконок, который разместим на страницах нашего проекта. 

mybabki.ru

 Теперь скопируйте вот этот код, только адрес сайта (там где красным выделено) поменяйте на свой, а wppb-login заключите в квадратные скобки:                                         

wppb-login <a href="https://mysite/%d1%80%d0%b5%d0%b3%d0%b8%d1%81%d1%82%d1%80%d0%b0%d1%86%d0%b8%d1%8f/"><input type="submit" value="Регистрация" onclick="this.disabled=true; this.form.submit(); return false;"></a>

 mybabki.ru

Результат должен получиться такой:

mybabki.ru

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

 

 

 

 

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