Hi,

Thank you for the link.

You can use this css code to adjust the style of the checkout form fields.

.main_color div.product .woocommerce-tabs ul.tabs li.active a, .main_color .cart_dropdown .dropdown_widget .widget_shopping_cart_content, .main_color .cart_dropdown_link, .main_color .inner_product_header, .main_color .avia-arrow, #top .main_color .variations select, #top .main_color .variations input, #top .main_color #reviews input[type='text'], #top .main_color #reviews input[type='email'], .main_color #reviews .comment-text, .main_color #reviews #comment, .main_color .single-product-main-image .images a, #top .main_color .shop_table.cart .input-text, #top .main_color form.login .input-text, #top .main_color form.register .input-text, .main_color .chosen-container-single .chosen-search, .main_color .products .product-category h3:before, #top .main_color .quantity input.qty {
    background-color: #4f79e3;
}

#top div.woocommerce-message {
    border-color: #acb6ce;
    background-color: #4f79e3;
    color: #ffffff;
}

#top label span, #top legend span {
    font-weight: 400;
    font-size: 13px;
    color: #ffffff;
}

Best regards,
Ismael

Hey Caitlin,

Thank you for the inquiry.

Before proceeding, we kindly ask you to register on the forum using the purchase code associated with your theme license. Please use the following link: https://kriesi.at/support/register/

Once registered, you can open a new thread using the form here: https://kriesi.at/support/forum/enfold/#new-post

To add a button to the header widget area, you can use the Text widget, then add this shortcode:

[av_button label=' (Email address hidden if logged out) ' icon_select='yes' icon='mail' font='svg_entypo-fontello' title_attr='' button_type='' link='manually,mailto: (Email address hidden if logged out) ' link_dynamic='' link_target='' download_file='https://' attachment='' attachment_size='' downloaded_file_name='' size='small' position='center' label_display='' size-text='' av-desktop-font-size-text='' av-medium-font-size-text='' av-small-font-size-text='' av-mini-font-size-text='' margin='' margin_sync='true' padding='' padding_sync='true' av-desktop-margin='' av-desktop-margin_sync='true' av-desktop-padding='' av-desktop-padding_sync='true' av-medium-margin='' av-medium-margin_sync='true' av-medium-padding='' av-medium-padding_sync='true' av-small-margin='' av-small-margin_sync='true' av-small-padding='' av-small-padding_sync='true' av-mini-margin='' av-mini-margin_sync='true' av-mini-padding='' av-mini-padding_sync='true' color_options='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' btn_color_bg='theme-color' btn_custom_grad_direction='vertical' btn_custom_grad_1='#000000' btn_custom_grad_2='#ffffff' btn_custom_grad_3='' btn_custom_grad_opacity='0.7' btn_custom_bg='#444444' btn_color_bg_hover='theme-color-highlight' btn_custom_bg_hover='#444444' btn_color_font='theme-color' btn_custom_font='#ffffff' btn_color_font_hover='white' btn_custom_font_hover='#ffffff' border='' border_width='' border_width_sync='true' border_color='' border_radius='' border_radius_sync='true' box_shadow='' box_shadow_style='0px,0px,0px,0px' box_shadow_color='' animation='' animation_duration='' animation_custom_bg_color='' animation_z_index_curtain='100' hover_opacity='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' css_position='' css_position_location=',,,' css_position_z_index='' av-desktop-css_position='' av-desktop-css_position_location=',,,' av-desktop-css_position_z_index='' av-medium-css_position='' av-medium-css_position_location=',,,' av-medium-css_position_z_index='' av-small-css_position='' av-small-css_position_location=',,,' av-small-css_position_z_index='' av-mini-css_position='' av-mini-css_position_location=',,,' av-mini-css_position_z_index='' id='' custom_class='' template_class='' av_uid='av-me0reo0x' sc_version='1.0' admin_preview_bg='']

You can also use this html:

