هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق، إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع، ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق، هذا النص يمكن أن يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ، غير منظم، غير منسق، أو حتى غير مفهوم. لأنه مازال نصاً بديلاً ومؤقتاً.
Plus UI
Try 'Adventure'
Sitemap Disclaimer Privacy
Home
Landing Page
Sub Menu
Sub Menu
About
Contact
Safelink
More...
Try RTL Mode
Notification texts go here Contact Us
Buy Now!
Home Documentation Typography
All Styles Typography and Writing Formats
All New Typography and Writing Formats in the lastest Plus UI v2.6
Estimated read time: 28 min
Checkout recently updated pages:
1. Safelinks
2. Contact (Telegram API)
Most of these features can only be used in 'HTML View' mode, nor can you switch to 'Writing view' mode while using some of these features.
In post editor view, click icon at the bottom right of the title
Two options will appear: HTML view and Writing view
Select '
HTML View
'.
Tips: Use
Your_paragraph_here
tag to add paragraphs to the article.
Writing Format for : Plus UI Themed v2.6.1
Template Updated on : Jun 1, 2022
Image with Caption and Auto Lightbox
The caption in this image will not be read in the article description/snippet. You can also choose to keep the captions legible on the article snippets.
All Typography and Format Posts
All images in the post will automatically have a lightbox function, click this image to try it.
Added class='full' works to remove margin image and screen, only works for mobile view.
Writing format:
Your_caption_is_here
Image with Grid Layout
Construction of New Highway
Langtang Tracking Major Attraction
De Spain Preparations
Boating Experience in Pokhara
Writing format:
Image with Show All Function
Used to hide some images and will be shown when the user clicks the 'Show All' button. Show All function can only be activated once, Images cannot be hidden again when you activate it.
Construction of New Highway
Langtang Tracking Major Attraction
De Spain Preparations
Boating Experience in Pokhara
Show All
Writing format:
Image with Scroll Layout
Same as the image layout above, it's just that on the mobile display the images will be arranged in parallel with the additional side scroll function on the mobile display.
We also added a smooth scroll effect to this feature. Please try opening this page on your mobile device:
Construction of New Highway
Langtang Tracking Major Attraction
De Spain Preparations
Writing format:
Lazyload Image
Useful for delaying loading images so that the blog's PageSpeed score is higher, image will only load when user scrolls to the image area. All images in this article use Lazyload.
Writing format:
Manual Related Post
It is important to note that this feature is written manually, it does not automatically appear on every page.
You may want to read this post :
How to Replace Blogger Comments
Replace or Add New Fonts
Guide to Adding Tab Function in Post
Writing format:
Auto Related Post
Related Posts
Meta Tags Settings
How to use Music Player
Installing Theme
SVG Icon Sets
Common Errors and Fixes
How to Setup Google Translate
How to use Lazyload Adsense?
Enable Realtime Post Views Counter
How to use Bookmark Feature
All Styles Typography and Writing Formats
Writing Format:
Related Posts
Post Break
You can use this feature to separate paragraphs or to open a new chapter in a post, here's an example of how it looks:
Writing format:
Paragraph with Text Indent
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.
Writing format:
Your_paragraph_is_here.
Paragraph with Drop cap
Mis a large capital letter used as a decorative element at the beginning of a paragraph or section. The size of the descending limit is usually two or more lines.
The drop cap will resize the first letter of the paragraph so that it drops one or more lines down. Many types of print media use drop caps such as books, magazines, newspapers and so on because they can add to the visual appeal.
Writing format:
Your_paragraph_is_here.
Blockquote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.
— Anonymous
Writing format:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.
Another Style:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus.
Sed suscipit sapien sed turpis ultrices viverra. Ut quis dui sed odio sollicitudin fermentum.
Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.
Writing Format:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus.
Sed suscipit sapien sed turpis ultrices viverra. Ut quis dui sed odio sollicitudin fermentum.
Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.
Social Blockquote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus.
Writing Format:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus.
Note Block
This feature serves to add important info, warning sentences or highlight sentences, there are two styles that you can try including:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.
With Different Colors:
Warning!
Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra.
Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra.
Table
The table in this theme has been set responsive, for example, if the number of columns or the width of the table exceeds the width of the screen, so as not to damage the layout, the table will automatically have a scroll function.
Please open this article on your mobile device and highlight the table section below:
Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Writing format:
Name
Position
Office
Age
Start date
Salary
Tiger Nixon
System Architect
Edinburgh
61
2011/04/25
$320,800
Garrett Winters
Accountant
Tokyo
63
2011/07/25
$170,750
Ashton Cox
Junior Technical Author
San Francisco
66
2009/01/12
$86,000
Cedric Kelly
Senior Javascript Developer
Edinburgh
22
2012/03/29
$433,060
Airi Satou
Accountant
Tokyo
33
2008/11/28
$162,700
white-space:nowrap; specifies the text to be a single line, it will not wrap to the next line and will continue until tag is encountered.
min-width:100%; defines the minimum width of table, you can change it to px units for example 500px. Change it to 0 if you want the table width to be determined automatically.
Manual Table of Content
Contents
Using manual Table of Content is more complicated than the automatic version, you have to add a different ID attribute in each heading tag and write it in content list.
This is an example of heading tag with custom ID:
Remove open='' attribute to auto-close Table of Content when the page is first loaded.
You can change the title or phrase 'Show all/Hide all' in the marked section.
Semi Automatic Table of Content
Table of Contents
Image with Caption and Auto Lightbox
Image with Grid Layout
Image with Show All Function
Image with Scroll Layout
Lazyload Image
Manual Related Post
Auto Related Post
Post Break
Paragraph with Text Indent
Paragraph with Drop cap
Blockquote
Note Block
Table
Manual Table of Content
Semi Automatic Table of Content
Syntax Highlighter
Automatic Colored Syntax Highlighter
Multi Functional Syntax Highlighter
MultiTabs Syntax Highlighter
Toggle Show / Hide
Toggle Content or Accordion
FAQ schema in Microdata
External Link
Button Link
Download Link
Countdown Download Box
Music Player
Lazy YouTube Video
Post Reference
Header Subtitle
Previous or Next Post
The easiest option to display Table of Content. This feature will display all heading tags in your post (three levels h2 - h4), so make sure you write heading tags in order. Read: Common Error
Code to specify semi-automatic ToC widget location:
Table of Contents
Syntax Highlighter
Used to define lines of computer code (HTML, CSS, Javascript, etc.) in posts.
Your_code_is_here
Addition of color code in the syntax can be written manually, but we also provide automatic colored syntax features.
Change data-text='.html' to define another code format, i.e. data-text='.css', data-text='.js', data-text='.php', etc
Value white-space:pre-wrap; useful for disabling side scrolling, long code will be preserved and give a little scrolling function to keep it legible.
max-height:none; defines the maximum height of syntax isn't set (automatic), change the value of none to eg 400px to specify the maximum height of syntax is only 400 pixels.
Use code_here to add red/orage color.
Use code_here to add blue color.
Use code_here to add green color.
Use code_here to add gray color.
Use code_here to add a block of blue color.
Automatic Colored Syntax Highlighter
Following Syntax is automatically highlighted / colored using Highlight.js
Sample Page
Sample content here!
Code to color syntax:
Your_code_is_here
Common Errors:
This feature automatically detect the language and highlight the colors. But in some cases, it may not automatically detect the code language, at that time you have to add a classname as per the language, i.e. if it is html, you have to add html or language-html along with hl.
An Example:
Your_code_is_here
Limitations of using Automatic Colored Syntax Highlighter:
You cannot add any tag in your Preformatted Codes. For example, you would add , that is no more going to be blocked with blue color.
Multi Functional Syntax Highlighter
Codebox Writing Format
Your_code_is_here
Writing Format:
Your_code_is_here
MultiTabs Syntax Highlighter
Sample Page
Sample content here!
Writing Code:
Your_code_is_here
Your_code_is_here
Your_code_is_here
The checked attribute defines the first tab that appears by default.
Make sure id='...' and for='...' attributes have the same value. ID must be unique, there cannot be two identical IDs in one page.
Change data-text='HTML' attribute in the highlighted section to rename the tab.
Toggle Show / Hide
Used to create interactive widgets that the user can open and close on demand. By default this widget is closed, will display the content in it when the user presses the command button.
Any content can be included in this widget.
Spoiler:
Spoiler:
Your_text_is_here.
Toggle Content or Accordion
Defines additional content that users can open and close on demand in groups, usually used for a list of questions or FAQs (Frequently Asked Questions).
Accordion_first_title
Accordion_second_title
Accordion_third_title
Accordion_forth_title
Title_is_here
Your_text_is_here.
Title_is_here
Your_text_is_here.
...
...
Use the classname alt (marked in the code above) to change the icon style.
The number of accordion widgets you can add is unlimited.
FAQ schema in Microdata
يبدو أن هناك خطأ ما في اتصالك بالإنترنت. يرجى الاتصال بالإنترنت والبدء في التصفح مرة أخرى
مانع الاعلانات!
!
لقد اكتشفنا أنك تمنع الإعلانات في متصفحك.
تُستخدم الإيرادات التي نحققها من الإعلانات لإدارة هذا الموقع ، ونطلب منك إدراج موقعنا في القائمة البيضاء لديك لحظر الإعلانات.
Site is Blocked
Sorry! This site is not available in your country.
