كيفية إنشاء تصميمات فريدة باستخدام العناصر الزائفة قبل وبعد في Divi

بصفتنا مصممين ويب ، نبحث دائمًا عن طرق جديدة لإضافة الفردية إلى مواقع الويب التي نقوم بإنشائها. يوفر Divi فرصًا لا حصر لها لإنتاج تخطيطات فريدة ولكن هناك دائمًا القليل من الإضافات التي يمكننا تضمينها لتجميع التصميم معًا. هذا هو المكان الذي تكون فيه العناصر الزائفة لـ CSS مفيدة حقًا.

ما هي العناصر الزائفة CSS؟

ببساطة ، يمكن استخدام عنصر CSS الزائف لتصميم أجزاء معينة من عنصر ما. هناك خمسة أنواع من العناصر الزائفة التي تقوم بأشياء مختلفة. لغرض هذا المنشور ، سننظر في :: before و :: after.

يتم استخدام هذين العنصرين الزائفين لإدراج شيء ما قبل أو بعد محتوى العنصر. هذا مفيد بشكل خاص حيث يمكننا استخدامها لإضافة عناصر مرئية إضافية إلى الصور والنصوص الموجودة وأي شيء آخر!

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

كيف تستخدم العناصر قبل وبعد مع Divi؟

إذا كان كل هذا يبدو محيرًا بعض الشيء حتى الآن ، فلا تقلق! إذا أردنا استخدام :: before و :: after عند كتابة كود CSS من البداية ، فسيبدو مثل هذا قليلاً:

تخيل أن لدينا سطرًا نصيًا به فئة "text-example" - سيكون CSS لتصميم هذا السطر وتخصيصه كما يلي:

.text-example {*This is where you add the styles*}

الآن إذا كنت تريد إضافة عنصر :: before أو: after وتنميطه ، فإن CSS سيبدو كما يلي:

.text-example::before {*This is where you add before content and styles*}

.text-example::after {*This is where you add after content and styles*}

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

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

نظرة خاطفة

هذا ما سننشئه في هذا البرنامج التعليمي:

مثال 1

مثال 2

مثال 3

ابدء

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

نحن الآن جاهزون للبدء!

مثال 1: وحدات دعاية مرقمة مرقمة باستخدام العناصر الزائفة

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

ما سننشئه:

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

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

بمجرد التحميل ، فإن الاختلاف الوحيد بين تخطيط premade ومثالنا هو أننا قمنا بتغيير خلفية كل دعاية ، ولون خط النص والعنوان وإضافة القليل من الحشو.

بمجرد تغيير هذه الإعدادات في دعاية إعلامية واحدة ، يمكنك النقر بزر الماوس الأيمن على الوحدة واستخدام "Extend Styles" لتطبيقها على الثلاثة الآخرين.

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

overflow: visible;

سيسمح هذا ببساطة لأي عناصر نقوم بإنشائها في الخطوات التالية أن تكون مرئية أينما تتداخل مع حواف الوحدة النمطية الخاصة بنا.

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

content: '1.'; /* Adds the number 1. as before content */
font-weight: bold;
font-size: 80px;
opacity: 0.7; /* Makes the number slightly transparent */
color: blue; /* Changes the color of the number text */
position: absolute; 
z-index: 9999;
left: 0; /* Positions the content 0px away from the left border */
Top:-20px; /* Positions the content 20px above the top border */

بمجرد إضافة مقتطف الشفرة هذا ، سترى الرقم يظهر في الجزء العلوي الأيسر من وحدة blurb. يمكنك تعديل موضع الرقم عن طريق تغيير سطور "left:" و "top:" أو تغيير لون وحجم الخط للرقم داخل مقتطف CSS هذا.

بمجرد الانتهاء من هذا للوحدة الأولى ، انتقل إلى وحدات الدعاية الثلاثية الجديدة وقم بتغيير سطر "content:" إلى:

المحتوى: "2." ؛
المحتوى: "3." ؛

…وما إلى ذلك وهلم جرا.

الآن بعد أن تم فرز الأرقام لدينا ، نحتاج إلى إضافة القليل من css لإنشاء شكل السهم.

افتح كل وحدة وأدخل هذا في المربع بعد داخل منطقة CSS المخصصة:

content: '';
display:block;
height:60px; /* Size of the shape */
width:60px; /* Size of the shape */
position:absolute;
top:40%;
right:-30px;
z-index: -1;
background-color: #e8e8e8; /* Colour of the shape */
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);

الآن يجب أن تبدو دلالاتك الدعاية الأربعة كما يلي:

مثال 2. إضافة أشكال فريدة إلى الوحدات النمطية الموجودة لديك

يعتمد هذا التصميم على مقتطفات التعليمات البرمجية البسيطة والفعالة التي تتم إضافتها إلى مربعي CSS المخصصين :: قبل و :: بعد داخل كل وحدة نصية.

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

