استكشاف أخطاء اتصال المثيل وإصلاحها

شكرا لاستيراد البث 🙂

تم إنشاء البث بشكل أساسي باستخدام ميزات GP المضمنة الرائعة مع بعض CSS لتوفير أنماط مخصصة.

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

رأس / التنقل

يتم إنشاء الرأس / التنقل ببساطة باستخدام خيارات أداة التخصيص. يمكنك تعديلها في أقسام “هوية الموقع” و ” التنقل الأساسي ” و ” التنقل الثابت” في أداة التخصيص.

عنصر الرأس / بطل الصفحة

يتم إنشاء القسم الموجود أسفل شريط التنقل الأساسي باستخدام وحدة Header Element . يمكنك العثور على 4 عناصر رأس بتنسيق
مظهر> العناصر: بطل الصفحات ، بطل الأرشيف ، بطل المشاركات ، وبطل المنزل .

يتم استخدام CSS لتوفير عرض فريد للحاوية وخلفية متدرجة وأنماط لملف<h2> و<p> عناصر:

/* Page hero styles */
.page-hero.gradient {
    background-image: linear-gradient( 145deg, transparent 0%, rgba(255,255,255, 0.5) 100%);
    max-width: 1440px;
    margin: auto;
}
.inside-page-hero h2 {
    font-size: 40px;
}
.inside-page-hero p {
    font-size: 20px;
}

يعد هذا الموقع مصدرًا ممتازًا لتعديل التدرج اللوني حسب رغبتك: https://cssgradient.io/ .

حاوية عامة

يتم استخدام CSS التالي لتصميم الحاوية الرئيسية ، بما في ذلك الدمج مع عنصر الرأس أعلاه.

/* Main container styles */
.separate-containers .page-hero + #page .site-main {
    margin-top: -80px !important;
}
@media (max-width: 768px) {
    body .site.grid-container {
        margin-left: 20px;
        margin-right: 20px;
    }
}
.site-content .inside-article, .sidebar .widget, .comments-area {
    box-shadow: 0px 0px 0px 1px rgba(214,218,222,1);
}

قائمة المشاركات

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

إليك CSS المستخدمة لتصميمها:

/* Posts grid styles */
@media (min-width: 769px) {
    .generate-columns .inside-article {
        transition: all 0.2s ease-in;
        transform: scale(1);
    }
    .generate-columns .inside-article:hover {
        transform: scale(1.01);
        box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
    }
    p.read-more-container {
        opacity: 0;
        transition: all 0.3s ease-in-out;
    }
    .generate-columns .inside-article:hover p.read-more-container {
        opacity: 1;
    }
}
.generate-columns .inside-article {
    display: flex;
    flex-direction: column;
    border-radius: 3px;
}
.generate-columns .inside-article .entry-summary {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.entry-summary p:not(.read-more-container) {
    display: none;
}
.read-more-container {
    margin-top: auto;
    text-align: center;
}
button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.button:visited {
    border-width: 1px;
    border-style: solid;
    border-color: inherit;
    border-radius: 3px;
}
.blog footer.entry-meta, .archive footer.entry-meta {
    margin-top: 0;
}

الشريط الجانبي

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

تم تلوين أداة الشريط الجانبي الأولى باستخدام CSS أدناه:

/* Sidebar styles */
.sidebar .widget:first-child {
    background-image: linear-gradient( 145deg, rgb(164,218,216) 0%, rgb(228,243,242) 100%);
}