Introduction To Text Header Design Templates
In this tutorial I am going to show you how to use IBLOCKS plugin to create text blog headers as part of “Simple Blog Header Designs Using WordPress Shortcodes” post series. In this example I’ll provide normal bold text headers and underlined text headers.
Creating Simple Text Headers – Bold Headers
Syntax of Bold Headers
There are 3 types of predefined normal bold headers. You can use gen_head_small ,gen_head_medium or gen_head_large in the type attribute to check these 3 different box headers. Your main shortcode will be [header]Your Title [/header]. I have used gen_head_small in the example given below.
[header type='gen_head_small' ] Your Title [/header]
Parameters of Normal Bold Headers
Main Shortcode | |
---|---|
[header /] | is the main shortcode you need to be using. |
Main Parameters | |
type | defines the type of heading. this should have the value gen_head_small, gen_head_medium or gen_head_large |
Optional Parameters | |
color | Color of the header text. Default value = #000 |
font_name | Name of the font to be used in header text. |
font_size | Size of the font used for header text. Should be defined in ‘px’. Sample value = 14px |
Examples for using Bold Headers
[header type='gen_head_small' font_name='comic Sans MS' font_size='16px'] Sample Title[/header]
Sample Title
[header type='gen_head_medium' color='#374651'] Sample Title [/header]
Sample Title
[header type='gen_head_large' color='#2085CC'] Sample Title [/header]
Sample Title
[header type='gen_head_large' color='blue' font_size='20px'] Sample Title [/header]
Sample Title
Creating Simple Text Headers – Underlined Headers
Syntax of Underlined Headers
There are 3 types of predefined underlined headers. You can use un_text_small ,un_text_medium or un_text_large in the type attribute to check these 3 different box headers. Your main shortcode will be [header]Your Title [/header]. I have used gen_head_small in the example given below.
[header type='un_text_small' ] Your Title [/header]
Parameters of Underlined Headers
Main Shortcode | |
---|---|
[header /] | is the main shortcode you need to be using. |
Main Parameters | |
type | defines the type of heading. this should have the value un_text_small, un_text_medium or un_text_large |
Optional Parameters | |
color | Color of the header text. Default value = #000 |
font_name | Name of the font to be used in header text. |
font_size | Size of the font used for header text. Should be defined in ‘px’. Sample value = 14px |
Examples for using Underlined Headers
[header type='un_text_small' font_name='comic Sans MS' font_size='16px'] Sample Title[/header]
Sample Title
[header type='un_text_medium' color='#374651'] Sample Title [/header]
Sample Title
[header type='un_text_large' color='#2085CC'] Sample Title [/header]
Sample Title
[header type='un_text_large' color='blue' font_size='20px'] Sample Title [/header]
Sample Title
Creating Simple Text Headers – Underlined Bar Headers
Syntax of Underlined Bar Headers
There are 3 types of predefined underlined bar headers. You can use un_bar_small ,un_bar_medium or un_bar_large in the type attribute to check these 3 different box headers. Your main shortcode will be [header]Your Title [/header]. I have used un_bar_small in the example given below.
[header type='un_bar_small' ] Your Title [/header]
Parameters of Underlined Bar Headers
Main Shortcode | |
---|---|
[header /] | is the main shortcode you need to be using. |
Main Parameters | |
type | defines the type of heading. this should have the value un_bar_small, un_bar_medium or un_bar_large |
Optional Parameters | |
color | Color of the header text. Default value = #000 |
font_name | Name of the font to be used in header text. |
font_size | Size of the font used for header text. Should be defined in ‘px’. Sample value = 14px |
underline_color | Color used for the underlined bar. Default value = #000 |
Examples for using Underlined Bar Headers
[header type='un_bar_small' font_name='comic Sans MS' font_size='16px'] Sample Title[/header]
Sample Title
[header type='un_bar_medium' color='#374651'] Sample Title [/header]
Sample Title
[header type='un_bar_large' color='#2085CC' underline_color='#B5D6EE'] Sample Title [/header]
Sample Title
[header type='un_bar_large' color='blue' font_size='20px'] Sample Title [/header]
Sample Title
November 7th, 2011 at 1:05 am
Good insights! I have been trying to find something like this for a while now. Appreciation!
November 25th, 2011 at 1:22 pm
Nice design you have here on this site.