ગેલેરી બ્લોકનો ઉપયોગ કરો.

પ્રતિલિપિ

પ્રસ્તાવના

આ પાઠમાં, આપણે જાણીશું કે આપણે તમારી સાઇટ પર આકર્ષક કન્ટેન્ટ બનાવવા માટે ગેલેરી બ્લોકનો ઉપયોગ કેવી રીતે કરી શકો છો તે શીખીશું. ગેલેરી બ્લોક તમને સરળતાથી અનેક ફોટા ઉમેરવાની અને તેમને આપમેળે એક ગેલેરીમાં ગોઠવવાની મંજૂરી આપે છે, જે તેને પોર્ટફોલિયો, પ્રોડક્ટની તસવીરો, કે ફોટો સંગ્રહ પ્રદર્શિત કરવા માટે એકદમ પરફેક્ટ બનાવે છે.

ગેલેરી બ્લોક ઉમેરવો અને તેનો ઉપયોગ કરવો

સૌથી સરસ વાત એ છે કે તમે તમારા કમ્પ્યુટર પરથી ફક્ત છબીઓના સમૂહને સીધા ડ્રેગ એન્ડ ડ્રોપ કરી શકો છો, અને તે આપમેળે ગેલેરી બ્લોકમાં ઉમેરાઈ જશે. અથવા તમે ‘/Gallery’ ટાઇપ કરીને બ્લોક ઉમેરી શકો છો. એકવાર બ્લોક ઉમેરાઈ જાય પછી, તમે તમારા કમ્પ્યુટર કે મીડિયા લાઇબ્રેરીમાંથી કોઈ તસવીર અપલોડ કરી શકો છો. એક જરૂરી વાતનું ધ્યાન રાખો: હંમેશા યાદ રાખો કે તસવીરોમાં હંમેશા ઓલ્ટ ટેક્સ્ટ ઉમેરો. ઓલ્ટ ટેક્સ્ટ એ તસવીરનું સંક્ષિપ્ત વર્ણન છે જે સ્ક્રીન રીડરનો ઉપયોગ કરતા લોકોને એ સમજવામાં મદદ કરે છે કે તસવીરમાં શું છે, અને તે સર્ચ એન્જિનોને તસવીરને વધુ સારી રીતે શોધવા અને રેન્ક કરવામાં પણ મદદ કરે છે. તો, હવે આપણે આપણી મીડિયા લાઇબ્રેરીમાંથી ૫ તસવીરો પસંદ કરીશું અને પછી એક નવી ગેલેરી બનાવીશું. તસવીરો ઉમેરાઈ જાય પછી, આપણે પેરન્ટ બ્લોકને પસંદ કરીશું, અને જ્યારે આપણે સેટિંગ્સમાં જઈશું, તો આપણે જોઈશું કે આપણે કોલમની સંખ્યા બદલી શકીએ છીએ. તેની નીચે, તમને તમારી તસવીરોનું રિઝોલ્યુશન અપડેટ કરવાનો વિકલ્પ મળશે. આ કિસ્સામાં, આપણે તેને ફુલ સાઇઝ પર અપડેટ કરીશું. ધ્યાનમાં લેવા જેવી બીજી વાત એ છે કે ‘ક્રોપ ઇમેજીસ ટુ ફીટ’નો વિકલ્પ ડિફૉલ્ટ રૂપે ચાલુ હોય છે. આ વિકલ્પ ત્યારે ઉપયોગી છે જ્યારે તમારી પાસે વિવિધ માપ અને આકારની તસવીરો હોય. તેમને ક્રોપ કરવાથી ગેલેરીની દરેક હરોળમાં આવેલી તસવીરો એક જ માપની થઈ જશે. તમને કઈ રીત વધુ પસંદ છે તે જોવા માટે તમે આ વિકલ્પને ચાલુ અને બંધ કરી શકો છો, જેથી તમે તમને ગમે તેવી ગોઠવણી જોઈ શકો.

સ્ટાઇલ્સ

