كيفية إضافة إخفاء الصورة في Divi

قد يبدو هذا مبتذلاً ، أن الصورة تساوي ألف كلمة. ومع ذلك ، فقد اعترفنا بأن هذه الصورة تتمتع بهذه القوة الكبيرة. هناك العديد من الطرق لإنشاء صورة أكثر تشويقًا. يعد التقنيع إحدى الطرق التي يمكننا استخدامها لإبراز الصورة.

باختصار ، يستخدم قناع الصورة شكلاً أو كائنًا لقص أو إخفاء أجزاء من الصورة. يمكنك ضبط جزء معين من صورتك مع ترك الباقي دون تغيير. ستوضح لك هذه المقالة كيفية إضافة قناع صورة في Divi.

خطوات إضافة قناع الصورة في Divi

الخطوة 1: إضافة قسم جديد

انتقل إلى محرر Divi Builder ثم أنشئ صفًا بثلاثة أعمدة. نريد إضافة وحدة Code لكل عمود في هذا المثال. نقوم بإعداد العمود الأول للصورة الرئيسية ، ولعمودين آخرين ، سنستخدمهم للأشكال.

الخطوة 2: تحرير وتصميم العمود الأول

حسنًا ، نبدأ بالعمود الأول. أضف وحدة التعليمات البرمجية. في لوحة الإعدادات ، انتقل إلى كتلة الخلفية ، ثم أضف صورة خلفية حسب تفضيلاتك.

بمجرد إضافة صورة خلفية ، انتقل إلى كتلة تسمية المسؤول ، ثم قم بتسميتها لهذه الوحدة. أطلقنا عليها اسم "الأول" لهذه الوحدة. سيؤدي تطبيق تسمية المسؤول إلى تسهيل الأمر عندما تريد الوصول إليه في قائمة الطبقات.

لا يزال في لوحة إعدادات وحدة Code ، انتقل إلى علامة التبويب Design -> Sizing options. اضبط العرض والارتفاع على 450px .

الآن ، حان الوقت لإخفاء الصورة. انتقل إلى علامة التبويب خيارات متقدمة -> CSS مخصص . بعد ذلك ، الصق مقتطف CSS أدناه في حقل العنصر الرئيسي .

 -webkit-mask-image: url ("data: image / svg + xml؛ base64، PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8 + ==") ؛
-webkit- قناع- كرر: لا تكرار ؛ 

الخطوة 3: تحرير وتصميم العمود الثاني

بعد ذلك ، ننتقل إلى العمود الثاني. أضف وحدة Code ، ثم انتقل إلى ملف لوحة الإعدادات. بعد ذلك ، انتقل إلى قالب الخلفية وأضف لون الخلفية الذي تفضله.

بمجرد إضافة لون الخلفية ، انتقل إلى Admin Label ، ثم قم بتسمية هذه الوحدة. أطلقنا عليها اسم "الثاني" لهذه الوحدة.

بعد ذلك ، نريد تعديل حجم هذه الوحدة. انتقل إلى علامة التبويب التصميم -> خيارات التحجيم . اضبط العرض والارتفاع على 145px .

إذا كنت تريد تدوير الشكل ، يمكنك الانتقال إلى Transform واختيار Transform Rotate . في هذا المثال ، قمنا بتعيين 15deg إلى الحقل الأول فقط.

الآن ، حان الوقت لإخفاء الشكل. انتقل إلى علامة التبويب خيارات متقدمة -> CSS مخصص . بعد ذلك ، الصق مقتطف CSS أدناه في حقل العنصر الرئيسي .

 -webkit-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAzIDMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyOyI+PHBhdGggZD0iTTIuMDY4LDEuMjk3YzAsMC4yMDQgLTAuMDg0LDAuNDA1IC0wLjIyNiwwLjU0OWMtMC4xNDQsMC4xNDIgLTAuMzQ0LDAuMjI4IC0wLjU0NiwwLjIyOGMtMC4yMDUsLTAgLTAuNDA3LC0wLjA4NiAtMC41NDksLTAuMjI4Yy0wLjI4NywtMC4yOTEgLTAuMjg3LC0wLjgwNSAtMCwtMS4wOTVjMC4xNDIsLTAuMTQyIDAuMzQ0LC0wLjIyNSAwLjU0OSwtMC4yMjVjMC4yMDIsMCAwLjQwMiwwLjA4MyAwLjU0NiwwLjIyNWMwLjE0MiwwLjE0NyAwLjIyNiwwLjM0NCAwLjIyNiwwL jU0NiIgc3R5bGU9ImZpbGwtcnVsZTpub256ZXJvOyIvPjwvc3ZnPg == ") ؛
