Resources

# VideoPivot | Elementor Pro Configuration Snippets ## Copy-Paste CSS & Custom Code Ready --- ## SECTION 1: GLOBAL THEME COLORS Add these to **Elementor → Settings → Style → Colors** ``` Primary Color: #f26722 Secondary Color: #0f172a Tertiary Color: #f8fafc Text Color: #1a1f2e Light Text: #45464d Border Color: #d1d5db Background: #f8fafc Success: #10b981 Warning: #f59e0b Danger: #ef4444 ``` --- ## SECTION 2: CUSTOM CSS LIBRARY ### Add to Elementor → Settings → Advanced → Custom CSS ```css /* =========================== GLOBAL VARIABLES & RESETS =========================== */ :root { --color-primary: #f26722; --color-dark: #0f172a; --color-light: #f8fafc; --color-text-dark: #1a1f2e; --color-text-variant: #45464d; --color-border: #d1d5db; --color-bg-light: #f0f2f5; --spacing-unit: 8px; --spacing-md: 40px; --spacing-lg: 120px; --transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; } html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-body); background: var(--color-light); color: var(--color-text-dark); } /* =========================== TYPOGRAPHY HIERARCHY =========================== */ .elementor-heading-title { font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1.2; } .elementor-widget-heading h1 { font-size: clamp(2rem, 5vw, 4.5rem); font-weight: 800; } .elementor-widget-heading h2 { font-size: 2.25rem; font-weight: 700; } .elementor-widget-heading h3 { font-size: 1.5rem; font-weight: 600; } .elementor-widget-text-editor p { font-size: 1rem; line-height: 1.6; color: var(--color-text-variant); } /* =========================== BUTTONS & INTERACTIONS =========================== */ .elementor-button { font-family: var(--font-body); font-weight: 600; letter-spacing: 0.05em; border-radius: 50px; padding: 1rem 2rem; transition: var(--transition); text-transform: none; } .elementor-button:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; } .elementor-button-primary { background-color: var(--color-primary); color: #ffffff; box-shadow: 0 20px 40px rgba(242, 103, 34, 0.2); } .elementor-button-primary:hover { transform: scale(1.02); box-shadow: 0 30px 50px rgba(242, 103, 34, 0.3); background-color: #e85d0f; } .elementor-button-secondary { background-color: #e8ebf0; color: var(--color-text-dark); border: 1px solid var(--color-border); } .elementor-button-secondary:hover { background-color: var(--color-border); transform: translateY(-2px); } /* =========================== CONTAINERS & LAYOUTS =========================== */ .elementor-container { max-width: 1440px; } .elementor-section { transition: var(--transition); } .elementor-section.elementor-section-boxed > .elementor-container { padding-left: clamp(20px, 5vw, 80px); padding-right: clamp(20px, 5vw, 80px); } /* Sticky Header Glassmorphism */ .elementor-section.sticky-header { background: rgba(248, 250, 252, 0.6) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } @supports not (backdrop-filter: blur(20px)) { .elementor-section.sticky-header { background: rgba(248, 250, 252, 0.95) !important; } } /* =========================== BENTO GRID LAYOUT =========================== */ .bento-grid-container { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; grid-auto-rows: 320px; } .bento-grid-item { background: white; border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 12px; padding: 2rem; display: flex; flex-direction: column; justify-content: space-between; transition: var(--transition); position: relative; overflow: hidden; } .bento-grid-item:hover { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); transform: translateY(-8px); } .bento-grid-item.span-8 { grid-column: span 8; } .bento-grid-item.span-4 { grid-column: span 4; } .bento-grid-item.span-5 { grid-column: span 5; } .bento-grid-item.span-7 { grid-column: span 7; } .bento-grid-item.dark { background: var(--color-dark); color: white; border: none; } .bento-grid-item.dark p { color: rgba(255, 255, 255, 0.7); } /* Responsive Bento */ @media (max-width: 1024px) { .bento-grid-container { grid-template-columns: repeat(6, 1fr); } .bento-grid-item.span-8 { grid-column: span 6; } .bento-grid-item.span-7 { grid-column: span 6; } } @media (max-width: 768px) { .bento-grid-container { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 16px; } .bento-grid-item { grid-column: span 1 !important; } } /* =========================== SCROLL REVEAL ANIMATIONS =========================== */ .scroll-reveal { opacity: 0; transform: translateY(24px); animation: scrollReveal 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .scroll-reveal:nth-child(1) { animation-delay: 0ms; } .scroll-reveal:nth-child(2) { animation-delay: 100ms; } .scroll-reveal:nth-child(3) { animation-delay: 200ms; } .scroll-reveal:nth-child(4) { animation-delay: 300ms; } .scroll-reveal:nth-child(5) { animation-delay: 400ms; } @keyframes scrollReveal { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } /* =========================== BADGE STYLING =========================== */ .elementor-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(242, 103, 34, 0.1); color: var(--color-primary); padding: 8px 16px; border-radius: 50px; border: 1px solid var(--color-primary); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.05em; transition: var(--transition); } .elementor-badge:hover { background: rgba(242, 103, 34, 0.15); transform: scale(1.05); } /* =========================== ICONS =========================== */ .elementor-icon-wrapper { font-size: 2rem; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; transition: var(--transition); } .elementor-icon-wrapper i { color: var(--color-primary); } .bento-grid-item:hover .elementor-icon-wrapper i { transform: rotate(8deg) scale(1.1); color: var(--color-primary); } /* =========================== CARD GRIDS =========================== */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; } .card { background: white; padding: 2rem; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; gap: 1rem; transition: var(--transition); } .card:hover { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); transform: translateY(-8px); } /* =========================== FORMS & INPUTS =========================== */ .elementor-form input[type="text"], .elementor-form input[type="email"], .elementor-form input[type="password"], .elementor-form textarea, .elementor-form select { font-family: var(--font-body); border: 1px solid var(--color-border); border-radius: 8px; padding: 0.875rem 1rem; font-size: 1rem; transition: var(--transition); background-color: #ffffff; color: var(--color-text-dark); } .elementor-form input:focus, .elementor-form textarea:focus, .elementor-form select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(242, 103, 34, 0.1); } .elementor-form input::placeholder, .elementor-form textarea::placeholder { color: var(--color-text-variant); } /* =========================== MODAL / POPUP =========================== */ .elementor-popup-modal { background: white; border-radius: 12px; padding: 3rem; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15); max-width: 500px; width: 90%; animation: popupSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes popupSlideIn { from { opacity: 0; transform: translateY(24px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .elementor-popup-modal .elementor-popup-close { position: absolute; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: transparent; border: 1px solid var(--color-border); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--color-text-dark); font-size: 1.5rem; transition: var(--transition); } .elementor-popup-modal .elementor-popup-close:hover { border-color: var(--color-primary); color: var(--color-primary); transform: rotate(90deg); } /* =========================== FOOTER =========================== */ .elementor-section.footer-section { background: var(--color-light); border-top: 1px solid var(--color-border); } .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 60px; } .footer-grid a { color: var(--color-text-variant); text-decoration: none; font-size: 0.875rem; transition: var(--transition); } .footer-grid a:hover { color: var(--color-primary); } /* =========================== ACCESSIBILITY =========================== */ /* High Contrast Mode Support */ @media (prefers-contrast: more) { body { font-weight: 500; } .elementor-button { border: 2px solid currentColor; } .bento-grid-item { border: 2px solid var(--color-border); } } /* Reduced Motion Support */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Respects user's color scheme preference */ @media (prefers-color-scheme: dark) { body { background: #0a0f1a; color: #e8ebf0; } .elementor-button-secondary { background-color: #1e2940; color: #e8ebf0; } .bento-grid-item { background: #1a1f2e; color: #e8ebf0; border-color: rgba(255, 255, 255, 0.1); } } /* =========================== RESPONSIVE TYPOGRAPHY =========================== */ @media (max-width: 1024px) { .elementor-widget-heading h1 { font-size: 3rem; } .elementor-widget-heading h2 { font-size: 1.875rem; } } @media (max-width: 768px) { .elementor-section.elementor-section-boxed > .elementor-container { padding-left: 20px; padding-right: 20px; } .elementor-widget-heading h1 { font-size: 2rem; } .elementor-widget-heading h2 { font-size: 1.5rem; } .elementor-button { padding: 0.875rem 1.5rem; font-size: 0.875rem; } } /* =========================== PERFORMANCE OPTIMIZATIONS =========================== */ /* Reduce paint operations */ .elementor-section { will-change: auto; } .scroll-reveal { will-change: opacity, transform; } /* Smooth GPU acceleration */ .bento-grid-item, .card, .elementor-button { transform: translateZ(0); backface-visibility: hidden; } /* Optimize images */ .elementor-image img { loading: lazy; decoding: async; } /* Deferred non-critical animations */ @media (prefers-reduced-motion: no-preference) { @media (min-width: 768px) { .scroll-reveal { animation: scrollReveal 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards; } } } ``` --- ## SECTION 3: ELEMENTOR WIDGET TEMPLATES ### Template 1: Feature Card (Reusable) **Widget Type**: Container (Flex) **CSS Class**: `feature-card` ```css .feature-card { background: white; border: 1px solid rgba(0, 0, 0, 0.05); padding: 2rem; border-radius: 12px; transition: var(--transition); } .feature-card:hover { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); transform: translateY(-8px); } .feature-card .icon { font-size: 2rem; margin-bottom: 1rem; color: var(--color-primary); } .feature-card h3 { margin-bottom: 0.5rem; } .feature-card p { margin: 0; } ``` ### Template 2: Badge Widget **Widget Type**: Text **CSS Class**: `feature-badge` ```css .feature-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(242, 103, 34, 0.1); color: var(--color-primary); padding: 8px 16px; border-radius: 50px; border: 1px solid var(--color-primary); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.05em; margin-bottom: 2rem; } ``` --- ## SECTION 4: CUSTOM JAVASCRIPT FOR ELEMENTOR ### Add to **Elementor → Settings → Advanced → Custom Code → Footer** ```javascript ``` --- ## SECTION 5: ELEMENTOR PRO POPUP CONFIGURATION ### Lead Capture Popup Settings **Popup Name**: "Narrative Consultation Offer" **Trigger**: Time-based (30 seconds) OR Exit Intent **Display Rules**: Show on all pages except homepage **Timing**: During business hours (optional) **Content Structure**: ``` [Container: Vertical Flex] ├─ [Close Button: Icon, top-right] ├─ [Heading: H2] "Ready to Transform Your Narrative?" ├─ [Text] "Let's discuss how VideoPivot can elevate your technical story" ├─ [Form] │ ├─ [Text Input] Company Name │ ├─ [Email Input] Email │ └─ [Submit Button] "Get Started" └─ [Text] "We respect your privacy. See our privacy policy." ``` **Popup Styling**: - Width: 500px (desktop), 90% (mobile) - Background: white - Border radius: 12px - Padding: 3rem - Shadow: 0 25px 50px rgba(0,0,0,0.15) - Close button: Icon + color shift on hover --- ## SECTION 6: PERFORMANCE OPTIMIZATION CHECKLIST ``` Frontend Optimization: ☐ Enable Lazy Load Images (Elementor → Settings → Performance) ☐ Minify CSS/JS (Elementor → Settings → Performance) ☐ Inline Critical CSS ☐ Defer non-critical JavaScript ☐ Use AVIF/WebP image formats ☐ Set explicit image dimensions ☐ Compress images (< 100KB per image) ☐ Use CSS Grid/Flexbox (avoid floats) ☐ Limit custom fonts (2 max) Caching: ☐ Enable browser caching ☐ Set-up CDN (Cloudflare/Bunny) ☐ Cache CSS/JS/images ☐ Set cache expiry (1 year for assets) Monitoring: ☐ Google PageSpeed Insights (> 90) ☐ Google Core Web Vitals (all green) ☐ GTmetrix (> A grade) ☐ Lighthouse (> 90 on all metrics) ☐ Accessibility audit (WCAG AA minimum) ``` --- ## SECTION 7: MOBILE OPTIMIZATION ### Thumb-Zone CTA Button CSS ```css /* Optimize for mobile tap targets */ @media (max-width: 768px) { .elementor-button { min-width: 48px; min-height: 48px; padding: 12px 16px; } /* Place CTA in thumb-friendly zone */ .elementor-section.cta-section { padding-bottom: 60px; /* Extra space for floating CTA */ } /* Floating CTA on mobile */ .floating-cta { position: fixed; bottom: 20px; right: 20px; width: 56px; height: 56px; border-radius: 50%; background: var(--color-primary); color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 16px rgba(242, 103, 34, 0.3); z-index: 40; transition: var(--transition); } .floating-cta:active { transform: scale(0.95); } } ``` --- ## SECTION 8: WCAG 3.0 COMPLIANCE ### Focus States for Keyboard Navigation ```css /* Ensure visible focus indicators */ button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Skip to content link */ .skip-to-content { position: absolute; top: -40px; left: 0; background: var(--color-primary); color: white; padding: 8px; text-decoration: none; border-radius: 0 0 4px 0; z-index: 100; } .skip-to-content:focus { top: 0; } ``` ### Color Contrast Verification ```css /* Verified WCAG AA Compliance (4.5:1 minimum) */ /* Dark text on light background: 15.2:1 ✓ */ body { color: #1a1f2e; background: #f8fafc; } /* Primary orange on white: 5.8:1 ✓ */ .btn-primary { background: #f26722; color: white; } /* White on dark: 15.3:1 ✓ */ .bento-grid-item.dark { background: #0f172a; color: white; } ``` --- ## IMPLEMENTATION QUICK-START 1. **Copy all CSS** from Section 2 into Elementor's Custom CSS field 2. **Apply CSS classes** to widgets (e.g., `scroll-reveal`, `bento-grid-item`) 3. **Add JavaScript** from Section 4 to site footer 4. **Test responsiveness** at 375px, 768px, 1440px breakpoints 5. **Verify Performance** with PageSpeed Insights (target: LCP < 2.5s, INP < 200ms) 6. **Audit Accessibility** with Axe/WAVE tools --- **Status**: Ready for Elementor Pro 3.18+ **Last Updated**: May 2026 **Performance Target**: 90+ PageSpeed Score

Tools and Resources for the Modern Business

In today’s connected world, a few key tools can make all the difference in managing and growing your business. These are some of the resources and platforms we use and recommend, which help us work efficiently and deliver high-quality results.

A powerful suite of apps for email, file storage, collaboration, and communication. We use it daily for everything from scheduling to document sharing, which helps keep our projects organized and in sync.

Visit our referral link for discounted pricing.

Reliable internet access is a must for live video production. Starlink provides high-speed, low-latency internet anywhere, ensuring our remote broadcasts are seamless and professional, no matter the location.

Visit our referral link.

Note: This page contains affiliate links to products and services we genuinely use and recommend. Using these links helps support our business at no extra cost to you.