WordPress #2: Дизајн на веб страницата [туторијал]

Во претходниот туторијал детално го опишавме процесот на инсталација на WordPress, а во овој туторијал ќе продолжиме таму каде што застанавме. Односно ќе ja дизајнираме веб страницата, која ќе биде наменета за новости од технологијата.

Чекор 1: Кликнуваме на насловот, за да го видиме моменталниот изглед на веб-страницата

Моменталниот изглед на страницата е како на сликата подолу:

Овој дизајн се должи на тема автоматски одбрана од самиот WordPress, при инсталацијата.

Чекор 2: Менување на генералните информации на страницата

Од менито избираме Settings->General

Тука ги променивме генералните информации како наслов, URL, ознаката, временската зона, форматот на дата.

Чекор 3: Инсталирање на тема

Од менито избираме Appearance->Themes->Add New, потоа пребаруваме “blog”. Можеме да изберете тема по наш вкус. Откако ќе избереме, потребно е да ја инсталираме, а потоа да ја активираме. Ние во овој туторијал ќе ја избереме темата AI Blog Lite.

Откако ја инсталиравме и активиравме темата, веб-страницата изгледа како на сликата подолу:

Чекор 4: Додавање на категории

Од менито избираме Posts->Categories и додаваме неколку нови категории.

Чекор 5: Додавање на објави

Од менито избираме Posts->Add new

По додадени три објави, веб-страницата изгледа како на сликата подолу:

Чекор 6: Инсталирање плагин

Ќе го инсталираме можеби најпознатиот и најкористениот плагин Elementor. Од менито избираме Plugins->Add New

Со помош на овој плагин ќе ги креираме страните “За нас” и “Контакт“.

Elementor, како плагин нуди многу опции и функционалности, како што се додавање на текст, слики, видеа, икони, колони, раздвојувачи и што уште не. Ние нема да навлегуваме во многу детали, бидејќи креираме едноставна веб-страница. Со помош на опциите од плагинот, ја креиравме странта “За нас“, а дополнително ќе напишеме дополнителен CSS за насловот “За нас” да биде центриран на средина, наместо на лево.

За да напишете дополнителен CSS, од почетното мени избираме Appearance->Customize, потоа одиме на странта “За нас”. Со помош на Inspect, ја дознаваме класата во која се наоѓа насловот и во делот Additional CSS пишуваме код. Повеќе информации околу додавање на CSS на следниов линк.

За да ја креираме страната Контакт, ќе ни биде потребен уште еден плагин, бидејќи за да ја искористиме опцијата за форми на плагинот Elementor, потребна е претплата. Бесплатен плагин кој нуди многу опции за форми е плагинот Contact Form Plugin. Инсталирањето и активирањето се врши на ист начин како претходниот плагин.

Следно, од менито избираме Fluent Forms->Forms или Fluent Form->New Form, и креираме форма за нашите потреби.

Оваа форма ја вметнуваме преку плагинот Elementor на нашата страница.

Со ова го завршивме креирањето на едноставна WordPress страница. Веб-страницата се состои од три страни

  • Почетна – каде се објавуваат новостите
  • За нас – информативна страна, за тоа кој стои позади веб-страницата
  • Контакт – страна наменета за контакт за соработка или дополнителна информација

За крај да напоменеме дека со сите теми и плагини кои што ги нуди WordPress, може да се креира многу покомплексна веб-страница за секоја потреба и намена.


Оваа содржина е изработена во рамките на проектот “Употреба на новинарство засновано на факти за подигање на свеста и спротивставување на дезинформациите во медиумскиот простор во Северна Македонија (Користи факти)”, финансиран од Владата на Обединетото Кралство, со поддршка на Британската амбасада во Скопје. Мислењата и ставовите наведени на оваа веб-страница не ги одразуваат секогаш мислењата и ставовите на Британската Влада.

 

Стани премиум член и доби пристап до сите содржини, специјален попуст на над 2.200 производи во ИТ маркет, верификуван профил и можност за огласување на ИТ Огласник. Плус ќе го поддржиш медиумот кој го градиме цели 16 години!

basic

членство

42 ден./мес

зачлени се

1337

членство

125 ден./мес

зачлени се
* плаќањето е на годишно ниво

Доколку веќе имаш премиум членство, најави се тука.

Добивај известувања
Извести ме за
guest
0 Коментари
Најнови
Најстари Со највеќе гласови
Inline Feedbacks
View all comments