调整列间距

默认6%的列间距,调到2%

div .av_one_half {margin-left: 2%;width: 49%;}/* 默认6% 47%; */
div .av_one_third {margin-left: 2%; width: 32%;}  /* 默认6% 29.33%; */
div .av_one_fourth {margin-left: 2%; width: 23.5%;}  /* 默认6% 20.5%; */
div .av_one_fifth {margin-left: 2%; width: 18.3%;}  /* 默认6% 16.2%; */
div .av_two_fifth { margin-left: 2%; width: 38.8%;}/* 默认6% 36.4%; */
div .av_three_fifth { margin-left: 2%; width: 59.2%;} /*默认6%; 57.59%; */
body .column-top-margin {margin-top: 10px;} /*默认50px;*/

添加5列以上结构

Enfold编辑器里默认最多5列,有需求要用6列。在 color section内添加6列,并设置ID属性,例如 custom-section。然后调整css:

#custom-section .flex_column.av_one_fifth {
width: 14.5%;
margin-left: 2%;
}

#custom-section .flex_column.av_one_fifth.first {
clear: none;
margin-left: 2%;
}

#custom-section .flex_column.av_one_fifth:nth-child(6) {
margin-top: 0 !important;
}

Footer

自定义三列、四列footer列宽度

#footer .flex_column.av_one_third:nth-child(1) {width: 20%;}
#footer .flex_column.av_one_third:nth-child(2) {width: 45%;}
#footer .flex_column.av_one_third:nth-child(3) {width: 20%;}
 
#footer .flex_column.av_one_fourth:nth-child(1) {width: 22%;}
#footer .flex_column.av_one_fourth:nth-child(2) {width: 21%;margin-left: 4%; }
#footer .flex_column.av_one_fourth:nth-child(3) {width: 20%;}
#footer .flex_column.av_one_fourth:nth-child(4) {width: 20%;}

Footer widget 上下间距,30改为10

#footer .widget {
    padding: 0;
    margin: 10px 0 10px 0;
    overflow: hidden;
}

解决Fotter调用page时出现的Bug

#after_section_1, #after_section_2, #after_section_3, #after_section_4, #after_section_5, #after_section_6, #after_section_7,#after_submenu {
    display: none!important;
}

产品页/产品列表

#top .inner_product_header {min-height: 50px;  /* initial 91px */ }
/* Remove "Add to cart" & "Show Details" buttons from category page*/
div.avia_cart_buttons {display: none!important;}

/* Remove  zoom icon from Featured image of single product page*/
div.avia-wc-30-product-gallery-lightbox {display: none!important;}
.avia_transform a:hover .image-overlay {
    opacity: 0.4 !important;
    background: #000000;
}

.thumbnail_container img{
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out;
}

.thumbnail_container:hover img{
    -webkit-transform: scale(1.05,1.05);
    -moz-transform: scale(1.05,1.05);
    transform: scale(1.05,1.05);
}

首页产品调用,解除大写

/**/
.template-page .entry-content-wrapper h2 {
    text-transform: none; /*uppercase; */
    letter-spacing: 1px;
}

产品列表添加缩放特效

.thumbnail_container img{
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
 
.thumbnail_container:hover img{
    -webkit-transform: scale(1.05,1.05);
    -moz-transform: scale(1.05,1.05);
    transform: scale(1.05,1.05);
}

Enfold主题Contact Form 7 样式修改

默认每行一项,修改部分填写项占半行。

<div class="avia_ajax_form">

<p class="first_form form_element form_fullwidth">Your Name<br />
    [text* your-name class:text_input] </p>

<p class="first_form form_element form_element_half">Your Email<br />
    [email* your-email class:text_input] </p>

<p class="form_element form_element_half">Your Phone<br />
    [tel* your-tel class:text_input] </p>

<p class="first_form form_element form_element_half">Your Selection<br />
    [select* your-menu class:select include_blank "Option 1" "Option 2" "Option 3"] </p>

<p class="form_element form_element_half">Your Date<br />
    [date* your-date class:text_input] </p>

<p class="first_form form_element form_fullwidth">Subject<br />
    [text* your-subject class:text_input] </p>

<p class="first_form form_element form_fullwidth">Your Message<br />
    [textarea* your-message class:text_area] </p>

</div>

<p>[submit "Send"]</p>

Enfold模块开发参考

  • https://www.spiderflystudios.com/shop/coding/custom-enfold-layout-elements/
  • https://www.spiderflystudios.com/resources/spiderfly-enfold-elements/
  • https://www.spiderflystudios.com/resources/spiderfly-enfold-elements/
  • https://mircian.com/2017/10/01/adding-enfold-custom-element-avia-builder/

Leave a Reply

Close Menu