Enfold

https://kriesi.at/documentation/enfold/
Admin
Enfold is a responsive WordPress theme by Kriesi, offering a comprehensive set of design elements,...
Tokens:307,258
Snippets:2,737
Trust Score:10
Update:7 months ago
Show doc for...
Tokens:
Raw
### Enfold Promo Box Shortcode Example

Source: https://kriesi.at/documentation/enfold/promo-box

This is an example of how to use the Promo Box shortcode in Enfold. It includes parameters for button, label, link, colors, size, and icon selection. The content within the shortcode tags is the message displayed in the promo box.

```html
[av_promobox button='yes' label='Click me' link='single' link_target='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' size='large' icon_select='no' icon='' box_color='' box_custom_font='#ffffff' box_custom_bg='#444444' box_custom_border='#333333' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av_uid='av-22g8oa']
Welcome Stranger! This is an example Text for your fantastic Promo Box! Feel Free to delete it and replace it with your own fancy Message!
[/av_promobox]
```

--------------------------------

### Enfold Column Shortcode Example

Source: https://kriesi.at/documentation/enfold/columns

An example of the Enfold shortcode structure used to build a section with columns. This demonstrates the use of Color Sections and column elements.

```text
[av_section id='av-center-align-columns']
[av_one_fourth first]1/4 Column[/av_one_fourth]
[av_one_fourth]1/4 Column[/av_one_fourth]
[/av_section]
```

--------------------------------

### Enable Theme Demo Creation Support

Source: https://kriesi.at/documentation/enfold/import-demos

Activates theme support for creating demo files and error feedback. This is done by defining constants in `wp-config.php` or `functions.php`.

```php
define( 'AVIA_XXX', true );
```

--------------------------------

### Custom Field Link Shortcode

Source: https://kriesi.at/documentation/enfold/custom-layout-and-dynamic-content

Example of using the dynamic element shortcode to render a link derived from a custom field value.

```shortcode
{av_dynamic_el src="wp_custom_field" key="my_custom_link" default="localhost/dummy" link="blank" linktext="Homepage" format="link"}
```

--------------------------------

### Install Additional WordPress Instance via Command Line

Source: https://kriesi.at/documentation/enfold/install-wordpress-on-localhost

Uses the Bitnami WordPress Stack Module installer to create a new, separate WordPress site instance. The command requires the installer path and the desired instance name as an argument.

```bash
C:\installer.exe --wordpress_instance_name NEW_BLOG_NAME
```

--------------------------------

### Add New Styling Options for Product Overview Pages

Source: https://kriesi.at/documentation/enfold/changelog

New styling options have been introduced for product overview pages, offering default, default without buttons, and minimal layouts.

```N/A
added: new styling options for product overview pages (default, default without buttons, minimal)
```

--------------------------------

### Add Get Param for Iconfont Cache Refresh

Source: https://kriesi.at/documentation/enfold/changelog

Appends a GET parameter to the iconfont URL to force a cache refresh, ensuring the latest icon versions are always loaded.

```PHP
folder config-templatebuilder: fixed a small bug with one of the elements. also added a get param to the iconfont to cause a proper cache refresh
```

--------------------------------

### Enfold Gallery Shortcode Example

Source: https://kriesi.at/documentation/enfold/gallery

This is an example of the Enfold Gallery shortcode. It allows you to create galleries with various options such as image size, columns, and linking behavior. The 'ids' attribute specifies the image IDs to include in the gallery.

```html
[av_gallery ids='' style='thumbnails' preview_size='portfolio' crop_big_preview_thumbnail='yes' thumb_size='portfolio' columns='5' imagelink='5' lazyload='avia_lazyload' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av_uid='av-3irfg3']
```

--------------------------------

### Export Theme Settings as PHP File

Source: https://kriesi.at/documentation/enfold/import-demos

Enables the creation of a PHP settings file for the demo instead of a regular text file. This constant should be added to `wp-config.php` or `functions.php`.

```php
define( 'AVIA_GENERATE_DEMO_PHP_FILE', true );
```

--------------------------------

### Implement Icon List via Shortcode

Source: https://kriesi.at/documentation/enfold/icon-list

The base shortcode structure for the Icon List element. It supports multiple list items and various configuration attributes for layout and styling.

```shortcode
[av_iconlist position='left' iconlist_styling='' custom_title_size='' custom_content_size='' font_color='' custom_title='' custom_content='' color='' custom_bg='' custom_font='' custom_border='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' av_uid='av-6e53ca'] [av_iconlist_item title='List Title 1' icon='43' content='Enter content here' av_uid='av-69s43u'] [av_iconlist_item title='List Title 2' icon='25' content='Enter content here' av_uid='av-62hxu2'] [av_iconlist_item title='List Title 3' icon='64' content='Enter content here' av_uid='av-5u3d36'] [/av_iconlist]
```

--------------------------------

### Disable gallery image animations

Source: https://kriesi.at/documentation/enfold/animation

Disables the loading animation for standard gallery images.

```css
.avia_transform .avia-gallery-thumb img.avia_start_animation,
#top div .avia-gallery img {
	-webkit-animation: none!important;
	animation: none!important;
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}
```

--------------------------------

### Add Shop Overview Display Options

Source: https://kriesi.at/documentation/enfold/changelog

Introduces options to control the display of the shop overview page (product archive). Users can customize layout, number of products, and other display settings.

```PHP
// Added: shop overview display options in framework folder.
```

--------------------------------

### Enfold Theme: Shortcode for Six Columns Section

Source: https://kriesi.at/documentation/enfold/columns

This is an example of an Enfold theme shortcode structure used to create a section with multiple columns. The section is given a custom ID 'av-extra-columns' to target it with custom CSS. Inside, it contains text blocks and column elements, with each column defined using 'av_one_fourth' in this specific example, though the CSS handles the actual column count.

```html
[av_section min_height='100' min_height_px='500px' padding='default' shadow='no-shadow' bottom_border='no-border-styling' bottom_border_diagonal_color='#333333' bottom_border_diagonal_direction='' bottom_border_style='' custom_arrow_bg='' id='av-extra-columns' color='main_color' background='bg_gradient' custom_bg='' background_gradient_color1='#312a6c' background_gradient_color2='#8e78ff' background_gradient_direction='diagonal_bt' src='' attachment='' attachment_size='' attach='scroll' position='top left' repeat='no-repeat' video='' video_ratio='16:9' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='' av_element_hidden_in_editor='0' av_uid='av-1crc5j' custom_class='']

[av_textblock size='' font_color='custom' color='#ffffff' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' av_uid='av-jgpfob20' custom_class='' admin_preview_bg='']
<h2 style="text-align: center;">Example of more than 6 columns in a row</h2>
[/av_textblock]

[av_hr class='invisible' height='50' shadow='no-shadow' position='center' custom_border='av-border-thin' custom_width='50px' custom_border_color='' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='yes' custom_icon_color='' icon='ue808' font='entypo-fontello' av_uid='av-jgpfojd0' custom_class='' admin_preview_bg='']

[av_one_fourth first min_height='' vertical_alignment='av-align-top' space='' margin='0px' margin_sync='true' link='' linktarget='' link_hover='' padding='0px' padding_sync='true' border='' border_color='' radius='0px' radius_sync='true' background='bg_color' background_color='#00aeff' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' animation='' mobile_breaking='' mobile_display='' av_uid='av-cwa6o7' custom_class='']

[av_textblock size='' font_color='' color='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' av_uid='av-jgpcn493' custom_class='' admin_preview_bg='']
<p style="text-align: center;"><strong>Column</strong></p>

[/av_textblock]

[/av_one_fourth][av_one_fourth min_height='' vertical_alignment='av-align-top' space='' margin='0px' margin_sync='true' link='' linktarget='' link_hover='' padding='0px' padding_sync='true' border='' border_color='' radius='0px' radius_sync='true' background='bg_color' background_color='#3369e7' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' animation='' mobile_breaking='' mobile_display='' av_uid='av-ab0mrb' custom_class='']

[av_textblock size='' font_color='' color='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' av_uid='av-jgpcn493' custom_class='' admin_preview_bg='']
<p style="text-align: center;"><strong>Column</strong></p>

[/av_textblock]

[/av_one_fourth][av_one_fourth min_height='' vertical_alignment='av-align-top' space='' margin='0px' margin_sync='true' link='' linktarget='' link_hover='' padding='0px' padding_sync='true' border='' border_color='' radius='0px' radius_sync='true' background='bg_color' background_color='#8e43e7' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' animation='' mobile_breaking='' mobile_display='' av_uid='av-9pfgd3' custom_class='']

[av_textblock size='' font_color='' color='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' av_uid='av-jgpcn493' custom_class='' admin_preview_bg='']
<p style="text-align: center;"><strong>Column</strong></p>

[/av_textblock]

[/av_one_fourth][av_one_fourth min_height='' vertical_alignment='av-align-top' space='' margin='0px' margin_sync='true' link='' linktarget='' link_hover='' padding='0px' padding_sync='true' border='' border_color='' radius='0px' radius_sync='true' background='bg_color' background_color='#b84592' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' animation='' mobile_breaking='' mobile_display='' av_uid='av-tdoev' custom_class='']

[/av_one_fourth]
[/av_section]
```

--------------------------------

### Add New Photography Theme Demos

Source: https://kriesi.at/documentation/enfold/changelog

Two new theme demos, 'minimal photography' and 'dark photography', have been added. These provide pre-designed layouts for users focusing on photography websites.

```PHP
// No specific code provided, but implies the addition of new demo content files and configurations.
```

--------------------------------

### Display Image Element via Shortcode

Source: https://kriesi.at/documentation/enfold/image

A standard Enfold shortcode example for rendering an image element. It includes parameters for alignment, styling, hover effects, links, and lazy loading animations.

```shortcode
[av_image src='http://localhost/enfold/documentation/wp-content/themes/enfold/config-templatebuilder/avia-template-builder/images/placeholder.jpg' align='center' styling='' hover='' link='' target='' caption='' font_size='' appearance='' overlay_opacity='0.4' overlay_color='#000000' overlay_text_color='#ffffff' animation='no-animation' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av_uid='av-5bzohe'][/av_image]
```

--------------------------------

### Remove testimonial image animations

Source: https://kriesi.at/documentation/enfold/animation

Removes the entrance animation for images within testimonial elements.

```css
.avia_transform .avia-testimonial .avia-testimonial-image,
.avia_transform .avia_start_animation.avia-testimonial .avia-testimonial-image{
	-webkit-animation: none!important;
	animation: none!important;
	opacity: 1;
	-webkit-transform:scale(1);
	transform:scale(1);
}
```

--------------------------------

### Implement Partner/Logo Element via Shortcode

Source: https://kriesi.at/documentation/enfold/partnerlogo-element

A shortcode example for rendering a partner logo slider with three columns. It includes configuration for animation, navigation, and individual logo items.

```shortcode
[av_partner columns='3' heading='Partner Logo' size='no scaling' border='' type='slider' animation='slide' navigation='arrows' autoplay='false' interval='5' custom_class='' av_uid='av-3pyx9i']
[av_partner_logo id='230' hover='Image Caption sd' link='' linktitle='' link_target='' av_uid='av-d0b26']
[av_partner_logo id='87' hover='' link='' linktitle='' link_target='' av_uid='av-3ddowm']
[av_partner_logo id='85' hover='' link='' linktitle='' link_target='' av_uid='av-37q0ce']
[/av_partner]
```

--------------------------------

### Mailchimp Newsletter Shortcode

Source: https://kriesi.at/documentation/enfold/add-a-subscription-form-to-your-header

An example of the Enfold theme's Mailchimp shortcode structure, used to render a subscription form with email input and a submit button.

```shortcode
[av_mailchimp list='495779bff2' double_opt_in='aviaTBdouble_opt_in' on_send='' sent='Thank you for subscribing!' link='manually,http://' color='av-custom-form-color av-dark-form' av_uid='av-jjv93yov']
[av_mailchimp_field id='0' type='text' check='is_email' options='' label='Email Address' width='element_half' av_uid='av-2rdqss' disabled='']
[av_mailchimp_field id='av-button' type='button' check='' options='' label='Subscribe' width='element_half' av_uid='av-2rg3oc' disabled='']
[/av_mailchimp]
```

--------------------------------

### Add Import/Export for Theme Settings (Framework)

Source: https://kriesi.at/documentation/enfold/changelog

Introduces functionality to import and export theme settings, allowing for easier backup and transfer of configurations.

```N/A
- added: import/export functionality for theme settings
```

--------------------------------

### Customize Button Icon Styles

Source: https://kriesi.at/documentation/enfold/button

Adjusts the color, size, and hover effects of icons within Enfold buttons.

```css
/* Button Icon color */
.my-custom-button a.avia-button .avia_button_icon {
	color:gold;
}

/* Button icon size and alignment */
.my-custom-button a.avia-button {
	display : flex;
	align-items: center;
    justify-content: center;
}
.my-custom-button a.avia-button .avia_button_icon {
	font-size: 40px!important;
	line-height: 40px;
	color:gold;
}

/* Button Icon on hover */
.my-custom-button a.avia-button:hover .avia_button_icon {
	color:gold;
}
```

--------------------------------

### Untitled

Source: https://kriesi.at/documentation/enfold/changelog

No description

--------------------------------

### Remove Default Button Border

Source: https://kriesi.at/documentation/enfold/button

Removes the default bottom border from Enfold buttons to allow for custom styling.

```css
.my-custom-button .avia-button {
     border: none !important;
}
```

--------------------------------

### Disable masonry gallery animations

Source: https://kriesi.at/documentation/enfold/animation

Disables the loading animation for masonry gallery items and ensures they are visible by default.

```css
.avia_desktop.avia_transform3d .av-masonry-entry.av-masonry-item-loaded .av-inner-masonry{
	-webkit-animation: none;
	-moz-animation: none;
	animation: none;
}
.av-masonry-entry {
	opacity: 1 !important;
	visibility: visible !important;
}
```

--------------------------------

### Display Blog Posts via Shortcode

Source: https://kriesi.at/documentation/enfold/blog-post

A shortcode snippet used to render blog posts within text areas, sliders, or widgets. It allows configuration of layout styles, column counts, and content display settings.

```shortcode
[av_blog blog_type='posts' link='category' blog_style='blog-grid' columns='3' contents='excerpt' content_length='excerpt' preview_mode='custom' image_size='featured_large' items='6' offset='0' paginate='yes' conditional='' custom_class='' av_uid='av-jwdc3x']
```

--------------------------------

### Add Fullwidth Masonry and Gallery Elements

Source: https://kriesi.at/documentation/enfold/changelog

Introduces two new Template Builder Elements: Fullwidth Masonry and Fullwidth Masonry Gallery, designed for displaying grids and masonries of various content types.

```PHP
folder config-templatebuilder: added masonry shortcodes, added option for single blog post layout, fixed bug that removed all content in shortcode editor
```

--------------------------------

### Customize Icon Box Background

Source: https://kriesi.at/documentation/enfold/icon-box

CSS snippet to apply a custom background color to the content area of the Icon Box.

```css
#top .iconbox .iconbox_content {
  background: #ffe566;
  /*border:none;*/
}
```

--------------------------------

### Style Submenu Icons

Source: https://kriesi.at/documentation/enfold/example-of-full-width-submenus

Customizes the appearance and hover effects of icons within the submenu items. Requires the 'submenu-style-4' class.

```CSS
.submenu-style-4 .av-subnav-menu > li > a .av-icon-char:before {
    color:#000;
    font-size:24px;
    transition: transform .3s;
}

.submenu-style-4 .av-subnav-menu > li > a:hover .av-icon-char:before {
    color:#d33131;
}

.submenu-style-4 .av-subnav-menu > li > a .av-icon-char {
    line-height:1em;
}
```

--------------------------------

### Add Masonries and Parallax Demo Content (XML)

Source: https://kriesi.at/documentation/enfold/changelog

Includes new demo content in an XML file, specifically showcasing masonry layouts and parallax effects to help users visualize these features.

```XML
includes/admin/dummy.xml - added masonries and parallax pages to the demo content
```

--------------------------------

### Customize Button Backgrounds

Source: https://kriesi.at/documentation/enfold/button

Provides CSS methods to apply solid colors, gradients, images, and transparency to button backgrounds.

```css
/* Solid background */
.my-custom-button a.avia-button {
	background: lightblue !important;
}

/* Gradient background */
.my-custom-button a.avia-button {
	background: #67B26F;
	background: -webkit-linear-gradient(to right, #4ca2cd, #67B26F);
	background: linear-gradient(to right, #4ca2cd, #67B26F);
}

/* Background image */
.my-custom-button a.avia-button {
	background: url('image.jpg');
}

/* Transparency and hover state */
.my-custom-button a.avia-button {
   background: rgba(13,23,56, .45) !important;
}
.my-custom-button a.avia-button:hover {
   background: rgba(13,23,56, .45) !important;
}
```

--------------------------------

### Remove progress bar animations

Source: https://kriesi.at/documentation/enfold/animation

Disables the entrance animation for progress bars and forces the bar to display at full width.

```css
.av-animated-bar .avia-progress-bar div.progress .bar,
.avia_transform #top .avia-progress-bar div.progress.avia_start_animation .bar-outer{
	-webkit-animation: none!important;
	animation: none!important;
}

#top .avia-progress-bar div.progress .bar-outer, 
#top .avia-progress-bar div.progress .bar {
	width: 100%;
}
```

--------------------------------

### Dynamic Content Shortcode Implementation

Source: https://kriesi.at/documentation/enfold/custom-layout-and-dynamic-content

Standard shortcode used to render dynamic post data within ALB elements. Use the curly brace notation when inserting into ALB modal popup input fields to prevent layout breakage.

```shortcode
[av_dynamic_el src="" key="" default="" link="" linktext="" format=""]
```

```shortcode
{av_dynamic_el src="" key="" default="" link="" linktext="" format=""}
```

--------------------------------

### Framework improvements

Source: https://kriesi.at/documentation/enfold/changelog

Small improvements have been made to the /framework/ folder.

```N/A
New small improvements in the framework.
```

--------------------------------

### Customize Heading and Subheading Typography

Source: https://kriesi.at/documentation/enfold/special-heading

CSS to apply custom fonts, colors, and letter spacing to both the main heading and the subheading elements.

```css
/* special heading */
#top  .av-special-heading-tag {  
  font-weight: 900;
  color:#1769ff;
  font-size: 30px;
  font-family: 'Abril Fatface', cursive;
}

/* subheading */
#top  .av-subheading {
  font-size: 10px!important;
  text-transform: uppercase;
  letter-spacing: .5em;
  color: #a5a9ab;
  font-family: 'Roboto Slab', serif;
}
```

--------------------------------

### Clean Up WordPress Admin Interface

Source: https://kriesi.at/documentation/enfold/personalize-theme

Removes the Enfold menu tab and admin bar nodes to streamline the WordPress dashboard for users.

```php
add_action( 'admin_init', function () {remove_menu_page( 'avia' );});

add_action( 'admin_bar_menu', function ( $wp_admin_bar ) { $wp_admin_bar->remove_node( 'avia' );}, 999 );
add_action( 'admin_bar_menu', function ( $wp_admin_bar ) { $wp_admin_bar->remove_node( 'avia_ext' );}, 999 );
```

--------------------------------

### Dynamic Content Shorthand Syntax

Source: https://kriesi.at/documentation/enfold/custom-layout-and-dynamic-content

Simplified syntax for accessing common post data or custom fields. These are replaced during page load and are supported in areas that process the 'the_content' filter or ALB shortcodes.

```text
{wp_post_ID}
{wp_post_title}
{wp_post_date}
{wp_custom_field:attribute_color}
```

--------------------------------

### Enable Custom Templates for Custom Post Types

Source: https://kriesi.at/documentation/enfold/personalize-theme

Allows custom page templates to be used on specific custom post types by defining the Template Post Type header.

```php
/*
Template Name: Full-width layout (Rename to appropriate template name)
Template Post Type: post, page, (insert your new CPTs here)
*/
```

--------------------------------

### Convert Submenu Dropdown to Horizontal

Source: https://kriesi.at/documentation/enfold/example-of-full-width-submenus

Forces vertical dropdown sub-menus to display horizontally in a single line. Requires the 'submenu-style-5' class.

```CSS
#top .submenu-style-5 .av-subnav-menu li {
    position: static !important;
}

#top .submenu-style-5 .av-subnav-menu > li ul {
    width: 100%;
    text-align: center;
}

#top .submenu-style-5 .av-subnav-menu > li ul li {
    display: inline-block;
}
```

--------------------------------

### Hide blog post timeline

Source: https://kriesi.at/documentation/enfold/blog-post

This CSS snippet hides the visual timeline elements from both single-author and multi-author blog styles.

```CSS
#top.page .blog-meta,#top.page .post_author_timeline {
  display: none !important;
}
```

--------------------------------

### Improve Team Shortcode with Vimeo Links

Source: https://kriesi.at/documentation/enfold/changelog

Optimizes the team shortcode to better handle Vimeo links for video integration.

```php
improved: team shortcode to work better with vimeo links
```

--------------------------------

### Set comment input fields to full width

Source: https://kriesi.at/documentation/enfold/comments

Forces all comment form input fields to span the full width of their container.

```css
#top #commentform label{
  position:relative;
  left:0;
}
#top #commentform input{
  width:100%;
}
```

--------------------------------

### Apply Google Fonts via CSS

Source: https://kriesi.at/documentation/enfold/typography

Demonstrates how to define font-family properties and apply them to specific HTML elements like headings within the Enfold theme.

```css
font-family: 'Mukta Mahee', sans-serif;
font-family: 'Open Sans', sans-serif;
font-family: 'Roboto', sans-serif;

h2 {
   font-family: 'Mukta Mahee', sans-serif;
}
```

--------------------------------

### Align comment form labels on top

Source: https://kriesi.at/documentation/enfold/comments

Overrides default CSS to position comment form labels above their respective input fields.

```css
#top #commentform label {
    position: relative;
    left: 0;
}
```

--------------------------------

### Enable Manual Demo File Handling in Enfold Theme

Source: https://kriesi.at/documentation/enfold/import-demos

This code snippet, when added to your child theme's `functions.php` file, allows for manual control over the demo import process. It enables separate buttons for downloading, importing, and deleting demo files, offering more flexibility than the default one-click import.

```php
add_theme_support( 'avia_demo_store_downloaded_files' );
```

--------------------------------

### Enfold Theme Performance: Testimonials Background Image

Source: https://kriesi.at/documentation/enfold/changelog

Improves performance by moving the background image of ALB testimonials to an `<img>` tag, enabling responsive behavior and lazy loading.

```HTML
performance: ALB testimonials move background image to img tag (responsive, lazy loading)
```
Tokens:
Raw