Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #702216

    is it possible to change the angle of the color section divider? its too steep for my site forcing me to use very wide padding between color sections

    #702467

    Hey kilimats,

    Yes, I think it’s possible, can you give us a link to that page? so we can check. Kindly post it in the Private Content section when you reply.

    Best regards,
    Nikko

    #702468

    we removed it from our site, can you try on your end and advise how i can customize it? or does it require custom code for each site?

    #702593

    Hi,

    It will definitely vary from site to site if it is specific on a section or page. And also it’s easier for us to identify what css to use since extra classes are added depending on how you set it. Try adding this code to your Quick CSS (located in Enfold > General Styling):

    .avia_transform .av-extra-border-element.border-extra-diagonal .av-extra-border-inner {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }

    if it doesn’t work try this one instead:

    .avia_transform .av-extra-border-element.border-extra-diagonal .av-extra-border-inner {
        -webkit-transform: rotate(2deg) !important;
        transform: rotate(2deg) !important;
    }

    Hope this helps.

    Best regards,
    Nikko

    #706533

    Great

    #706904

    Hi,

    Glad we could help :)

    Best regards,
    Nikko

    #1137027

    Hi! Is it possible to not only change the angle, but make it round in stead of diagonal? Something like this:

    Hope you can help me!

    #1137473

    Hi jannnnnneke,

    Try adding this css code, you’ll need to tweak it a bit:

    .avia_transform .av-extra-border-element.border-extra-diagonal .av-extra-border-inner {
        border-radius: 50% !important;
        transform-origin: center top;
        transform: rotate(0) translate(160px, -75px) scale(1.5);
    }

    Best regards,
    Nikko

    #1137965

    Hi thanks! Something happend, the radius is only not in the middel. Maybe thats because it is still rotated? See link! And I want the circle on the other side, so downstairs in stead of upstairs.

    Now we’re working on it.. I would like to try two options. The half circle as described above and 2nd option: in stead of a circle a sort of rounded arrow. Something like this:

    https://ibb.co/q9pBhdZ

    Is this screenshot visible? This is photoshopped… The arrow is a little bit the same as one angle of the logo. Hope you understand me!

    Thanks a lot!!!

    #1137967

    When it’s better to create this another way than with the diagonal border, thats ok! Please help me out!

    For example with SVG? Not familiar with that, but maybe you can help! Really really thanks a lot for all your help!

    #1138027

    Hi! I’ve tried something with css and chevron but I want the angle in the middle a little bit more rounded, just like the logo. How can I do that? This is the code i’ve used right now:

    #chevron-creme {
    position: relative;
    text-align: center;
    padding: 0px;
    margin-bottom: -40px;
    margin-top: -40px;
    height: 0px;
    width: 100%;
    z-index: 1 !important;
    background-color: transparent;
    }
    #chevron-creme:before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          width: 51%;
          background: #f5f3ed;
          transform: skew(0deg, 6deg);
    }
    #chevron-creme:after {
          content: '';
          position: absolute;
          top: 0;
          right: 0;
          height: 100%;
          width: 50%;
          background: #f5f3ed;
          transform: skew(0deg, -6deg);
    }

    Thanks!!

    #1138033

    Hi jannnnnneke,

    I’m no good with svg. With css, it seems to be more complicated or I might have a limited idea atm, since I’m just thinking of border-radius as the solution.
    Try to seek help in https://stackoverflow.com there might be some people who are experts of css or svg that can help better.

    Best regards,
    Nikko

    #1138048

    if themes use this feature ( and i think it might be time that enfold will get this option too ) make it via svg – and to be precise with inline svg. Because you had to influence the colors in it to adjust it to your section before or after it. These “fill” attribute can be done via css.
    The best place on Enfold in Color-Section would be just before, and after the color-sections container – so you will have :

    <div class="avia-section  …
      <svg  (  inline for the top ) </svg>
         <div class="container">… </div>
       <svg  ( inline  for the bottom ) </svg>
    </div>

    this could be done via child-theme functions.php
    f.e.
    $(‘.avia-section.divider.top1’).prepend(‘<svg class=”top” ……… preserveAspectRatio=”none”></svg>’);
    $(‘.avia-section.divider.bottom1’).append(‘<svg class=”bottom” ……… preserveAspectRatio=”none”></svg>’);

    it will be best for that on having svgs with no concrete AspectRatio – then you can style it the way you like.
    the …….. is your rest of the svg code.

    you can see here some examples on using this method: https://webers-testseite.de/guenni/
    f.e. see footer area

    If you look how elementor f.e. does the trick – it is very similar to that. (and maybe you find some interesting svgs there ;)
    to use the code for a nice style svg – you can use transform (rotate 180deg) to use it for the bottom – so one svg for bottom and top.
    you can transformY 180deg for a mirror form of that.

    The classes above are now nice to have – because if you give to a color-section these classes – it will automatically add the inline svg to your DOM. The rest is Quick CSS to positionen and colorize parts of the svg.

    #1138054

    One last tip : open your created svg files to see the classes in there too.
    Illustrator allways uses st ( st0, st1, st2 etc. ) this is not so nice if you have more than one svg on your page. because if you like to colorize a part of that svg to adjust it to your next section the other svgs might be influenced too. So give a unique ID to the svg, to have a chance to better select.
    See again the footer sectiion of the example page above. one part of the inserted svg had to be set to the background-color of the footer (#222)

    • This reply was modified 4 years, 5 months ago by Guenni007.
    #1138144

    Example Code: put this to your child-theme functions.php

    function insert_dividers(){
    ?>
    <script>
    (function($){	
    
    	$('.avia-section.divider.top1').prepend('<svg width="100%" class="top" version="1.1" id="faecher" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1500 300" preserveAspectRatio="none"><g fill="#990000"><path class="st0" d="M250,296" fill-opacity=".5"/><polygon class="st1" points="1500,250 750,84.9 0,250 0,0 1500,0 " fill-opacity=".2"/><polygon class="st2" points="1500,191.6 750,81.5 0,191.6 0,0 1500,0 " fill-opacity=".4"/><polygon class="st3" points="1500,133.1 750,78.1 0,133.1 0,0 1500,0 " fill-opacity=".6"/><rect y="0" class="st4" width="1500" height="74.4" fill-opacity="1"/></g></svg>');
    
    	$('.avia-section.divider.bottom1').append('<svg width="100%" class="bottom" version="1.1" id="faecher" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1500 300" preserveAspectRatio="none"><g fill="#990000"><path class="st0" d="M250,296" fill-opacity=".5"/><polygon class="st1" points="1500,250 750,84.9 0,250 0,0 1500,0 " fill-opacity=".2"/><polygon class="st2" points="1500,191.6 750,81.5 0,191.6 0,0 1500,0 " fill-opacity=".4"/><polygon class="st3" points="1500,133.1 750,78.1 0,133.1 0,0 1500,0 " fill-opacity=".6"/><rect y="0" class="st4" width="1500" height="74.4" fill-opacity="1"/></g></svg>');
    
    	})(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'insert_dividers');

    now go to your ALB and open a color-section:
    give a custom-class to this color-section: divider top1 bottom1

    put this to quick css:

    .divider svg {
        position: relative;
        z-index: 5
    }
    
    .divider svg.top {
        top: -2px !important;
    }
    
    .divider svg.bottom {
        bottom: -11px !important;
        -webkit-transform: rotateX(180deg);
        transform: rotateX(180deg);
    }

    look now what happens to your front-end.

    you see on this svg that there is only one class with a lot oft opacity set. there is a group around all ( normal nomenklatur will be g for group) with a fill color of #990000 ( a red )
    this svg has an ID of : faecher
    so if you want to change the fill color of that svg ( one side is open and transparent )

    #av_section_1 #faecher svg.top g {
    fill: #222
    }
    #av_section_1 #faecher svg.bottom g {
    fill: #fff
    }

    but that depends on your svg –
    elementor and divi got mostly simple svgs – with one fill-color and different opacities ( sometimes overlaying layers ) – but only one fill-color.

    #1138146

    by the way – to insert an svg this way over prepend / append the svg code must not have line breaks in it – thats why the code above is only in one line.

    you see the element above on : https://webers-testseite.de/guenni/impressum/#av_section_2

    the rest is quick css styling to make it lower in height just give to the svg a height value
    to have fullwidth : give to the svg a width of 100vw. etc. pp


    by the way:
    i would always do it this way – even the simple slanting line – because with this method you can have on the side where the svg is transparent have even diagonal gradients or patterns etc.

    #1144084

    by the way – this here seems to be in preparation as described : Kriesi Documentation

    #1144341

    Hi,

    Thanks for helping out and sharing @guenni007.

    Best regards,
    Rikard

Viewing 18 posts - 1 through 18 (of 18 total)
  • You must be logged in to reply to this topic.