### Elementor Frontend Configuration
Source: https://snugsite.com.au/blog/google-my-business-guide-from-setup-to-monthly-growth/
Provides comprehensive frontend configuration settings for the Elementor page builder. This includes environment mode, internationalization strings, responsive breakpoints, theme builder settings, and URLs for assets and AJAX requests.
```javascript
var elementorFrontendConfig={"environmentMode":{"edit":!1,"wpPreview":!1,"isScriptDebug":!1},"i18n":{"shareOnFacebook":"Share on Facebook","shareOnTwitter":"Share on Twitter","pinIt":"Pin it","download":"Download","downloadImage":"Download image","fullscreen":"Fullscreen","zoom":"Zoom","share":"Share","playVideo":"Play Video","previous":"Previous","next":"Next","close":"Close","a11yCarouselPrevSlideMessage":"Previous slide","a11yCarouselNextSlideMessage":"Next slide","a11yCarouselFirstSlideMessage":"This is the first slide","a11yCarouselLastSlideMessage":"This is the last slide","a11yCarouselPaginationBulletMessage":"Go to slide"},"is_rtl":!1,"breakpoints":{"xs":0,"sm":480,"md":768,"lg":1025,"xl":1440,"xxl":1600},"responsive":{"breakpoints":{"mobile":{"label":"Mobile Portrait","value":767,"default_value":767,"direction":"max","is_enabled":!0},"mobile_extra":{"label":"Mobile Landscape","value":880,"default_value":880,"direction":"max","is_enabled":!1},"tablet":{"label":"Tablet Portrait","value":1024,"default_value":1024,"direction":"max","is_enabled":!0},"tablet_extra":{"label":"Tablet Landscape","value":1200,"default_value":1200,"direction":"max","is_enabled":!1},"laptop":{"label":"Laptop","value":1366,"default_value":1366,"direction":"max","is_enabled":!1},"widescreen":{"label":"Widescreen","value":2400,"default_value":2400,"direction":"min","is_enabled":!1}},"hasCustomBreakpoints":!1},"version":"3.30.3","is_static":!1,"experimentalFeatures":{"e_font_icon_svg":!0,"additional_custom_breakpoints":!0,"container":!0,"theme_builder_v2":!0,"nested-elements":!0,"home_screen":!0,"global_classes_should_enforce_capabilities":!0,"cloud-library":!0,"e_opt_in_v4_page":!0},"urls":{"assets":"https:\/\/snugsite.com.au\/wp-content\/plugins\/elementor\/assets\/","ajaxurl":"https:\/\/snugsite.com.au\/wp-admin\/admin-ajax.php","uploadUrl":"https:\/\/snugsite.com.au\/wp-content\/uploads"},"nonces":{"floatingButtonsClickTracking":"4a78f11e29"},"swiperClass":"swiper","settings":{"page":[],"editorPreferences":[]},"kit":{"viewport_mobile":767,"viewport_tablet":1024,"active_breakpoints":["viewport_mobile","viewport_tablet"],"global_image_lightbox":"yes","lightbox_enable_share":"yes"},"post":{"id":7716,"title":"Google%20Business%20Profile%20Guide%3A%20From%20Setup%20to%20Monthly%20Growth%20-%20Snug%20Site","excerpt":"If you\u2019re new to Google My Business, this guide is your all-in-one r"}};
```
--------------------------------
### FastPage Configuration for Performance
Source: https://snugsite.com.au/blog/google-my-business-guide-from-setup-to-monthly-growth/
Configures performance optimization settings for the FastPage script. It defines parameters such as the delay for script execution, keywords to ignore for prefetching, maximum requests per second, and hover delay for interactive elements.
```javascript
window.FPConfig={"delay":0,"ignoreKeywords":["/wp-admin","/wp-login.php","/cart","/checkout","add-to-cart","logout","#","?",".png",".jpeg",".jpg",".gif",".svg",".webp"],"maxRPS":3,"hoverDelay":50};
```
--------------------------------
### HTML Skip Link
Source: https://snugsite.com.au/blog/google-my-business-guide-from-setup-to-monthly-growth/
An HTML anchor link that allows users to skip directly to the main content of the page, improving accessibility for keyboard navigation users.
```html
Skip to content
```
--------------------------------
### LazyLoad JavaScript Library
Source: https://snugsite.com.au/blog/google-my-business-guide-from-setup-to-monthly-growth/
Core JavaScript code for the LazyLoad library, handling image and background lazy loading. It includes functions for observing elements, applying classes, managing loading states, and handling callbacks for various events like loading, applied, error, and finish.
```javascript
function e(){return(e=Object.assign||function(t){for(var e=1;e{
const lazyloadBackgrounds=document.querySelectorAll(`.e-con.e-parent:not(.e-lazyloaded)`);
const lazyloadBackgroundObserver=new IntersectionObserver((entries)=>{
entries.forEach((entry)=>{
if(entry.isIntersecting){
let lazyloadBackground=entry.target;
if(lazyloadBackground){
lazyloadBackground.classList.add('e-lazyloaded');
}
lazyloadBackgroundObserver.unobserve(entry.target);
}
});
},{
rootMargin:'200px 0px 200px 0px'
});
lazyloadBackgrounds.forEach((lazyloadBackground)=>{
lazyloadBackgroundObserver.observe(lazyloadBackground);
});
};
const events=
['DOMContentLiteSpeedLoaded','elementor/lazyload/observe'];
events.forEach((event)=>{
document.addEventListener(event,lazyloadRunObserver);
});
```
--------------------------------
### JavaScript LazyLoad Class Prototype Methods
Source: https://snugsite.com.au/blog/google-my-business-guide-from-setup-to-monthly-growth/
This block defines the public methods available on the LazyLoad class prototype. `update` refreshes the list of elements to observe, `destroy` cleans up the observer and element states, `loadAll` forces loading of all specified elements, and `restoreAll` reverts elements to their initial state. These methods provide control over the lazy loading instance.
```JavaScript
return t.prototype={update:function(t){var e,n,a,o=this._settings,i=W(t,o);{if(p(this,i.length),!Z&&tt)return q(o)?(e=o,n=this,i.forEach(function(t){-1!==Lt.indexOf(t.tagName)&&S(t,e,n)}),void p(n,0)):(t=this._observer,o=i,t.disconnect(),a=t,void o.forEach(function(t){a.observe(t)}));this.loadAll(i)}},destroy:function(){this._observer&&this._observer.disconnect(),K(this._settings).forEach(function(t){I(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;W(t,n).forEach(function(t){v(t,e),D(t,n,e)})},restoreAll:function(){var e=this._settings;K(e).forEach(function(t){P(t,e)})},t.load=function(t,e){e=o(e);D(t,e)},t.resetStatus=function(t){i(t)}}
```
--------------------------------
### CSS List Styling
Source: https://snugsite.com.au/blog/google-my-business-guide-from-setup-to-monthly-growth/
A simple CSS rule to adjust the bottom margin for unordered lists, ensuring consistent spacing between list elements and subsequent content.
```css
ul.wp-block-list {
margin-bottom: 20px;
}
```
--------------------------------
### CSS Font Size Utility Classes
Source: https://snugsite.com.au/blog/google-my-business-guide-from-setup-to-monthly-growth/
A collection of CSS classes for applying predefined font sizes to text elements. These classes leverage CSS variables to manage font size presets, promoting consistent typography across the site.
```css
.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}
.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}
.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}
.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}
```
--------------------------------
### CSS Media Query for Background Images
Source: https://snugsite.com.au/blog/google-my-business-guide-from-setup-to-monthly-growth/
Responsive CSS rules that conditionally remove background images based on screen height. This is applied to specific parent elements to optimize rendering on devices with limited screen real estate.
```css
@media screen and (max-height: 1024px) {
.e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload),
.e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload) *
{
background-image: none !important;
}
}
@media screen and (max-height: 640px) {
.e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload),
.e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload) *
{
background-image: none !important;
}
}
```
--------------------------------
### JavaScript LazyLoad Element Type Handlers
Source: https://snugsite.com.au/blog/google-my-business-guide-from-setup-to-monthly-growth/
These objects define specific handling logic for different HTML element types (IMG, IFRAME, VIDEO) during the lazy loading process. `Et` specifies how to apply source attributes, while `yt` defines how to restore original attributes or reset the element state. This allows the utility to correctly load and manage various media types.
```JavaScript
var Et={IMG:function(t,e){h(t,function(t){y(t,mt),O(t,e)}),y(t,mt),O(t,e)},IFRAME:function(t,e){y(t,pt),A(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){y(t,pt),A(t,ot,l(t,e.data_src))}),y(t,ht),A(t,ct,l(t,e.data_poster)),A(t,ot,l(t,e.data_src)),t.load()}},
It=["IMG","IFRAME","VIDEO"],
yt={IMG:j,IFRAME:function(t){L(t,pt)},VIDEO:function(t){a(t,function(t){L(t,pt)}),L(t,ht),t.load()}},
Lt=["IMG","IFRAME","VIDEO"]
```
--------------------------------
### JavaScript LazyLoad Initialization and Event Listeners
Source: https://snugsite.com.au/blog/google-my-business-guide-from-setup-to-monthly-growth/
This immediately invoked function expression (IIFE) initializes the LazyLoad instance upon the window's 'load' event. It sets up a MutationObserver to automatically update the lazy load instance when the DOM changes, ensuring new elements are also observed. It also adds a 'litespeed_lazyloaded' class to the body upon completion.
```JavaScript
(function(t,e){"use strict";function n(){e.body.classList.add("litespeed_lazyloaded")}function a(){console.log("[LiteSpeed] Start Lazy Load"),o=new LazyLoad(Object.assign({},t.lazyLoadOptions||{},{elements_selector:"[data-lazyloaded]",callback_finish:n})),i=function(){o.update()},t.MutationObserver&&new MutationObserver(i).observe(e.documentElement,{childList:!0,subtree:!0,attributes:!0})}var o,i;t.addEventListener?t.addEventListener("load",a,!1):t.attachEvent("onload",a)}(window,document));
```
--------------------------------
### JavaScript LazyLoad Class Constructor and Utility Functions
Source: https://snugsite.com.au/blog/google-my-business-guide-from-setup-to-monthly-growth/
This section defines the constructor for the LazyLoad class and several utility functions. `B` initializes the Intersection Observer, `J` converts NodeList to Array, `K` selects elements, `Q` checks for error status, and `W` filters elements. The constructor `t` initializes settings, sets up the observer, and handles online/offline events for re-evaluation.
```JavaScript
function B(e,n){var t;tt&&!q(e)&&(n._observer=new IntersectionObserver(function(t){H(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}
function J(t){return Array.prototype.slice.call(t)}
function K(t){return t.container.querySelectorAll(t.elements_selector)}
function Q(t){return c(t)===ft}
function W(t,e){return e=t||K(e),J(e).filter(r)}
function X(e,t){var n;(n=K(e),J(n).filter(Q)).forEach(function(t){_(t,e.class_error),i(t)}),t.update()}
function t(t,e){var n,a,t=o(t);this._settings=t,this.loadingCount=0,B(t,this),n=t,a=this,Y&&window.addEventListener("online",function(){X(n,a)}),this.update(e)}
```
--------------------------------
### JavaScript LazyLoad Configuration Options
Source: https://snugsite.com.au/blog/google-my-business-guide-from-setup-to-monthly-growth/
This object defines the default configuration options for the LazyLoad utility. It includes selectors for elements, container, thresholds for intersection observation, data attributes for various content types (src, srcset, background images), CSS classes for different loading states, and callback functions for lifecycle events. These options allow for extensive customization of the lazy loading behavior.
```JavaScript
var at={elements_selector:".lazy",container:Z||Y?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1}
```
--------------------------------
### LiteSpeed Delayed JavaScript Loading and Cache Logic
Source: https://snugsite.com.au/blog/google-my-business-guide-from-setup-to-monthly-growth/
This script manages the delayed loading of JavaScript files and handles cache variation checks. It includes functions to force delayed loading, load scripts asynchronously, convert inline scripts to loadable sources, and checks for cache variations via cookies or an API endpoint, potentially triggering a page reload.
```javascript
var urlCreator = window.URL || window.webkitURL;
function litespeed_load_delayed_js_force() {
console.log("[LiteSpeed] Start Load JS Delayed");
litespeed_ui_events.forEach(e => {
window.removeEventListener(e, litespeed_load_delayed_js_force, { passive: !0 });
});
document.querySelectorAll("iframe[data-litespeed-src]").forEach(e => {
e.setAttribute("src", e.getAttribute("data-litespeed-src"));
});
"loading" == document.readyState ? window.addEventListener("DOMContentLoaded", litespeed_load_delayed_js) : litespeed_load_delayed_js();
}
litespeed_ui_events.forEach(e => {
window.addEventListener(e, litespeed_load_delayed_js_force, { passive: !0 });
});
async function litespeed_load_delayed_js() {
let t = [];
for (var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e => {
t.push(e);
}), t) {
await new Promise(e => litespeed_load_one(t[d], e));
}
document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"));
window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"));
}
function litespeed_load_one(t, e) {
console.log("[LiteSpeed] Load ", t);
var d = document.createElement("script");
d.addEventListener("load", e);
d.addEventListener("error", e);
t.getAttributeNames().forEach(e => {
"type" != e && d.setAttribute("data-src" == e ? "src" : e, t.getAttribute(e));
});
let a = !("type" in d);
!d.src && t.textContent && (d.src = litespeed_inline2src(t.textContent), a = !0);
t.after(d);
t.remove();
a && e();
}
function litespeed_inline2src(t) {
try {
var d = urlCreator.createObjectURL(new Blob([t.replace(/^(?:)?$/gm, "$1")], {
type: "text/javascript"
}));
} catch (e) {
d = "data:text/javascript;base64," + btoa(t.replace(/^(?:)?$/gm, "$1"));
}
return d;
}
var litespeed_vary = document.cookie.replace(/(?:(?:^|.*;)\s*_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/, "$1");
litespeed_vary || fetch("/wp-content/plugins/litespeed-cache/guest.vary.php", {
method: "POST",
cache: "no-cache",
redirect: "follow"
}).then(e => e.json()).then(e => {
console.log(e);
e.hasOwnProperty("reload") && "yes" == e.reload && (sessionStorage.setItem("litespeed_docref", document.referrer), window.location.reload(!0));
});
```
--------------------------------
### CSS contain-intrinsic-size for Auto Sized Images
Source: https://snugsite.com.au/blog/google-my-business-guide-from-setup-to-monthly-growth/
This CSS rule applies `contain-intrinsic-size` to images that have `sizes` attributes set to `auto` or starting with `auto,`. This helps in layout stability by providing intrinsic sizing information for images before they are fully loaded.
```css
img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }
```
--------------------------------
### WordPress Internationalization Setup
Source: https://snugsite.com.au/blog/category/guides-and-tips/
JavaScript code to set locale data for WordPress internationalization. It configures text directionality for the current locale.
```javascript
wp.i18n.setLocaleData({'text direction\u0004ltr':['ltr']})
```
--------------------------------
### CSS Pullquote Styling
Source: https://snugsite.com.au/blog/google-my-business-guide-from-setup-to-monthly-growth/
Specific CSS rules for styling pullquote blocks within the content. This targets elements within pullquote blocks to adjust font size and line height for better readability.
```css
:root :where(.wp-block-pullquote){
font-size: 1.5em;
line-height: 1.6;
}
```
--------------------------------
### LazyLoad Class Initialization and Configuration
Source: https://snugsite.com.au/building-online-stores-with-elementor/
Demonstrates the initialization of the LazyLoad class with default and custom settings, including options for element selectors, thresholds, and callbacks. It also shows how to set up native lazy loading for images.
```javascript
var Y = "undefined" != typeof window, Z = Y && !("onscroll" in window) || "undefined" != typeof navigator && /(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent), tt = Y && "IntersectionObserver" in window, et = Y && "classList" in document.createElement("p"), nt = Y && 1 < window.devicePixelRatio, at = {
elements_selector: ".lazy",
container: Z || Y ? document : null,
threshold: 300,
thresholds: null,
data_src: "src",
data_srcset: "srcset",
data_sizes: "sizes",
data_bg: "bg",
data_bg_hidpi: "bg-hidpi",
data_bg_multi: "bg-multi",
data_bg_multi_hidpi: "bg-multi-hidpi",
data_poster: "poster",
class_applied: "applied",
class_loading: "litespeed-loading",
class_loaded: "litespeed-loaded",
class_error: "error",
class_entered: "entered",
class_exited: "exited",
unobserve_completed: !0,
unobserve_entered: !1,
cancel_on_exit: !0,
callback_enter: null,
callback_exit: null,
callback_applied: null,
callback_loading: null,
callback_loaded: null,
callback_error: null,
callback_finish: null,
callback_cancel: null,
use_native: !1
};
function q(t) {
return t.use_native && "loading" in HTMLImageElement.prototype;
}
// Example of initializing LazyLoad
// const lazyLoadInstance = new LazyLoad(options);
```
--------------------------------
### CSS Image Containment
Source: https://snugsite.com.au/blog/category/guides-and-tips/
This CSS rule targets images with specific 'sizes' attributes ('auto' or starting with 'auto,'). It applies 'contain-intrinsic-size' to these images, providing a fallback intrinsic size for layout calculations before the image loads. This helps prevent layout shifts.
```css
img:is(\[sizes="auto" i], \[sizes^="auto," i\]) { contain-intrinsic-size: 3000px 1500px }
```
--------------------------------
### CSS Background Gradient Utility Classes
Source: https://snugsite.com.au/blog/google-my-business-guide-from-setup-to-monthly-growth/
A set of CSS classes designed to apply specific background gradients to HTML elements. These classes utilize CSS variables for defining gradient colors, allowing for easy theme customization.
```css
.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}
.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}
.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}
.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}
.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}
.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}
```