Корисник:Немањаис121/песак

Елементор

Тип	Приватно власништво
Основана	2016
Оснивач	Yони Луксенберг, Yакир Ситбон, Ариел Кликстеин
Седиште	Израел
Подручја	Глобално
Услуге	WордПресс плугин
Вебсајт	https://elementor.com/

Елементор је паге буилдер за израду wеб страница који омогућава корисницима да стварају квалитетне и цустом wеб сајтове без потребе за познавањем кодирања и програмирања. То је WордПресс додатак или плугин који користи технологију драг анд дроп, што значи да корисници могу једноставно превући и испустити елементе или wидгетс на страницу како би је дизајнирали и уредили. Елементор припада групи паге буилдера WYСИWYГ (Wхат Yоу Сее Ис Wхат Yоу Гет), што значи да можеш да видиш како ће изгледати страница на клијентској страни док је уживо правиш.

Оно што је велика предност Елементора јесте у томе што је ливе, ми уживо како превлачимо елементе или wидгетс можемо да видимо како изгледа наш сајт, не морамо као кад програмирамо или кодирамо да искуцамо код да сачувамо па да видимо како то изгледа. Елементор долази с многим напредним функцијама и алатима који Вам омогућавају да створите било коју врсту wеб сајта коју желите, укључујући блогове, wеб продавнице, портфолије и још много тога. Елементор такође долази с великим бројем готових дизајнова или темплатес. Елементор је убедљиво најпопуларнији wордПресс паге буилдер са преко 8.7 милиона активних инсталација у 2023 има четири ипо звездице од стране 6000 хиљада корисника..

Како ради елементор

Елементоров драг анд дроп систем је визуални алат који омогућава корисницима да стварају, уређују, креирају, мењају wеб странице једноставним повлачењем и испуштањем елемената на страницу. Ево како то изгледа:

Слика1) Како изгледа Елементорово развојно окрузење

1. Када се корисник пријави у Елементор, он ће бити дочекан са празном радном површином на коју ће моћи постављати елементе. На слици 1 можете видети како то изгледа.
2. С леве стране радне површине налазе се елементи које корисник може користити за обликовање странице. То укључује све од наслова, текстова и слика, до сложенијих елемената попут образаца за пријаву, цена, видеа, дугмета, иконице, мапе итд...
3. Када корисник пронађе жељени елемент, само га повуче мишем и испусти на жељену позицију на страници.
4. Након што је елемент додан, корисник може лако мијењати његов изглед и поставке, укључујући фонтове, боје, величине, позадине и још много тога.
5. Елементор такођер омогућава корисницима да креирају сложен распоред и изглед страница, тако што ће користити колоне и секције. Корисник само повлачи и испушта елементе у одговарајуће колоне и секције на страници.
6. Елементор омогућава и израду динамичких страница, попут блогова или архива, кориштењем динамичких wидгета и поставки. То значи да корисник може створити архиву блога или страницу категорије само једним кликом и једноставно их прилагодити.

Како направити сајт у Елементору

Оно што је веома битно при прављењу сајта у елементору јесте да се разуме шта су секције и колоне и елементи.

Секције није ништа друго него један контејнер или ти див(хтмл елемент) који се састоји од колона које су такође див-ови у коме обликујемо главне блокове на страници. Секције додајемо на плус знак и када кликнемо на плус појавиће нам се правоугаоник где можемо да изаберемо колико колона желимо. Ово је све сликовито приказано на слици 2. Колона је исто контејнер, елемент који се користе за организовање садржаја унутар секција. Колона је мања од секције и налази се унутар секције. Након што додамо сецкију битно је да одлучимо шта желимо у тој секцији уколико желимо текст превући ћемо елемент текста у колону и имаћемо текст унутар колоне док са леве стране можемо да едитујемо текст односно да му мењамо или додајемо цсс или да му мењамо контент. Код секција битно је напоменути да оне долазе са неких већ подешеним особинама као што су ширина маргина или размак од следећег елемента.

Како радити са секцијама?

Када додате секцију на радну површину секција ће бити уоквирена плавом бојом и на врху секције имаћете иконицу плуса, икса и 6 малих тачкица у облику правоугаоника. Кликом на плус излази вам поново опција где бирате какву секцију желите, да ли желите две колоне исти ширине три колоне итд... КЛиком на минус брише Вам се тренутна секција кликом на шест малих кружића постаје Вам активна секција пре које сте прешли курсором. Када означите секцију добићете са леве стране три картице лаyоут, стyле и адванцед.

Картица Лаyоут