<div class="avia-button-wrap av-me0reo0x-af6ff2d8373030c9c60f62b386b56008-wrap avia-button-center  avia-builder-el-0  el_before_av_slideshow_accordion  avia-builder-el-no-sibling "><a href="mailto: (Email address hidden if logged out) " class="avia-button av-me0reo0x-af6ff2d8373030c9c60f62b386b56008 av-link-btn avia-icon_select-yes-left-icon avia-size-small avia-position-center avia-color-theme-color" aria-label=" (Email address hidden if logged out) "><span class="avia_button_icon avia_button_icon_left avia-svg-icon avia-font-svg_entypo-fontello" data-av_svg_icon="mail" data-av_iconset="svg_entypo-fontello"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="29" height="32" viewBox="0 0 29 32" preserveAspectRatio="xMidYMid meet" aria-labelledby="av-svg-title-4" aria-describedby="av-svg-desc-4" role="graphics-symbol">
<title id="av-svg-title-4">Mail</title>
<desc id="av-svg-desc-4">Mail</desc>
<path d="M0.96 8.448q-1.024-0.576-0.896-1.28 0.064-0.448 0.832-0.448h27.072q1.216 0 0.64 1.024-0.256 0.448-0.768 0.704-0.448 0.192-6.144 3.264t-5.824 3.136q-0.512 0.32-1.472 0.32-0.896 0-1.472-0.32-0.128-0.064-5.824-3.136t-6.144-3.264zM28.16 11.648q0.64-0.32 0.64 0.32v11.776q0 0.512-0.544 1.024t-1.056 0.512h-25.6q-0.512 0-1.056-0.512t-0.544-1.024v-11.776q0-0.64 0.64-0.32l12.288 6.4q0.576 0.32 1.472 0.32t1.472-0.32z"></path>
</svg></span><span class="avia_iconbox_title"> (Email address hidden if logged out) </span></a></div>

Best regards,
Ismael

Hey vrhgmt744p,

Thank you for the inquiry.

Please add this css code to adjust the phone info field on smaller screens:

@media only screen and (max-width: 768px) {

  /* Add your Mobile Styles here */
  #top #header_meta .phone-info div {
    display: block;
  }

  #top #header_meta .phone-info div .avia-icon-pos-left {
    top: 2px;
  }
}

View post on imgur.com

Best regards,
Ismael

Hey vrhgmt744p,

Thank you for the inquiry.

You can use the following css code to adjust the size of the icon inside the iconbox.

.iconbox_icon.avia-svg-icon img[is-svg-img=true], .iconbox_icon.avia-svg-icon svg:first-child {
    height: 0.5em;
    width: 0.5em;
    top: -8px;
    position: relative;
}

#top .avia-font-entypo-fontello, body .avia-font-entypo-fontello, html body [data-av_iconfont='entypo-fontello']:before {
    font-family: 'entypo-fontello';
    line-height: 1.5em;
    display: block;
    top: 0;
    position: relative;
    font-size: 0.6em;
}

If you need this applied to specific icons, try adding a custom css class to the element. Please refer to the documentation below.

— https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support

Best regards,
Ismael

Hi,

To fix the header overlap issue, you can add this css code:

.html_header_transparency #main {
    padding-top: 90px!important;
}

View post on imgur.com

Best regards,
Ismael

Hi,

To confirm if the Zip extension is enabled, you can add this code in the functions.php file:

add_action('admin_notices', 'av_check_zip_extension');

function av_check_zip_extension() {
    if (!class_exists('ZipArchive')) {
        echo '<div class="notice notice-error"><p><strong>PHP Zip extension is not enabled.</strong></p></div>';
    } else {
        echo '<div class="notice notice-success"><p><strong>PHP Zip extension is enabled.</strong></p></div>';
    }
}

If the extension is enabled, you should see this:

View post on imgur.com

If the zip extension is not enabled, you may need to register the fonts using a different method and manually apply them to elements using custom css. Please check the links below.

— https://www.wpbeginner.com/wp-themes/how-to-add-custom-fonts-in-wordpress/
— https://www.wpbeginner.com/wp-themes/how-add-google-web-fonts-wordpress-themes/

Best regards,
Ismael

Hey icarogioiosi,

Thank you for the inquiry.

You have to set the float property of the image to right or left. This will allow the surrounding text to flow around the image.

Example:

HTML:

<img src="test.jpg" class="av-float-right" />Long text here..

CSS:

.av-float-right {
   float: right;
   margin: 10px;
   max-width: 242px; 
}

Let us know the result.

Best regards,
Ismael

Hi,

Thank you for the update.

Did you try the second set of css rules without the UID av-4hiz9z-633b1e0ab579d3c11a88073322c9de8f?

You can also apply a unique css class name to the Grid Row element where the modification is needed, for example “av-custom-grid-eq-height”, and then use the following css code.

.responsive #top #wrap_all .av-layout-grid-container.av-custom-grid-eq-height {
    display: flex;
}

.responsive #top #wrap_all .av-custom-grid-eq-height .flex_cell.av_one_half .flex_cell_inner,
.responsive #top #wrap_all .av-custom-grid-eq-height .flex_cell.av_one_half .flex_cell_inner .avia-image-container,
.responsive #top #wrap_all .av-custom-grid-eq-height .flex_cell.av_one_half .flex_cell_inner .avia-image-container div,
.responsive #top #wrap_all .av-custom-grid-eq-height .flex_cell.av_one_half .flex_cell_inner .avia-image-container div div,
.responsive #top #wrap_all .av-custom-grid-eq-height .flex_cell.av_one_half .flex_cell_inner .avia-image-container div div img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

— https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support

Best regards,
Ismael

Hi,

Try to add this css code:

.responsive #top #wrap_all .av-layout-grid-container.av-5enyt3-e3a17494e866bcf05416abe291c1d6a0 {
    display: flex;
}

.responsive #top #wrap_all .flex_cell.av-4hiz9z-633b1e0ab579d3c11a88073322c9de8f .flex_cell_inner,
.responsive #top #wrap_all .flex_cell.av-4hiz9z-633b1e0ab579d3c11a88073322c9de8f .flex_cell_inner .avia-image-container,
.responsive #top #wrap_all .flex_cell.av-4hiz9z-633b1e0ab579d3c11a88073322c9de8f .flex_cell_inner .avia-image-container div,
.responsive #top #wrap_all .flex_cell.av-4hiz9z-633b1e0ab579d3c11a88073322c9de8f .flex_cell_inner .avia-image-container div div,
.responsive #top #wrap_all .flex_cell.av-4hiz9z-633b1e0ab579d3c11a88073322c9de8f .flex_cell_inner .avia-image-container div div img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

If you need this applied to every grid row element using 1/2 + 1/2 layout, use this instead:

.responsive #top #wrap_all .av-layout-grid-container {
    display: flex;
}

.responsive #top #wrap_all .flex_cell.av_one_half .flex_cell_inner,
.responsive #top #wrap_all .flex_cell.av_one_half .flex_cell_inner .avia-image-container,
.responsive #top #wrap_all .flex_cell.av_one_half .flex_cell_inner .avia-image-container div,
.responsive #top #wrap_all .flex_cell.av_one_half .flex_cell_inner .avia-image-container div div,
.responsive #top #wrap_all .flex_cell.av_one_half .flex_cell_inner .avia-image-container div div img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

View post on imgur.com

Best regards,
Ismael

Hi,

Please looks for this line:

document.querySelectorAll('.av-image-hotspot .avia-tooltip .inner_tooltip a[href^="#"]').forEach(function(anchor) {

Replace it with:

document.querySelectorAll('.av-image-hotspot .avia-tooltip .inner_tooltip a[href^="#"], .av-image-hotspot .av-image-hotspot_inner').forEach(function(anchor) {

Let us know the result.

Best regards,
Ismael

Hi,

As mentioned in our previous replies, the LCP issue is caused by the home_background-keil.svg image or the first section. You’ll need to either reduce the size of the section or background image, or replace it entirely for mobile view.

After you installed the Preload LCP Image plugin, did you select the images to preload? Currently, home_background-keil.svg is not being preloaded. Reducing the file size of the image should also help — currently at 96.5 KB.

Best regards,
Ismael

Hi,

Thank you for the update.

The screenshot was taken from the editor panel from one of the progress bar items. To see the same options, edit the Progress Bar element, click on one of the items, and go to the Styling tab, you should see the same options as shown in our screenshot. Let us know if you need more info.

Best regards,
Ismael

Hi,

Thank you for the update.

Please include this css code to center-align the items in the phone info container:

#top #header_meta .phone-info div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#top #header_meta .phone-info div .avia-icon-pos-left {
    margin-left: 10px;
    top: 0;
    position: relative;
}

Result:

View post on imgur.com

Best regards,
Ismael

Hey icarogioiosi,

Thank you for the inquiry.

You can enable the title and breadcrumb by adjusting the Enfold > Header > Header Layout > Header Title and Breadcrumbs settings. Make sure the header is not set to transparent.

View post on imgur.com

Best regards,
Ismael

Hi,

Thank you for the update.

The image home_backround-keil.svg is not being preloaded when we check the site, and its file size is still at 96.5 kB, which is relatively large for mobile view. Regardless, the performance score on mobile is now 91, and 95 on desktop. Have you tried using the Preload LCP Image plugin?

Best regards,
Ismael