MAKING YOUR OWN SHAPE DIVIDER WYSIWYG WEB BUILDER

Do you want to share WYSIWYG Web Builder tips, tricks, tutorials or useful HTML code? You can post it here...
(no questions or problems please, this section is not monitored by support).
Forum rules
This section is to share tips, tricks and tutorials related to WYSIWYG Web Builder.
Please do not post questions or problems here. They will not be answered.

PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901
Post Reply
wwonderfull
 
 
Posts: 1250
Joined: Fri Aug 21, 2020 8:27 am
Contact:

MAKING YOUR OWN SHAPE DIVIDER WYSIWYG WEB BUILDER

Post by wwonderfull »

Today we are going to learn how to make custom .svg shape dividers in illustrator, affinity designer or any other software and use it in WYSIWYG WEB BUILDER

1.Open any Vector Graphics Software for ease of tutorial I will use Adobe Illustrator now.

2.You can make a custom new page where you set your own width and height in your page or you can use my method which I used for ease of use, and for that go to (C:\Users\User\Documents\WYSIWYG Web Builder\system\dividers) then select any .svg divider and drag it inside illustrator which will automatically open it.

3.After you open the svg divider in illustrator you will see that there are already some black layer shapes inside because we took the shape divider from the WWB dividers directory. Now delete all the shapes inside and make your own shapes dividers using the pen tool. Remember to use #000000 black color in your shape and the shapes should only have FILL and NO STROKES or BORDERS!!! If you use 2 or more shapes for gradient effect or layer gradient then put the solid one in front and the 2nd layer behind it with a little opacity and if you use 3 layers then the 3rd layer should have less opacity then the second layer that is the way to make a gradient color effect thought it is not gradient just solid colors opacity effect.

4.After you made your shape inside the layout now on adobe illustrator click on File>Export>Export As> your-dividers-name .SVG click on save and A MENU WILL POP UP AS SHOWN BELOW (Remember To Use Latest Version Of Adobe Illustrator 2020 or the menu may or may not show).

Image

Most Important Follow this steps: Styling: Inline Styles, Font: SVG, Image: (Put Embed or Preserved Link is for expert users if they know what they are doing and if they have an image inside the shape.) Then click on “SHOW CODE”

5.You will be able to see a similar format code “FORMAT” written in the notepad for example

Code: Select all

 ***This is the Adobe Illustrator Custom Made Shape Divider***
 <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1999.99 124.28">
  <path d="M896,192.29" transform="translate(0 -60.71)"/>
  <path d="M0,185v-48.7s238.82,19.3,449.53-50.58,600.35,49.64,600.35,49.64,245.65,40.17,415.06-42.85S2000,115.35,2000,115.35V185Z" transform="translate(0 -60.71)"/>
</svg>
Now the Important Part.
To make it easy to understand make this code format similar to the code format which WWB dividers have. For that, open a shape divider USING NOTEPAD (the shape divider which was dragged inside adobe illustrator). And using notepad you will see this code.

Code: Select all

***This is the WWB Shape Divider***
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 76" preserveAspectRatio="none">
<path class="divider-fill" d="M500,54,457,24a48.52,48.52,0,0,0-27-6C400.63,19.84,0,76,0,76V0H500Z"/>
</svg> 
Now see the chart below and understand the copy and replace part delicately.

Image

Any problem or any one wanting their shape divider to be compatible in WWB then give me a message I will try my best if I get proper time. Any one from now on if you need help with your custom divider post here.

A new updated tutorial as been published viewtopic.php?t=96859
Post Reply