ما سننشئه:

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

مرة أخرى ، يمكنك تصميم وحدة النص هذه كما تريد ، ولكن إذا كنت تتابعها ، فهذه هي الخطوات لتحقيق هذا التصميم:

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

بعد ذلك ، قم بتكوين خيارات التصميم التالية:

1.الحشوة العلوية: 120 بكسل والحشوة السفلية: 120 بكسل

2. محاذاة النص: المركز ولون النص: #ffffff

3. محاذاة العنوان: المركز ولون العنوان: # f5ee5d

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

content:'';
height: 30px; /* change the size to suit your design */
width: 30px; /* change the size to suit your design */
display: block;
position: absolute;
border-top: solid 3px #f5ee5d; /* change the colour to suit your design */
border-left: solid 3px #f5ee5d; /* change the colour to suit your design */
left: 20px; /* change the position to suit your design */
top: 20px; /* change the position to suit your design */

ثم أضف الكود التالي إلى المربع "بعد":

content:'';
height: 30px; /* change the size to suit your design */
width: 30px; /* change the size to suit your design */
display: block;
position: absolute;
border-bottom: solid 3px #f5ee5d; /* change the colour to suit your design */
border-right: solid 3px #f5ee5d; /* change the colour to suit your design */
right: 20px; /* change the position to suit your design */
bottom: 20px; /* change the position to suit your design */

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

إذا كنت تتساءل عما يفعله CSS ، فهو في الواقع بسيط للغاية. كل ما نقوم به هو إنشاء مربع شفاف يتم وضعه 20 بكسل بعيدًا عن أعلى ويسار (وأسفل ويمين) وحدة النص. ثم نضيف حدين إلى هذه المربعات لإنشاء تأثير السهم.

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

تكمن ميزة هذه الطريقة في أنها ستعمل مع أي وحدة Divi تقريبًا مع القليل من التخصيص. إذا كنت تريد أن تكون أكثر فخامة ، فحاول إضافة بعض CSS الإضافية لتدوير ، وتعديل وتخصيص العناصر :: before و :: after بشكل أكبر. استمتع!

مثال 3. إضافة أيقونات وأوصاف لعناوين علامات التبويب

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

ملاحظة - على الرغم من أن إضافة المحتوى عبر css يعد أمرًا رائعًا للتصميم ، إلا أنه لا تتم فهرسته بسهولة بواسطة محركات البحث (على الرغم من قيام Google في الواقع بفهرسة محتوى CSS و Javascript ، إلا أنها تستغرق وقتًا أطول بكثير ولا يمكن الاعتماد عليها في الوقت الحالي. محركات البحث مثل Bing و DuckDuckGo تفعل لا تفهرس هذا المحتوى على الإطلاق). لهذا السبب يجب أن يكون المحتوى الخاص بك في حده الأدنى ويجب ألا تعتمد عليه للتأثير على إمكاناتك في الترتيب.

ما سننشئه:

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

بمجرد وضع المحتوى الخاص بنا ، نحتاج إلى البدء في إضافة محتوى إلى عنصر :: before في الوحدة النمطية. نظرًا لأنه لا يمكننا إضافة CSS مخصص إلى علامات تبويب محددة باستخدام الطريقة التي اتبعناها أعلاه ، فسنحتاج إلى تحقيق ذلك بشكل مختلف قليلاً.

افتح خيارات وحدة علامات التبويب وضمن علامة التبويب خيارات متقدمة ، امنح الوحدة فئة "علامات التبويب الفاخرة".

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

مع تحميل صورك ، نحتاج إلى النقر فوق كل صورة ونسخ عنوان URL الذي أنشأه WordPress لنا. انتقل إلى كل صورة من صورك وانسخ عناوين URL والصقها في مستند أو تطبيق الملاحظات الذي اخترته.

مع وجود عناوين URL للصور التي اخترتها في متناول اليد ، انتقل إلى خيارات Divi Theme ضمن قائمة Divi في لوحة معلومات WordPress.

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

سيضيف المقتطف التالي الصور أعلى عنوان كل علامة تبويب. ما عليك سوى نسخ هذا المقتطف ولصقه في مربع CSS المخصص واستبدال المحتوى بين (بما في ذلك) العلامات النجمية (على سبيل المثال * استبدل هذا بعنوان URL لصورتك الأولى *) بعناوين URL التي سجلتها سابقًا.

.fancy-tabs .et_pb_tab_0 a::before {
content: url(*Replace this with the URL for your first image*);
padding-top: 20px;
display: block;
}

.fancy-tabs .et_pb_tab_1 a::before {
content: url(*Replace this with the URL for your second image*);
padding-top: 20px;
display: block;
}
 
.fancy-tabs .et_pb_tab_content a::before {
content: '' !important; }