У картици лаyоут имамо опцију да наместимо да секција буде фулл wидтх пошто је секција има подразумевану шрину из разлога да на већим екранима садржај секције не буде раширен, већ да има фиксну ширину. Онда имамо колики размак желимо да буде између колона, па колику висину желимо да има секција, вертикално поравнање и да ли желимо да променимо опцију оверфлоw. Након овога имамо да бирамо ког типа желимо да нам буде секција да ли ће то бити див, фоотер, хеадер, асиде или спан. На крају нам је остала структура да ли желимо вратимо структуру на подразумевано као кад смо је убацили или желимо да променимо да ли желимо нам однос колона буде 60:40 или 70:30.

Картица Стyле

Картица стyле се састоји од неколико делова. Први део се односи на позадину секције и можемо да подесимо да имамо на прелазак курсора другу боју. Ипод позадине имамо бацкгроунд оверлаy. Ова опција иако на неке тренутке може бити иста као и позадина или бацкгроунд има своје различитости. Разлика је томе што опција "Бацкгроунд" односи се на постављање позадинске слике, боје или градиента на одређени елемент или секцију. С друге стране, опција "Бацкгроунд Оверлаy" (прекривање позадине) омогућује вам додавање транспарентног слоја боје или градиента изнад позадинске слике или боје како бисте постигли ефект замагљивања или пригушивања. После овога имамо бордер где можемо подешавамо оквир наше секције као и сенку која ће наша секција имати. Схапе дивидер је опција после бордер-а ово је фунцкција у Елементору која вам омогућује додавање декоративних облика на крајеве секција. То су визуални елементи који се користе за стварање привлачног и модерног изгледа wеб странице. На крају имао типографију где корисник може да одлучи које боје ће типографија које величине ког поравнања итд...

Картица адванцед

Картица адванцед има подешавања за спацинг или маргин и паддинг. Такође можемо додавати класу секцију или ид то су цсс атрибути којима се може додавати одређена својства. Мотион еффецтс представља додавање анимација на сајт. Онда имамо респонсивност која се користи у ситуација када желимо да нешт прикријемо на мобилни или таблет или десктоп рачунарима или да променимо редослед. Атрибути и цустом цсс спадају под елементор про лиценцом нису доступни под бесплатном верзијом. Цустом цсс представља функцију где можемо да додајемо свој цсс, такође цсс се може додавати унутар теме. Цустом атрибути су додатни атрибути које можете додијелити ХТМЛ елементима како бисте пренијели додатне информације или прилагодили њихово понашање. На пример дата-таргет је један атрибут.

Како радити са колонама

Колона има исто три картице да би је селектовали и могли приступити њеним подешавањима требамо да када пређемо мишем преко колоне да кликнемо у горњем левом углу уконицу. Тако нам постаје доступне поново три картице лаyоут, стyле, адванцед. Све три картице имају скоро иста подешавања са неким малим разликама. Добра ствар код елементора јесте што све три ове картице су за скоро све елементе имају слична или мало другачија подешавања.

Картица Лаyоут

Картица лаyоут је веома слична има скоро иста подешавања као и код секције с тим да имамо ширину колоне имамо вертикално порванање, хоризонтално поравнање, спацинг или размак између колона у пx и да да ли желим да променим хтмл таг

Картица Стyле

Картица стyле има бацкгроунд, бацкгроунд оверлаy бордер и типографија сва опције су исте као код стyле секције

Картица Адванцед

Подешавања су иста као и код адванцед секције.

Како радити са унуташњих секцијама

Слика 2) Како изгледа радити са унутрашњом секцијом у елементору

Ово је јако коришћен елемент у изради wеб страница разлика у односу на обичну секцију је у томе што обична секција служи као контејнер за елементе и не може се даље подешавати или организовати на више нивоа, док код унутрашње секција је могуће стварање унутрашњих секција унутар већ постојећих секција или колона. То значи да можете креирати сложене распореде елемената и организовати их на више слојева. Унутар Иннер Сецтион елемента, можете примењивати различите стилове, поставке позадине, маргине, паддинг, границе итд... на нивоу сваке унутрашње секције. Кроз Иннер Сецтион елемент можете поставити различите поставке као што су позадина, маргине, паддинг, границе и слично. Можете прилагодити изглед сваке унутрашње секције према вашим потребама, чиме стварате богате и сложене веб странице. Унутар Иннер Сецтион елемента, можете додавати друге Елементор модуле као што су текст, слике, видео записи, форме, дугмад и многе друге. Ово вам пружа могућност да унутар унутрашње секције креирате комплексне распореде елемената и постигнете жељени дизајн.

