<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>المقالات Archives - قوالب ووردبريس عربية</title>
	<atom:link href="https://arabic-themes.com/tag/%D8%A7%D9%84%D9%85%D9%82%D8%A7%D9%84%D8%A7%D8%AA/feed/" rel="self" type="application/rss+xml" />
	<link>https://arabic-themes.com/tag/المقالات/</link>
	<description>اكتشف الآلاف من السمات والقوالب ومنتجات ووردبريس</description>
	<lastBuildDate>Thu, 17 Aug 2023 12:40:23 +0000</lastBuildDate>
	<language>ar</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	

<image>
	<url>https://arabic-themes.com/wp-content/uploads/2024/12/cropped-themes-logo-220-100x100.png</url>
	<title>المقالات Archives - قوالب ووردبريس عربية</title>
	<link>https://arabic-themes.com/tag/المقالات/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>شرح محرر المكونات Gutenburg لإضافة الصفحات والمقالات</title>
		<link>https://arabic-themes.com/the-gutenburg-component-editor-is-fully-explained/</link>
					<comments>https://arabic-themes.com/the-gutenburg-component-editor-is-fully-explained/#respond</comments>
		
		<dc:creator><![CDATA[إدارة الشركة]]></dc:creator>
		<pubDate>Sat, 10 Jun 2017 17:44:01 +0000</pubDate>
				<category><![CDATA[شروحات ووردبريس]]></category>
		<category><![CDATA[Gutenburg]]></category>
		<category><![CDATA[إضافة إقتباس]]></category>
		<category><![CDATA[إضافة جدول]]></category>
		<category><![CDATA[استخدام محرر Guteberg]]></category>
		<category><![CDATA[المقالات]]></category>
		<category><![CDATA[المقالات والصفحات]]></category>
		<category><![CDATA[شرح محرر]]></category>
		<category><![CDATA[شرح محرر المكونات Gutenburg]]></category>
		<category><![CDATA[محرر Gutenberg]]></category>
		<category><![CDATA[ووردبريس]]></category>
		<guid isPermaLink="false">http://xtratheme.com/business/?p=143</guid>

					<description><![CDATA[<p>بالتأكيد عندما تريد إضافة صفحة أو مقالة جديدة في موقعك الووردبريس، فأنت تت ... <a class="cz_readmore" href="https://arabic-themes.com/the-gutenburg-component-editor-is-fully-explained/"><i class="fas fa-book-reader" aria-hidden="true"></i><span>اقرأ المزيد</span></a></p>
<p>The post <a href="https://arabic-themes.com/the-gutenburg-component-editor-is-fully-explained/">شرح محرر المكونات Gutenburg لإضافة الصفحات والمقالات</a> appeared first on <a href="https://arabic-themes.com">قوالب ووردبريس عربية</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p class="has-text-align-right">بالتأكيد عندما تريد إضافة صفحة أو مقالة جديدة في موقعك الووردبريس، فأنت تتعامل مع محرر Gutenberg والذي يحتوي على العديد من المكونات والخيارات التي لم تكون في المحرر القديم TinyMCE.</p>



<p class="has-text-align-right">&nbsp;يستخدم ووردبريس لإنشاء العديد من أنواع المواقع، ولذلك ظهر المحرر الجديد للتعامل مع جميع أنواع المواقع وجعلها أكثر تخصيصًا لأصحاب المواقع، حيث يعمل محرر غوتبرج بنظام الحاويات (Blocks) وهي عبارة عن مجموعة من العناصر أو البيانات الموجودة داخل حاوية محددة.</p>



<p class="has-text-align-right">في هذا المقال سنشرح لك كافة الإمكانيات والخيارات التي يوفرها هذا المحرر والتي ستساعدك في إنتاج المحتوى بشكل أفضل، وسنتعرف على بعض الخصائص التي قد لا تكون تعرفها من قبل.</p>



<h2 class="wp-block-heading has-text-align-right">المكونات الرئيسية للمحرر</h2>



<p class="has-text-align-right">قبل شرح المكونات الرئيسية يجب علينا معرفة أن محرر جوتنبرج يستخدم لإنشاء صفحات و مقالات، وإذا كان&nbsp;موقعك للتجارة الالكترونية&nbsp;فإنه يستخدم لإنشاء المنتجات أيضا لانشاء صفحة جديدة.</p>



<p class="has-text-align-right">ستعتمد على المحرر عندما تريد إضافة صفحة جديدة عندما تتوجه في القائمة الجانبية إلى (<strong>صفحات &lt;&lt; أضف جديد)</strong></p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img fetchpriority="high" decoding="async" width="457" height="286" src="https://arabic-themes.com/wp-content/uploads/2023/08/Page-New-edited.jpg" alt="" class="wp-image-4399" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/Page-New-edited.jpg 457w, https://arabic-themes.com/wp-content/uploads/2023/08/Page-New-edited-300x188.jpg 300w" sizes="(max-width: 457px) 100vw, 457px" /></figure>
</div>


<p class="has-text-align-right">ونفس الأمر عندما تضيف مقالًا جديدًا (<strong>مقالات &lt;&lt; أضف جديد)،&nbsp;</strong>فستعتمد على نفس المحرر أيضا</p>


<div class="wp-block-image">
<figure class="aligncenter size-full is-resized"><img decoding="async" src="https://arabic-themes.com/wp-content/uploads/2023/08/PostNew-edited-1.jpg" alt="" class="wp-image-4400" width="425" height="239" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/PostNew-edited-1.jpg 427w, https://arabic-themes.com/wp-content/uploads/2023/08/PostNew-edited-1-300x169.jpg 300w" sizes="(max-width: 425px) 100vw, 425px" /></figure>
</div>


<p class="has-text-align-right">الآن نستعرض ما تحتويه القائمة الرئيسية لمحرر جوتنبرج، والتي تحتوي على المكونات التالية:</p>



<ul class="wp-block-list">
<li>نص</li>



<li>وسائط</li>



<li>تصميم</li>



<li>ودجات</li>



<li>تضمينات&nbsp;</li>
</ul>



<p class="has-text-align-right">كل مكون يحتوي على العديد من العناصر وكل عنصر يستخدم معه أدوات خاصة به،<br>لإظهار القائمة الرئيسية لمحرر غوتنبرغ اذهب لصفحة المحرر الذي تكتب فيه ثم انقر على علامة (+ أضف مكون) كما بالشكل التالي</p>


<div class="wp-block-image">
<figure class="aligncenter size-full is-resized"><img decoding="async" src="https://arabic-themes.com/wp-content/uploads/2023/08/To-Show-Editor-Menu-1024x245-2.jpg" alt="" class="wp-image-4409" width="810" height="193" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/To-Show-Editor-Menu-1024x245-2.jpg 1024w, https://arabic-themes.com/wp-content/uploads/2023/08/To-Show-Editor-Menu-1024x245-2-600x144.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/To-Show-Editor-Menu-1024x245-2-300x72.jpg 300w, https://arabic-themes.com/wp-content/uploads/2023/08/To-Show-Editor-Menu-1024x245-2-768x184.jpg 768w" sizes="(max-width: 810px) 100vw, 810px" /></figure>
</div>


<p class="has-text-align-right">بعد الضغط على علامة&nbsp;<strong>+&nbsp;</strong>سيظهر لك قائمة المحرر بالمكونات المهمة</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1024" height="430" src="https://arabic-themes.com/wp-content/uploads/2023/08/Editor-Main-Menu-1024x430-1.jpg" alt="" class="wp-image-4411" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/Editor-Main-Menu-1024x430-1.jpg 1024w, https://arabic-themes.com/wp-content/uploads/2023/08/Editor-Main-Menu-1024x430-1-600x252.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/Editor-Main-Menu-1024x430-1-300x126.jpg 300w, https://arabic-themes.com/wp-content/uploads/2023/08/Editor-Main-Menu-1024x430-1-768x323.jpg 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p class="has-text-align-right">إذا استعرضنا جميع تلك المكونات بشكل سريع، فهي على النحو التالي:</p>



<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" src="https://arabic-themes.com/wp-content/uploads/2023/08/editor-Component-1024x1008-1.jpg" alt="" class="wp-image-4412" width="840" height="826" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/editor-Component-1024x1008-1.jpg 1024w, https://arabic-themes.com/wp-content/uploads/2023/08/editor-Component-1024x1008-1-600x591.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/editor-Component-1024x1008-1-300x295.jpg 300w, https://arabic-themes.com/wp-content/uploads/2023/08/editor-Component-1024x1008-1-768x756.jpg 768w" sizes="auto, (max-width: 840px) 100vw, 840px" /></figure>



<p class="has-text-align-right">بالشكل السابق يمكنك الإطلاع سريعًا على كافة مكونات المحرر، ولنتحدث الآن على كل مكون على حدة</p>



<h2 class="wp-block-heading has-text-align-right">أولا إضافة نص</h2>



<p>يحتوي المكون الأساسي (نص) على مكونات فرعية كالتالي:</p>



<ol class="wp-block-list">
<li>عنوان</li>



<li>فقرة</li>



<li>قائمة</li>



<li>إقتباس</li>



<li>شفرة</li>



<li>تقليدي</li>



<li>مهيأ مسبقا</li>



<li>إقتباس مائل</li>



<li>جدول</li>



<li>بيت شعر أو عبارة</li>
</ol>



<h2 class="wp-block-heading has-text-align-right"><strong>1- إضافة عنوان</strong></h2>



<p class="has-text-align-right">أول عنصر من عناصر المحتوى هو (<strong>العنوان)،&nbsp;</strong>وتستطيع إضافتها كما بالشكل التالي</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="1024" height="490" src="https://arabic-themes.com/wp-content/uploads/2023/08/H2-title-1024x490-1.jpg" alt="" class="wp-image-4415" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/H2-title-1024x490-1.jpg 1024w, https://arabic-themes.com/wp-content/uploads/2023/08/H2-title-1024x490-1-600x287.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/H2-title-1024x490-1-300x144.jpg 300w, https://arabic-themes.com/wp-content/uploads/2023/08/H2-title-1024x490-1-768x368.jpg 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>
</div>


<p class="has-text-align-right">ثم تحدد نوع العنوان، سواءًا كان عنوانًا رئيسًا أو فرعيًا، (H1,H2,H3 ..H6)، وتجد معه امكانية كتابة الخط بشكل مائل و خط عريض وايضا رابط تشعبي ولكن لا يحبذ ان يتم استخدام خط مائل او عريض في العناوين الفرعية</p>


<div class="wp-block-image">
<figure class="aligncenter size-full is-resized"><img loading="lazy" decoding="async" src="https://arabic-themes.com/wp-content/uploads/2023/08/H2-Write-Introduction-1024x455-1.jpg" alt="" class="wp-image-4416" width="840" height="373" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/H2-Write-Introduction-1024x455-1.jpg 1024w, https://arabic-themes.com/wp-content/uploads/2023/08/H2-Write-Introduction-1024x455-1-600x267.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/H2-Write-Introduction-1024x455-1-300x133.jpg 300w, https://arabic-themes.com/wp-content/uploads/2023/08/H2-Write-Introduction-1024x455-1-768x341.jpg 768w" sizes="auto, (max-width: 840px) 100vw, 840px" /></figure>
</div>


<h2 class="wp-block-heading has-text-align-right"><strong>2- إضافة فقرة</strong></h2>



<p class="has-text-align-right">العنصر التالي هو عنصر فقرة، والذي يحتوي على فقرات النصوص المتتالية، تستطيع إضافة فقرة من خلال الضغط على علامة الإضافة&nbsp;<strong>(+)&nbsp;</strong>ثم تختر&nbsp;<strong>(فقرة)</strong></p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1024" height="538" src="https://arabic-themes.com/wp-content/uploads/2023/08/pragraph-1024x538-1.jpg" alt="" class="wp-image-4417" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/pragraph-1024x538-1.jpg 1024w, https://arabic-themes.com/wp-content/uploads/2023/08/pragraph-1024x538-1-600x315.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/pragraph-1024x538-1-300x158.jpg 300w, https://arabic-themes.com/wp-content/uploads/2023/08/pragraph-1024x538-1-768x404.jpg 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p class="has-text-align-right">ثم تبدأ في كتابة فقرة المحتوى بشكل مرتب ومسلسل</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="747" height="468" src="https://arabic-themes.com/wp-content/uploads/2023/08/write-Pragraph-edited.jpg" alt="" class="wp-image-4418" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/write-Pragraph-edited.jpg 747w, https://arabic-themes.com/wp-content/uploads/2023/08/write-Pragraph-edited-600x376.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/write-Pragraph-edited-300x188.jpg 300w" sizes="auto, (max-width: 747px) 100vw, 747px" /></figure>



<p class="has-text-align-right">ثم تستطيع بعد ذلك عمل تغيير الخط أو عمل رابط تشعبي أو محاذاة النص يمينا او في المنتصف او يسارا او بعض العمليات الاخرى كما يوضحها الشكل التالي</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1024" height="625" src="https://arabic-themes.com/wp-content/uploads/2023/08/other-pragraph-Tools-1024x625-1.jpg" alt="" class="wp-image-4419" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/other-pragraph-Tools-1024x625-1.jpg 1024w, https://arabic-themes.com/wp-content/uploads/2023/08/other-pragraph-Tools-1024x625-1-600x366.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/other-pragraph-Tools-1024x625-1-300x183.jpg 300w, https://arabic-themes.com/wp-content/uploads/2023/08/other-pragraph-Tools-1024x625-1-768x469.jpg 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<h2 class="wp-block-heading has-text-align-right"><strong>3- إضافة قائمة</strong></h2>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1024" height="430" src="https://arabic-themes.com/wp-content/uploads/2023/08/list-1024x430-1.jpg" alt="" class="wp-image-4420" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/list-1024x430-1.jpg 1024w, https://arabic-themes.com/wp-content/uploads/2023/08/list-1024x430-1-600x252.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/list-1024x430-1-300x126.jpg 300w, https://arabic-themes.com/wp-content/uploads/2023/08/list-1024x430-1-768x323.jpg 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p class="has-text-align-right">الان يمكنك التحكم في نمط محتويات القائمة مباشرة كالتالي، حيث يمكنك اختيار قائمة نقطية أو قائمة مرقمة ومن خلال السهم في آخر قائمة أدوات يمكن التحكم في اللون ووضع خط أسفل النص أو في وسطه وغيرها من الأدوات</p>



<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" src="https://arabic-themes.com/wp-content/uploads/2023/08/Edit-List-1024x542-1.jpg" alt="" class="wp-image-4421" width="840" height="444" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/Edit-List-1024x542-1.jpg 1024w, https://arabic-themes.com/wp-content/uploads/2023/08/Edit-List-1024x542-1-600x318.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/Edit-List-1024x542-1-300x159.jpg 300w, https://arabic-themes.com/wp-content/uploads/2023/08/Edit-List-1024x542-1-768x407.jpg 768w" sizes="auto, (max-width: 840px) 100vw, 840px" /></figure>



<p class="has-text-align-right">وتستطيع تغيير اللون ونمط الخط ونمط القائمة من شريط الأدوات</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="800" height="500" src="https://arabic-themes.com/wp-content/uploads/2023/08/Edit-List-With-Bold-Color-Numbers-edited.jpg" alt="" class="wp-image-4422" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/Edit-List-With-Bold-Color-Numbers-edited.jpg 800w, https://arabic-themes.com/wp-content/uploads/2023/08/Edit-List-With-Bold-Color-Numbers-edited-600x375.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/Edit-List-With-Bold-Color-Numbers-edited-300x188.jpg 300w, https://arabic-themes.com/wp-content/uploads/2023/08/Edit-List-With-Bold-Color-Numbers-edited-768x480.jpg 768w" sizes="auto, (max-width: 800px) 100vw, 800px" /></figure>



<h2 class="wp-block-heading has-text-align-right"><strong>4- إضافة إقتباس</strong></h2>



<p class="has-text-align-right">العنصر التالي هو “<strong>الاقتباس”&nbsp;</strong>والذي يستخدم لعمل شكل متميز لوضع مقولة مقتبسة لأحد المشهورين، مع امكانية وضع اسم قائل هذه المقولة</p>



<p class="has-text-align-right">لعمل ذلك اضغط على علامة<strong>&nbsp;+</strong>&nbsp;واختار “<strong>اقتباس”</strong></p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="798" height="532" src="https://arabic-themes.com/wp-content/uploads/2023/08/quotation-Item-edited.jpg" alt="" class="wp-image-4423" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/quotation-Item-edited.jpg 798w, https://arabic-themes.com/wp-content/uploads/2023/08/quotation-Item-edited-600x400.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/quotation-Item-edited-300x200.jpg 300w, https://arabic-themes.com/wp-content/uploads/2023/08/quotation-Item-edited-768x512.jpg 768w" sizes="auto, (max-width: 798px) 100vw, 798px" /></figure>



<p class="has-text-align-right">&nbsp;بعد اختيار عنصر اقتباس ضع المقولة واسم قائلها كالتالي&nbsp;</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="499" height="281" src="https://arabic-themes.com/wp-content/uploads/2023/08/quotation-edited.jpg" alt="" class="wp-image-4424" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/quotation-edited.jpg 499w, https://arabic-themes.com/wp-content/uploads/2023/08/quotation-edited-300x169.jpg 300w" sizes="auto, (max-width: 499px) 100vw, 499px" /></figure>
</div>


<p class="has-text-align-right">ثم انقر علامة الاقتباس واختار خط مائل</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="722" height="540" src="https://arabic-themes.com/wp-content/uploads/2023/08/quotation-appear-edited.jpg" alt="" class="wp-image-4436" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/quotation-appear-edited.jpg 722w, https://arabic-themes.com/wp-content/uploads/2023/08/quotation-appear-edited-600x449.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/quotation-appear-edited-300x224.jpg 300w" sizes="auto, (max-width: 722px) 100vw, 722px" /></figure>
</div>


<p class="has-text-align-right">ليصبح الشكل الناتج كالتالي</p>


<div class="wp-block-image">
<figure class="aligncenter size-full is-resized"><img loading="lazy" decoding="async" src="https://arabic-themes.com/wp-content/uploads/2023/08/quotation-look-edited.jpg" alt="" class="wp-image-4439" width="550" height="413" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/quotation-look-edited.jpg 550w, https://arabic-themes.com/wp-content/uploads/2023/08/quotation-look-edited-300x225.jpg 300w" sizes="auto, (max-width: 550px) 100vw, 550px" /></figure>
</div>


<h2 class="wp-block-heading has-text-align-right"><strong>5- إضافة شفرة</strong></h2>



<p class="has-text-align-right">سنستخدم الان عنصر “<strong>شفرة”</strong>والذي يستخدم غالبًا لإضافة الأكواد البرمجية لتصبح بشكل منسق على النحو التالي:</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="715" height="535" src="https://arabic-themes.com/wp-content/uploads/2023/08/code-Item-edited.jpg" alt="" class="wp-image-4440" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/code-Item-edited.jpg 715w, https://arabic-themes.com/wp-content/uploads/2023/08/code-Item-edited-600x449.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/code-Item-edited-300x224.jpg 300w" sizes="auto, (max-width: 715px) 100vw, 715px" /></figure>
</div>


<p class="has-text-align-right">يظهر لك مربع كتابة الكود والذي سيكون أكثر تنسيقًا مما لو كتبته في فقرة عادية</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="1024" height="290" src="https://arabic-themes.com/wp-content/uploads/2023/08/Write-Code-1024x290-1.jpg" alt="" class="wp-image-4441" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/Write-Code-1024x290-1.jpg 1024w, https://arabic-themes.com/wp-content/uploads/2023/08/Write-Code-1024x290-1-600x170.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/Write-Code-1024x290-1-300x85.jpg 300w, https://arabic-themes.com/wp-content/uploads/2023/08/Write-Code-1024x290-1-768x218.jpg 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>
</div>


<h2 class="wp-block-heading has-text-align-right"><strong>6- إضافة عنصر تقليدي</strong></h2>



<p class="has-text-align-right">لعمل نص تقليدي اختر مكون نص ثم الايقونة تقليدي كالتالي</p>



<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" src="https://arabic-themes.com/wp-content/uploads/2023/08/traditional-Item-1024x426-1.jpg" alt="" class="wp-image-4442" width="840" height="349" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/traditional-Item-1024x426-1.jpg 1024w, https://arabic-themes.com/wp-content/uploads/2023/08/traditional-Item-1024x426-1-600x250.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/traditional-Item-1024x426-1-300x125.jpg 300w, https://arabic-themes.com/wp-content/uploads/2023/08/traditional-Item-1024x426-1-768x320.jpg 768w" sizes="auto, (max-width: 840px) 100vw, 840px" /></figure>



<p class="has-text-align-right">سيظهر لك المحرر التقليدي القديم ، يمكنك الكتابة واضافة اي نص تريد مع كل الامكانيات كما يظهر بالشكل</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1024" height="602" src="https://arabic-themes.com/wp-content/uploads/2023/08/Gutenburg-write-editor-comprehensive-explanation-150x150-4.jpg" alt="" class="wp-image-4455" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/Gutenburg-write-editor-comprehensive-explanation-150x150-4.jpg 1024w, https://arabic-themes.com/wp-content/uploads/2023/08/Gutenburg-write-editor-comprehensive-explanation-150x150-4-600x353.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/Gutenburg-write-editor-comprehensive-explanation-150x150-4-300x176.jpg 300w, https://arabic-themes.com/wp-content/uploads/2023/08/Gutenburg-write-editor-comprehensive-explanation-150x150-4-768x452.jpg 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p class="has-text-align-right"><strong>7- إضافة محتوى مهيأ مسبقا</strong></p>



<p class="has-text-align-right">لاضافة هذا العنصر اذهب للقائمة الرئيسية وقم باختياره&nbsp;</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1024" height="433" src="https://arabic-themes.com/wp-content/uploads/2023/08/previous-1024x433-1.jpg" alt="" class="wp-image-4456" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/previous-1024x433-1.jpg 1024w, https://arabic-themes.com/wp-content/uploads/2023/08/previous-1024x433-1-600x254.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/previous-1024x433-1-300x127.jpg 300w, https://arabic-themes.com/wp-content/uploads/2023/08/previous-1024x433-1-768x325.jpg 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p class="has-text-align-right">فائدة هذا العنصر انك يمكن ان تقوم بإدخال نص كنت قد قمت بتهيئته مسبقا في احد الملفات النصية وهو يحافظ على النمط المنقول انظر التالي</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1024" height="416" src="https://arabic-themes.com/wp-content/uploads/2023/08/previous-Write-1024x416-1.jpg" alt="" class="wp-image-4458" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/previous-Write-1024x416-1.jpg 1024w, https://arabic-themes.com/wp-content/uploads/2023/08/previous-Write-1024x416-1-600x244.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/previous-Write-1024x416-1-300x122.jpg 300w, https://arabic-themes.com/wp-content/uploads/2023/08/previous-Write-1024x416-1-768x312.jpg 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<h2 class="wp-block-heading has-text-align-right"><strong>8-  إضافة اقتباس مائل</strong></h2>



<p class="has-text-align-right">لا يختلف عنصر اقتباس مائل عن عنصر إقتباس حيث ان به نفس الأدوات ولاختياره قم بالذهاب للقائمة الرئيسية واختر اقتباس مائل&nbsp;</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="716" height="538" src="https://arabic-themes.com/wp-content/uploads/2023/08/quotation2-edited.jpg" alt="" class="wp-image-4459" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/quotation2-edited.jpg 716w, https://arabic-themes.com/wp-content/uploads/2023/08/quotation2-edited-600x451.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/quotation2-edited-300x225.jpg 300w" sizes="auto, (max-width: 716px) 100vw, 716px" /></figure>



<p class="has-text-align-right">بعد اختيار عنصر اقتباس مائل قم بإدخال النص والتحكم في أسلوب عرضه كالتالي</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="683" src="https://arabic-themes.com/wp-content/uploads/2023/08/quotation-choose-edited-1024x683.jpg" alt="" class="wp-image-4460" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/quotation-choose-edited-1024x683.jpg 1024w, https://arabic-themes.com/wp-content/uploads/2023/08/quotation-choose-edited-600x400.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/quotation-choose-edited-300x200.jpg 300w, https://arabic-themes.com/wp-content/uploads/2023/08/quotation-choose-edited-768x512.jpg 768w, https://arabic-themes.com/wp-content/uploads/2023/08/quotation-choose-edited.jpg 1059w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p class="has-text-align-right">ويظهر لك الناتج كما بالشكل التالي</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="964" height="641" src="https://arabic-themes.com/wp-content/uploads/2023/08/quotation-No-Differ-edited.jpg" alt="" class="wp-image-4461" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/quotation-No-Differ-edited.jpg 964w, https://arabic-themes.com/wp-content/uploads/2023/08/quotation-No-Differ-edited-600x399.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/quotation-No-Differ-edited-300x199.jpg 300w, https://arabic-themes.com/wp-content/uploads/2023/08/quotation-No-Differ-edited-768x511.jpg 768w" sizes="auto, (max-width: 964px) 100vw, 964px" /></figure>



<h2 class="wp-block-heading has-text-align-right"><strong>9- إضافة جدول</strong></h2>



<p class="has-text-align-right">لعمل جدول بيانات داخل المحتوى الخاص بك، فيمكنك استخدام عنصر&nbsp;<strong>“جدول”&nbsp;</strong>من القائمة الرئيسية ثم اختياره من المكون نص</p>



<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" src="https://arabic-themes.com/wp-content/uploads/2023/08/Table-1024x436-1.jpg" alt="" class="wp-image-4462" width="840" height="357" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/Table-1024x436-1.jpg 1024w, https://arabic-themes.com/wp-content/uploads/2023/08/Table-1024x436-1-600x255.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/Table-1024x436-1-300x128.jpg 300w, https://arabic-themes.com/wp-content/uploads/2023/08/Table-1024x436-1-768x327.jpg 768w" sizes="auto, (max-width: 840px) 100vw, 840px" /></figure>



<p class="has-text-align-right">يظهر أدوات عمل الجدول كالتالي قم بإضافة عدد الصفوف والاعمدة</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="678" height="453" src="https://arabic-themes.com/wp-content/uploads/2023/08/Table-Rows-Columns-edited.jpg" alt="" class="wp-image-4464" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/Table-Rows-Columns-edited.jpg 678w, https://arabic-themes.com/wp-content/uploads/2023/08/Table-Rows-Columns-edited-600x401.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/Table-Rows-Columns-edited-300x200.jpg 300w" sizes="auto, (max-width: 678px) 100vw, 678px" /></figure>
</div>


<p class="has-text-align-right">,ولإضافة عمود او صف جديد قبل او بعد الصف أو العمود المحدد اختار الاداة التالية&nbsp;</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="703" height="469" src="https://arabic-themes.com/wp-content/uploads/2023/08/Table-Add-Fields-edited.jpg" alt="" class="wp-image-4465" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/Table-Add-Fields-edited.jpg 703w, https://arabic-themes.com/wp-content/uploads/2023/08/Table-Add-Fields-edited-600x400.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/Table-Add-Fields-edited-300x200.jpg 300w" sizes="auto, (max-width: 703px) 100vw, 703px" /></figure>



<p><strong>10- عنصر بيت شعر أو عبارة</strong></p>



<p class="has-text-align-right"><strong>10- عنصر بيت شعر أو عبارة</strong></p>



<p class="has-text-align-right">لعمل تهيئة لـ بيت شعر او عبارة بصورة صحيحة اذهب الى القائمة الرئيسية واختار هذا العنصر</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="828" height="552" src="https://arabic-themes.com/wp-content/uploads/2023/08/poletryAdd-edited.jpg" alt="" class="wp-image-4466" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/poletryAdd-edited.jpg 828w, https://arabic-themes.com/wp-content/uploads/2023/08/poletryAdd-edited-600x400.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/poletryAdd-edited-300x200.jpg 300w, https://arabic-themes.com/wp-content/uploads/2023/08/poletryAdd-edited-768x512.jpg 768w" sizes="auto, (max-width: 828px) 100vw, 828px" /></figure>



<p class="has-text-align-right">ثم ستجد نفس الأدوات العامة ستجدها لتهيئة بيت الشعر أو العبارة</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="748" height="560" src="https://arabic-themes.com/wp-content/uploads/2023/08/poletry-Write-edited.jpg" alt="" class="wp-image-4467" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/poletry-Write-edited.jpg 748w, https://arabic-themes.com/wp-content/uploads/2023/08/poletry-Write-edited-600x449.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/poletry-Write-edited-300x225.jpg 300w" sizes="auto, (max-width: 748px) 100vw, 748px" /></figure>



<h2 class="wp-block-heading has-text-align-right">ثانيا: إضافة وسائط<br></h2>



<p>ويحتوي على العناصر التالية</p>



<ol class="wp-block-list">
<li>عنصر صورة</li>



<li>عنصر مقارنة صور</li>



<li>عنصر عرض شرائح</li>



<li>عنصر معرض متجانب</li>



<li>عنصر معرض</li>



<li>عنصر صوت</li>



<li>عنصر غلاف</li>



<li>عنصر ملف</li>



<li>عنصر وسائط من نص</li>



<li>عنصر فيديو</li>
</ol>



<h2 class="wp-block-heading has-text-align-right"><strong>1- إضافة صورة</strong></h2>



<p class="has-text-align-right">الآن سنقوم بإضافة صورة ولعمل ذلك اذهب الى المكون الثاني (وسائط) واختار منه العنصر صورة كالتالي</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="540" height="863" src="https://arabic-themes.com/wp-content/uploads/2023/08/Add-Image-edited.jpg" alt="" class="wp-image-4468" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/Add-Image-edited.jpg 540w, https://arabic-themes.com/wp-content/uploads/2023/08/Add-Image-edited-188x300.jpg 188w" sizes="auto, (max-width: 540px) 100vw, 540px" /></figure>
</div>


<p class="has-text-align-right">ستظهر لك الصورة مع الأدوات حيث يمكنك رفع الصورة التي تريد أو يمكنك ارفاق رابط للصورة من اي موقع اخر او حتى موقعك او حتى اختيار صورة كنت قد رفعتها سابقا</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="457" height="290" src="https://arabic-themes.com/wp-content/uploads/2023/08/Upload-Image-edited.jpg" alt="" class="wp-image-4469" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/Upload-Image-edited.jpg 457w, https://arabic-themes.com/wp-content/uploads/2023/08/Upload-Image-edited-300x190.jpg 300w" sizes="auto, (max-width: 457px) 100vw, 457px" /></figure>
</div>


<p class="has-text-align-right">من خلال الضغط على زر رفع لتقوم برفع الصورة من حاسوبك، ثم تقوم بتحديد الصورة المطلوبة</p>


<div class="wp-block-image">
<figure class="aligncenter size-full is-resized"><img loading="lazy" decoding="async" src="https://arabic-themes.com/wp-content/uploads/2023/08/select-Image-edited.jpg" alt="" class="wp-image-4470" width="800" height="503" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/select-Image-edited.jpg 800w, https://arabic-themes.com/wp-content/uploads/2023/08/select-Image-edited-600x377.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/select-Image-edited-300x189.jpg 300w, https://arabic-themes.com/wp-content/uploads/2023/08/select-Image-edited-768x483.jpg 768w" sizes="auto, (max-width: 800px) 100vw, 800px" /></figure>
</div>


<p class="has-text-align-right">بعد رفع الصورة يظهر لك أدوات التحكم في الصورة وأيضا أدوات لكتابة تسمية توضيحية للصورة كالتالي</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="683" src="https://arabic-themes.com/wp-content/uploads/2023/08/Edite-Image-edited-1024x683.jpg" alt="" class="wp-image-4471" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/Edite-Image-edited-1024x683.jpg 1024w, https://arabic-themes.com/wp-content/uploads/2023/08/Edite-Image-edited-600x400.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/Edite-Image-edited-300x200.jpg 300w, https://arabic-themes.com/wp-content/uploads/2023/08/Edite-Image-edited-768x512.jpg 768w, https://arabic-themes.com/wp-content/uploads/2023/08/Edite-Image-edited.jpg 1027w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p class="has-text-align-right">الأدوات المستخدمة للصورة تستخدم لعمل قص للصورة واستبدالها اذا اردت ومحاذاتها وايضا عمل رابط تشعبي لها</p>



<h2 class="wp-block-heading has-text-align-right"><strong>2-&nbsp;إضافة</strong>&nbsp;<strong>مقارنة صور&nbsp;</strong></h2>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="455" height="606" src="https://arabic-themes.com/wp-content/uploads/2023/08/compare-Images-edited.jpg" alt="" class="wp-image-4472" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/compare-Images-edited.jpg 455w, https://arabic-themes.com/wp-content/uploads/2023/08/compare-Images-edited-225x300.jpg 225w" sizes="auto, (max-width: 455px) 100vw, 455px" /></figure>
</div>


<p class="has-text-align-right">لتحميل الصورتين قبل التعديل وبعده قم بعمل رفع عن طريق مربع الحوار الذي يظهر لك عند استخدامك العنصر</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="582" height="348" src="https://arabic-themes.com/wp-content/uploads/2023/08/compareI-mages-Upload-edited.jpg" alt="" class="wp-image-4473" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/compareI-mages-Upload-edited.jpg 582w, https://arabic-themes.com/wp-content/uploads/2023/08/compareI-mages-Upload-edited-300x179.jpg 300w" sizes="auto, (max-width: 582px) 100vw, 582px" /></figure>
</div>


<p class="has-text-align-right">يظهر لك حدا فاصلًا بين الصورتين يمكن تغير ابعاده بالنقر عليه وسحبه&nbsp;</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="800" height="574" src="https://arabic-themes.com/wp-content/uploads/2023/08/compare-ImagesDone-edited.jpg" alt="" class="wp-image-4474" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/compare-ImagesDone-edited.jpg 800w, https://arabic-themes.com/wp-content/uploads/2023/08/compare-ImagesDone-edited-600x431.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/compare-ImagesDone-edited-300x215.jpg 300w, https://arabic-themes.com/wp-content/uploads/2023/08/compare-ImagesDone-edited-768x551.jpg 768w" sizes="auto, (max-width: 800px) 100vw, 800px" /></figure>



<h2 class="wp-block-heading has-text-align-right"><strong>3- &nbsp;إضافة</strong>&nbsp;<strong>عرض شرائح&nbsp;</strong></h2>



<p class="has-text-align-right">لعرض شرائح من الصور بشكل جذاب يمكنك استخدام العنصر عرض شرائح عن طريق الذهاب إلى القائمة الرئيسية واختياره</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="488" height="868" src="https://arabic-themes.com/wp-content/uploads/2023/08/slider-Item-edited.jpg" alt="" class="wp-image-4476" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/slider-Item-edited.jpg 488w, https://arabic-themes.com/wp-content/uploads/2023/08/slider-Item-edited-169x300.jpg 169w" sizes="auto, (max-width: 488px) 100vw, 488px" /></figure>
</div>


<p class="has-text-align-right">سيظهر لك مربع حوار لرفع الصور التي تريد عرضها، ثم ستضغظ على زر رفع وتختر الصور المراد عرضها&nbsp;</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="581" height="340" src="https://arabic-themes.com/wp-content/uploads/2023/08/slider-Upload-edited.jpg" alt="" class="wp-image-4477" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/slider-Upload-edited.jpg 581w, https://arabic-themes.com/wp-content/uploads/2023/08/slider-Upload-edited-300x176.jpg 300w" sizes="auto, (max-width: 581px) 100vw, 581px" /></figure>
</div>


<p class="has-text-align-right">لإضافة أية عدد من الصور يمكنك نقر علامة&nbsp;<strong>+</strong>&nbsp;الموجودة أسفل الشرائح ورفع صور اخرى</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="800" height="450" src="https://arabic-themes.com/wp-content/uploads/2023/08/slider-Upload2-edited.jpg" alt="" class="wp-image-4478" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/slider-Upload2-edited.jpg 800w, https://arabic-themes.com/wp-content/uploads/2023/08/slider-Upload2-edited-600x338.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/slider-Upload2-edited-300x169.jpg 300w, https://arabic-themes.com/wp-content/uploads/2023/08/slider-Upload2-edited-768x432.jpg 768w" sizes="auto, (max-width: 800px) 100vw, 800px" /></figure>



<p class="has-text-align-right">الشكل التالي يوضح لك الناتج النهائي وكيف يمكن أن يظهر للزائرين في مقالك او صفحتك&nbsp;</p>



<figure class="wp-block-image size-large is-resized"><img loading="lazy" decoding="async" src="https://arabic-themes.com/wp-content/uploads/2023/08/slider-1024x576.gif" alt="" class="wp-image-4479" width="840" height="472" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/slider-1024x576.gif 1024w, https://arabic-themes.com/wp-content/uploads/2023/08/slider-600x338.gif 600w, https://arabic-themes.com/wp-content/uploads/2023/08/slider-300x169.gif 300w, https://arabic-themes.com/wp-content/uploads/2023/08/slider-768x432.gif 768w" sizes="auto, (max-width: 840px) 100vw, 840px" /></figure>



<h2 class="wp-block-heading has-text-align-right"><strong>4- &nbsp;عنصر معرض متجانب&nbsp;</strong><br></h2>



<p class="has-text-align-right">لإظهار الصور بشكل متجانب قم بالذهاب الى القائمة الرئيسية واختر عنصر&nbsp;<strong>معرض متجانب</strong></p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="534" height="853" src="https://arabic-themes.com/wp-content/uploads/2023/08/gallery-Item-edited.jpg" alt="" class="wp-image-4480" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/gallery-Item-edited.jpg 534w, https://arabic-themes.com/wp-content/uploads/2023/08/gallery-Item-edited-188x300.jpg 188w" sizes="auto, (max-width: 534px) 100vw, 534px" /></figure>
</div>


<p class="has-text-align-right">يظهر لك مربع حوار للمساعدة على رفع الصور قم بالنقر على زر رفع لمجموعة من الصور لإظهارها في المعرض&nbsp;</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="560" height="896" src="https://arabic-themes.com/wp-content/uploads/2023/08/Gallery-Upload-edited.jpg" alt="" class="wp-image-4481" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/Gallery-Upload-edited.jpg 560w, https://arabic-themes.com/wp-content/uploads/2023/08/Gallery-Upload-edited-188x300.jpg 188w" sizes="auto, (max-width: 560px) 100vw, 560px" /></figure>



<p class="has-text-align-right">ستظهر لك الصور بشكل متناسق كما بالشكل التالي</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="800" height="450" src="https://arabic-themes.com/wp-content/uploads/2023/08/Gallery-show-1-edited.jpg" alt="" class="wp-image-4483" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/Gallery-show-1-edited.jpg 800w, https://arabic-themes.com/wp-content/uploads/2023/08/Gallery-show-1-edited-600x338.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/Gallery-show-1-edited-300x169.jpg 300w, https://arabic-themes.com/wp-content/uploads/2023/08/Gallery-show-1-edited-768x432.jpg 768w" sizes="auto, (max-width: 800px) 100vw, 800px" /></figure>



<p class="has-text-align-right">لتغير طريقة عرض الشرائح اذهب الى الأدوات الخاصة وانقر تغير نوع او نمط المكون واختار تغير النمط كما تريد ان يظهر كما بالشكل التالي&nbsp;&nbsp;&nbsp;</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="576" src="https://arabic-themes.com/wp-content/uploads/2023/08/gallery-1024x576.gif" alt="" class="wp-image-4485" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/gallery-1024x576.gif 1024w, https://arabic-themes.com/wp-content/uploads/2023/08/gallery-600x338.gif 600w, https://arabic-themes.com/wp-content/uploads/2023/08/gallery-300x169.gif 300w, https://arabic-themes.com/wp-content/uploads/2023/08/gallery-768x432.gif 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p class="has-text-align-right">لاختيار مرشح الصور وتغير الوانها بالمرشحات المعطاه قم بالتالي&nbsp;</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="576" src="https://arabic-themes.com/wp-content/uploads/2023/08/gallery-Filter-1024x576.gif" alt="" class="wp-image-4486" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/gallery-Filter-1024x576.gif 1024w, https://arabic-themes.com/wp-content/uploads/2023/08/gallery-Filter-600x338.gif 600w, https://arabic-themes.com/wp-content/uploads/2023/08/gallery-Filter-300x169.gif 300w, https://arabic-themes.com/wp-content/uploads/2023/08/gallery-Filter-768x432.gif 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<h2 class="wp-block-heading has-text-align-right"><strong>5- إضافة معرض&nbsp;</strong><br></h2>



<p class="has-text-align-right">لإظهار عددًا كبيرًا من الصور بشكل منسق وبترتيب جيد، أضف مكون&nbsp;<strong>(معرض)</strong></p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="522" height="696" src="https://arabic-themes.com/wp-content/uploads/2023/08/Rich-Gallery-Item-edited.jpg" alt="" class="wp-image-4487" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/Rich-Gallery-Item-edited.jpg 522w, https://arabic-themes.com/wp-content/uploads/2023/08/Rich-Gallery-Item-edited-225x300.jpg 225w" sizes="auto, (max-width: 522px) 100vw, 522px" /></figure>
</div>


<p class="has-text-align-right">سيظهر لك خيار رفع الصور، ثم قم باختيار عددًا كبيرًا من الصور لمشاهدة ما يمكن ان يقدم لك العنصر</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="493" height="329" src="https://arabic-themes.com/wp-content/uploads/2023/08/Rich-Gallery-Upload-edited.jpg" alt="" class="wp-image-4488" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/Rich-Gallery-Upload-edited.jpg 493w, https://arabic-themes.com/wp-content/uploads/2023/08/Rich-Gallery-Upload-edited-300x200.jpg 300w" sizes="auto, (max-width: 493px) 100vw, 493px" /></figure>
</div>


<p class="has-text-align-right">سيظهر لك المعرض كما بالشكل التالى ولاضافة اي عدد من الصور مرة اخرى ستجد في الأسفل زر رفع</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1024" height="567" src="https://arabic-themes.com/wp-content/uploads/2023/08/Rich-Gallery-Show-1024x567-1.jpg" alt="" class="wp-image-4489" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/Rich-Gallery-Show-1024x567-1.jpg 1024w, https://arabic-themes.com/wp-content/uploads/2023/08/Rich-Gallery-Show-1024x567-1-600x332.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/Rich-Gallery-Show-1024x567-1-300x166.jpg 300w, https://arabic-themes.com/wp-content/uploads/2023/08/Rich-Gallery-Show-1024x567-1-768x425.jpg 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<h1 class="wp-block-heading has-text-align-right"><strong>6- إضافة صوت</strong></h1>



<p class="has-text-align-right">اذا اردت إضافة ملفًا صوتيًا ليظهر في مقالك، قم بالذهاب إلى قائمة المكونات واختر&nbsp;<strong>صوت</strong></p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="523" height="696" src="https://arabic-themes.com/wp-content/uploads/2023/08/voice-File-Add-edited.jpg" alt="" class="wp-image-4490" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/voice-File-Add-edited.jpg 523w, https://arabic-themes.com/wp-content/uploads/2023/08/voice-File-Add-edited-225x300.jpg 225w" sizes="auto, (max-width: 523px) 100vw, 523px" /></figure>



<p class="has-text-align-right">سيظهر لك مربع حوار لرفع الملف الصوتي قم باختيار الملف ورفعه كما بالشكلين التاليين&nbsp;</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="581" height="197" src="https://arabic-themes.com/wp-content/uploads/2023/08/voice-File-Upload-edited.jpg" alt="" class="wp-image-4491" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/voice-File-Upload-edited.jpg 581w, https://arabic-themes.com/wp-content/uploads/2023/08/voice-File-Upload-edited-300x102.jpg 300w" sizes="auto, (max-width: 581px) 100vw, 581px" /></figure>
</div>

<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="799" height="396" src="https://arabic-themes.com/wp-content/uploads/2023/08/voice-File-Show-edited.jpg" alt="" class="wp-image-4492" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/voice-File-Show-edited.jpg 799w, https://arabic-themes.com/wp-content/uploads/2023/08/voice-File-Show-edited-600x297.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/voice-File-Show-edited-300x149.jpg 300w, https://arabic-themes.com/wp-content/uploads/2023/08/voice-File-Show-edited-768x381.jpg 768w" sizes="auto, (max-width: 799px) 100vw, 799px" /></figure>
</div>


<p class="has-text-align-right">سيظهر لك الناتج النهائي كالتالي، حيث يمكنك أيضًا إضافة نصًا أسفل الملف الصوتي بما يقدمه مثلا</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1024" height="429" src="https://arabic-themes.com/wp-content/uploads/2023/08/voice-File-Show2-1024x429-1.jpg" alt="" class="wp-image-4493" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/voice-File-Show2-1024x429-1.jpg 1024w, https://arabic-themes.com/wp-content/uploads/2023/08/voice-File-Show2-1024x429-1-600x251.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/voice-File-Show2-1024x429-1-300x126.jpg 300w, https://arabic-themes.com/wp-content/uploads/2023/08/voice-File-Show2-1024x429-1-768x322.jpg 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<h1 class="wp-block-heading has-text-align-right"><strong>7- إضافة غلاف</strong></h1>



<p class="has-text-align-right">الغلاف هو عبارة عن صورة يمكن الكتابة عليها او داخلها.<br>تستطيع ذلك من خلال الذهاب الى القائمة الرئيسية للمكونات واختيار&nbsp;<strong>غلاف</strong></p>


<div class="wp-block-image">
<figure class="aligncenter size-full is-resized"><img loading="lazy" decoding="async" src="https://arabic-themes.com/wp-content/uploads/2023/08/envelope-edited.jpg" alt="" class="wp-image-4494" width="454" height="605" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/envelope-edited.jpg 454w, https://arabic-themes.com/wp-content/uploads/2023/08/envelope-edited-225x300.jpg 225w" sizes="auto, (max-width: 454px) 100vw, 454px" /></figure>
</div>


<p>سيظهر لك الأدوات مع مربع الحوار لرفع الصورة أو اختيار اللون الذي سيظهر به خلفية الكلمات في حالة عدم جعل الخلفية على شكل صورة</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="457" height="289" src="https://arabic-themes.com/wp-content/uploads/2023/08/envelope-Upload-edited.jpg" alt="" class="wp-image-4495" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/envelope-Upload-edited.jpg 457w, https://arabic-themes.com/wp-content/uploads/2023/08/envelope-Upload-edited-300x190.jpg 300w" sizes="auto, (max-width: 457px) 100vw, 457px" /></figure>
</div>


<p class="has-text-align-right">يظهر لك الناتج النهائي بعد اضافة النص داخل الصورة كما بالشكل التالي</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="799" height="376" src="https://arabic-themes.com/wp-content/uploads/2023/08/envelope-Write-edited.jpg" alt="" class="wp-image-4496" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/envelope-Write-edited.jpg 799w, https://arabic-themes.com/wp-content/uploads/2023/08/envelope-Write-edited-600x282.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/envelope-Write-edited-300x141.jpg 300w, https://arabic-themes.com/wp-content/uploads/2023/08/envelope-Write-edited-768x361.jpg 768w" sizes="auto, (max-width: 799px) 100vw, 799px" /></figure>



<h1 class="wp-block-heading has-text-align-right"><strong>8- إضافة ملف&nbsp;</strong></h1>



<p class="has-text-align-right">اذا اردت رفع ملف على الصفحة ليتم تنزيله بواسطة الزائرين، قم بالذهاب الى القائمة الرئيسية واختر&nbsp;<strong>ملف</strong></p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="463" height="617" src="https://arabic-themes.com/wp-content/uploads/2023/08/File-edited.jpg" alt="" class="wp-image-4497" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/File-edited.jpg 463w, https://arabic-themes.com/wp-content/uploads/2023/08/File-edited-225x300.jpg 225w" sizes="auto, (max-width: 463px) 100vw, 463px" /></figure>
</div>


<p class="has-text-align-right">سيظهر لك الخيار لرفع الملف باي امتداد مثل pdf او docx او غيرها من الامتدادات لكافة انواع الملفات&nbsp;</p>


<div class="wp-block-image">
<figure class="aligncenter size-full is-resized"><img loading="lazy" decoding="async" src="https://arabic-themes.com/wp-content/uploads/2023/08/File-Upload-edited.jpg" alt="" class="wp-image-4498" width="457" height="282" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/File-Upload-edited.jpg 457w, https://arabic-themes.com/wp-content/uploads/2023/08/File-Upload-edited-300x185.jpg 300w" sizes="auto, (max-width: 457px) 100vw, 457px" /></figure>
</div>


<p class="has-text-align-right">بعد أن يتم رفع الملف سيظهر لك كالتالي باسمه وزر تنزيل يمكنك تغير اسمه كما تريد</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="581" height="297" src="https://arabic-themes.com/wp-content/uploads/2023/08/file-Show-edited.jpg" alt="" class="wp-image-4499" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/file-Show-edited.jpg 581w, https://arabic-themes.com/wp-content/uploads/2023/08/file-Show-edited-300x153.jpg 300w" sizes="auto, (max-width: 581px) 100vw, 581px" /></figure>



<h1 class="wp-block-heading has-text-align-right"><strong>9- إضافة وسائط مع نص&nbsp;</strong></h1>



<p class="has-text-align-right">للقيام باضافة وسائط كالصور وإضافة نص بجانبها على اليمين او اليسار، قم باختيار&nbsp;<strong>وسائط مع نص</strong></p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="455" height="608" src="https://arabic-themes.com/wp-content/uploads/2023/08/Media-With-Text-edited.jpg" alt="" class="wp-image-4500" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/Media-With-Text-edited.jpg 455w, https://arabic-themes.com/wp-content/uploads/2023/08/Media-With-Text-edited-225x300.jpg 225w" sizes="auto, (max-width: 455px) 100vw, 455px" /></figure>
</div>


<p class="has-text-align-right">سيظهر لك قسمين في مربع الحوار أحدهما لرفع الصورة والآخر لكتابة المحتوى المراد بجانبه، ويمكن أن يكون المحتوى عبارة عن عنوان أو فقرة أو غيرهما</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="582" height="391" src="https://arabic-themes.com/wp-content/uploads/2023/08/Media-With-Text-Upload-edited.jpg" alt="" class="wp-image-4501" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/Media-With-Text-Upload-edited.jpg 582w, https://arabic-themes.com/wp-content/uploads/2023/08/Media-With-Text-Upload-edited-300x202.jpg 300w" sizes="auto, (max-width: 582px) 100vw, 582px" /></figure>



<p>سيظهر لك قسمين في مربع الحوار أحدهما لرفع الصورة والآخر لكتابة المحتوى المراد بجانبه، ويمكن أن يكون المحتوى عبارة عن عنوان أو فقرة أو غيرهما</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="484" height="303" src="https://arabic-themes.com/wp-content/uploads/2023/08/Video-edited.jpg" alt="" class="wp-image-4502" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/Video-edited.jpg 484w, https://arabic-themes.com/wp-content/uploads/2023/08/Video-edited-300x188.jpg 300w" sizes="auto, (max-width: 484px) 100vw, 484px" /></figure>



<h2 class="wp-block-heading has-text-align-right"><strong>10- إضافة فيديو</strong></h2>



<p class="has-text-align-right">لإضافة الفيديو، اذهب إلى القائمة الرئيسية واختر عنصر&nbsp;<strong>فيديو</strong></p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="426" height="215" src="https://arabic-themes.com/wp-content/uploads/2023/08/Video-Upload-edited.jpg" alt="" class="wp-image-4503" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/Video-Upload-edited.jpg 426w, https://arabic-themes.com/wp-content/uploads/2023/08/Video-Upload-edited-300x151.jpg 300w" sizes="auto, (max-width: 426px) 100vw, 426px" /></figure>
</div>


<p class="has-text-align-right">ثم قم برفع الفيديو عن طريق مربع الحوار الذي سيظهر لك كما بالشكل التالي</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1024" height="502" src="https://arabic-themes.com/wp-content/uploads/2023/08/Video-Show-1024x502-1.jpg" alt="" class="wp-image-4504" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/Video-Show-1024x502-1.jpg 1024w, https://arabic-themes.com/wp-content/uploads/2023/08/Video-Show-1024x502-1-600x294.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/Video-Show-1024x502-1-300x147.jpg 300w, https://arabic-themes.com/wp-content/uploads/2023/08/Video-Show-1024x502-1-768x377.jpg 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>يمكنك ايضًا احضار رابط من اليوتيوب مثلا او Vimo او أية روابط فيديو اخرى وربطها كالتالي</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1024" height="536" src="https://arabic-themes.com/wp-content/uploads/2023/08/Video-Add-URL-1024x536-1.jpg" alt="" class="wp-image-4505" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/Video-Add-URL-1024x536-1.jpg 1024w, https://arabic-themes.com/wp-content/uploads/2023/08/Video-Add-URL-1024x536-1-600x314.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/Video-Add-URL-1024x536-1-300x157.jpg 300w, https://arabic-themes.com/wp-content/uploads/2023/08/Video-Add-URL-1024x536-1-768x402.jpg 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p class="has-text-align-right">سيظهر لك الفيديو كما بالشكل التالي</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1024" height="642" src="https://arabic-themes.com/wp-content/uploads/2023/08/Video-YouTube-Link-1024x642-1.jpg" alt="" class="wp-image-4506" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/Video-YouTube-Link-1024x642-1.jpg 1024w, https://arabic-themes.com/wp-content/uploads/2023/08/Video-YouTube-Link-1024x642-1-600x376.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/Video-YouTube-Link-1024x642-1-300x188.jpg 300w, https://arabic-themes.com/wp-content/uploads/2023/08/Video-YouTube-Link-1024x642-1-768x482.jpg 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<h3 class="wp-block-heading has-text-align-right" id="Design-elements-inGutenberg-editor">ثالثا مكون تصميم وعناصره</h3>



<p class="has-text-align-right">ويحتوي على العناصر التالية</p>



<ol class="wp-block-list">
<li>عنصر ازرار</li>



<li>عنصر أعمدة</li>



<li>عنصر مجموعة</li>



<li>عنصر المزيد</li>



<li>عنصر فاصل صفحة</li>



<li>عنصر فاصل</li>



<li>عنصر فراغ فاصل</li>
</ol>



<p class="has-text-align-right"><strong>1-إضافة الأزرار</strong></p>



<p class="has-text-align-right">لإضافة زر أو أكثر يمكنك الذهاب الى القائمة الرئيسية واختيار&nbsp;<strong>ازرار</strong></p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="656" height="492" src="https://arabic-themes.com/wp-content/uploads/2023/08/buttons-edited.jpg" alt="" class="wp-image-4508" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/buttons-edited.jpg 656w, https://arabic-themes.com/wp-content/uploads/2023/08/buttons-edited-600x450.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/buttons-edited-300x225.jpg 300w" sizes="auto, (max-width: 656px) 100vw, 656px" /></figure>



<p class="has-text-align-right">سيظهر لك الزر اكتب اسمه الداخلي كالتالي ويمكنك عمل رابط تشعبي له ايضا وتغير الخط الى عريض أو مائل</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="426" height="199" src="https://arabic-themes.com/wp-content/uploads/2023/08/buttons-Add-edited.jpg" alt="" class="wp-image-4511" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/buttons-Add-edited.jpg 426w, https://arabic-themes.com/wp-content/uploads/2023/08/buttons-Add-edited-300x140.jpg 300w" sizes="auto, (max-width: 426px) 100vw, 426px" /></figure>
</div>


<h3 class="wp-block-heading has-text-align-right"><strong>2- إضافة أعمدة</strong></h3>



<p class="has-text-align-right">عنصر&nbsp;<strong>أعمدة&nbsp;</strong>يظهر لك النصوص والصور مقسمة كما تظهر بالصحف العامة، اذهب الى القائمة الرئيسية وختر عنصر&nbsp;<strong>أعمدة</strong></p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="723" height="542" src="https://arabic-themes.com/wp-content/uploads/2023/08/columns-edited.jpg" alt="" class="wp-image-4513" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/columns-edited.jpg 723w, https://arabic-themes.com/wp-content/uploads/2023/08/columns-edited-600x450.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/columns-edited-300x225.jpg 300w" sizes="auto, (max-width: 723px) 100vw, 723px" /></figure>



<p class="has-text-align-right">سيظهر لك العديد من التقسيمات للاعمدة مثل عمودين متساويين في العرض أو أحدهما ضعف الاخر او ثلاث اعمدة</p>


<div class="wp-block-image">
<figure class="aligncenter size-full is-resized"><img loading="lazy" decoding="async" src="https://arabic-themes.com/wp-content/uploads/2023/08/columns-Sepration-edited.jpg" alt="" class="wp-image-4514" width="457" height="328" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/columns-Sepration-edited.jpg 457w, https://arabic-themes.com/wp-content/uploads/2023/08/columns-Sepration-edited-300x215.jpg 300w" sizes="auto, (max-width: 457px) 100vw, 457px" /></figure>
</div>


<p class="has-text-align-right">بعد القيام بالتقسيم يمكنك إضافة فقرات في كل عمود عن طريق النقر على علامة&nbsp;<strong>+&nbsp;</strong>واختيار فقرة</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="800" height="574" src="https://arabic-themes.com/wp-content/uploads/2023/08/columns-Add-Pragraph-edited.jpg" alt="" class="wp-image-4515" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/columns-Add-Pragraph-edited.jpg 800w, https://arabic-themes.com/wp-content/uploads/2023/08/columns-Add-Pragraph-edited-600x431.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/columns-Add-Pragraph-edited-300x215.jpg 300w, https://arabic-themes.com/wp-content/uploads/2023/08/columns-Add-Pragraph-edited-768x551.jpg 768w" sizes="auto, (max-width: 800px) 100vw, 800px" /></figure>



<p class="has-text-align-right">يمكنك تنسيق النصوص في الاعمدة واضافة خط مائل وخط عريض وعمل روابط تشعبية كما يحدث في أي فقرة عادية</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="800" height="372" src="https://arabic-themes.com/wp-content/uploads/2023/08/columns-Sepration-Pragraphs-edited.jpg" alt="" class="wp-image-4516" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/columns-Sepration-Pragraphs-edited.jpg 800w, https://arabic-themes.com/wp-content/uploads/2023/08/columns-Sepration-Pragraphs-edited-600x279.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/columns-Sepration-Pragraphs-edited-300x140.jpg 300w, https://arabic-themes.com/wp-content/uploads/2023/08/columns-Sepration-Pragraphs-edited-768x357.jpg 768w" sizes="auto, (max-width: 800px) 100vw, 800px" /></figure>



<h2 class="wp-block-heading has-text-align-right"><strong>3- إضافة مجموعة</strong></h2>



<p class="has-text-align-right">لإضافة مكون يجمع مجموعة مكونات أخرى، اذهب الى القائمة الرئيسية واختر&nbsp;<strong>مجموعة</strong></p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="595" height="794" src="https://arabic-themes.com/wp-content/uploads/2023/08/group-edited.jpg" alt="" class="wp-image-4517" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/group-edited.jpg 595w, https://arabic-themes.com/wp-content/uploads/2023/08/group-edited-225x300.jpg 225w" sizes="auto, (max-width: 595px) 100vw, 595px" /></figure>



<p class="has-text-align-right">يمكنك بعد ذلك النقر على علامة + ووضع أي نوع من أنواع العناصر داخل المجموعة&nbsp;</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="426" height="267" src="https://arabic-themes.com/wp-content/uploads/2023/08/group-Add-Components-edited.jpg" alt="" class="wp-image-4518" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/group-Add-Components-edited.jpg 426w, https://arabic-themes.com/wp-content/uploads/2023/08/group-Add-Components-edited-300x188.jpg 300w" sizes="auto, (max-width: 426px) 100vw, 426px" /></figure>
</div>


<h1 class="wp-block-heading has-text-align-right"><strong>4- إضافة عنصر المزيد</strong></h1>



<p class="has-text-align-right">عنصر المزيد يستخدم حتى يظهر للمستخدم ليقوم بالنقر عليه لإضافة المزيد من القراءة<br>لتفعيله اذهب إلى القائمة الرئيسية واختر&nbsp;<strong>المزيد</strong></p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="585" height="389" src="https://arabic-themes.com/wp-content/uploads/2023/08/more-edited.jpg" alt="" class="wp-image-4519" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/more-edited.jpg 585w, https://arabic-themes.com/wp-content/uploads/2023/08/more-edited-300x199.jpg 300w" sizes="auto, (max-width: 585px) 100vw, 585px" /></figure>
</div>


<p class="has-text-align-right">سيظهر لك الفاصل كما بالشكل التالي</p>



<p></p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="707" height="398" src="https://arabic-themes.com/wp-content/uploads/2023/08/more-Show-edited.jpg" alt="" class="wp-image-4520" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/more-Show-edited.jpg 707w, https://arabic-themes.com/wp-content/uploads/2023/08/more-Show-edited-600x338.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/more-Show-edited-300x169.jpg 300w" sizes="auto, (max-width: 707px) 100vw, 707px" /></figure>
</div>


<h1 class="wp-block-heading has-text-align-right"><strong>5-إضافة فاصل الصفحة</strong></h1>



<p class="has-text-align-right">عنصر فاصل صفحة ينهي الصفحة الحالية ويضيف ترقيم واحد واثنين في نهاية الصفحة وبعده يتم بداية صفحة جديدة بمحتويات جديدة واذا تم عمل أكثر من فاصل صفحة يتم التقسيم إلى صفحات أكثر</p>



<p class="has-text-align-right">لإضافة هذا العنصر، قم بالذهاب الى القائمة الرئيسية وختر&nbsp;<strong>فاصل الصفحة</strong></p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="462" height="616" src="https://arabic-themes.com/wp-content/uploads/2023/08/Page-Seperation-edited.jpg" alt="" class="wp-image-4522" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/Page-Seperation-edited.jpg 462w, https://arabic-themes.com/wp-content/uploads/2023/08/Page-Seperation-edited-225x300.jpg 225w" sizes="auto, (max-width: 462px) 100vw, 462px" /></figure>
</div>


<p class="has-text-align-right">سيظهر التقسيم كحد فاصل كما بالشكل التالي</p>



<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" src="https://arabic-themes.com/wp-content/uploads/2023/08/Page-Seperation-Add-edited.jpg" alt="" class="wp-image-4523" width="800" height="533" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/Page-Seperation-Add-edited.jpg 800w, https://arabic-themes.com/wp-content/uploads/2023/08/Page-Seperation-Add-edited-600x400.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/Page-Seperation-Add-edited-300x200.jpg 300w, https://arabic-themes.com/wp-content/uploads/2023/08/Page-Seperation-Add-edited-768x512.jpg 768w" sizes="auto, (max-width: 800px) 100vw, 800px" /></figure>



<h1 class="wp-block-heading has-text-align-right"><strong>6- عنصر فاصل</strong></h1>



<p class="has-text-align-right">يستخدم هذا المكون لعمل فاصل بين الأقسام والأفكار، ولتفعيله اذهب إلى القائمة الرئيسية وقم باختياره من مكون تصميم&nbsp;</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="368" height="589" src="https://arabic-themes.com/wp-content/uploads/2023/08/seperation-edited.jpg" alt="" class="wp-image-4524" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/seperation-edited.jpg 368w, https://arabic-themes.com/wp-content/uploads/2023/08/seperation-edited-187x300.jpg 187w" sizes="auto, (max-width: 368px) 100vw, 368px" /></figure>
</div>


<h1 class="wp-block-heading has-text-align-right"><strong>7- فراغ</strong></h1>



<p class="has-text-align-right">لعمل فراغ بين أي محتويات بالصفحة باي مسافة تريدها قم باختيار هذا العنصر من القائمة الرئيسية أسفل مكون تصميم</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="738" height="492" src="https://arabic-themes.com/wp-content/uploads/2023/08/gap-edited.jpg" alt="" class="wp-image-4525" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/gap-edited.jpg 738w, https://arabic-themes.com/wp-content/uploads/2023/08/gap-edited-600x400.jpg 600w, https://arabic-themes.com/wp-content/uploads/2023/08/gap-edited-300x200.jpg 300w" sizes="auto, (max-width: 738px) 100vw, 738px" /></figure>
</div>


<p class="has-text-align-right">يظهر لك الفاصل كما بالشكل التالي ومن النقطة الزرقاء يمكنك زيادة المسافة للفاصل</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="582" height="302" src="https://arabic-themes.com/wp-content/uploads/2023/08/gap-show-edited.jpg" alt="" class="wp-image-4526" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/gap-show-edited.jpg 582w, https://arabic-themes.com/wp-content/uploads/2023/08/gap-show-edited-300x156.jpg 300w" sizes="auto, (max-width: 582px) 100vw, 582px" /></figure>
</div>


<h1 class="wp-block-heading has-text-align-right" id="Widgets-elements-inGutenberg-editor">رابعا: إضافة ودجات</h1>



<p class="has-text-align-right">يختلف عدد عناصر هذان المكونان حسب ما يوجد لديك من ودجات تم تركيبها على الووردبريس باستخدام القالب الخاص بك غالبًا، وسيتم شرح بعض منها كالتالي</p>



<h2 class="wp-block-heading has-text-align-right"><strong>1-عنصر أخر المقالات&nbsp;</strong></h2>



<p class="has-text-align-right">هذا العنصر يظهر لك قائمة اخر مقالات تم اضافتها او كتابتها مؤخرا<br>لتفعيل العنصر، اذهب إلى القائمة الرئيسية واختر:&nbsp;<strong>آخر المقالات</strong></p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="580" height="774" src="https://arabic-themes.com/wp-content/uploads/2023/08/latest-Articles-edited.jpg" alt="" class="wp-image-4528" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/latest-Articles-edited.jpg 580w, https://arabic-themes.com/wp-content/uploads/2023/08/latest-Articles-edited-225x300.jpg 225w" sizes="auto, (max-width: 580px) 100vw, 580px" /></figure>
</div>


<p class="has-text-align-right">سيظهر لك تلقائيا بآخر المقالات دون تدخل منك كما بالشكل التالي&nbsp;</p>



<h1 class="wp-block-heading has-text-align-right"><strong>2- إضافة أرشيف&nbsp;</strong></h1>



<p class="has-text-align-right">يستخدم عنصر ارشيف لإظهار الأرشيفات بتواريخ المقالات<br>لإضافة أرشيف قم بالذهاب الى القائمة الرئيسية وختر:&nbsp;<strong>أرشيف</strong></p>


<div class="wp-block-image">
<figure class="aligncenter size-full is-resized"><img loading="lazy" decoding="async" src="https://arabic-themes.com/wp-content/uploads/2023/08/Archive-1-edited.jpg" alt="" class="wp-image-4529" width="577" height="768" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/Archive-1-edited.jpg 575w, https://arabic-themes.com/wp-content/uploads/2023/08/Archive-1-edited-225x300.jpg 225w" sizes="auto, (max-width: 577px) 100vw, 577px" /></figure>
</div>


<h1 class="wp-block-heading has-text-align-right">مكون تضمينات وموجز لعناصره</h1>



<p class="has-text-align-right">هناك العديد من العناصر الموجودة في مكون تضمينات مثل عنصر فيسبوك وتويتر ويوتيوب وانستجرام وصور GIF المتحركة وغيرها الكثير من التضمينات من خلالها يمكن وضع منشورات من وسائل التواصل الاجتماعي مثل المنشورات الشكل التالي لبعض ما يمكن تضمينه&nbsp;</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="576" src="https://arabic-themes.com/wp-content/uploads/2023/08/include-1024x576.gif" alt="" class="wp-image-4531" srcset="https://arabic-themes.com/wp-content/uploads/2023/08/include-1024x576.gif 1024w, https://arabic-themes.com/wp-content/uploads/2023/08/include-600x338.gif 600w, https://arabic-themes.com/wp-content/uploads/2023/08/include-300x169.gif 300w, https://arabic-themes.com/wp-content/uploads/2023/08/include-768x432.gif 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p class="has-text-align-right">في النهاية نتمنى أن تكون استفدت من هذه المقالة في استخدام محرر Guteberg لإضافة صفحات ومقالات موقعك والتحكم في جميع المكونات بشكل احترافي</p>
<p>The post <a href="https://arabic-themes.com/the-gutenburg-component-editor-is-fully-explained/">شرح محرر المكونات Gutenburg لإضافة الصفحات والمقالات</a> appeared first on <a href="https://arabic-themes.com">قوالب ووردبريس عربية</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://arabic-themes.com/the-gutenburg-component-editor-is-fully-explained/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