જ્યારે આપણે સ્ટાઇલ્સ પર જઈએ છીએ, ત્યારે આપણે ગેલેરી બ્લોકનો બેકગ્રાઉન્ડ કલર અપડેટ કરી શકીએ છીએ, અને ડાયમેન્શન્સની નીચે, આપણે ઇમેજ બ્લોક્સ વચ્ચેની બ્લોક સ્પેસિંગને બદલી શકીએ છીએ. આપણે વિવિધ બ્લોક્સ વચ્ચે હોરિઝોન્ટલ સ્પેસિંગની સાથે સાથે વર્ટિકલ સ્પેસિંગ પણ ઉમેરી શકીએ છીએ. જ્યારે તમે ૩ વર્ટિકલ ડોટ્સ પર ક્લિક કરશો, ત્યારે તમે પેડિંગ અને માર્જિન ઉમેરી શકશો. ડાયમેન્શન્સની નીચે, તમે તમારા ગેલેરી બ્લોકમાં બોર્ડર કે રેડિયસ પણ ઉમેરી શકો છો. હવે જ્યારે આપણે કેટલાક વિકલ્પો જોઈ લીધા છે, તો ચાલો કેટલાક ફેરફારો કરીએ. સૌથી પહેલા, આપણે સેટિંગ્સ પર પાછા જઈશું અને પછી કોલમની સંખ્યા બદલીને ૫ કરી દઈશું. પછી આપણે સ્ટાઇલ્સ પર પાછા જઈને વર્ટિકલ બ્લોક સ્પેસિંગને ૦ કરીશું. ત્યારબાદ, બ્લોકનું અલાઇનમેન્ટ બદલીને ફુલ વિડ્થ કરી દો. અહીં એ જણાવવું પણ જરૂરી છે કે ગેલેરી બ્લોક રિસ્પોન્સિવ હોય છે.

લાઇટબોક્સ

આગળ, હું તમને બતાવવા માંગુ છું કે તમે તમારી વર્ડપ્રેસ સાઇટ પર લાઇટબોક્સ કેવી રીતે ઉમેરી શકો છો. લાઇટબોક્સ એક શાનદાર ફીચર છે જે તસવીરો, વીડિયો કે ગેલેરીને તે જ પેજ પર એક સુંદર ઓવરલેમાં ખોલવાની સુવિધા આપે છે, જેમ કે તમે આ ઉદાહરણોમાં જોઈ શકો છો. ચાલો એક એવું ઉદાહરણ જોઈએ જ્યાં લાઇટબોક્સ ઉમેરવામાં આવ્યો નથી. જ્યારે તમે કોઈ તસવીર પર ક્લિક કરો છો, ત્યારે કંઈ થતું નથી. લાઇટબોક્સ ઉમેરવા માટે આપણે સાઇટ એડિટર પર જવું પડશે. તો, આપણે સૌથી ઉપર ‘એડિટ સાઇટ’ પર ક્લિક કરીશું, પછી સ્ટાઇલ્સ પર જઈશું અને સ્ટાઇલ બુક ખોલવા માટે આંખવાળા આઇકન પર ક્લિક કરીશું. મીડિયા પર જઈને ઇમેજ બ્લોકને પસંદ કરો. પછી, સાઇડબારમાં, સેટિંગ્સની નીચે, આપણે ‘ક્લિક કરવા પર એક્સપાન્ડ કરો’ વિકલ્પને ચાલુ કરી શકીએ છીએ. સેવ કર્યા પછી, આપણે તેને ફ્રન્ટ એન્ડ પર ચકાસી શકીએ છીએ. હવે, જ્યારે તમે કોઈ તસવીર પર ક્લિક કરો છો, ત્યારે તે એક ઓવરલે તરીકે ખુલે છે.

પેટર્નને કસ્ટમાઇઝ કરવું

