- These are just BASIC starter snips. Feel free to adjust and fine-tune as needed to be less generic, when possible.
- Familiarlize yourself with these from top-to-bottom. Some comments will not be repeated as you get further down the page.
- Refer to the Helpful Notes button, above, for more detailed information.
I'll add these to the global snips at some point... but for now, this is the best place to get all your best snips, with clear explanations.
** New Slick Slider Home Page Hero with Background Slider Sub Page Hero Header Footer Final Call to Action Section etc. maybeHome Page Hero with Background Slider
- The text on this slider is on EVERY slide. So if you update something, you have to copy/paste it on every slide. It's the DIV with class .caption-wrapper and its closing /DIV.
- The .overlay div is outside the .caption-wrapper div. You can change the opacity-value of it on each individual slide.
- View source code to see additional notes in comments.
Sub Page Hero Header
- [[LOC_TAGLINE]] pulls from site config, used for additional keywords. May need to open/save Page Config to force the shortcode to display.
- Remove .mega class from H1 to make heading text slightly smaller, if desired.
- View source code to see additional notes in comments.
Descriptive H1 Heading with Relevant Keywords
This is the company tagline which can be used to insert more SEO keywords on subpages.
Footer Call to Action Section
- This section can be placed at the top of your footer so that it displays on every page.
- View source code to see additional notes in comments.
BASIC Alternating Background Images
- Images will automatically alternate with included CSS - Click the + button to create another row with the image flipped, automatically.
- View source code to see additional notes in comments.
Descriptive Heading with Keywords Goes Here.
Attempt to have enough text here so that you are able to see most of the image without cropping too much of it out, on desktop at least.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida ante tellus, id pretium dui pretium nec. Suspendisse hendrerit dolor in neque posuere, non ornare lacus sodales. Nullam tristique mauris id pellentesque porttitor. Morbi a erat urna. Phasellus eros velit, iaculis non egestas quis.
Contact Us NowDescriptive Heading with Keywords Goes Here.
Attempt to have enough text here so that you are able to see most of the image without cropping too much of it out, on desktop at least.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida ante tellus, id pretium dui pretium nec. Suspendisse hendrerit dolor in neque posuere, non ornare lacus sodales. Nullam tristique mauris id pellentesque porttitor. Morbi a erat urna. Phasellus eros velit, iaculis non egestas quis.
Contact Us NowUNCONTAINED Alternating Background Images
- Images will automatically alternate with included CSS - Click the + button to create another row with the image flipped, automatically.
- This version has no .bg-light class on the section, and gives the snip a less blocky style.
- View source code to see additional notes in comments.
Descriptive Heading with Keywords Goes Here.
Attempt to have enough text here so that you are able to see most of the image without cropping too much of it out, on desktop at least.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida ante tellus, id pretium dui pretium nec. Suspendisse hendrerit dolor in neque posuere, non ornare lacus sodales. Nullam tristique mauris id pellentesque porttitor. Morbi a erat urna. Phasellus eros velit, iaculis non egestas quis.
Contact Us NowDescriptive Heading with Keywords Goes Here.
Attempt to have enough text here so that you are able to see most of the image without cropping too much of it out, on desktop at least.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida ante tellus, id pretium dui pretium nec. Suspendisse hendrerit dolor in neque posuere, non ornare lacus sodales. Nullam tristique mauris id pellentesque porttitor. Morbi a erat urna. Phasellus eros velit, iaculis non egestas quis.
Contact Us NowFULL WIDTH Alternating Background Images
- Images will automatically alternate with included CSS - Click the + button to create another row with the image flipped, automatically.
- Since there are no top/bottom padding/margins for this snip, the sections before/after should have a different background color, and probably not a full width image that butts up against it.
- View source code to see additional notes in comments.
Descriptive Heading with Keywords Goes Here.
Attempt to have enough text here so that you are able to see most of the image without cropping too much of it out, on desktop at least.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida ante tellus, id pretium dui pretium nec. Suspendisse hendrerit dolor in neque posuere, non ornare lacus sodales. Nullam tristique mauris id pellentesque porttitor. Morbi a erat urna. Phasellus eros velit, iaculis non egestas quis.
Contact Us NowDescriptive Heading with Keywords Goes Here.
Attempt to have enough text here so that you are able to see most of the image without cropping too much of it out, on desktop at least.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida ante tellus, id pretium dui pretium nec. Suspendisse hendrerit dolor in neque posuere, non ornare lacus sodales. Nullam tristique mauris id pellentesque porttitor. Morbi a erat urna. Phasellus eros velit, iaculis non egestas quis.
Contact Us NowAlternating NON-BACKGROUND Images
- Images will automatically alternate with included CSS - Click the + button to create another row with the image flipped, automatically.
- The difference here is that the image will never be cropped. So first you want to place your content, and then choose an image that's slightly taller than the content, on desktop/laptop at least. Or, fit your content to closely match the height of a pre-determined image.
- It's also useful for PNGs and images with white backgrounds, to remove any signs of borders or containers.
- View source code to see additional notes in comments.
Descriptive Heading with Keywords Goes Here.
After determining the amount of text that will be here, then you can choose an appropriately sized image. Or, after placing a specified image, try to place enough text here to be roughly the same height as the image.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida ante.
Contact Us Now
Descriptive Heading with Keywords Goes Here.
After determining the amount of text that will be here, then you can choose an appropriately sized image. Or, after placing a specified image, try to place enough text here to be roughly the same height as the image.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida ante.
Contact Us Now- Note: Most snip sections have .py-4 .py-lg-5 for padding. If you have 2 sections next to each other with the same background-color, change one of them to .bg-light, .bg-dark, bg-white, etc. This will prevent padding in sections from doubling up. Or, adjust padding accordingly if there are 2 sections with same bg-color touching.
- div with .py-4.py-lg-5 above another div with .py-4.py-lg-5 and the same bg-color:
- either change top div to .pt-4.pt-lg-5 or bottom div to .pb-4.pb-lg-5
- div with .py-4.py-lg-5 above another div with .py-4.py-lg-5 and the same bg-color:
Basic Team Section
- The included CSS is responsible for the round image. Remove the code to make them square again. Images should be 500 x 500px.
- View source code to see additional notes in comments.
Team Members Full Name Here
Team Members Title Here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida ante tellus, id pretium dui pretium nec. Suspendisse hendrerit dolor in neque posuere, non ornare lacus sodales. Nullam tristique mauris id pellentesque porttitor. Morbi a erat urna. Phasellus eros velit, iaculis non egestas quis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida ante tellus, id pretium dui pretium nec. Suspendisse hendrerit dolor in neque posuere, non ornare lacus sodales. Nullam tristique mauris id pellentesque porttitor. Morbi a erat urna. Phasellus eros velit, iaculis non egestas quis.
Team Members Full Name Here
Team Members Title Here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida ante tellus, id pretium dui pretium nec. Suspendisse hendrerit dolor in neque posuere, non ornare lacus sodales. Nullam tristique mauris id pellentesque porttitor. Morbi a erat urna. Phasellus eros velit, iaculis non egestas quis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida ante tellus, id pretium dui pretium nec. Suspendisse hendrerit dolor in neque posuere, non ornare lacus sodales. Nullam tristique mauris id pellentesque porttitor. Morbi a erat urna. Phasellus eros velit, iaculis non egestas quis.
List of Brands or Logos
- Make logos 400px wide. See included CSS for adjustments. Logos should be cropped so that there is no additional white-space around them.
- View source code to see additional notes in comments.
Our Preferred Brands or Favorite Customers, Etc.
Slick Slider
- This is quite advanced. Probably easiest to just look at the code, as it's beyond our typical page designer tools in many regards. Ask Jared if you want this somewhere...
- NOTE: There is code in the PAGE HEAD link at top, needed to make this work. If applying to a different site, put that code in the HEAD.
- View source code to see additional notes in comments.
All the Rest of the Snips to Be Added, Someday... These can generally be found on other sites.
- Another team page with cards and modals for more information
- Standard homepage hero snip with no carousel
- Half width hero image carousel - https://glamourskinbar.com/
- Homepage hero carousel with captions on every slide, probably 2 versions
- Hero section with half width content/div (affodable estate planning)
- Narrow middle-of-the-page call to action section with BG image.
- Background image section with logo/text - https://enviroworks.omniawebsites.com/home
- Accordion
- Tabbed section
- Question and answer snip
- 3 and 4 column basic cards, with/without bg-light backgrounds and white card bodies. (4 total)
- notes (if you want to change the size, edit the col-* stuff)
- Hyperlinked overlay cards
- notes (if you want to change the size, edit the col-* stuff)
- Image collage
- Basic page with RightFloat images, small/lg with explanations of global css
- Contact page
- Food/menu page like: http://rock-n-roll-sushi.omniawebsites.com/index.cfm
- Background video hero
- Background video that plays/stops when scolled to and away from
- Video collage page
- Standard youtube/vimeo video section
- Slick slider stuff and more from: https://superseer.com/
- Numbers/stats section (affordable estate planning)
- Quick links sub header like: https://bordermovers.com/
- Elfsight testimonial slider
- Testimonials slider, better than the Bell one
- Newsletter signup section
- Something for CSS columns
- Something with a map, a couple versions maybe
- Embed reviews widget
- Blog shortcode
- Then maybe get into some more complicated, more interesting snips...
- Go back through some old John sites and pull from there.