The Shortcode Basic Items are conceived to stand as independent design elements or to enhance the existing page content or to be a part of other shortcodes, like Custom Font, Accordion, Row.
This type of shortcodes have the specific feature for allowing no content to be embellished inside them.
Their close tag always looks like this – /] – the sign tells that you cannot embellish the content inside the shortcode.
Keep in mind By embellishing content, we mean the use of any WordPress Editor tools or the insertion inside the same shortcode of any other shortcodes.
For example, a Button shortcode does not allow a Map or a Team Member shortcode to be inserted inside itself.
There are nine shortcodes of this type: Button, Dropcap, Highlight, Icon, Map, Progress bar, Quote, Separator and Team member.
Dropcap is a large initial letter (or letters) that is usually used at the beginning of paragaph. The Dropcap has the following options:
- Character/Text— insert here the letter or the characters you want to emphasize
- Type — the way dropcap is showcased
- normal — simple letter
- square — letter is wrapped in a square box
- Font size — font size of letter/characters in pixels
- Font weight — how light or bold the dropcap looks
- Text color — color of letter/characters
- CSS class — if it’s necessary to add more style rules
The following options are tied just to Square Type of dropcap:
- Square size — size of square the letter fits in, measured in pixels
- Background color — color of square box background
- Border color — color of square box border
Highlight represents exaggeration of words in a text with the use of color, in order to emphasize these words from the rest of the text. The Highligt has the following options:
- Type — the way highlight is showcased
- Fill — background of words is filled up with color
- Shadow — colored bold line at the bottom of words
- Text color — color of emphasized words
- Background color — depending on Type, color of emphasized words background
- CSS class — in case there is a need to add more style rules
Icons are widely used elements on the web, being great for communicating all sorts of information. The Icon has the following options:
- Type — the way icon is showcased
- Basic — simple icon
- Square — icon is wrapped in a square box
- Circle — icon is wrapped in a circular shape
- Size — choose from one of the predefined icon sizes
- Position — choose how to align the icon: Left, Center or Right
- Flip — turn icon over relative to X or Y axis
- Link — enter full URL in order to link the button
- New tab — if enabled, the button link – when clicked – opens in a new tab of browser window
- CSS class — in case there is a need to add more style rules
- Icon List — choose an icon to be displayed
The following options are tied to Icon color style:
- Text — color of icon
- Text hover — color of icon while hovered by mouse
The following options are also tied to Icon color style, but this time specific just for Square and Circle Types:
- Background — color of icon box background
- Background hover — color of icon box background while hovered by mouse
- Border — color of icon box border
- Border hover — color of icon box border while hovered by mouse
Map is a shortcode that interacts with Google Maps in order to showcase a carefully stylized and interactive topographical element. The Map has the following options:
- Locations — add how many locations you want to the map
- Latitude from GMaps — get latitude data from Google Maps
- Longitude from GMaps — get longitude data from Google Maps
- Title — appears when the map pins are hovered by mouse
- Description — appears in a tooltip when the map pins are clicked
- Map height — measured in pixels
- Map zoom — set up a zoom level for the map, from 0 (whole world) to 20 (individual buildings).
- Parallax effect — smooth scrolling effect applied to the map
- CSS class — in case there is a need to add more style rules
Progress Bar is a graphical control element used to visualize the evolution of a fact or operation, such as creative skill or learning progression. The Progress Bar has the following options:
- Title — title label for progress-bar heading section
- Progress — enter a value the progress reaches from the total of 100% (which is maximum)
- CSS class — in case there is a need to add more style rules
Quote is a shortcode that let you add a nice formatted blockquote with author and author link. It is an enhanced alternative to WordPress default quote. The Quote has the following options:
- Text size— choose from one of the predefined font sizes for quote text
- Author — enter the author of quote
- Author link — enter the URL for author quote
- New tab — if enabled, the button link – when clicked – opens in a new tab of browser window
- Text alignment — choose from left, center or right alignmnet of whole content of quote (comma, quote text and author)
- CSS class — in case there is a need to add more style rules
Separator, as the name says, add a graphic element to separate different types of content. The Separator has the following options:
- Type — the way seprators are showcased (Up or Down)
- CSS class — in case there is a need to add more style rules
Team Member helps you to add a team member information in a structured way. You simply add the Name, Title, Description, an image and an optional image link, and you are good to go.
If you or your team members are socially engaged (who is not these days) you can also add the links to the main social networks: Facebook, LinkedIn, Twitter and Pinterest.
The Team Member has the following options:
- Name — name of Team Member
- Title — title or positioned of Team Member inside company
- Description — little information about Team Member
- Image — choose an image for Team Member
- Image link — eventually, link the image
- New tab — if enabled, the button link – when clicked – opens in a new tab of browser window
- CSS class — in case there is a need to add more style rules
- Social Links (Facebook, LinkedIn, Twitter and Pinterest)