Landing page на joomla. Частина 2

19

Від автора: вітаю Вас, дорогий друже. У даному уроці ми з Вами продовжуємо створювати landing page на joomla 3. Нагадаю, що всі підготовчі роботи завершені, зняті з публікації зайві елементи, встановлений необхідний компонент і прямо зараз ми приступаємо до роботи над секціями майбутньої сторінки.

Отже, використовуючи пункт «SP Page Builder» головного меню, переходимо за посиланням Add new page» на сторінку створення нового елемента.

Landing page на joomla

Цю сторінку ми коротко розглядали на попередньому уроці, а значить нового поки, що ми нічого не бачимо, тому додамо заголовок майбутньої сторінки та натискаємо «Зберегти». Знову ж раніше я говорив, що компонент «SP Page Builder» при формуванні нових сторінок, створює їх як набір окремих секцій, або ж рядків. Відповідно в центрі ми якраз бачимо одну єдину секцію, а значить додамо в неї вміст із стандартних доповнень. Для цього клікаєм по посиланню «Addon».

Landing page на joomla

При цьому, у спливаючому вікні відкривається список доступних додатків, кожне з яких формує окремий вид контенту – слайдер, іконки, текстова інформація, модулі CMS, відео контент і ін. Для початку, на сторінці створимо секцію з сладером, а значить вибираємо додаток «Carusel».

Landing page на joomla

При цьому відкривається модальне вікно з налаштуваннями майбутньої каруселі зображень:

Admin Label – ідентифікатор створюваного елемента.

Autoplay – автоматичне відтворення слайд-шоу.

Show controllers – показувати на екран елемента управління слайдером.

Show navigate arrows – показувати стрілки, щоб перейти до наступного і попереднього слайда.

Carousel Background Color – колір заднього фону каруселі.

Font Color – колір шрифту тексту кожного слайда.

Content alignment – розташування тексту на зображенні.

CSS Class — додатковий клас CSS, який буде доданий до каруселі.

Після визначення параметрів, необхідно додати зображення в майбутнє слайд-шоу, використовуючи кнопку «Додати Рядок».

Landing page на joomla

При цьому до зображення Ви можете прив’язати заголовок, короткий текст – опис, а так само кнопку, натискання на яку перенаправляє користувача на вказаному шляху. Для додавання зображення, необхідно використовувати кнопку «Select Image».

Landing page на joomla

При цьому відкриється власний медіа менеджер конструктора контенту «SP Page Builder». Для додавання завантаження зображень на сервер, необхідно натиснути кнопку «Upload Image» і вибрати потрібну картинку. Далі досить зазначити необхідне зображення і клікнути по з’явилася кнопки «Insert».

Після формування слайд-шоу, натискаємо кнопку «Apply» і потім «Зберегти». Таким чином, ми визначили вміст першої секції. Тепер давайте подивимося на доступні налаштування панелі вмісту, або якщо сказати більш правильно колонки з контентом. Для цього клікаємо по кнопці «Options» біля посилання «Addon».

Landing page на joomla

Тобто повторюся – це налаштування відображення колонки з даними в певній секції (у нашому випадку доступна тільки одна колонка).

Background Color – колір фону.

Font Color – колір тексту.

Column Padding – внутрішній відступ.

Column Animation – анімація появи колонки.

Animation Тривалість – час виконання анімаційних ефектів.

Animation Delay – час затримки перед запуском анімації

CSS Class – додатковий CSS клас для колонки.

Після завершення налаштування, клікаємо по кнопці «Apply». Так само нам доступні настройки всієї секції, використовуючи спеціальну кнопку.

Landing page на joomla

Тут багато всіляких настройок і всі вони відповідають за оформлення окремої секції.

Landing page на joomla

Зараз я не буду всі їх коментувати, бо вони прості і швидше за все Вам зрозумілі, так як абсолютно аналогічні розглянутим.

Тепер давайте збережемо зміни і подивимося на результати нашої роботи. Для цього в якості головної сторінки виберемо тільки що створену, сторінку з розширення “SP Page Builder“.

Для цього перейдемо в менеджер меню і відредагуємо пункт «Головна». При цьому в полі «Тип меню виберемо вид «Page» компонента «SP Page Builder».

Landing page на joomla

Потім перейдемо до настроюваної частина і подивимося.

Landing page на joomla

Як Ви бачите слайдер успішно відображається на екрані і це перша секція landing page на joomla. Тепер давайте створимо наступну секцію. Для цього використовуємо кнопку «Додати Рядок», в розділі редагування раніше створеної нами сторінки.

Landing page на joomla

При цьому з’явиться порожня секція для якої ми можемо визначити контент, використовуючи доповнення. Але перед цим, давайте розділимо секцію на три колонки, використовуючи спеціальний елемент керування.

Landing page на joomla

А значить, для кожної колонки ми можемо визначити власний контент. У цьому випадку використовуємо додаток «Text Block», завдяки якому можна відобразити в секції текстову інформацію довільного вмісту. Неважко здогадатися, що для оформлення тексту надається стандартний візуальний редактор.

Landing page на joomla

Так само для даного доповнення передбачено величезна кількість налаштувань, завдяки яким можна красиво оформити текст кожної секції. При цьому не забувайте у налаштуваннях конкретної колонки, задавати анімацію для відображення її на екран, тим самим Ви додатково будете привертати увагу користувачів. Таким чином, для всіх трьох колонок, в якості вмісту я використовував додаток «TextBlock».

Landing page на joomla

Відповідно до користувальницької частині ми побачимо наступний результат.

Landing page на joomla

Тепер створимо чергову секцію і в якості доповнення виберемо «Divider», тобто роздільник – це ніщо інше, як проста горизонтальна риса, що розділяє секції.

Потім додамо ще одну секцію і сформуємо в ній дві колонки, причому перша трохи менше другий. У лівій, меншою колонці ми використовуємо два додатки: «Image» – яке відображає довільне зображення і «Button» – для виведення на екран кнопки.

Landing page на joomla

Тобто в одній колонці, Ви можете використовувати скільки завгодно доповнень. При цьому додаючи зображення в аддон «Image», я вказав додатковий CSS клас «for_border», для якого визначив деякі правила CSS, а саме вказав округлені рамки. Таким чином, у користувача частини ми побачимо наступний результат.

Landing page на joomla

На даному етапі landing page joomla 3 практично завершений, а значить давайте додамо дві останні секції.

Перша це традиційний роздільник, а друга, буде складатися з двох колонок. У лівій колонці, використовуючи додаток «Text Block», ми відобразимо на екран просту текстову інформацію – контакти компанії. А в правій, використовуючи аддон «Joomla Module», виведемо на екран вміст модуля CMS Joomla, під назвою «ContactUs».

Landing page на joomla

Цей модуль відображає на екрані форму зворотного зв’язку. Його я встановив окремо, опублікував, але позицію не поставив. При цьому використовуючи додаток «Joomla Module» в параметрі «Select Module» Ви можете вибрати один з опублікованих модулів Вашого сайту. Відповідно всі його вміст буде показано в певній колонці секції.

Таким чином у користувача частини ми побачимо наступне.

Landing page на joomla

Ось власне і все що я хотів розповісти Вам у цьому уроці. Тепер Ви з легкістю зможете створити свій прибутковий landing page на joomla.

Якщо Ви бажаєте вивчити принцип дії розширень Joomla і навчитися їх створювати самостійно, Вам буде корисний наш курс Joomla-Професіонал. Створення розширень для Joomla. Всього Вам доброго і вдалого кодування!!!