આગલા ઉદાહરણમાં, હું કોલમની સંખ્યા બદલીને ૨ કરીશ, અને પછી ગેલેરી બ્લોકની અંદરના બધા ઇમેજ બ્લોક્સને એકસાથે સિલેક્ટ કરીશું. ત્યારબાદ, આપણે એક જ વારમાં દરેક ઇમેજ બ્લોકનો રેડિયસ બદલી શકીએ છીએ. ચાલો આપણે વધુ એક ઉદાહરણ જોઈએ. આ વખતે, હું ગેલેરી બ્લોકનો બેકગ્રાઉન્ડ કલર બદલીને કાળો કરીશ, ગેલેરી બ્લોકની અંદરની તસવીરોની આસપાસ થોડું પેડિંગ કે સ્પેસ ઉમેરું છું, અને પછી આપણે બધી તસવીરોને એકસાથે સિલેક્ટ કરીને એક ક્લિકમાં ૧૦ પિક્સેલની સફેદ બોર્ડર ઉમેરું છું.

ઉદાહરણ

અંતમાં, ચાલો આપણે કેટલાક વધુ ઉપલબ્ધ વિકલ્પો પર નજર કરીએ. સૌથી પહેલા, તમે તમારા ગેલેરી બ્લોકમાં એક લિંક અને સાથે સાથે એક કેપ્શન પણ ઉમેરી શકો છો. જ્યારે તમે ગેલેરી બ્લોકની અંદર કોઈ ઇમેજ બ્લોકને સિલેક્ટ કરો છો, ત્યારે તમે બ્લોકને નવી જગ્યાએ ખસેડવા માટે નાના એરો કે મૂવર્સનો ઉપયોગ કરી શકો છો. કોઈ તસવીરને સિલેક્ટ કરવા પર, તમે તમારી મીડિયા લાઇબ્રેરી કે કમ્પ્યુટરમાંથી નવી તસવીર પસંદ કરવા માટે બ્લોક ટૂલબારમાં ‘રિપ્લેસ’ પર ક્લિક કરી શકો છો. અને જ્યારે તમે ગેલેરી બ્લોકને સિલેક્ટ કરો છો, ત્યારે તમે તમારી ગેલેરીમાં વધુ તસવીરો ઉમેરવા માટે બ્લોક ટૂલબારમાં ‘એડ’ પર ક્લિક કરી શકો છો. જ્યારે તમે ૩ વર્ટિકલ ડોટ્સ પર ક્લિક કરો છો, ત્યારે તમે જોશો કે ત્યાં બ્લોકને રીનેમ કરવાનો અને સાથે સાથે પેટર્ન બનાવવાનો પણ વિકલ્પ જોવા મળશે.

નિષ્કર્ષ

ગેલેરી બ્લોકનો ઉપયોગ કરીને આકર્ષક ડિઝાઇન બનાવવા માટે શુભેચ્છાઓ.

પ્રેક્ટિકલ

તમે જે કંઈ શીખ્યા છો, તેને પરખવા માટે વર્ડપ્રેસ પ્લેગ્રાઉન્ડનો ઉપયોગ કરો.

સ્ટેપ ૧: સ્ટાઇલ બુકમાં લાઇટબોક્સ ફંક્શનાલિટીને ઇનેબલ કરો.

સ્ટેપ ૨: હાથીની આ ૫ મફત ઇમેજને ડાઉનલોડ કરો: https://unsplash.com/s/photos/elephants?license=free

સ્ટેપ ૩: ગેલેરી બ્લોક અને ૫ ઇમેજ ઉમેરો. તમારા અર્જિત જ્ઞાનનો ઉપયોગ કરીને નીચે આપેલા ત્રણ ઉદાહરણોને ફરીથી બનાવો.

ઉદાહરણ ૧

• ત્રણ કોલમ
• અલાઇનમેન્ટ: કોઈ નહીં

ઉદાહરણ ૨ (સ્ક્રીનશોટ)

• એક કોલમ
• અલાઇનમેન્ટ: વાઇડ વિડ્થ
• બ્લોક સ્પેસિંગ: ૦

ઉદાહરણ ૩ (આ સ્ક્રીનશોટ મોબાઇલ વ્યૂનો છે.)

• બે કોલમ
• અલાઇનમેન્ટ: ફુલ વિડ્થ
• વર્ટિકલ અને હોરિઝોન્ટલ પેડિંગ: XS
• વર્ટિકલ અને હોરિઝોન્ટલ બ્લોક સ્પેસિંગ: XS
• દરેક ઇમેજ બ્લોકને ૫૦ પિક્સેલનો રેડિયસ આપવામાં આવ્યો છે.