-webkit- قناع- كرر: كرر ؛
-حجم قناع الويب: 5 بكسل ؛ 

يمكنك ضبط موضع الشكل على الصورة الرئيسية حسب تفضيلاتك. انتقل إلى الوظيفة . اضبط على Absolute ، وقم بتحرير Vertical Offset و Horizontal Offset و Z-Index .

الخطوة 4: تحرير وتصميم العمود الثالث

حسنًا ، سنقوم الآن بتحرير العمود الثالث وتصميمه. أضف وحدة Code ، ثم انتقل إلى لوحة الإعدادات. بعد ذلك ، انتقل إلى قالب الخلفية وأضف لون الخلفية الذي تفضله.

بمجرد إضافة لون الخلفية ، انتقل إلى Admin Label ، ثم قم بتسمية هذه الوحدة. أطلقنا عليها "الثالثة" لهذه الوحدة.

بعد ذلك ، نريد تعديل حجم هذه الوحدة. انتقل إلى علامة التبويب التصميم -> خيارات التحجيم . اضبط العرض والارتفاع على 45px .

إذا كنت تريد تدوير الشكل ، يمكنك الانتقال إلى Transform واختيار Transform Rotate . في هذا المثال ، قمنا بتعيين 315deg إلى الحقل الأول فقط.

الآن ، حان الوقت لإخفاء الشكل. انتقل إلى علامة التبويب خيارات متقدمة -> CSS مخصص . بعد ذلك ، الصق مقتطف CSS أدناه في حقل العنصر الرئيسي .

 CLIP-PATH: مضلع (20٪ 0٪ ، 0٪ 20٪ ، 30٪ 50٪ ، 0٪ 80٪ ، 20٪ 100٪ ، 50٪ 70٪ ، 80٪ 100٪ ، 100٪ 80٪ ، 70٪ 50٪ ، 100٪ 20٪ ، 80٪ 0٪ ، 50٪ 30٪) ؛ 

يمكنك ضبط موضع الشكل على الصورة الرئيسية حسب تفضيلاتك. انتقل إلى الوظيفة . اضبط على Absolute ، وقم بتحرير Vertical Offset و Horizontal Offset و Z-Index .

إذا كنت ترغب في تعيين موضع إخفاء صورتك في منتصف الصفحة ، فانتقل إلى إعدادات الصف -> علامة التبويب تصميم -> التباعد . تعيين 400px من الهامش الأيسر.

هذا هو. لا تنس النقر فوق الزر " حفظ المسودة " أو الزر " نشر " إذا كنت تريد حفظ مشروعك أو نشره.

الخط السفلي

يوضح لك هذا المقال كيفية إضافة إخفاء الصورة في Divi دون مساعدة من أي إضافات. إخفاء الصورة مثير للإعجاب. ستجعل صورتك تبدو مذهلة. لكن ضع في اعتبارك أنه ليست كل صورة مناسبة للإخفاء. في بعض الحالات ، تكون الصورة الأساسية أفضل بكثير.

يوجد في الواقع حل أبسط لإضافة إخفاء للصورة في Divi: استخدام المكون الإضافي Divi Pixel. يقدم البرنامج المساعد العديد من أشكال التقنيع. يمكنك تطبيق شكل اخفاء معين بنقرة واحدة. لا حاجة للتعامل مع كود CSS. فيما يلي بعض أشكال التقنيع التي تقدمها Divi Pixel.

من أين تحصل على Divi Pixel؟

يمكنك الحصول عليه من سوق Divi.