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

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

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

Удобната и интуитивна администрация на платформата, заедно с опцията Drag & drop Ви дават свободата да адаптирате всеки дизайн шаблон спрямо нуждите на Вашия сайт и спецификата на бизнеса Ви.

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

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

Вижте повече във видеото:

Отворете секция Елементи и кликнете върху произволен елемент. Нека например това бъде елементът параграф.

Отворете секция Елементи и кликнете върху произволен елемент

При издърпване на елемента към желаната позиция ще се откроят два вида линии (визуални маркери). Те ще Ви помогнат да се ориентирате къде точно ще се позиционира избрания елемент. Обърнете внимание, че едната е по-плътна от другата. Тя е „водещата” линия. Можете да я премествате на различни позиции в зависимост от Вашите представи.

различни позиции

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

елементът Параграф ще се подреди между графичния елемент и  заглавието

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

основната линия ще промени позицията си
основната линия ще промени позицията си

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

Премествайки курсора вляво или вдясно от даден елемент
Премествайки курсора вляво или вдясно от даден елемент

Ще Ви покажем как да добавите друг произволен елемент. Нека това бъде елементът Бутон.

елементът Бутон

Отново през секция Елементи и с помощта на опцията Drag & drop кликнете върху съответния елементи и го придърпайте до желаната позиция. Ще видите как мястото се маркира с помощта на основната, плътна линия и останалите помощни линии.

мястото се маркира с помощта на основната, плътна линия

Водещата линия ще Ви покаже къде ще попадне елементът Бутон. В този случай той ще се позиционира под конкретния параграф.

къде ще попадне елементът Бутон

Когато преместите курсора на мишката по-надолу, визуалната рамка ще изчезне и бутонът ще смени позицията си.

визуалната рамка ще изчезне
визуалната рамка ще изчезне

В случай че искате да позиционирате два елемента един до друг, кликнете върху секция Елементи и плъзнете избран елемент до съответната позиция в сайта.

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

изчакайте да се появи плътната черна линия
изчакайте да се появи плътната черна линия

Можете да повторите стъпките, ако искате да добавите трети елемент на същия ред.

трети елемент на същия ред
трети елемент на същия ред

Подредбата на изображения се случва по идентичен начин.

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

придърпайте изображението и го пуснете в работното поле.

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

хванете втори елемент от съответната секция
хванете втори елемент от съответната секция
хванете втори елемент от съответната секция

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

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

Обновена: 31.03.2022

Беше ли Ви полезна тази статия?

Вижте още