1. Начало
  2. Сайт билдър
  3. Как да оформим мобилната версия на сайта си? [Видео]

Как да оформим мобилната версия на сайта си? [Видео]

Визията на един уебсайт е от голямо значение независимо от вида на устройството, през което се достъпва. Още повече, че през март 2021 наличието на мобилна версия се превръща в основен фактор за класиране при търсене в Google и е задължителна за всички сайтове. Затова стилизирането на сайта Ви за всякакъв изглед следва да е сред водещите приоритети, още докато работите по неговото изграждане.

Хубавата новина е, че всички шаблони в Сайт билдър имат адаптивен (responsive) дизайн, който изглежда еднакво добре както за десктоп, така и за таблет, и за мобилно устройство. Когато обаче започнете да извършвате промени по избрания шаблон и го персонализирате спрямо нуждите на Вашия бизнес, е нужно да приспособите всеки един от новите елементи в сайта спрямо различните размери на екрана. 

Добре е да знаете, че всички корекции, които правите в администрацията на сайта, ще бъдат приложени автоматично и в мобилната версия, освен ако не извършите допълнителни настройки по видимостта им. Ако направите промени по мобилната версия, те ще отразят само там и няма да бъдат видими на десктоп.

А как се случва това? Нека видим!

Блоковете и елементите в шаблоните на Сайт билдър могат да се адаптират за всякакъв тип устройство. Можете да се убедите в това, като разгледате настройките на всеки отделен компонент и кликнете върху опцията Видимост. Там ще откриете възможност за контрол на видимостта спрямо устройството, от което ще се достъпва сайтът. Можете да изберете кои отметки да активирате – Десктоп, Мобилно устройство или и двете. За да запазите новите настройки, кликнете върху бутона Запазване.

настройки
Видимостта на всеки блок и елемент може да бъде персонализирана спрямо устройството, от което ще се достъпва сайтът. Кликнете върху опцията Настройки.
Изберете бутона Видимост, за да продължите с желаните промени.
Изберете бутона Видимост, за да продължите с желаните промени.
Следващата стъпка е да кликнете върху опцията Устройство.
Следващата стъпка е да кликнете върху опцията Устройство.
Добавете отметка върху устройството, за което желаете да се визуализира съответният блок/елемент.
Добавете отметка върху устройството, за което желаете да се визуализира съответният блок/елемент.

Благодарение на опцията за видимост можете да скриете определени блокове или елементи за мобилно устройство, но да ги оставите видими за десктоп, или обратно. 

Вижте: Как да позиционираме елементите в сайта си?

Редакция на разстоянията между блокове и елементи

Сайт билдър предлага лесен и удобен начин за управление на разстоянията между блоковете и елементите в сайта. Ето как можете да го направите в няколко стъпки:

  1. Влезте в таблото за управление в администрацията на сайта си.
  2. Изберете секция Дизайн.
  3. Кликнете върху третия таб, озаглавен Дизайн.
  4. Редактирайте от полето вдясно:
  • Разстояние между блокове в мобилна версия;
  • Разстояние между колони в мобилна версия;
  • Разстояние между елементи в мобилна версия.
Влезте в таблото за управление на сайта и изберете секция Дизайн.
Влезте в таблото за управление на сайта и изберете секция Дизайн.
Кликнете върху третия таб, озаглавен Дизайн, и разгледайте възможностите за редакция на мобилната версия.
Кликнете върху третия таб, озаглавен Дизайн, и разгледайте възможностите за редакция на мобилната версия.

Дублиране на блокове и елементи за мобилна версия

Можете да персонализирате всеки блок или елемент, като оформите неговата визия спрямо различните устройства, от които ще се достъпва сайтът. Най-бързият и лесен начин за това е чрез дублирането на един и същи компонент. Ето и стъпките, които ще Ви помогнат да го направите:

  1. За да копирате цял един блок, използвайте клавиша Ctrl или Command и едновременно с това плъзнете курсора на мишката до мястото, на което искате да позиционирате съответния блок.
  2. Щом дублирате съдържанието на блока, сменете настройките за видимост на оригиналния блок, като го направите видим само за десктоп. 
  3. Преминете към редакция на мобилната версия, като натиснете върху иконата с монитора, позиционирана в долния ляв ъгъл в администрацията. Кликнете върху опцията Мобилен.
  4. Започнете да правите промените по версията за мобилно устройство, като отново влезете в настройките на блоковете и елементите и смените видимостта.
Дублирането на блок/елемент се получава чрез клавиша Ctrl или Command и изтеглянето на курсора на мишката до позицията, на която искате да го поставите.
Дублирането на блок/елемент се получава чрез клавиша Ctrl или Command и изтеглянето на курсора на мишката до позицията, на която искате да го поставите.
За да редактирате изгледа за мобилно устройство, натиснете върху иконката с монитора в долния ляв ъгъл в навигацията. Изберете опцията Мобилен.
За да редактирате изгледа за мобилно устройство, натиснете върху иконката с монитора в долния ляв ъгъл в навигацията. Изберете опцията Мобилен.
Щом стигнете до тази стъпка, можете да започнете редакцията на блоковете и елементите, като промените видимостта им за различните устройства.
Щом стигнете до тази стъпка, можете да започнете редакцията на блоковете и елементите, като промените видимостта им за различните устройства.

По аналогичен начин можете да променяте видимостта и на елементите, налични в избрания от Вас шаблон. 

Ако срещнете затруднение на някоя от стъпките, можете да разчитате на нашия екип за съдействие. С удоволствие ще Ви помогнем да превърнете Вашия сайт в модерна и атрактивна онлайн дестинация за Вашите посетители.

Обновена: 31.03.2022
Беше ли Ви полезна тази статия?

Вижте още