系统维护工具

名称	大小	权限	修改时间
..	-	-	-
images	[目录]	drwxr-xr-x	2020-06-24 22:01
plugin-update-checker-4-4	[目录]	drwxr-xr-x	2020-06-24 22:01
scripts	[目录]	drwxr-xr-x	2021-11-07 03:03
styles	[目录]	drwxr-xr-x	2020-06-24 22:01
updater	[目录]	drwxr-xr-x	2020-06-24 22:01
webfonts	[目录]	drwxr-xr-x	2020-06-24 22:01
.txt	0.00 B	-rw-r--r--	2020-06-24 22:01
divi-hack.php	23.65 KB	-rw-r--r--	2020-06-24 22:01
index.php	27.00 B	-rw-r--r--	2020-06-24 22:01
register-hacks.php	81.57 KB	-rw-r--r--	2020-06-24 22:01

代码编辑器 :register-hacks.php

<?php

// ------------------------------------------- START -----------------------------------------------------------

$dh_switch_matrix = Array(

Array(
 "title" => "Wrap Elements in Shortcodes",
 "description" => "Wrap any Section, Row, Column, or Module inside a shortcode. (Works great with plugins like Custom Content Shortcode and Shortcodes Ultimate). 
 
 Add the first part of an enclosing shortcode to the element's CSS Classes box. Example: if the shortcode is [my_shortcode option=yes]content[/my_shortcode], you would put the first part - [my_shortcode option=yes] in the CSS Classes box like it's a class. Make sure you include the brackets []. 
 
 <a href='https://divihacks.com/docs/wrap-shortcodes/' target='_blank'>Documentation</a>",
 "more" => "Made with CSS",
 "category" => "other auto-on",
 "option" => "wrap-shortcodes",
 "class" => "",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Stacked Login Form",
 "description" => "Allow the login module title, body text, and login form to be stacked vertically. 
 
 Add the class stack to the login module to activate the hack. 
 
 You may also use the CSS variable --forgot-pass-align: to customize the text alignment of the Forgot Password link. Add this to the Custom CSS box of the login module. 
 
 <a href='https://divihacks.com/docs/other-designs/#stacked-login' target='_blank'>Documentation</a>",
 "more" => "Made with CSS",
 "category" => "design",
 "option" => "stacked-login",
 "class" => "divi-hacks-stacked-login",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Background Effects",
 "description" => "Add custom effects (CSS Transform & Filter) to the element's background image by default, and also on hover. 
 
 Add the class bg-effects to activate the custom styles, then use CSS Variables to style the images. 
 
 <a href='https://divihacks.com/docs/background-effects/' target='_blank'>Documentation</a>",
 "more" => "Made with CSS",
 "category" => "background",
 "option" => "bg-effects",
 "class" => "divi-hacks-bg-effects",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Custom SVGs",
 "description" => "Create your own SVG graphics by putting the SVG path inside a code module and adding the class custom-svg. 
 
 <a href='https://divihacks.com/docs/custom-svgs/' target='_blank'>Documentation</a>",
 "more" => "Made with CSS",
 "category" => "icon",
 "option" => "custom-svgs",
 "class" => "divi-hacks-custom-svgs",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Show Admin Bar/Menu on Theme Builder",
 "description" => "Hover your mouse over the top edge and left edge of the page when you are designing in the Theme Builder and the admin bar and admin menu will appear respectively giving you access to other areas in the Admin Dashboard including the Divi Hacks Documentation. 
 
 <a href='https://divihacks.com/docs/admin-hacks/#show-adminbar-tb' target='_blank'>Documentation</a>",
 "more" => "Made with CSS",
 "category" => "admin auto-on",
 "option" => "adminbar-theme-builder",
 "class" => "",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Custom Menus",
 "description" => "Have more control over how the Menu module looks. This hack removes a lot of the default styling so you can apply your own inside the module settings. 
 
 <a href='https://divihacks.com/docs/custom-menus/' target='_blank'>Documentation</a>",
 "more" => "Made with CSS",
 "category" => "design",
 "option" => "custom-menus",
 "class" => "divi-hacks-custom-menus",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Closeable Elements",
 "description" => "This hack gives the user the ability to close an element. Now you can add closeable sections, alerts, messages on your pages. Add the class closeable to any element to add a close button. The element will be hidden until you view/refresh the page. 
 
 If you want to keep an element hidden until the browser session ends, add the class keep-hidden-xxx, changing xxx with any other value to identify any unique element that you want to keep hidden (example: keep-hidden-promo, keep-hidden-message, keep-hidden-warning). 
 
 <a href='https://divihacks.com/docs/closeable-elements/' target='_blank'>Documentation</a>",
 "more" => "Made with jQuery",
 "category" => "other auto-on",
 "option" => "closeable-elements",
 "class" => "",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Hide/Show Content By Date/Time",
 "description" => "This hack gives you the ability to hide or show content based on date, time, or date and time. Add one of the \"showit-\" classes and one of the \"hideit-\" classes to any element. 
 
 Showing Elements: 
 showit-YYYY-MM-DD+00:00 Show on exact day and time (use military time) 
 showit-YYYY-MM-DD Show on day only (starts on midnight local user time) 
 showit-00:00 Show at specific time every day (for repetitive events) (use military time) 
 
 Hiding Elements: 
 hideit-YYYY-MM-DD+00:00 Hide on exact day and time (use military time) 
 hideit-YYYY-MM-DD Hide on day only (starts on midnight local user time) 
 hideit-00:00 Hide at specific time every day (for repetitive events) (use military time) 
 
 <a href='https://divihacks.com/docs/hide-show-content-based-on-time-date/' target='_blank'>Documentation</a>",
 "more" => "Made with jQuery",
 "category" => "other auto-on",
 "option" => "showhidecontent",
 "class" => "",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Dim the Visual Builder Controls",
 "description" => "This hack dims the visual builder controls to 10% opacity when you aren't using them so you can see the full page better. 
 
 <a href='https://divihacks.com/docs/admin-hacks/#dim-vb-controls' target='_blank'>Documentation</a>",
 "more" => "Made with CSS",
 "category" => "admin",
 "option" => "dim-controls",
 "class" => "divi-hacks-dim-controls",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Exit Popups",
 "description" => "Enable a popup to display when the user moves their mouse off of the browser window. You can set a global exit popup in the Theme Customizer, or you can create an exit popup on a page-by-page basis by adding the class exit-popup to an element. This element will override the global exit popup if you have one set. 
 
 <a href='https://divihacks.com/docs/theme-customizations/#exit-popup' target='_blank'>Documentation</a>",
 "more" => "Made with CSS PHP jQuery <a class='customize' target='_blank' href='" . admin_url( 'customize.php?autofocus[section]=dh_exit_popups' ) . "'>Edit</a>",
 "category" => "admin customizer",
 "option" => "popups",
 "class" => "",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Per-Page Code",
 "description" => "This hack gives you the ability to add custom HTML, CSS, Javascript, or any other custom code (except PHP) to the &lt;head&gt; or &lt;/body&gt; elements on a per-page basis. 
 
 Head Code
 Body Code 
 
 <a href='https://divihacks.com/docs/admin-hacks/#page-code' target='_blank'>Documentation</a>",
 "more" => "Made with PHP",
 "category" => "other auto-on",
 "option" => "page-code",
 "class" => "",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Tooltips",
 "description" => "Create tooltips that display different modules 
 
 <a href='https://divihacks.com/docs/tooltips' target='_blank'>Documentation</a>",
 "more" => "Made with CSS jQuery",
 "category" => "alignment auto-on",
 "option" => "tooltips",
 "class" => "",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Custom Scrollbars",
 "description" => "Customize the default scrollbars on WebKit enabled browsers 
 
 <a href='https://divihacks.com/docs/custom-scrollbars' target='_blank'>Documentation</a>",
 "more" => "Made with CSS <a class='customize' target='_blank' href='" . admin_url( 'customize.php?autofocus[section]=dh_scrollbars' ) . "'>Edit</a>",
 "category" => "design customizer",
 "option" => "scrollbars",
 "class" => "",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Equal Height Modules",
 "description" => "This hack sets any number of elements to the height of the largest element of that same class. You can have up to 12 different groups of modules set at the same height as the other modules in that same set. Add one of the following classes to the modules that you want to be the same height. 
 
 equal-1
 equal-2
 equal-3
 equal-4
 equal-5
 equal-6
 equal-7
 equal-8
 equal-9
 equal-10
 equal-11
 equal-12
 
 <a href='https://divihacks.com/docs/other-alignment/#equal-height' target='_blank'>Documentation</a>",
 "more" => "Made with jQuery",
 "category" => "alignment",
 "option" => "equal-height",
 "class" => "divi-hacks-equal-height",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Custom Reveals",
 "description" => "This hack gives you the ability to hide & expand, or reveal any section, module, or row 
 
 To activate, use the class reveal-trigger-&lt;value&gt; on any element that triggers the opening up the revealed element when clicked. It can be anything, but works best on buttons, CTA modules, blurbs, and images. Replace &lt;value&gt; with any word. 
 
 To set a section, row, or module as the content to reveal, add the class reveal-content-&lt;value&gt; to that element. Replace &lt;value&gt; with the same word as the reveal-trigger-&lt;value&gt;. 
 
 <a href='https://divihacks.com/docs/custom-reveals/' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with jQuery",
 "category" => "auto-on",
 "option" => "custom-reveals",
 "class" => "",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Always Show Hover/Responsive Styling Buttons",
 "description" => "This hack makes the responsive and hover style buttons always visible in the visual builder, rather than only showing them when hovering over the label. 
 
 <a href='https://divihacks.com/docs/always-show-buttons' target='_blank'>Documentation</a>",
 "more" => "Made with CSS",
 "category" => "admin",
 "option" => "show-hovres-buttons",
 "class" => "divi-hacks-show-hovres-buttons",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Add Featured Image column to Divi Library",
 "description" => "This hack enables the featured image column in the Divi Library.",
 "more" => "Made with PHP <a class='customize' target='_blank' href='" . admin_url( 'customize.php?autofocus[section]=dh_functions_options' ) . "'>Edit</a>",
 "category" => "admin customizer",
 "option" => "dh-shortcode",
 "class" => "",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Custom Search Results",
 "description" => "Create a custom page to replace the default search results page. 
 
 <a href='https://divihacks.com/docs/custom-archives/#search' target='_blank'>Documentation</a>",
 "more" => "Made with CSS and jQuery <a class='customize' target='_blank' href='" . admin_url( 'customize.php?autofocus[section]=dh_custom_search_options' ) . "'>Edit</a>",
 "category" => "blog customizer",
 "option" => "search-archive",
 "class" => "",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Custom Author Archives",
 "description" => "Create custom pages for author archives. 
 
 <a href='https://divihacks.com/docs/custom-archives/#author' target='_blank'>Documentation</a>",
 "more" => "Made with CSS and jQuery <a class='customize' target='_blank' href='" . admin_url( 'customize.php?autofocus[section]=dh_custom_author_options' ) . "'>Edit</a>",
 "category" => "blog customizer",
 "option" => "author-archive",
 "class" => "",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Custom Post Types Archives",
 "description" => "Create custom pages for CPT archives. 
 
 <a href='https://divihacks.com/docs/custom-archives/#cpt' target='_blank'>Documentation</a>",
 "more" => "Made with CSS and jQuery <a class='customize' target='_blank' href='" . admin_url( 'customize.php?autofocus[section]=dh_custom_cptarchive_options' ) . "'>Edit</a>",
 "category" => "blog customizer",
 "option" => "cpt-archive",
 "class" => "",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Custom Tag Archives",
 "description" => "Create custom pages for tag archives. 
 
 <a href='https://divihacks.com/docs/custom-archives/#tag' target='_blank'>Documentation</a>",
 "more" => "Made with CSS and jQuery <a class='customize' target='_blank' href='" . admin_url( 'customize.php?autofocus[section]=dh_custom_tag_options' ) . "'>Edit</a>",
 "category" => "blog customizer",
 "option" => "tag-archive",
 "class" => "",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Custom Category Archives",
 "description" => "Create custom pages for category archives. 
 
 <a href='https://divihacks.com/docs/custom-archives/#category' target='_blank'>Documentation</a>",
 "more" => "Made with CSS and jQuery <a class='customize' target='_blank' href='" . admin_url( 'customize.php?autofocus[section]=dh_custom_category_options' ) . "'>Edit</a>",
 "category" => "blog customizer",
 "option" => "category-archive",
 "class" => "",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Custom Default Posts Archives",
 "description" => "Create a custom page for the default posts archive. 
 
 <a href='https://divihacks.com/docs/custom-archives/#default' target='_blank'>Documentation</a>",
 "more" => "Made with CSS and jQuery <a class='customize' target='_blank' href='" . admin_url( 'customize.php?autofocus[section]=dh_custom_archive_options' ) . "'>Edit</a>",
 "category" => "blog customizer",
 "option" => "posts-archive",
 "class" => "",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Preloader",
 "description" => "Enable a full-screen preloading element that fades in and out when you navigate between different pages on your webite. 
 
 <a href='https://divihacks.com/docs/preloader' target='_blank'>Documentation</a>",
 "more" => "Made with CSS and jQuery <a class='customize' target='_blank' href='" . admin_url( 'customize.php?autofocus[section]=dh_custom_preloader_options' ) . "'>Edit</a>",
 "category" => "design customizer",
 "option" => "preloader",
 "class" => "",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Parallax on Mobile",
 "description" => "This hack enables the background image parallax effect on mobile devices. Just add the class mobile-parallax to the element and enable parallax on the background image. 
 
 <a href='https://divihacks.com/docs/mobile-parallax' target='_blank'>Documentation</a>",
 "more" => "Made with CSS and jQuery",
 "category" => "mobile",
 "option" => "parallax-mobile",
 "class" => "divi-hacks-mobile-parallax",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Parallax Elements",
 "description" => "Give any section, row, column, or module a scrolling parallax effect. 
 
 <a href='https://divihacks.com/docs/parallax-elements' target='_blank'>Documentation</a>",
 "more" => "Made with CSS and jQuery",
 "category" => "alignment",
 "option" => "parallax",
 "class" => "divi-hacks-parallax",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Open Header/Footer Social Links in new tab",
 "description" => "This hack opens social media links in the header and footer, and the footer credit links in a new tab. No configuration necessary. 
 
 <a href='https://divihacks.com/docs/admin-hacks/#open-links' target='_blank'>Documentation</a>",
 "more" => "Made with jQuery",
 "category" => "admin",
 "option" => "open-links",
 "class" => "divi-hacks-open-links",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Custom Dividers",
 "description" => "This hack allows you to add section dividers to any section, row, column or module. We've included a few other shape dividers in addition to the ones Divi already provides. 
 
 <a href='https://divihacks.com/docs/custom-dividers' target='_blank'>Documentation</a>",
 "more" => "Made with CSS and jQuery",
 "category" => "design",
 "option" => "custom-dividers",
 "class" => "divi-hacks-custom-dividers",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Wider VB Popup",
 "description" => "This hack makes it easier to browse the modules in the visual builder by making the add module popup wider. 
 
 <a href='https://divihacks.com/docs/admin-hacks/#wider-popup' target='_blank'>Documentation</a>",
 "more" => "Made with CSS",
 "category" => "admin",
 "option" => "wider-popup",
 "class" => "divi-hacks-wider-popup",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Open Footer Credits and Social Media Links in New Tab",
 "description" => "This hack opens social media links in the header and footer, and the footer credit links in a new tab. 
 
 <a href='https://divihacks.com/docs/admin-hacks/#open-links' target='_blank'>Documentation</a>",
 "more" => "Made with jQuery",
 "category" => "other",
 "option" => "open-links",
 "class" => "divi-hacks-open-links",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Better Password Protected Login Screen",
 "description" => "Adds some custom styling to improve the password form for password-protected post types. 
 
 <a href='https://divihacks.com/docs/other-designs/#better-pw' target='_blank'>Documentation</a>",
 "more" => "Made with CSS",
 "category" => "design",
 "option" => "password-protected",
 "class" => "divi-hacks-password-protected",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Custom Footer",
 "description" => "Use a Divi Library global section as a custom footer. 
 
 <ol>
 <li>Set the footer widgets layout to 1 column in the theme customizer.</li>
 <li>Create a global section in the Divi Library that you will use as your custom footer</li>
 <li>Use the 'modules inside modules' hack to create a shortcode for your custom footer section.</li>
 <li>Place that shortcode inside a Text widget in Footer Widget Area #1 and Save.</li>
 </ol>
 <a href='https://divihacks.com/docs/custom-footer/' target='_blank'>Documentation</a>",
 "more" => "Made with CSS and PHP",
 "category" => "footer",
 "option" => "custom-footer",
 "class" => "divi-hacks-custom-footer",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Custom Tables",
 "description" => "Customize tables with CSS variables and automatic responsiveness. 
 
 Use custom-table on a text module that contains the table. Then use the custom CSS variables to modify the table styling, alongside the regular text module settings under the design tab. 
 
 <a href='https://divihacks.com/docs/custom-tables/' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with CSS & jQuery",
 "category" => "design",
 "option" => "custom-tables",
 "class" => "divi-hacks-custom-tables",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Custom Dropdowns",
 "description" => "Add any global item from the Divi Library as a dropdown. 
 
 <a href='https://divihacks.com/docs/shortcodes-in-menus/#custom-dropdowns' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with CSS & jQuery",
 "category" => "other",
 "option" => "custom-dropdowns",
 "class" => "divi-hacks-custom-dropdowns",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "White Label",
 "description" => "Replace the word 'Hacks' with any other word. This will affect the strings 'Divi Hacks' & 'Hacks Customizer' 
 
 <a href='https://divihacks.com/docs/admin-hacks/#white-label' target='_blank'>Documentation</a>",
 "more" => "Made with CSS and jQuery <a class='customize' target='_blank' href='" . admin_url( 'customize.php?autofocus[section]=dh_white_label_options' ) . "'>Edit</a>",
 "category" => "design customizer",
 "option" => "whitelabel",
 "class" => "",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Space Between Classes",
 "description" => "This simple hack lets you view and edit classes easier in the visual builder by adding space between the classes. 
 
 <a href='https://divihacks.com/docs/admin-hacks/#space' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with CSS",
 "category" => "admin",
 "option" => "class-space",
 "class" => "divi-hacks-class-space",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Device-Specific Alignment",
 "description" => "This hack gives you the ability to customize how rows, modules, and text are aligned on different devices. 
 
 By default, what you configure in the page builder will apply to desktops. Then you can add the following classes to customize the alignment on tablets and phones too. 
 
 tablet-row-align-left 
 tablet-row-align-center 
 tablet-row-align-right 
 tablet-module-align-left 
 tablet-module-align-center 
 tablet-module-align-right 
 tablet-text-align-left 
 tablet-text-align-center 
 tablet-text-align-right 
 
 phone-row-align-left 
 phone-row-align-center 
 phone-row-align-right 
 phone-module-align-left 
 phone-module-align-center 
 phone-module-align-right 
 phone-text-align-left 
 phone-text-align-center 
 phone-text-align-right 
 
 <a href='https://divihacks.com/docs/device-specific-alignment/' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with CSS",
 "category" => "alignment",
 "option" => "device-specific-alignment",
 "class" => "divi-hacks-device-specific-alignment",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Reveal Main Footer",
 "description" => "This hack sticks the main footer to the bottom of window and reveals itself when you scroll to the bottom of the page. 
 
 <a href='https://divihacks.com/docs/reveal-footer/' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with CSS & jQuery",
 "category" => "footer",
 "option" => "reveal-main-footer",
 "class" => "divi-hacks-reveal-main-footer",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Reveal Custom Footer",
 "description" => "This hack sticks a custom footer to the bottom of window and reveals itself when you scroll to the bottom of the page. 
 
 Create your own custom section as the footer and add the class reveal-footer to it. 
 
 <a href='https://divihacks.com/docs/reveal-footer/' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with CSS & jQuery",
 "category" => "footer",
 "option" => "reveal-custom-footer",
 "class" => "divi-hacks-reveal-custom-footer",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Custom Lightboxes",
 "description" => "This hack gives you the ability to put any section, module, or row in a lightbox, or popup. 
 
 To activate, use the class lightbox-trigger-&lt;value&gt; on any element that triggers the lightbox/popup when clicked. It can be anything, but works best on buttons, CTA modules, blurbs, and images. Replace &lt;value&gt; with any word. 
 
 To set a section, row, or module as the lightbox content, add the class lightbox-content-&lt;value&gt; to that element. Replace &lt;value&gt; with the same word as the lightbox-trigger-&lt;value&gt;. 
 
 <a href='https://divihacks.com/docs/custom-lightboxes/' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with CSS & jQuery",
 "category" => "design auto-on",
 "option" => "lightbox-anything",
 "class" => "",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Current User Meta Shortcodes",
 "description" => "This hack gives you some shortcodes to display user meta data of the currently logged-in user. 
 
 [user-display-name]
 [user-first-name]
 [user-last-name]
 [user-username]
 [user-email]
 [user-avatar] 
 
 [user-avatar] allows the following attributes: 
 <ul>
 <li>size (in px, defaults to 50)</li>
 <li>style (any custom css)</li>
 <li>class (add 'circle' to make it a circle)</li>
 </ul>
 Example: [user-avatar size=\"100\" class=\"circle\" style=\"border:2px solid #000\"] 
 
 **Nothing will show if the current user is logged out** 
 
 <a href='https://divihacks.com/docs/admin-hacks/#current-user-shortcodes' target='_blank'>Documentation</a>",
 "more" => "Made with PHP",
 "category" => "other auto-on",
 "option" => "current-user-shortcodes",
 "class" => "",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Custom Tabs",
 "description" => "This hack allows you to align the tabs on the top, bottom, left or right side of the tabs container, along with some other alignment hacks for tabs. 
 
 1. Use custom-tabs to activate the custom tabs. 
 2. Specify tab alignment with one of the following: 
 tabs-on-top
 tabs-on-bottom
 tabs-on-left
 tabs-on-right 
 3. For tabs-on-top and tabs-on-bottom choose how you want the tabs to be aligned within the tabs container: 
 align-left
 align-center
 align-right
 align-justify 
 4. Choose the tab text alignment: 
 text-left
 text-center
 text-right 
 5. Additional optional classes: 
 no-wrap - Keep all tabs on one line 
 hyphenate - Hyphenate tab text if overflow occurs 
 link - Keep the active tab linked to the tab content at all times and jump to the first position. 
 
 <a href='https://divihacks.com/docs/custom-tabs' target='_blank'>Examples and Documentation</a>",
 "more" => "Made with CSS",
 "category" => "design",
 "option" => "custom-tab-alignment",
 "class" => "divi-hacks-custom-tabs",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Auto Hide/Show the Admin bar",
 "description" => "The black admin bar get in the way of designing sometimes, so this hack hides it until you need it. Just hover your mouse over the top 10px of the browser window. 
 
 <a href='https://divihacks.com/docs/admin-hacks/#autohide-admin-bar' target='_blank'>Documentation</a>",
 "more" => "Made with CSS and jQuery",
 "category" => "admin",
 "option" => "autohide-admin-bar",
 "class" => "divi-hacks-autohide-admin-bar",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Make All Posts full width by default",
 "description" => "This hack hides the sidebar and makes the content full width on all posts. 
 
 <a href='https://divihacks.com/docs/other-alignment/#full-width-posts' target='_blank'>Documentation</a>",
 "more" => "Made with CSS",
 "category" => "alignment",
 "option" => "full-width-posts",
 "class" => "divi-hacks-full-width-posts",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Columns in Menu Dropdowns",
 "description" => "This hack enables columns inside menu dropdowns. Follow the instructions on the documentation to learn how to set up the column structure. 
 
 <a href='https://divihacks.com/docs/theme-customizations/#columns' target='_blank'>Documentation</a>",
 "more" => "Made with CSS",
 "category" => "alignment",
 "option" => "nav-columns",
 "class" => "divi-hacks-nav-columns",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Hide Header/Footer/Logo on Page-by-Page Basis",
 "description" => "This hack helps you hide the main header, top header, footer, and logo on a page to page basis. All you need to do is add one of the following Custom Fields to the page/post. 
 
 Hide Main Header
 Hide Top Header
 Hide Footer
 Hide Logo 
 
 <a href='https://divihacks.com/docs/admin-hacks/#hide-header' target='_blank'>Documentation</a>",
 "more" => "Made with CSS",
 "category" => "other auto-on",
 "option" => "page-by-page",
 "class" => "",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Add Font Awesome Icons to Menus and Modules",
 "description" => "This hack enables you to choose from over 1,100 icons from Font Awesome to add to your navigation menus in the main header, top header, footer, lists, blurbs, and any other module that has a button option. 
 
 <a href='https://divihacks.com/docs/theme-customizations/#icons' target='_blank'>Icons in Menus Documentation</a> <a href='https://divihacks.com/docs/icon-hacks/#font-awesome' target='_blank'>Font Awesome Documentation</a> <a href='https://fontawesome.com/icons?d=gallery&m=free' target='_blank'>Browse Font Awesome Icons</a>",
 "more" => "Made with CSS",
 "category" => "icon",
 "option" => "font-awesome-icons",
 "class" => "divi-hacks-font-awesome-icons",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),

Array(
 "title" => "Custom Login Page",
 "description" => "Create your own custom Login page using the login module in the Divi Builder. 
 
 <a href='https://divihacks.com/docs/theme-customizations/#custom-login' target='_blank'>Documentation</a>",
 "more" => "Made with CSS and jQuery <a class='customize' target='_blank' href='" . admin_url( 'customize.php?autofocus[section]=dh_login_page' ) . "'>Edit</a>",
 "category" => "admin customizer",
 "option" => "login-page",
 "class" => "",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Custom 404 Page",
 "description" => "Create your own custom 404 page. 
 
 <a href='https://divihacks.com/docs/theme-customizations/#custom-pages' target='_blank'>Documentation</a>",
 "more" => "Made with CSS and jQuery <a class='customize' target='_blank' href='" . admin_url( 'customize.php?autofocus[section]=dh_custom_404_options' ) . "'>Edit</a>",
 "category" => "admin customizer",
 "option" => "fourohfour-page",
 "class" => "",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Maintenance Mode",
 "description" => "Create your own custom maintenance mode/coming soon page. 
 
 <a href='https://divihacks.com/docs/theme-customizations/#custom-pages' target='_blank'>Documentation</a>",
 "more" => "Made with CSS and jQuery <a class='customize' target='_blank' href='" . admin_url( 'customize.php?autofocus[section]=dh_maintenance_mode_options' ) . "'>Edit</a>",
 "category" => "admin customizer",
 "option" => "maintenance-mode",
 "class" => "",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Duplicate Pages and Posts",
 "description" => "Easily duplicate pages, posts, and Divi Library items from the admin dashboard. 
 
 <a href='https://divihacks.com/docs/admin-hacks/#duplicate' target='_blank'>Documentation</a>",
 "more" => "Made with PHP <a class='customize' target='_blank' href='" . admin_url( 'customize.php?autofocus[section]=dh_functions_options' ) . "'>Edit</a>",
 "category" => "admin customizer",
 "option" => "duplicate-items",
 "class" => "",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Enable SVG Uploads",
 "description" => "Enables the ability to upload SVGs to the media library. 
 
 <a href='https://divihacks.com/docs/admin-hacks/#svg' target='_blank'>Documentation</a>",
 "more" => "Made with PHP",
 "category" => "admin auto-on",
 "option" => "svg-uploads",
 "class" => "",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Device-Specific CSS",
 "description" => "These body classes are automatically enabled with this plugin. Depending on the screen size, the following classes will be added to the body. 
 
 is-phone
 is-tablet
 is-mobile
 is-desktop 
 
 Now you can easily add custom css for any specific device in the Divi Custom CSS without needing to know the various media queries. 
 
 <a href='https://divihacks.com/docs/admin-hacks/#device-classes' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with jQuery",
 "category" => "admin auto-on",
 "option" => "device-classes",
 "class" => "",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Current User Body Classes",
 "description" => "These body classes are automatically enabled with this plugin. The currently logged-in user's role(s) and id will be added to the body classes. 
 
 User id classes will look like: user-id-354 
 
 Now you can easily add custom css for any specific user based on their role or ID in the frontend and backend. 
 
 <a href='https://divihacks.com/docs/admin-hacks/#user-classes' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with jQuery <a class='customize' target='_blank' href='" . admin_url( 'customize.php?autofocus[section]=dh_functions_options' ) . "'>Edit</a>",
 "category" => "admin customizer",
 "option" => "user-classes",
 "class" => "",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Section Divider Shadows",
 "description" => "Add elegant shadows to section dividers. Use the classes: 
 
 top-divider-shadow-10
 bottom-divider-shadow-10
 top-divider-shadow-5
 bottom-divider-shadow-5
 top-divider-shadow-3
 bottom-divider-shadow-3 
 
 <a href='https://divihacks.com/docs/section-divider-shadows/' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with CSS",
 "category" => "design",
 "option" => "divider-shadows",
 "class" => "divi-hacks-divider-shadows",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Collapse Mobile Submenus",
 "description" => "Collapse navigation submenus on mobile devices 
 
 <a href='https://divihacks.com/docs/collapse-mobile-submenus/' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with CSS and jQuery",
 "category" => "mobile",
 "option" => "collapse-mobile-submenus",
 "class" => "divi-hacks-collapse-mobile-submenus",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Custom Row Layouts",
 "description" => "Create custom column layouts with this hack. Use the following classes: 
 horizontal-modules
 two-column-mobile
 custom-row 
 
 For custom-row see the documentation for all the available classes. 
 
 <a href='https://divihacks.com/docs/row-layouts/' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with CSS",
 "category" => "alignment",
 "option" => "row-layouts",
 "class" => "divi-hacks-row-layouts",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Divi Theme Options Tweaks",
 "description" => "Adds customizations to the Divi Theme Options page to make adding Custom CSS easier: 
 <ol>
 <li>The SAVE CHANGES button floats on the bottom of the page so you don’t need to scroll down to it everytime you make changes.</li>
 <li>The Custom CSS Box is set to 90% of the browser window’s height to make it easier to add custom CSS.</li>
 </ol> 
 
 <a href='https://divihacks.com/docs/admin-hacks/#theme-options' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with CSS",
 "category" => "admin auto-on",
 "option" => "theme-options",
 "class" => "",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Open pages in visual builder from your dashboard.",
 "description" => "Adds 'Edit in Visual Builder' link to pages, posts, and Divi Library items in the admin dashboard. 
 
 <a href='https://divihacks.com/docs/admin-hacks/#open-vb' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with PHP <a class='customize' target='_blank' href='" . admin_url( 'customize.php?autofocus[section]=dh_functions_options' ) . "'>Edit</a>",
 "category" => "admin customizer",
 "option" => "vb-link",
 "class" => "",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Visual Builder Module Hover",
 "description" => "Make it easier to edit your modules in the visual builder hover mode without the grey module popups getting in the way. 
 
 <a href='https://divihacks.com/docs/admin-hacks/#module-hover' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with CSS",
 "category" => "admin",
 "option" => "vb-module-hover",
 "class" => "divi-hacks-vb-module-hover",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Sticky Element",
 "description" => "Make any section, row, column, or module sticky by adding these classes to their respective elements: 
 Use sticky-section on sections 
 Use sticky-row on rows 
 Use sticky-column on columns 
 Use sticky-module on modules 
 
 Then configure the top offset in the Theme Customizer. 
 
 Use sticky-element on any element. The top offset is automatically calculated for this element, and it will stick to the bottom of the navigation header when the header has fixed postioning, or the top of the browser window when the header isn't fixed. 
 
 <a href='https://divihacks.com/docs/sticky-element/' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with jQuery",
 "category" => "alignment",
 "option" => "sticky",
 "class" => "divi-hacks-sticky",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Reverse Columns on Mobile",
 "description" => "This hack enables you to reverse the order of columns on a mobile device. Just use the class mobile-reverse on the row. 
 
 <a href='https://divihacks.com/docs/other-alignment/#mobile-reverse' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with CSS",
 "category" => "alignment",
 "option" => "mobile-reverse",
 "class" => "divi-hacks-mobile-reverse",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Blurb Effects",
 "description" => "Adds effects when you hover over the blurb images. Use the following classes: 
 blurb-effect-1
 blurb-effect-2
 blurb-effect-3
 blurb-effect-4
 blurb-effect-5
 blurb-effect-6
 blurb-effect-7
 blurb-effect-8
 blurb-effect-9
 blurb-effect-10
 blurb-effect-11
 blurb-effect-12 
 
 <a href='https://divihacks.com/docs/blurb-effects/' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with CSS",
 "category" => "animation",
 "option" => "blurb-effects",
 "class" => "divi-hacks-blurb-effects",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Testimonial Styles",
 "description" => "Adds extra stying to testimonial. Use the following classes: 
 event-box 
 
 <a href='https://divihacks.com/docs/other-designs/#event-box' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with CSS and jQuery",
 "category" => "design",
 "option" => "testimonial-styles",
 "class" => "divi-hacks-testimonial-styles",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Blurb Styles",
 "description" => "Adds extra stying to blurbs. Use the following classes: 
 circle-blurb
 heading-banner 
 
 <a href='https://divihacks.com/docs/other-designs/' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with CSS",
 "category" => "design",
 "option" => "blurb-styles",
 "class" => "divi-hacks-blurb-styles",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Module Styles",
 "description" => "Adds extra stying to elements. Use the following classes: 
 bottom-corners-shadow
 bottom-right-shadow
 bottom-left-shadow
 vertical-bend-shadow
 horizontal-bend-shadow
 round-bevel
 inset-bevel
 frame-border
 fractal 
 
 <a href='https://divihacks.com/docs/other-designs/#module-styles' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with CSS",
 "category" => "design",
 "option" => "module-styles",
 "class" => "divi-hacks-module-styles",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Fixed Mobile Header",
 "description" => "Fixes the header to the top of the mobile device, rather than scrolling with the page. 
 
 <a href='https://divihacks.com/docs/mobile-header/' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with CSS",
 "category" => "mobile",
 "option" => "fixed-header",
 "class" => "divi-hacks-fixed-mobile-header",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Fancy text styles",
 "description" => "Make titles pop with these awesome design hacks. Use any of the following classes: 
 pop-light-text
 pop-dark-text
 left-shadow
 right-shadow
 inset
 emboss
 cutout
 outline 
 
 <a href='https://divihacks.com/docs/text-styles/' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with CSS",
 "category" => "design",
 "option" => "text-styles",
 "class" => "divi-hacks-text-styles",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Elegant sidebar shadow",
 "description" => "Add a soft inside shadow to the sidebar to make it pop 
 
 <a href='https://divihacks.com/docs/other-designs/#elegant-sidebar' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with CSS",
 "category" => "design",
 "option" => "sidebar-shadow",
 "class" => "divi-hacks-sidebar-shadow",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Hide content to logged in/out users and user roles",
 "description" => "Hide content to users based on if they are logged in or not, and also based on what user roles they are. Just add one of the following classes to the element: 
 hide-if-login
 hide-if-logout 
 
 And you can add any combination of these classes: 
 
 hide-if-subscriber
 hide-if-contributor
 hide-if-author
 hide-if-editor
 hide-if-admin
 hide-if-customer
 hide-if-shop-manager 
 
 <a href='https://divihacks.com/docs/admin-hacks/#hide-show' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with CSS",
 "category" => "other",
 "option" => "hide-show",
 "class" => "divi-hacks-hide-show",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Custom full-width blog designs",
 "description" => "Set a blog module to use the full-width layout and add one of the following classes to the blog module: 
 short-list-style
 featured-grid-style
 square-grid-style 
 
 <a href='https://divihacks.com/docs/blog-styles/' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with CSS",
 "category" => "blog",
 "option" => "blog-styles",
 "class" => "divi-hacks-blog-styles",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Archive Grid",
 "description" => "The default posts page shows a list of the most recent blog posts, and it really isn't very pretty. This hack creates a beautiful grid layout for your default blog archive. Note: 3 columns will only show if the 'Remove Sidebar from Archives' hack is turned ON. 
 
 <a href='https://divihacks.com/docs/custom-archives/#archive-grid' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with CSS",
 "category" => "blog",
 "option" => "archive-grid",
 "class" => "divi-hacks-archive-grid",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Remove Sidebar from Archives",
 "description" => "The default archive pages have a sidebar on the right side (or left side, depending on what you set in the Divi Theme Options). This hack removes that sidebar and gives the archives a full width. 
 
 <a href='https://divihacks.com/docs/custom-archives/#remove-sidebar' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with CSS",
 "category" => "blog",
 "option" => "full-width-archive",
 "class" => "divi-hacks-full-width-archive",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Make the backend builder mobile friendly",
 "description" => "You can do some basic editing on your mobile device with the visual builder, but the backend builder works better than the frontend builder on a mobile device (although you can't see your changes in real-time). This hacks makes the backend builder mobile-friendly so you can quickly edit pages on the go. 
 
 <a href='https://divihacks.com/docs/admin-hacks/#mobile-friendly' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with CSS",
 "category" => "mobile auto-on",
 "option" => "mobile-backend",
 "class" => "",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Divi Library Item Shortcode",
 "description" => "Sometimes it's nice to be able to put modules inside other modules, such as tabs or accordions. To do this, follow these steps: <ol><li>Create your module (or row) and save it to the Divi library as a GLOBAL module</li><li>Go to the Divi Library and find the shortcode that looks like <code>[dh_module id=&quot;x&quot;]</code> in the shortcode column.</li><li>Paste the shortcode wherever you want that module to appear. This also works on rows and sections.</li></ol> 
 
 <a href='https://divihacks.com/docs/admin-hacks/#modules' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with PHP <a class='customize' target='_blank' href='" . admin_url( 'customize.php?autofocus[section]=dh_functions_options' ) . "'>Edit</a>",
 "category" => "admin customizer",
 "option" => "dh-shortcode",
 "class" => "",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Add quick links to admin bar",
 "description" => "When you're on your mobile device, the 'edit in visual builder' button is gone. This hack puts 'edit in visual builder', 'edit in backend', 'theme options', and 'divi hacks' in the admin bar menu to easily access these pages from the front end. 
 
 <a href='https://divihacks.com/docs/admin-hacks/#quick-links' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with PHP <a class='customize' target='_blank' href='" . admin_url( 'customize.php?autofocus[section]=dh_functions_options' ) . "'>Edit</a>",
 "category" => "mobile customizer",
 "option" => "add-links",
 "class" => "",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Device-Specific CSS",
 "description" => "Set custom CSS for different screen sizes. 
 
 <a href='https://divihacks.com/docs/theme-customizations/#device-css' target='_blank'>Documentation</a>",
 "more" => "Made with CSS and jQuery <a class='customize' target='_blank' href='" . admin_url( 'customize.php?autofocus[section]=custom_css_options' ) . "'>Edit</a>",
 "category" => "design customizer",
 "option" => "preloader",
 "class" => "",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "App-Style Header on Mobile",
 "description" => "If you are using the 'Default', 'Centered Inline', or 'Centered' header style, this hack replaces the ugly mobile header with an app-style header. This hack provides the cleaner, app-style header for the default header style, too. 
 
 <a href='https://divihacks.com/docs/mobile-header/' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with CSS",
 "category" => "mobile",
 "option" => "app-mobile-header",
 "class" => "divi-hacks-app-mobile-header",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Image shapes",
 "description" => "These hacks add shapes to your images. Add one of these classes to image: 
 
 image-wide-bottom-trapezoid
 image-wide-top-trapezoid
 image-wide-right-trapezoid
 image-wide-left-trapezoid
 image-vertical-hexagon
 image-horizonal-hexagon
 image-vertical-skew-right
 image-vertical-skew-left
 image-horizontal-skew-right
 image-horizontal-skew-left
 image-chevron-right
 image-chevron-left
 image-warp-square
 image-diamond
 image-star
 image-slant-up-right
 image-slant-up-left
 image-slant-down-right
 image-slant-down-left
 image-polygon-top-left
 image-polygon-top-right
 image-polygon-bottom-left
 image-polygon-bottom-right 
 
 <a href='https://divihacks.com/docs/image-shapes/' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with CSS",
 "category" => "design",
 "option" => "image-shapes",
 "class" => "divi-hacks-image-shapes",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Replace RSS icon with Instagram icon in footer",
 "description" => "Assuming you aren't using the RSS icon, we can replace it with the instagram icon, which most people prefer to have included in their footer. Just add your instagram URL in Divi Theme Options where RSS URL is. 
 
 <a href='https://divihacks.com/docs/icon-hacks/#rss-icon' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with CSS",
 "category" => "footer icon",
 "option" => "rss-replace-instagram",
 "class" => "divi-hacks-rss-insta",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Hover Animations",
 "description" => "These hacks allow you to animate your element when you hover over it. Add one of these classes to your element: 
 
 hover-rubberBand
 hover-pulse
 hover-tada
 hover-grow
 hover-bounce
 hover-swing
 hover-wobble
 hover-shake
 hover-headShake
 hover-jello
 hover-flash 
 
 <a href='https://divihacks.com/docs/animations/' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with CSS",
 "category" => "animation",
 "option" => "hover-animations",
 "class" => "divi-hacks-hover",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Module shapes",
 "description" => "These hacks use the :before element to add shapes behind your element, inheriting the background color you set in that row, column or module. NOTE: these shapes will NOT show up on Internet Explorer or Microsoft Edge because they don't support the clip-path css property. :( Instead, you could alert those users on those browsers to download Google Chrome, Safari, or Firefox. Add one of these classes to your row, column, or module, and then adjust the background color or gradient in the row, column, or module settings. 
 
 wide-bottom-trapezoid
 wide-top-trapezoid
 wide-right-trapezoid
 wide-left-trapezoid
 vertical-hexagon
 horizonal-hexagon
 vertical-skew-right
 vertical-skew-left
 horizontal-skew-right
 horizontal-skew-left
 chevron-right
 chevron-left
 chevron-up
 chevron-down
 speech-bubble-left
 speech-bubble-right
 speech-bubble-right-top
 speech-bubble-right-bottom
 speech-bubble-left-top
 speech-bubble-left-bottom
 warp-square
 diamond
 star
 slant-up-right
 slant-up-left
 slant-down-right
 slant-down-left
 slant-right-top
 slant-right-bottom
 slant-left-top
 slant-left-bottom
 polygon-top-left
 polygon-top-right
 polygon-bottom-left
 polygon-bottom-right 
 
 <a href='https://divihacks.com/docs/module-shapes/' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with CSS",
 "category" => "design",
 "option" => "element-shapes",
 "class" => "divi-hacks-shapes",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Parallax Overlays",
 "description" => "By default, the gradient overlays option doesn't work on sections that have parallaxed backgrounds. This hack fixes that. All you have to do is add gradient-overlay to the section's css classes box. Then, make sure parallax is enabled, and then configure BOTH the background color, and background gradient tab. If you only want a gradient, make sure the background color has 0% opacity set. Or you can be creative and set both! 
 
 You can use the :after psuedo element to mirror the gradient overlay to create a 'reflected' look. 
 
 These copy the :before element styles to the :after element and then rotates the :after element either 90, 180, or 270 degrees: 
 gradient-overlay-rotate-90
 gradient-overlay-rotate-180
 gradient-overlay-rotate-270 
 
 Just add one of these classes to the section's css classes box. 
 
 <a href='https://divihacks.com/docs/parallax-overlays/' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with CSS",
 "category" => "background",
 "option" => "gradient-overlay-parallax",
 "class" => "divi-hacks-gradient-overlay",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "New Instagram gradient in social follow modules",
 "description" => "The Divi social follow media's instagram icon is a solid pinkish color. This hacks gives that icon the cool new instagram gradient. 
 
 <a href='https://divihacks.com/docs/icon-hacks/#instagram-gradient' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with CSS",
 "category" => "icon",
 "option" => "new-insta-gradient",
 "class" => "divi-hacks-insta-gradient",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Blur background images",
 "description" => "Set a background image for any element. This works on regular and parallaxed backgrounds. Add one of these classes to the section's css classes box. 1 = smallest blur. 6 = largest blur. 
 blur1
 blur2
 blur3
 blur4
 blur5
 blur6 
 
 <a href='https://divihacks.com/docs/blur-parallax-backgrounds/' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with CSS",
 "category" => "background",
 "option" => "blur-parallax-bg",
 "class" => "divi-hacks-blur-bg",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Blog grid corner shadows",
 "description" => "This hacks gives a grow on hover and corner shadows on the blog posts in grid mode. Works with the Filterable Blog Posts plugin too. 
 
 <a href='https://divihacks.com/docs/blog-grid-corner-shadows/' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with CSS",
 "category" => "blog pro",
 "option" => "post-it-shadow",
 "class" => "divi-hacks-blog-style",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Footer on Bottom",
 "description" => "This hack makes sure the footer always stays on the bottom of the window. 
 
 <a href='https://divihacks.com/docs/other-alignment/#force-footer' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with CSS jQuery",
 "category" => "footer alignment",
 "option" => "footer-on-bottom",
 "class" => "divi-hacks-footer-on-bottom",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Dynamic Full window height",
 "description" => "This hack sets any element's height to the full height of the browser. You can also choose to subtract the height of the #main-footer, #main-header, and #top-header. Just add one of these classes: 
 full-height
 full-height-minus-main-header
 full-height-minus-main-footer
 full-height-minus-top-header
 full-height-minus-both-headers 
 
 <a href='https://divihacks.com/docs/other-alignment/#full-height' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with jQuery",
 "category" => "alignment",
 "option" => "full-height-section",
 "class" => "divi-hacks-full-height",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Vertically Center Modules in Sections, Rows, and Modules",
 "description" => "This hack will vertically center rows inside sections, modules inside a row's columns, and the content inside modules. Put valign-center in the section's, row's, and module's css classes box. Note: This hack is disabled in Internet Explorer 10 and 11 because these versions of IE lack the needed capabilities. 
 
 <a href='https://divihacks.com/docs/center-alignment/#valign-center-row' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with CSS",
 "category" => "alignment",
 "option" => "vertical-center-row",
 "class" => "divi-hacks-valign-center",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Instagram Filters",
 "description" => "This hack will give any section, row, or module a cool instagram filter. Just add one or more of the classes below to the css classes box. <a href='https://picturepan2.github.io/instagram.css/' target='_blank'>View the filters here.</a> Keep in mind that some of these filters utilize the :before element so if you already have some custom css for that element, the filter may not show. 
 filter-1977
 filter-aden
 filter-amaro
 filter-ashby
 filter-brannan
 filter-brooklyn
 filter-charmes
 filter-clarendon
 filter-crema
 filter-dogpatch
 filter-earlybird
 filter-gingham
 filter-ginza
 filter-hefe
 filter-helena
 filter-hudson
 filter-inkwell
 filter-juno
 filter-kelvin
 filter-lark
 filter-lofi
 filter-ludwig
 filter-maven
 filter-mayfair
 filter-moon
 filter-nashville
 filter-perpetua
 filter-poprocket
 filter-reyes
 filter-rise
 filter-sierra
 filter-skyline
 filter-slumber
 filter-stinson
 filter-sutro
 filter-toaster
 filter-valencia
 filter-vesper
 filter-walden
 filter-willow
 filter-xpro-ii 
 
 <a href='https://divihacks.com/docs/instagram-filters/' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with CSS",
 "category" => "design",
 "option" => "instagram-filters",
 "class" => "divi-hacks-instagram-filters",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 
 Array(
 "title" => "Animate Anything",
 "description" => "First, add animate to the css classes box to activate the animation css. Then, add one of the animations below to the css classes box (next to animate, separated by a space. example: 'animate bounce'). Also, you can include the class infinite to make the animation loop continuously. <a href='https://daneden.github.io/animate.css/' target='_blank'>Try out the animations here</a>. 
 animate-bounce
 animate-flash
 animate-pulse
 animate-rubberBand
 animate-shake
 animate-headShake
 animate-swing
 animate-tada
 animate-wobble
 animate-jello
 animate-bounceIn
 animate-bounceInDown
 animate-bounceInLeft
 animate-bounceInRight
 animate-bounceInUp
 animate-lightSpeedIn
 animate-hinge
 animate-jackInTheBox 
 
 <a href='https://divihacks.com/docs/animations/' target='_blank'>Examples & Documentation</a>",
 "more" => "Made with CSS",
 "option" => "animate-anything",
 "class" => "divi-hacks-animate-anything",
 "category" => "animation",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 ),
 Array(
 "title" => "Admin Dashboard Custom CSS",
 "description" => "In this section, you can add custom CSS for your WordPress admin dasboard.",
 "more" => "",
 "category" => "admin dh-admin-css",
 "option" => "admin-dashboard-custom-css",
 "class" => "divi-hacks-admin-custom-css",
 "image" => "images/app-style.png",
 "admin" => true,
 "client" => true
 )

);

// ------------------------------------------- END -----------------------------------------------------------