افزونه Divi Builder و ساخت صفحات زیبا در وردپرس
ویرایشگر وردپرس در بسیاری موارد عالی عمل می کند اما برای ساخت صفحات فرود (Landing page) کارایی خوبی ندارد. بنابراین اگر می خواهید یک صفحه فرود جذاب و پر بازدید در وردپرس بسازید، به ابزار دیگری نیاز خواهید داشت. در این مقاله به شما نشان دهم که چگونه می توانید یک صفحه فرود محصول با افزونه Divi Builder بسازید.
Divi Builder توسط شرکتی به نام Elegant themes ساخته شده است. Elegant themes یکی از فروشگاه های پیشرو در زمینه طراحی قالب وردپرس است و قالب محبوب Divi ساخت این شرکت می باشد. شما با استفاده از افزونه Divi Builder می توانید بدون اینکه قالب خود را به Divi تغییر دهید، از صفحه سازی بسیار مشابه صفحه ساز قالب Divi استفاده کنید.
افزونه Divi Builder که یکی از بهترین افزونه های صفحه ساز وردپرس است، به شما امکان می دهد یک ویرایشگر محتوای بصری و قدرتمند را به هر وب سایت وردپرسی صرف نظر از قالبی که استفاده می کند، اضافه کنید.
این افزونه دارای مزایای دیگری نیز هست که برخی از آنها عبارتند از:
- با تمام قالب های وردپرس کار می کند.
- دارای ماژول های بسیار زیادی است که به شما امکان اضافه کردن بلوک های محتوا مانند لیست ویژگی ها، فرم ها و بسیاری دیگر را می دهد.
- تمام طراح بندی هایی که افزونه Divi Builder ایجاد می کند، رسپانسیو است و در دستگاه های موبایل و تبلت به خوبی دیده می شود.
در این مقاله افزونه Divi Builder را مورد بررسی قرار داده و نحوه ساخت یک صفحه با این افزونه را توضیح می دهیم.
آموزش افزونه Divi Builder و ساخت صفحات حرفه ای در وردپرس
Divi Builder یک افزونه پرمیوم وردپرس است بنابراین باید ابتدا آن را خریداری کنید. سپس مانند هر افزونه دیگری آن را در سایت خود در بخش افزونه ها نصب کنید. اگر منو افزونه را ندیدید یا اطلاعات جزئی تری لازم دارید، به راهنمای گام به گام ما در مورد آموزش نصب افزونه وردپرس مراجعه کنید.
بعد از اینکه افزونه نصب شد آن را فعال کنید. پس از فعال سازی افزونه یک نوشته یا برگه جدید بسازید یا یکی از نوشته ها یا برگه های سایت وردپرسی خود را به حالت ویرایش باز کنید. برای این کار در پیشخوان وردپرس به مسیر نوشته ها » افزودن جدید (برگه ها » افزودن جدید) بروید. صفحه ای مشابه شکل زیر مشاهده می کنید.
این صفحه مربوط به ویرایشگر گوتنبرگ وردپرس است که ویرایشگر پیش فرض وردپرس می باشد.
قبل از اینکه نحوه ساخت صفحات در افزونه Divi Builder را آموزش دهیم، توضیح مختصری درباره قالب های صفحه ارائه می کنیم.
قالب صفحه چیزی است که طرح بندی اولیه صفحه را تعریف می کند. در حقیقت محدوده ای است که Divi Builder در اختیار دارد تا صفحه را طرح بندی کند.
اگر می خواهید به Divi Builder این امکان را بدهید که تمام صفحه را بدون اینکه نوار کناری قالب شما مانع آن شود، استایل دهی کند باید به ترتیب زیر عمل کنید.
روی آیکون D در بالای صفحه سمت چپ کلیک کنید. باکسی مشابه شکل زیر به شما نشان داده می شود.
برای استفاده از تمام عرض صفحه نشانگر را تا انتهای نوار ببرید.
بعد از اینکه قالب صفحه را انتخاب کردید، روی دکمه “ذخیره پیش نویس” کلیک کنید. انجام این کار برای اینکه Divi Builder از عرض مورد نظر شما استفاده کند، لازم است.
توجه داشته باشید که این ویژگی ممکن است در بعضی قالب ها کار نکند.
Divi Builder به شما امکان می دهد صفحات را به دو روش مختلف بسازید:
- سازنده بک اند- با استفاده از این سازنده می توانید صفحات خود را با بلوک های انتزاعی ایجاد کنید که بخش هایی از محتوا را نشان می دهند.
- سازنده بصری – با استفاده از این سازنده می توانید صفحات خود را با همان نمایشی ایجاد کنید که بازدید کنندگانتان آنها را مشاهده می کنند.
هر دو رابط به شما امکان می دهند دقیقاً همان نوع وب سایت ها را با همان عناصر محتوا و تنظیمات طراحی ایجاد کنید. تنها تفاوت در رابط کاربری است.
Back-end Builder یا سازنده بک اند، در پیشخوان وردپرس موجود است و با سایر تنظیمات استاندارد وردپرس قابل دسترسی است و جایگزین ویرایشگر نوشته استاندارد وردپرس می شود. این سازنده برای ایجاد تغییرات سریع در حالی که در پیشخوان وردپرس قرار دارید، بسیار عالی است. اما از طرف دیگر توسط پیشخوان محدود می شود و شما نمی توانید تغییرات سایت خود را به صورت زنده مشاهده کنید. برای مشاهده تغییرات باید روی دکمه پیش نمایش کلیک کنید.
Visual Builder یا سازنده بصری، به شما امکان می دهد صفحات را در فرانت اند وب سایت خود بسازید. این سازنده، طراحی بسیار سریع تری را فراهم می کند. وقتی محتوا را اضافه می کنید یا تنظیمات طراحی را در سازنده بصری تنظیم می کنید، تغییرات شما فوراً ظاهر می شوند. شما می توانید بر روی صفحه کلیک کرده و شروع به تایپ کردن کنید. می توانید متن را هایلایت کرده و فونت و استایل آن را تنظیم کنید. می توانید محتوای جدید اضافه کنید، صفحه خود را بسازید و همه تغییرات را درست مقابل چشمان خود ببینید.
در حالی که می توانید از هر دو سازنده Divi Builder برای ایجاد صفحات استفاده کنید، اما سازنده بصری برای بیشتر کاربران تعاملی تر است ، بنابراین در این مقاله نحوه ساخت یک صفحه با سازنده بصری راآموزش خواهیم داد.
برای راه اندازی سازنده بصری افزونه Divi Builder روی دکمه Use Divi Builder کلیک کنید.
اگر نمی خواهید تور آموزشی افزونه Divi Builder را ببینید، آن را ببندید. صفحه ای مشابه شکل زیر به شما نشان داده می شود.
- سه گزینه در این صفحه نشان داده شده است. با انتخاب گزینه اول Clone existing page، می توانید طراحی صفحه را با کپی کردن صفحه دیگری که قبلاً ساخته اید، آغاز کنید.
- با انتخاب گزینه دوم، Choose a premade layout، می توانید از بین صدها طرح بندی از پیش تعریف شده Divi Builder استفاده کنید یا طراحی خود را با یکی از طرح بندی های ذخیره شده خود شروع کنید.
- با انتخاب گزینه سوم، Build from scratch، می توانید صفحه خود را از ابتدا بسازید.
گزینه سوم را انتخاب می کنیم تا طرح بندی صفحه را از ابتدا شروع کنیم. صفحه ای مانند شکل زیر مشاهده می کنید:
ساختار صفحه در افزونه Divi Builder
Divi از رنگها برای تقسیم انواع مختلف محتوا در صفحه استفاده می کند. این رنگ ها هنگام ساخت صفحه به کمک شما می آیند.
معنی رنگ های مختلف در افزونه Divi Builder به صورت زیر است:
- آبی – مشخص کننده بخش یعنی بزرگترین ظرف محتوا است.
- سبز – ردیف ها را تعیین می کند. ردیف ها در داخل بخش ها قرار می گیرند. می توانید چندین ردیف در یک بخش داشته باشید.
- سیاه – ماژول ها را تعیین می کند. ماژول ها قطعات محتوا هستند که درون ردیف ها قرار می گیرند. می توانید چندین ماژول در هر ردیف داشته باشید.
توجه داشته باشید که هر المان “درون” المان دیگر قرار می گیرد. به همین دلیل تنها در صورتی دکمه سیاه قرار دادن ماژول را مشاهده خواهید کرد که قبلاً یک ردیف در بخش خود قرار داده باشید. یعنی شما نمی توانید یک ماژول را مستقیماً به یک بخش اضافه کنید.
به طور خلاصه، المان ها در افزونه Divi Builder از بزرگ به کوچک عبارتند از:
بخش (Section) » ردیف (Row) » ماژول (Module)
بخش (Section): ابتدایی ترین و بزرگترین بلوک هایی که در طراحی صفحه با افزونه Divi Builder مورد استفاده قرار می گیرند، بخش ها هستند. بخش ها برای ایجاد گروههای بزرگی از محتوا استفاده می شوند و اولین چیزی هستند که به صفحه خود اضافه می کنید. سه بخش وجود دارد که عبارتند از: Regular ، Specialty و Fullwidth. بخش های Regular از ردیف ستون ها تشکیل شده اند در حالی که بخش های Fullwidth از ماژول هایی با پهنای کامل ساخته شده اند که کل صفحه را پر می کنند. بخش های Specialty امکان طرح بندی نوار کناری پیشرفته تر را فراهم می کنند.
ردیف (Row): ردیف ها در داخل بخش ها قرار دارند و می توانید هر تعداد ردیف را درون یک بخش قرار دهید. در هر ردیف انواع مختلف ستون ها وجود دارد که می توانید از بین آنها انتخاب کنید. پس از تعیین یک ساختار ستونی برای ردیف خود ، می توانید ماژول ها را در ستون مورد نظر خود قرار دهید. هیچ محدودیتی برای تعداد ماژول هایی که می توانید در یک ستون قرار دهید وجود ندارد.
ماژول (Module): ماژول ها عناصر محتوایی هستند که وب سایت شما را تشکیل می دهند. هر ماژولی که Divi دارد می تواند در عرض ستون قرار گیرد و همگی کاملاً رسپانسیو هستند.
حال که با ساختار صفحه بندی در افزونه Divi Builder آشنا شدید، وقت آن است که ساختار اصلی صفحه را تنظیم کنید. به این ترتیب می توانید قبل از شروع کار یک “طرح کلی” از صفحه در ذهن خود داشته باشید.
به عنوان مثال ساختار اصلی یک صفحه محصول از چهار بخش زیر تشکیل می شود:
- بخش عنوان اصلی محصول
- بخش “لیست ویژگی ها”
- بخش درباره تولید کننده محصول
- بخش ایمیل
در این آموزش یک صفحه محصول با ساختار فوق را ایجاد می کنیم. شما می توانید مطابق با نیازهای سایت خود از ساختارهای دیگری استفاده کنید.
اما قبل از اینکه شروع به ساخت صفحه در افزونه Divi Builder کنیم، نگاهی اجمالی به نحوه عملکرد رابط کاربری افزونه Divi Builder می اندازیم.
عملکرد سازنده بصری
برای اضافه کردن یک بخش، ردیف یا ماژول جدید، کافی است روی دکمه + مربوط به آن المان (که در قسمت رنگ ها توضیح داده شد)، کلیک کنید.
هنگامی که روی دکمه Insert Module کلیک کردید، می توانید یک نوع ماژول را متناسب با نیازهای سایت خود انتخاب کنید:
پس از وارد کردن ماژول می توانید با استفاده از یک پنجره پاپ آپ دیگر، تنظیمات آن ماژول را پیکربندی کنید:
توجه داشته باشید که سه تب در بالا وجود دارد. این تب ها به شما امکان می دهند استایل ماژول ها را سفارشی سازی کنید، فاصله گذاری کنید و موارد دیگر را برای هر ماژول تنظیم کنید. برای تنظیم دقیق طراحی خود می توانید از این تنظیمات استفاده کنید.
- تب Content جایی است که می توانید محتواهایی مانند تصاویر، فیلم ها، لینک ها و برچسب های مدیر را اضافه کنید.
- تب Design جایی است که تمام تنظیمات طراحی داخلی برای هر المان درون آن قرار دارد. بسته به آنچه که ویرایش می کنید، می توانید طیف وسیعی از تنظیمات طراحی شامل تایپوگرافی ، فاصله گذاری (margin / padding) ، استایل دکمه و موارد دیگر را با یک کلیک کنترل کنید.
- اگر می خواهید کنترل بیشتری داشته باشید می توانید به تب Advanced بروید. در این تب می توانید CSS سفارشی را اعمال کنید، قابلیت مشاهده را بر اساس دستگاه تنظیم کنید و (بسته به اینکه کدام المان را ویرایش می کنید) تنظیم دقیق تری انجام دهید.
با کلیک بر روی نماد چرخ دنده می توانید به پنل تنظیمات بخش ها ، ردیف ها و ماژول ها برای هر المان، دسترسی پیدا کنید:
این تنظیمات برای مواقعی که نیاز به تنظیم فاصله یک بخش یا سطر به صورت دستی دارید تا تنظیمات را کامل کنید، مفید است.
برای دسترسی به تنظیمات کلی صفحه ، روی آیکون سه نقطه بنفش در انتهای صفحه کلیک کنید. با کلیک بر روی آن، نوار تنظیمات باز شده و گزینه های مختلفی در اختیار شما قرار می گیرد. با کلیک روی نماد چرخ دنده می توانید تنظیمات صفحه خود را مشاهده کنید. در اینجا می توانید مواردی مانند رنگ پس زمینه صفحه و رنگ متن را تنظیم کنید. همچنین دکمه های ذخیره و انتشار و همچنین toggle های پیش نمایش پاسخگو را پیدا خواهید کرد.
حال که یک دید کلی درباره ساختار صفحه بندی در افزونه Divi Builder پیدا کردید، آموزش را با ساخت صفحه محصول ادامه می دهیم.
ساخت صفحه محصول در افزونه Divi Builder
از آنجا که در این مثال از چهار منطقه متفاوت برای محتوا (شامل عنوان محصول، لیست ویژگی ها، درباره و ایمیل) استفاده می شود، از چهار بخش آبی در Divi Builder استفاده می کنیم.
ساخت بخش عنوان محصول
به محض اینکه یک صفحه را باز می کنید، یک بخش به طور پیش فرض در داخل صفحه وجود دارد. برای این بخش یک ردیف قرار دهید. طرح دو ستون مساوی را انتخاب می کنیم:
حال، یک ماژول Image را به ستون سمت راست اضافه کرده و تصویر مربوط به محصول مورد نظر خود را وارد کنید.
در ستون سمت چپ یک ماژول Text اضافه کنید. از منوی کشویی Heading 1 را انتخاب کنید تا متن به صورت هدر قرار بگیرد. سپس هدر را در مرکز قرار دهید.
برای تنظیم مجدد محل قرار گیری هدر، به Design → Spacing بروید تا ظاهر هدر را اندکی بهتر کنید.
حال، یک ماژول Text دیگر را در زیر هدر اضافه کنید تا به عنوان زیرهدر عمل کند. باز هم ، می توانید با اندازه و فاصله متن بازی کنید تا ظاهر مورد نظر شما را پیدا کند.
یک ماژول دکمه در زیر زیرهدر قرار دهید. برای این کار از ماژول button استفاده کنید. می توانید تراز و استایل دهی دکمه را در تب Design تغییر دهید.
به این ترتیب بخش عنوان صفحه را ساخته اید. بخش بعدی لیست ویژگی ها است که در ادامه آموزش به بررسی نحوه ساخت آن می پردازیم.
ساخت بخش لیست ویژگی ها
برای ساختن لیست ویژگی ها، یک بخش کاملاً جدید را با کلیک کردن بر روی دکمه + آبی رنگ بسازید.
سپس ، یک ردیف جدید 3 ستونی را در داخل بخش اضافه کنید:
یک روش آسان برای اضافه کردن لیست ویژگی ها استفاده از ماژول Blurb است. برای پیکربندی ماژول Blurb مانند شکل زیر ، از باکس Title استفاده نکنید. درعوض ، از باکس Content برای اضافه کردن عنوان به صورت تگ h3، زیرعنوان به صورت تگ پاراگراف استفاده کنید و همه را در تراز وسط قرار دهید:
سپس در همان تب، به سمت پایین اسکرول کرده و Image & Icon را پیدا کنید. باکس Use Icon را تیک بزنید و آیکون خود را انتخاب کنید.
این فرآیند را برای بقیه ویژگی ها نیز تکرار کنید.
لیست ویژگی ها ساخته شده است. حال به ساخت بخش درباره می پردازیم.
ساخت قسمت “درباره”
برای ساختن بخش “درباره” ، می توان از همان روشی که برای بخش هدر انجام دادیم، استفاده کنید. با این تفاوت که این بار از طراحی دو ستونه افست استفاده می کنیم.
در ستون سمت چپ، ماژول Image را اضافه کرده و با تصویر خودتان یا با هر چیز دیگری که مرتبط است، پر کنید. همانطور که قبلاً گفته شده، می توانید موقعیت قرار گیری تصویر را ویرایش کنید.
در ستون سمت راست ، می توانید مانند قبل، دو ماژول text برای عنوان و زیرعنوان اضافه کنید.
ساخت بخش ایمیل
Divi Builder یک ماژول ایمیل از پیش ساخته دارد است که کار را بسیار ساده می کند. ماژول هایی مانند این یکی از دلایلی است که ساخت صفحه محصول را با افزونه Divi Builder بسیار آسان می کند.
برای استفاده از این ماژول، یک بخش جدید با طرح یک ستونی ایجاد کنید:
سپس ماژول Email Optin را اضافه کنید. می توانید از باکس های Title و Content برای اضافه کردن متن به سمت چپ ایمیل خود استفاده کنید. همچنین می توانید رنگ پس زمینه را تغییر داده و از همان رابط کاربری به سرویس های ایمیل مارکتینگ وردپرس خود متصل شوید:
تا اینجا شما موفق شده اید که یک صفحه محصول را با استفاده از افزونه Divi Builder بسازید.
کار دیگری که می توانید انجام دهید تا صفحه را مطابق سلیقه خود طراحی کنید اضافه کردن یک قطعه کد CSS برای کاهش فاصله بین بخش های مختلف Divi Builder است.
اضافه کردن این قطعه کد کاملاً اختیاری است.
اگر می خواهید این کار را انجام دهید ، کافی است قطعه کد زیر را به قسمت Additional CSS سفارشی ساز وردپرس اضافه کنید.
در مقاله آموزش طراحی سایت با وردپرس می توانید اطلاعات بیشتری درباره سفارشی ساز وردپرس به دست آورید.
امیدواریم این آموزش مورد توجه و استفاده شما قرار گرفته باشد.
دیدگاه ها