Такође, Иннер Сецтион елемент је веома користан за прилагођавање респонсивности ваше веб странице. Можете поставити различите подешавања за сваку унутрашњу секцију у зависности од величине екрана, што омогућава да се ваша страница правилно приказује на различитим уређајима и резолуцијама. На слици 2 можете видети како то изгледа.

Како радити са цонтаинерс

Контејнери представљу нов начин прављења wеб сајтова компликованији у односу на коришћење секција и колона, али предност је у томе што има много мање кода. Оно што је потребно за прављење сајтова у контејнерима јесте познавање цсс флеx-а.

Флеxбоx контејнери користе моћ ЦСС флексбокса како би убрзали изградњу веб сајтова, пружајући вам већу слободу да тачно креирате жељени дизајн. Контејнери такође омогућавају побољшано учитавање страница и већу контролу респонсивности, то се постиже омогућавањем могућности мењања ширине, висине и редоследа сваког елемента како би се најбоље испунио доступан простор контејнера. Контејнери имају исто три картице као и секције и колоне, с тим да се нека подешавања разликују. Врло је битно знати да контејнер јесте само омотач или див који има својство флеx.

Картица Лаyоут

У картици лаyоут имамо опцију да изаберемо да ли желимо да нам цонтент буде одређене ширине или ти боxед или желимо да нам буде фулл wидтх да заузима целу ширину. Испод ширине имамо функцију колико желимо да нам буде висина контејнера у неким мерама као што су пx или вх(виеwпорт хеигхт). Након овога имамо функцију итемс, ово је уједно и најважнија опција. Прва опција коју имамо јесте дирецтион. Дирецтион значи да ли желимо да нам итемс буду у реду у колони или обрнутом реду или обрнутој колони. Након тога имамо јустифy-цонтент. Јустифy-цонтент је ЦСС својство које се користи у флеxбоx-у за контролисање позиције флексибилних елемената дуж главне осе њиховог контејнера. Одређује расподелу простора између и око флексибилних елемената. Укратко ово својство нам даје могућност да контролишемо расподелу или позицију елемената који су деца контајнера. Јустифy-цонтент одређује хоризонталну или вертикалну позицију елмената. У зависности да ли је цсс својство флеx-дирецтион подешено на роw или цолумн. Уколико је флеx-дирецтион подешено на роw онда помоћу јустифy-цонтент контролишемо хоризонтално позиционирање елемената уколико је подешено на цолумн онда контролишемо вертикално позиционирање елемената. Постоје неколико вредности које се могу користити са јустифy-цонтент које директно одређују позицију елемената:

• флеx-старт: Ова вредност поравнава флексибилне елементе на почетку контејнера
• флеx-енд: Поравнава флексибилне елементе на крају контејнера
• центер: Хоризонтално центрирање флексибилних елемената унутар контејнера
• спаце-бетwеен: Равномерно распоређује флексибилне елементе дуж главне осе, са првим елементом поравнатим на почетку, а последњим елементом поравнатим на крају
• спаце-ароунд: Равномерно распоређује флексибилне елементе дуж главне осе, са једнаким простором пре, између и после елемената
• спаце-евенлy: Слично као спаце-ароунд, равномерно распоређује флексибилне елементе дуж главне осе, али са једнаким простором пре првог елемента и после последњег елемента
• стретцх: Ова вредност растеже флексибилне елементе да попуне цео контејнер дуж главне осе

Испод јустифy-цонтент функције имамо фунцкију алигн-итемс која ради сличну ствар као јустифy-цонтент с тим да је разлика у томе што алигн-итемс ради на вертикално поравнању ако је флеx-дирецтион својство постављено на роw, а ако је постављено на цолумн онда ради хоризонтално поравнавање. Код алигн-итемс имамо неколико вредности:

• флеx-старт - Поравнање елемената на почетку контејнера
• флеx-енд - Поравнање елемената на крају контејнера
• центер - Централно поравнање елемената
• баселине - Поравнање елемената на основу њихове базне линије
• стретцх - Растезање елемената како би попунили висину контејнера

Након јустифy-цонтент и алигн-итемс имамо гап који представља размак између елемената по подразумеваној вредности то је 20пx. На крају имамо wрап опцију. Wрап је ЦСС својство које се користи у флеxбоx-у како би се одредило да ли ће флексибилни елементи прелазити у нови ред или ће остати у истом реду унутар свог контејнера. Wрап има две основне вредности:

• ноwрап (подразумевана вредност): Када је овај вредност постављена, флексибилни елементи ће остати у истом реду и могу се преклопити уколико је контејнер премален да их све прикаже.
• wрап: Када је ова вредност постављена, флексибилни елементи ће се преломити у нови ред када достигну крај контејнера. Такође, сваки ред флексибилних елемената ће се аутоматски прилагодити ширини контејнера, омогућавајући им да се прикажу исправно.

Wрап се често користи када се ради са флексибилним елементима који имају различите ширине или када је потребно да се омогући респонзивност и прилагођавање елемената на различитим величинама екрана. Након овога имамо још и додатне опције, а то су опције оверфлоw и да изаберемо тип хтмл елемента.

Картица стyле

Картица стyле има иста подешавања као и секција, а то укључује позадину позадински оверлаy, оквир и схапе дивидер.

Картица адванцед

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

Алигн-селф је ЦСС својство које се користи у флеxбоx-у да би се појединачно контролисало вертикално поравнање појединачног флексибилног елемента унутар контејнера. То омогућава флексибилном елементу да се постави другачије од остатка елемената у контејнеру. Вредности које се могу користити са алигн-селф су: флеx-старт, флеx-енд, центер, баселине и стретцх. На пример, постављање алигн-селф на флеx-старт ће поравнати појединачни елемент на почетак контејнера, без обзира на остатак елемената.

Ордер је својство које се користи у флеxбоx-у за промену редоследа приказа флексибилних елемената унутар контејнера. Подразумевани редослед елемената је одређен њиховим распоредом у ХТМЛ коду. Коришћењем ордер својства, можете променити тај редослед без мењаја ХТМЛ структуре. Сваки флексибилни елемент има своју вредност за ордер, која може бити позитивна, негативна или нула. Мања вредност за ордер ће преместити елемент према почетку контејнера, док ће већа вредност преместити елемент према крају контејнера. Ово својство је корисно када је потребно прилагодити редослед приказа елемената на основу различитих распореда екрана или прилагођавања садржаја. Може се користити за стварање респонсивних распореда и побољшање корисничког искуства на различитим уређајима.

I за крај имамо сизе код сизе имамо пар опција ноне да не ставимо ништа имамо гроw, схинк, цустом.

Гроw (раст) у ЦСС флексбоксу се користи за дефинисање како ће се флексибилни елементи ширити и попуњавати расположиви простор на главној оси контејнера. Вредност гроw одређује колико ће сваки елемент да расте у односу на остале. Подразумевана вредност је "0", што значи да елемент неће расти и задржаће своју почетну ширину. Ако свим елементима поставите вредност 1, сви ће подједнако расти и заузети једнаку ширину. Ако, на пример, једном елементу поставите 2, а осталим елементима 1, тај елемент ће расти брже и заузети више простора на оси у односу на остале.

Схринк (скупљање) у ЦСС флексбоксу се користи за дефинисање како ће се флексибилни елементи смањивати и прилагођавати расположиви простор на главној оси контејнера. Вредност схринк одређује колико ће сваки елемент да се смањује у односу на остале. Подразумевана вредност је "1", што значи да ће се елементи смањивати подједнако да би стали у расположиви простор. Ако свим елементима поставите вредност "0", они се неће смањивати и задржаће своју почетну ширину. Ако, на пример, једном елементу поставите већу вредност "2", а осталим елементима "1", тај елемент ће се мање смањивати у односу на остале када дође до ограничења простора.

Цустом означава да сами правимо и прилагођавамо нашим потребама.

Предности контејнера

• Већа слобода у креирању дизајна

Додавањем подконтејнера унутар родитељског контејнера, имаћете бољу контролу над смером, поравнањем, редоследом, дужином и постављањем виџета у Елементору. Додатна погодност је што вам није потребно додавати додатне секције или колоне.

• Флексибилан дизајн сајта

Са контејнером имамо могућност да променимо редослед елемената веб странице, чиме их чините лакшим за прилагођавање различитим величинама екрана. Користећи контејнере, можете осигурати да се елементи ваше странице прикажу у правилном редоследу без обзира на величину екрана - резултирајући у много бољем корисничком искуству.

• Боља брзина учитавања wеб странице

Контејнери побољшавају перформансе веб страница јер садрже само један омотачни елемент: контејнер. Ово се разликује од секција и колона које имају два омотачна елемента. Додавање контејнера смањује величину ДОМ. Овако смањен објектни оквир може, ако се правилно имплементира, побољшати перформансе веб странице.

Кликом на знак плус добијамо могућност да изаберемо цонтаинер који желимо да желимо са две колоне или само са једном колоном или са три колоне... Оно што је исто као и код секција и колона јесте селектовање преласком мишом преко цонтаинер-а кликнемо на 6 тачкица и селектовали смо цонтаинер и приступили смо његовим подешавањима.

