{"title":"Customizing your Text Content with Phlox Typography Shortcodes","id":36922,"link":"https:\/\/env.averta.net\/en\/step\/customizing-your-text-content-with-phlox-typography-shortcodes\/","parent":[37142],"content":"

It is possible to change the style of texts by?adding some Typography Shortcodes<\/strong> in Phlox Theme. Available typography shortcodes are Highlight, Dropcap, and Blockquote. <\/strong><\/p>\n

Recommended: <\/strong>If you want to change the theme’s typography, you can find the related options in the customizer. These options let you change the font and font size of main content, main titles, page headings, and menus. (If you want to know how, read Typography article<\/a>.)<\/p>\n

\n

Highlight<\/h3>\n

Use Highlight<\/strong> shortcode to highlight a text. You can add the highlight code, select its color, then insert your content between highlight tags as below:
\n\"highlights-preview\"<\/p>\n

Red<\/b><\/h4>\n
[aux_highlight style=\"aux-highlight-red\"extra_classes=\"\"]Insert your content here[\/aux_highlight]\r\n<\/pre>\n
Blue<\/b><\/h4>\n
[aux_highlight style=\"aux-highlight-blue\"extra_classes=\"\"]Insert your content here[\/aux_highlight]\r\n<\/pre>\n
Yellow<\/b><\/h4>\n
[aux_highlight style=\"aux-highlight-yellow\"extra_classes=\"\"]Insert your content here[\/aux_highlight]\r\n<\/pre>\n
Green<\/b><\/h4>\n
[aux_highlight style=\"aux-highlight-green\"extra_classes=\"\"]Insert your content here[\/aux_highlight]\r\n<\/pre>\n
\n
Dropcap<\/h3>\n
Use Dropcap<\/strong> shortcode to capitalize the first letter of the first word in a stylish way. You can add your desired dropcap, then insert your content between dropcap tags:<\/p>\n
Classic
\n\"dropcap-pr\"<\/strong><\/h4>\n
[aux_dropcap style=\"classic\" extra_classes=\"\"]Please insert your content here[\/aux_dropcap]\r\n<\/pre>\n
Square
\n\"dropcap-pr\"<\/strong><\/h4>\n
[aux_dropcap style=\"square\" extra_classes=\"\"]Please insert your content here[\/aux_dropcap]\r\n<\/pre>\n
Outline Square
\n\"dropcap-pr\"<\/strong><\/h4>\n
[aux_dropcap style=\"square-outline\" extra_classes=\"\"]Please insert your content here[\/aux_dropcap]\r\n<\/pre>\n
Round Square
\n\"dropcap-pr\"<\/strong><\/h4>\n
[aux_dropcap style=\"square-round\" extra_classes=\"\"]Please insert your content here[\/aux_dropcap]\r\n<\/pre>\n
Circle
\n\"dropcap-pr\"<\/strong><\/h4>\n
[aux_dropcap style=\"circle\" extra_classes=\"\"]Please insert your content here[\/aux_dropcap]\r\n<\/pre>\n
Outline Circle
\n\"dropcap-pr\" <\/strong><\/h4>\n
[aux_dropcap style=\"circle-outline\" extra_classes=\"\"]Please insert your content here[\/aux_dropcap]\r\n<\/pre>\n
\n
Blockquote<\/h4>\n
Use Blockquote<\/strong> shortcode to add blockquote withing your post, you can add your desired blockquote style, then insert your quote between blockquote tags.<\/p>\n
Quote Normal\"quote-normal\"<\/a><\/strong><\/h4>\n
[aux_quote type=\"quote-normal\" text_align=\"left\" quote_symbol=\"1\" title=\"title\" extra_classes=\"\"]Insert your quote here[\/aux_quote]\r\n<\/pre>\n
Blockquote Normal\"pullquote-normal\"<\/a><\/strong><\/h4>\n
[aux_quote type=\"blockquote-normal\" text_align=\"left\" quote_symbol=\"1\" title=\"title\" extra_classes=\"\"]Insert your quote here[\/aux_quote]\r\n<\/pre>\n
Blockquote Bordered\"blockquote-bordered\"<\/a><\/strong><\/h4>\n
[aux_quote type=\"blockquote-bordered\" text_align=\"left\" quote_symbol=\"1\" title=\"title\" extra_classes=\"\"]Insert your quote here[\/aux_quote]\r\n<\/pre>\n
Intro Hero\"intro-hero\"<\/a><\/strong><\/h4>\n
[aux_quote type=\"intro-hero\" text_align=\"left\" quote_symbol=\"1\" title=\"title\" extra_classes=\"\"]Insert your quote here[\/aux_quote]\r\n<\/pre>\n
Intro\"intro\"<\/a><\/strong><\/h4>\n
[aux_quote type=\"intro-normal\" text_align=\"left\" quote_symbol=\"1\" title=\"title\" extra_classes=\"\"]Insert your quote here[\/aux_quote]\r\n<\/pre>\n
Intro with Splitter\"intro-with-splitter\"<\/a><\/strong><\/h4>\n
[aux_quote type=\"intro-splitter\" text_align=\"left\" quote_symbol=\"1\" title=\"title\" extra_classes=\"\"]Insert your quote here[\/aux_quote]\r\n<\/pre>\n
Pullquote Normal\"pullquote-normal\"<\/a><\/strong><\/h4>\n
[aux_quote type=\"pullquote-normal\" text_align=\"left\" quote_symbol=\"1\" title=\"title\" extra_classes=\"\"]Insert your quote here[\/aux_quote]\r\n<\/pre>\n
Pullquote Colorized\"pullquote-colorized\"<\/a><\/strong><\/h4>\n
[aux_quote type=\"pullquote-colorized\" text_align=\"left\" quote_symbol=\"1\" title=\"title\" extra_classes=\"\"]Insert your quote here[\/aux_quote]<\/pre>\n
Besides, you can change the alignment and displaying quote symbol by changing the text_align and quote_symbol attribute  below:<\/p>\n
[aux_quote type=\"pullquote-normal\" text_align=\"left\" quote_symbol=\"1\" title=\"title\" extra_classes=\"\"]Insert your quote here[\/aux_quote]<\/pre>\n\n\n\n\n\n\n
Option<\/th>\nDefault Value<\/th>\nValues and Description<\/th>\n<\/tr>\n
text_align<\/td>\n“left”<\/td>\n“none” uses text alignment of theme options.<\/p>\n
\t“left”<\/p>\n
\t“right”<\/p>\n
\t“center”\n<\/td>\n<\/tr>\n
quote_symbol<\/td>\n“1”<\/td>\nWhether to insert quote symbol or not.<\/td>\n<\/tr>\n
extra_classes<\/td>\n” “<\/td>\nAdd your custom CSS class names here, to style particular content element differently.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","type":"solution"}