Ինչպես ստեղծել պատկերի ոլորման էֆեկտ Elementor-ում

Պատկերի ոլորման էֆեկտ ստեղծելու միջոց է պետք Elementor ? Այս հոդվածում մենք ձեզ կառաջնորդենք ստեղծել պատկերի ոլորման էֆեկտ՝ օգտագործելով Elementor-ը ձեր վեբ էջերում:

Պատկերի ոլորման էֆեկտը թույլ կտա բացահայտել ամբողջական պատկերը, երբ օգտատերը սավառնում է պատկերների վրա: Երբ այցելում եք կայք, որը վաճառում է կայքի ձևանմուշներ, կարող եք տեսնել կաղապարների ամբողջական նախադիտումը պատկերի ոլորման էֆեկտի առանձնահատկություններով:

Այս հնարավորություններով դուք կարող եք հեշտությամբ ցույց տալ ձեր օգտատերերին կայքի ամբողջական տեսքը փոքր տարածքում: Սովորաբար, եթե ցանկանում եք ցուցադրել կայքի ամբողջական պատկերը, այն շատ տեղ կզբաղեցնի ձեր վեբ էջերում: Ավելին, դա ազդում է ձեր կայքի դիզայնի վրա:

Բայց նկարի ոլորման էֆեկտով դուք կարող եք ավելի շատ նկարներ ավելացնել գրավիչ ձևով, որը հեշտությամբ կարող է գրավել հանդիսատեսի ուշադրությունը:

Ստեղծեք պատկերի ոլորման էֆեկտ Elementor-ում

Elementor-ը չի տրամադրում վիջեթ՝ պատկերի ոլորման էֆեկտ ավելացնելու համար: Այսպիսով, դուք պետք է ավելացնեք էֆեկտը՝ օգտագործելով մաքսային CSS: Հատուկ CSS գործառույթը հասանելի է միայն Elementor Pro. Այսպիսով, համոզվեք, որ դուք կատարելագործվել եք Elementor Pro.

Այժմ բացեք էջ Elementor խմբագրիչով և սեղմեք գումարած պատկերակը բաժին ավելացնելու համար:

Այժմ դուք պետք է ընտրեք սյունակը ձեր բաժնի համար: Այստեղ մենք ընտրում ենք մեկ սյունակ բաժինը:

ստեղծել պատկերի ոլորման էֆեկտ Elementor-ում

Այժմ սեղմեք բաժնի խմբագրման պատկերակը և դասավորության ներդիրում սահմանեք նվազագույն բարձրությունը 500:

Այժմ բլոկի վիդջեթից ավելացրեք ներքին հատվածի բլոկը ձեր ստեղծված հատվածին և հեռացրեք լռելյայն սյունակը: Աջ սեղմեք սյունակի խմբագրման պատկերակի վրա և սեղմեք ջնջել տարբերակը՝ հիմնական սյունակը ջնջելու համար:

Կրկին անցեք ներքին հատվածի խմբագրման տարբերակը և դասավորության ներդիրում սահմանեք նվազագույն բարձրությունը 500-ի, ինչպես մենք ավելի վաղ ցույց տվեցինք:

Այժմ անցեք ներքին հատվածի ոճի ներդիրին և ֆոնը դասական դրեք ֆոնային տարբերակից: Հաջորդը, դուք պետք է ավելացնեք ձեր ֆոնային պատկերը: Պատկերի դիրքի տարբերակից սահմանեք պատկերի դիրքը ըստ Top Center. Կրկնվող տարբերակից սահմանեք տարբերակը չկրկնվել և չափը նման է ծածկել.

Այժմ անցեք ներդիրին առաջադեմ հարմարեցված CSS ավելացնելու համար: Պատվերով CSS դաշտում ավելացրեք հետևյալ կոդը.

ընտրիչ{ -webkit-transition. ease-in-out 3s !կարեւոր; անցում. հեշտ մուտք 3s !կարևոր է; } selector:hover{ background-position: center bottom !important; }

Պատկերների ոլորման էֆեկտը փոխելու համար կարող եք փոխել անցումային արժեքը: Եթե ցանկանում եք ավելացնել մի քանի պատկերներ նույն էֆեկտով, կարող եք կրկնօրինակել սյունակը և այնուհետև փոխել ֆոնի պատկերը:

Եզրափակում

Հետևելով գործընթացին՝ դուք կկարողանաք ձեր վեբ կայքի վրա ավելացնել պատկերի ոլորման էֆեկտ՝ օգտագործելով էջի ստեղծողը Elementor. Դուք կարող եք ծանոթանալ մեր մյուս հոդվածներին՝ սովորելու համար.

Հուսով ենք, որ այս հոդվածը օգտակար կլինի ձեզ համար: Եթե Ձեզ դուր է գալիս այս հոդվածը, խնդրում ենք հավանել մեր ֆեյսբուքյան էջը՝ կապի մեջ մնալու համար: