The7\u00a0typography shortcodes are available in a standard WYSIWYG editor and, in result, in WPBakery Page Builder \u201cText Block\u201d.<\/p>\n

$\"Fig.$ <\/a><\/p>\n
Fig. 1. Text shortcodes by Dream-Theme.<\/p>\n<\/div>\n
Gap<\/h3>\n
<\/div>\n
Gap shortcode works the same as \u201cEmpty Space\u201d elements \u2013 it adds a gap between paragraphs and other elements. It has the only option \u2013 height, where \u201c10\u201d stands for 10px.<\/p>\n
Divider<\/h3>\n
<\/div>\n
Divider shortcode inserts a horizontal divider line between elements. It can be thin or thick, depending on what you specify under \u201cstyle\u201d option.<\/p>\n
$\"Fig.$ <\/a><\/p>\n
Fig. 2. Divider.<\/p>\n<\/div>\n
Tooltip<\/h3>\n
$\"Fig.$ <\/a><\/p>\n
Fig. 3. Tooltip.<\/p>\n<\/div>\n
In order to achieve such a nice layout (fig. 3)\u00a0try using the following shortcode syntax:<\/p>\n
Apply \u201dtooltip\u201dpopup content<\/span><\/span> shortcode here.<\/p>\n
Highlight<\/h3>\n
$\"Fig.$ <\/a><\/p>\n
Fig. 4. Highlight shortcode.<\/p>\n<\/div>\n
This shortcode hightlights a part of a text string. Use the following syntax:<\/p>\n
Ut elit tellus, lorem ipsum dolor<\/span> sit amet.<\/p>\n
Shortcode attributes are listed below:<\/p>\n
\n
use\u00a0color=\u201d\u201d attribute to specify one of color presets: white, red, berry, orange, yellow, pink, green, dark_green, blue, dark_blue, violet, black, gray, grey. Background color will be altered appropriately . And text color will automatically turn white;<\/li>\n
alternatively, use combination\u00a0text_color=\u201d\u201d bg_color=\u201d\u201d in order to specify both text and background colors. Use HEX values like \u201c#cc3366\u201d;<\/li>\n
or leave all attributes empty in order to apply accent color to the background (including the case when accent color is gradient) and make text color white.<\/li>\n<\/ul>\n
Code<\/h3>\n
$\"Fig.$ <\/a><\/p>\n
Fig. 5. Code shortcode.<\/p>\n<\/div>\n
This shortcode allows to display code strings with correct interpretation of symbols \u201c, <, >, etc. (unlikely to the case when these characters are inserted directly into WYSWYG editor). Use the following syntax:<\/p>\n
\n
<div class=\u201dmy-element\u201d style=\u201d\u201d>Lorem<\/div><\/p><\/div>\n
Simple Login Form<\/h3>\n
You may want to display login form in your website front-end (fig. 6). Simple Login Form shortcode will help you in this case. Use the following syntax:<\/p>\n
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\u201d\u201d<\/label>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t<\/p>\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\u201d\u201d<\/label>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t<\/p>\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\u201d\u201d<\/label><\/p>\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t<\/p>\n\t\t\t\t\t\t\n\t\t\t\t\t<\/form><\/div>\n
It has four attributes to adjust standard labels for username and password fields, \u201cRememeber me\u201d check-box and \u201cLog in\u201d button. Like:<\/p>\n
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\u201dNom<\/label>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t<\/p>\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\u201dMot<\/label>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t<\/p>\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\u201dSe<\/label><\/p>\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t<\/p>\n\t\t\t\t\t\t\n\t\t\t\t\t<\/form><\/div>\n
$\"Fig.$ <\/a><\/p>\n
Fig. 6. Simple Login Form shortcode.<\/p>\n<\/div>\n
Leave them empty if you want to use default WordPress labels.<\/p>\n","protected":false},"excerpt":{"rendered":"
The7\u00a0typography shortcodes are available in a standard WYSIWYG editor and, in result, in WPBakery Page Builder \u201cText Block\u201d. Before getting started, please make sure that you\u2019re accustomed with idea of shortcodes in WordPress:\u00a0http:\/\/en.support.wordpress.com\/shortcodes\/Note that link above is given only for the quick illustration of what shortcodes are. Not all shortcodes described in it will work…<\/p>\n","protected":false},"author":2,"featured_media":2288,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[9,21],"tags":[],"class_list":["post-2117","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-guide","category-visual-layout-builder","category-9","category-21","description-off"],"acf":[],"_links":{"self":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/2117","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/comments?post=2117"}],"version-history":[{"count":3,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/2117\/revisions"}],"predecessor-version":[{"id":2496,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/2117\/revisions\/2496"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/media\/2288"}],"wp:attachment":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/media?parent=2117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/categories?post=2117"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/tags?post=2117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Gap<\/h3>\n<\/div>\nGap shortcode works the same as \u201cEmpty Space\u201d elements \u2013 it adds a gap between paragraphs and other elements. It has the only option \u2013 height, where \u201c10\u201d stands for 10px.<\/p>\n

Divider<\/h3>\n<\/div>\nDivider shortcode inserts a horizontal divider line between elements. It can be thin or thick, depending on what you specify under \u201cstyle\u201d option.<\/p>\n

Simple Login Form<\/h3>\nYou may want to display login form in your website front-end (fig. 6). Simple Login Form shortcode will help you in this case. Use the following syntax:<\/p>\n