إذا عدت إلى الصفحة مع تشغيل وحدة علامات التبويب الخاصة بك ، فيجب أن ترى الآن أنه قد تمت إضافة الصور فوق كل عنوان - نجاح!

إذن ماذا عن إضافة الأوصاف؟ لحسن الحظ ، هذا بسيط للغاية أيضًا. أسفل الكود الذي نسخته للتو في مربع CSS المخصص الخاص بك ، الصق ما يلي:

.fancy-tabs .et_pb_tab_0 a::after {
content: 'this is a description';
font-size: 10px;
padding-top: 5px;
display: block;
}
 
.fancy-tabs .et_pb_tab_1 a::after {
content: 'this is a description';
font-size: 10px;
padding-top: 5px;
display: block;
}
 
.fancy-tabs .et_pb_tab_content a::after {
content: '' !important; }

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

أخيرًا ، علينا فقط تطبيق المزيد من CSS لتحقيق التصميم الكامل الموضح أعلاه. مرة أخرى ، انسخ المقتطف التالي في نفس مربع CSS المخصص:

.fancy-tabs .et_pb_tab_content a:after {
content: '' !important; }

.fancy-tabs .et_pb_tabs_controls li {
width: 50% !important;
}
.fancy-tabs .et_pb_tabs_controls li a {
width: 100% !important;
text-align: center;
}

@media (max-width: 768px) {

.fancy-tabs .et_pb_tabs_controls li {
width: 100% !important;
}

.fancy-tabs .et_pb_tabs_controls {
padding: 0 !important;
}
}

يعمل هذا الرمز على توسيط نص علامة التبويب والصور الخاصة بك ويزيد من عرض علامات التبويب الخاصة بك لتغطية الوحدة بأكملها.

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

للقيام بذلك ، انسخ رمز CSS المعدل أدناه والصقه في منطقة CSS المخصصة في لوحة خيارات سمة Divi:

@media (min-width: 769px) {

.fancy-tabs .et_pb_tab_0 a::before {
content: url(*Replace this with the URL for your first image*);
padding-top: 20px;
display: block;
}

.fancy-tabs .et_pb_tab_1 a::before {
content: url(*Replace this with the URL for your second image*);
padding-top: 20px;
display: block;
}
 
.fancy-tabs .et_pb_tab_content a::before {
content: '' !important; }

.fancy-tabs .et_pb_tab_0 a::after {
content: 'this is a description';
font-size: 10px;
padding-top: 5px;
display: block;
}
 
.fancy-tabs .et_pb_tab_1 a::after {
content: 'this is a description';
font-size: 10px;
padding-top: 5px;
display: block;
}
 
.fancy-tabs .et_pb_tab_content a::after {
content: '' !important; }
.fancy-tabs .et_pb_tab_content a:after {
content: '' !important; }

.fancy-tabs .et_pb_tabs_controls li {
width: 50% !important;
}
.fancy-tabs .et_pb_tabs_controls li a {
width: 100% !important;
text-align: center;
}
}

إضافة المزيد من علامات التبويب

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

كما ترى من المقتطف ، تقوم Divi تلقائيًا بتعيين فئة لكل عنوان علامة تبويب - يبدأ الأول بـ 0 (.et_pb_tab_0) ، ويزيد بمقدار 1 في كل مرة (.et_pb_tab_1 ، .et_pb_tab_2 وما إلى ذلك). لقد اهتممنا بالفعل بأول علامتي تبويب ، لذلك عند إضافة المزيد يمكننا ببساطة نسخ ولصق قسم من الكود لكل علامة تبويب جديدة:

.fancy-tabs .et_pb_tab_0 a:before {
content: url(*Replace this with the URL for your first image*);
padding-top: 20px;
}

وقم بتغيير الرقم في الفصل (.et_pb_tab_0) إلى 2 ، 3 ، 4 وما إلى ذلك. ستحتاج إلى فعل الشيء نفسه لأوصافك أيضًا.

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

.fancy-tabs .et_pb_tabs_controls li {
width: 50% !important;
}

واستبدل 50٪ بإجابتك. سيضمن هذا تباعد علامات التبويب بالتساوي عبر عرض الوحدة.

على سبيل المثال ، إذا كنت تقوم بإنشاء علامة تبويب ثالثة ، فإن كود CSS الإضافي الذي تحتاجه سيكون على النحو التالي:

.fancy-tabs .et_pb_tabs_controls li {
width: 33% !important;
}

في الختام

وهناك لدينا ثلاث طرق رائعة لاستخدام عناصر CSS :: قبل و :: بعد لإنشاء إمكانيات تصميم جديدة. نأمل أن يلهمك هذا الدليل لاستكشاف كيف يمكنك استخدام العناصر الزائفة في إبداعاتك المستقبلية - فالفرص حقًا لا حصر لها!