Предности и мане

Предности

Елементор има доста предности неке су горе већ поменуте, али овде на једном месту можете видети скори па све:

• Пажња према детаљима

У већини случајева, тешко је пронаћи програмере који имају педантну пажњу према детаљима. Чак и фронт-енд програмери често се фокусирају на функционалност, а запостављају ситне детаље дизајна, што у многим случајевима доводи до тога да изграђена верзија дизајна буде доста различита од самог дизајна или не задовољава критеријуме које је очекивао дизајнер. Елементор и други слично моћни алати омогућавају дизајнерима да сами изграде оно што дизајнирају, а дизајнери обично имају много већи фокус на овим ситнијим детаљима, што резултира много квалитетнијим финалним производом (барем у погледу усклађивања с дизајном). Ово такође убрзава било какве итерације дизајна и олакшава измене садржаја на дизајну током целог процеса.

• Лако прављење респонсиве сајта

Респонсивност је постала кључна за успех свих сајтова. Данас, ако ваш сајт није респонсиван и прилагођен мобилним уређајима, не можете очекивати да ће добро позиционирати на веб претраживачима или да ће посетиоци сајта задржати на сајту уколико није респонсиве-ан сајт. Елементор вам омогућава да креирате респонсиван wеб дизајн и прегледате своје странице на различитим екранима како бисте били сигурни да савршено функционише на свим уређајима.

• Једноставно за употребу

Са Елементором, свако може креирати сајт чак и без знања о изградњи сајтова и професионалном кодирању. Можете прилагођавати своје странице онако како желите и креирати комплексне дизајне користећи овај алат. Штавише, Елементор има много готових шаблона и дизајнова који су доступни, па ако не желите да трошите пуно времена на креирање сопственог дизајна, можете користити њихове готове шаблоне и мало их прилагодити како би ваш сајт био јединствен.

• Приступачност

Елементор постоји у две верзије фрее и про верзију. Про верзија садржи на десети више елемената и доста могућности у односу на фрее верзију. Иако је фрее верзија има доста мање елемената него про верзију још увке се може направити доста добар сајт који ће задовољити ваше потребе

• Заједница

Корисници су веома брзо препознали квалитет Елементора и тако је брзо почела да се шири заједница која је правила велики број додатака који су надокнађивали неке мане Елементора. Предност у заједници је у томе што уколико имате проблем веома лако можете оћи до особе која је имала исти проблем или која зна решење за тај проблем.

Мане

Као што сваки алат има мане тако и елементор има мане, а ово су неке од њих:

• Спора брзина сајта

Приликом креирања сајта елементор генерише доста непотребног кода у односу на конкуренцију, који може доста успорити wеб сајт. Да би се могли правити лако wеб сајтови елементор прави доста непотребног хтмл, цсс, јавасцрипт кода који касније wеб броwсер-у треба време да учита цео сајт. Спорије учитавање сајта доводи до проблема лошег корисничког искуства као и до лошијег позиционирања на wеб претраживачима или сео.

• Креирање комплекснијих сајтова

Још једна мана јесте када желимо да направимо нешто што елементор нам не нуди онда смо приморани да програмирамо или кодирамо. Међутим ту долази до проблема неко не зна да програмира па се одлучи да скине неки додатан плугин, али то може бити проблем јер уколико користимо велики број плугин-ова тада успоравамо сајт или уколико желимо да програмирамо тада морамо да познајемо сам паге буилдер како би тај код био што ефикаснији.

Историја

Елементор је основан 2016. године од стране Yони Луксенберг-а и Ариел Кликстеин-а. Ево неких прекретница у њиховом развоју:

• 1 милион веб сајтова направљених са Елементор-ом: 5. јула 2018.
• 2 милиона веб сајтова направљених са Елементор-ом: 18. фебруара 2019.
• 3 милиона веб сајтова направљених са Елементор-ом: 14. августа 2019.
• 4 милиона веб сајтова направљених са Елементор-ом: 29. јануара 2020.
• 5 милиона веб сајтова направљених са Елементор-ом: 12. маја 2020.
• 8.7 милиона веб сајтова направљених са Елементор-ом: 21. јануара 2023.

Елементор је објавио бесплатну верзију свог додатка 3.4.2 и плаћену верзију Елементор Про 3.3.7 у августу 2021.

У мају 2019. године, Елементор тим је званично објавио своју тему "Хелло" на WордПресс.орг платформи. Хелло тема је минималистички оквир за теме, специјално дизајниран за употребу са Елементор-ом.