Additional settings for Safari Browser.
This or That?
Which Component Should I Use?
Smart Sites currently offers 19 components. The Component Library classifies them into categories such as Text, Images, Links, and Files, and has tons of examples showing how they can be used and configured.
This guide is designed to help you choose between components when more than one could be appropriate.
Links vs. Icon Matrix
Both of these integrate Font Awesome Icons.
- Links has limited display options and can be useful when you just want to get something basic done quickly but still have it look a little more elevated than plain text links in a Columns component. Choose from one, two, or three columns.
- Icon Matrix is for when you want more control over how many display per row, if you want to play around with lots of display styles, add background images, etc. Have up to six per row.
Links
-
Lorem ipsum
Lorem ipsum odor amet, consectetuer adipiscing elit. Risus nisi bibendum montes integer amet, arcu primis volutpat ad. Eros eget luctus purus sit, sed primis euismod mi est.
-
Integer habitasse
Integer habitasse eleifend rutrum vel diam sollicitudin platea sem. Malesuada hendrerit curabitur magna sit euismod. Arcu feugiat nascetur facilisis sapien porttitor eleifend.
-
Aliquam facilisis
Aliquam facilisis metus ipsum potenti gravida tristique. Nascetur magnis nascetur cras cursus taciti vehicula tristique magnis. Suscipit senectus risus auctor nascetur; habitant turpis.
Also Consider: Buttons
Anywhere you see the rich text editor (Columns, Accordion & Tabs, Component Intros, etc.), you can insert buttons that link to a URL. Features:
- Slight animation on hover
- Three sizes and up to six colors (dependent upon your Site Design color palette)
- Option to make the button full-width
- Built-in logic automatically determines if the link should open in the same tab or a new tab
Color 1, Small Color 2, Default Color 3, Large
Columns vs. Accordion & Tabs
Large amounts of text on a page can be overwhelming. Typically, if you have just a paragraph or two, Columns is the best choice. But if you have substantially more, and the content lends itself to being broken down into subtopics, consider using Accordion & Tabs.
Tabs work better for short titles with a smaller number of records, but will wrap to a second row if needed. On mobile, tabs always display as accordions.
Columns
Lorem ipsum odor amet
Lorem ipsum odor amet, consectetuer adipiscing elit. Risus nisi bibendum montes integer amet, arcu primis volutpat ad. Eros eget luctus purus sit, sed primis euismod mi est. Sagittis turpis est, suspendisse euismod ullamcorper dictum massa. Tempor posuere dolor erat rutrum dui dictum maximus est. Suspendisse tincidunt platea cubilia tincidunt suspendisse scelerisque. Hac litora eu libero nisl consectetur egestas lacinia. Risus gravida hac ante mauris tellus dignissim placerat eu.
Integer habitasse
Integer habitasse eleifend rutrum vel diam sollicitudin platea sem. Malesuada hendrerit curabitur magna sit euismod. Arcu feugiat nascetur facilisis sapien porttitor eleifend. Nam nec accumsan senectus volutpat, dictum vitae integer. Fermentum quis fermentum magna non ex et fames. Vulputate metus habitasse parturient enim, vestibulum vestibulum inceptos. Iaculis leo cubilia habitasse odio cras egestas luctus a! Maximus et consequat, sagittis enim imperdiet nostra. Senectus ultricies tincidunt felis ad massa convallis. Egestas placerat justo dolor, eleifend litora mollis hac dapibus.
Aliquam facilisis
Aliquam facilisis metus ipsum potenti gravida tristique. Nascetur magnis nascetur cras cursus taciti vehicula tristique magnis. Suscipit senectus risus auctor nascetur; habitant turpis. Commodo pharetra arcu libero primis platea nostra mi. Primis pulvinar ipsum placerat luctus placerat senectus tincidunt et. Nascetur hac risus feugiat, vitae ut suspendisse habitant class. At odio dapibus lobortis sed porta.
Tortor vel a
Tortor vel a, duis placerat urna ante convallis. Netus dis sollicitudin donec ante aliquet vehicula dictum platea volutpat. Vitae mollis sagittis cubilia euismod elit duis magna fermentum. Pellentesque litora eget nulla fermentum suscipit, tellus commodo diam. Ligula sit duis aliquam tristique mattis orci. Libero tellus ante dignissim nibh id cursus adipiscing dui ridiculus. Hendrerit mattis donec orci sit placerat congue. Quam iaculis arcu primis fringilla viverra ex suscipit sagittis in.
Lobortis et efficitur
Lobortis et efficitur posuere feugiat purus curae elit habitasse magna. Luctus ipsum primis iaculis euismod neque. Facilisi a fringilla eu libero parturient. Urna class vestibulum mattis montes aptent condimentum inceptos commodo. Massa consequat fringilla accumsan convallis scelerisque. Sapien in euismod placerat efficitur lobortis ornare ligula. Ultricies fusce tempor ad auctor imperdiet egestas aptent torquent.
Accordion
-
Lorem ipsum odor amet, consectetuer adipiscing elit. Risus nisi bibendum montes integer amet, arcu primis volutpat ad. Eros eget luctus purus sit, sed primis euismod mi est. Sagittis turpis est, suspendisse euismod ullamcorper dictum massa. Tempor posuere dolor erat rutrum dui dictum maximus est. Suspendisse tincidunt platea cubilia tincidunt suspendisse scelerisque. Hac litora eu libero nisl consectetur egestas lacinia. Risus gravida hac ante mauris tellus dignissim placerat eu.
-
Integer habitasse eleifend rutrum vel diam sollicitudin platea sem. Malesuada hendrerit curabitur magna sit euismod. Arcu feugiat nascetur facilisis sapien porttitor eleifend. Nam nec accumsan senectus volutpat, dictum vitae integer. Fermentum quis fermentum magna non ex et fames. Vulputate metus habitasse parturient enim, vestibulum vestibulum inceptos. Iaculis leo cubilia habitasse odio cras egestas luctus a! Maximus et consequat, sagittis enim imperdiet nostra. Senectus ultricies tincidunt felis ad massa convallis. Egestas placerat justo dolor, eleifend litora mollis hac dapibus.
-
Aliquam facilisis metus ipsum potenti gravida tristique. Nascetur magnis nascetur cras cursus taciti vehicula tristique magnis. Suscipit senectus risus auctor nascetur; habitant turpis. Commodo pharetra arcu libero primis platea nostra mi. Primis pulvinar ipsum placerat luctus placerat senectus tincidunt et. Nascetur hac risus feugiat, vitae ut suspendisse habitant class. At odio dapibus lobortis sed porta.
-
Tortor vel a, duis placerat urna ante convallis. Netus dis sollicitudin donec ante aliquet vehicula dictum platea volutpat. Vitae mollis sagittis cubilia euismod elit duis magna fermentum. Pellentesque litora eget nulla fermentum suscipit, tellus commodo diam. Ligula sit duis aliquam tristique mattis orci. Libero tellus ante dignissim nibh id cursus adipiscing dui ridiculus. Hendrerit mattis donec orci sit placerat congue. Quam iaculis arcu primis fringilla viverra ex suscipit sagittis in.
-
Lobortis et efficitur posuere feugiat purus curae elit habitasse magna. Luctus ipsum primis iaculis euismod neque. Facilisi a fringilla eu libero parturient. Urna class vestibulum mattis montes aptent condimentum inceptos commodo. Massa consequat fringilla accumsan convallis scelerisque. Sapien in euismod placerat efficitur lobortis ornare ligula. Ultricies fusce tempor ad auctor imperdiet egestas aptent torquent.
Tabs
Lorem ipsum odor amet, consectetuer adipiscing elit. Risus nisi bibendum montes integer amet, arcu primis volutpat ad. Eros eget luctus purus sit, sed primis euismod mi est. Sagittis turpis est, suspendisse euismod ullamcorper dictum massa. Tempor posuere dolor erat rutrum dui dictum maximus est. Suspendisse tincidunt platea cubilia tincidunt suspendisse scelerisque. Hac litora eu libero nisl consectetur egestas lacinia. Risus gravida hac ante mauris tellus dignissim placerat eu.
Integer habitasse eleifend rutrum vel diam sollicitudin platea sem. Malesuada hendrerit curabitur magna sit euismod. Arcu feugiat nascetur facilisis sapien porttitor eleifend. Nam nec accumsan senectus volutpat, dictum vitae integer. Fermentum quis fermentum magna non ex et fames. Vulputate metus habitasse parturient enim, vestibulum vestibulum inceptos. Iaculis leo cubilia habitasse odio cras egestas luctus a! Maximus et consequat, sagittis enim imperdiet nostra. Senectus ultricies tincidunt felis ad massa convallis. Egestas placerat justo dolor, eleifend litora mollis hac dapibus.
Aliquam facilisis metus ipsum potenti gravida tristique. Nascetur magnis nascetur cras cursus taciti vehicula tristique magnis. Suscipit senectus risus auctor nascetur; habitant turpis. Commodo pharetra arcu libero primis platea nostra mi. Primis pulvinar ipsum placerat luctus placerat senectus tincidunt et. Nascetur hac risus feugiat, vitae ut suspendisse habitant class. At odio dapibus lobortis sed porta.
Tortor vel a, duis placerat urna ante convallis. Netus dis sollicitudin donec ante aliquet vehicula dictum platea volutpat. Vitae mollis sagittis cubilia euismod elit duis magna fermentum. Pellentesque litora eget nulla fermentum suscipit, tellus commodo diam. Ligula sit duis aliquam tristique mattis orci. Libero tellus ante dignissim nibh id cursus adipiscing dui ridiculus. Hendrerit mattis donec orci sit placerat congue. Quam iaculis arcu primis fringilla viverra ex suscipit sagittis in.
Lobortis et efficitur posuere feugiat purus curae elit habitasse magna. Luctus ipsum primis iaculis euismod neque. Facilisi a fringilla eu libero parturient. Urna class vestibulum mattis montes aptent condimentum inceptos commodo. Massa consequat fringilla accumsan convallis scelerisque. Sapien in euismod placerat efficitur lobortis ornare ligula. Ultricies fusce tempor ad auctor imperdiet egestas aptent torquent.
-
Lorem ipsum odor amet, consectetuer adipiscing elit. Risus nisi bibendum montes integer amet, arcu primis volutpat ad. Eros eget luctus purus sit, sed primis euismod mi est. Sagittis turpis est, suspendisse euismod ullamcorper dictum massa. Tempor posuere dolor erat rutrum dui dictum maximus est. Suspendisse tincidunt platea cubilia tincidunt suspendisse scelerisque. Hac litora eu libero nisl consectetur egestas lacinia. Risus gravida hac ante mauris tellus dignissim placerat eu.
-
Integer habitasse eleifend rutrum vel diam sollicitudin platea sem. Malesuada hendrerit curabitur magna sit euismod. Arcu feugiat nascetur facilisis sapien porttitor eleifend. Nam nec accumsan senectus volutpat, dictum vitae integer. Fermentum quis fermentum magna non ex et fames. Vulputate metus habitasse parturient enim, vestibulum vestibulum inceptos. Iaculis leo cubilia habitasse odio cras egestas luctus a! Maximus et consequat, sagittis enim imperdiet nostra. Senectus ultricies tincidunt felis ad massa convallis. Egestas placerat justo dolor, eleifend litora mollis hac dapibus.
-
Aliquam facilisis metus ipsum potenti gravida tristique. Nascetur magnis nascetur cras cursus taciti vehicula tristique magnis. Suscipit senectus risus auctor nascetur; habitant turpis. Commodo pharetra arcu libero primis platea nostra mi. Primis pulvinar ipsum placerat luctus placerat senectus tincidunt et. Nascetur hac risus feugiat, vitae ut suspendisse habitant class. At odio dapibus lobortis sed porta.
-
Tortor vel a, duis placerat urna ante convallis. Netus dis sollicitudin donec ante aliquet vehicula dictum platea volutpat. Vitae mollis sagittis cubilia euismod elit duis magna fermentum. Pellentesque litora eget nulla fermentum suscipit, tellus commodo diam. Ligula sit duis aliquam tristique mattis orci. Libero tellus ante dignissim nibh id cursus adipiscing dui ridiculus. Hendrerit mattis donec orci sit placerat congue. Quam iaculis arcu primis fringilla viverra ex suscipit sagittis in.
-
Lobortis et efficitur posuere feugiat purus curae elit habitasse magna. Luctus ipsum primis iaculis euismod neque. Facilisi a fringilla eu libero parturient. Urna class vestibulum mattis montes aptent condimentum inceptos commodo. Massa consequat fringilla accumsan convallis scelerisque. Sapien in euismod placerat efficitur lobortis ornare ligula. Ultricies fusce tempor ad auctor imperdiet egestas aptent torquent.
Spotlight vs. Horizontal Picture Series vs. Scroll Over Images
All support adding a link: Spotlight via a button, HPS by clicking the image, and Scroll Over supports both.
- Spotlight is typically for slideshows, but you could choose to add only a single image. If your image is not sized properly, it can still look good. Title limited to 500 characters, paragraph limited to 1000 characters.
- Horizontal Picture Series lines up to 6 pictures next to each other in a row (though you can have fewer). Regardless of the original image dimensions, this component forces them to all have equal widths. Heights can still vary so it looks best if all images have the same proportions (such as 1:1, 2:3, etc.) Captions are optional, limited to 255 characters. Cannot change font size/color.
- Scroll Over Images supports up to four images in a row and will force all images to be equal height and width. You can set the height and decide if they have rounded corners and/or space in between. Two styles of shading are offered, and you control the font sizes and colors.
Large Spotlight
Small Spotlight
Scroll Over Images
-
Lorem ipsum
Lorem ipsum odor amet, consectetuer adipiscing elit. Risus nisi bibendum montes integer amet, arcu primis volutpat ad.
-
Integer habitasse
Integer habitasse eleifend rutrum vel diam sollicitudin platea sem. Malesuada hendrerit curabitur magna sit euismod. Arcu feugiat nascetur facilisis.
-
Aliquam facilisis
Aliquam facilisis metus ipsum potenti gravida tristique. Nascetur magnis nascetur cras cursus taciti vehicula tristique magnis.
-
Tortor vel a
Tortor vel a, duis placerat urna ante convallis. Netus dis sollicitudin donec ante aliquet vehicula dictum platea volutpat. Vitae mollis sagittis cubi
Parallax vs. Banner in Columns
Both are treated as background images, meaning on smaller screens you see less of the image (as opposed to the image scaling down). Both also allow you to set an exact height and support text or no text.
Parallax images have a slight 3-D effect, revealing different parts of the image as you scroll. Parallax will be faster and easier to set up, with fewer configuration options. Parallax has text length and color limitations, while Columns does not.
Parallax Image
