Learning Wix Platform
- Create Account (wix.com)
- Benefits Wix -> fast speed, easily edit no required coding
- Create your website Using ADI (Artificial Design Interface)
- Create your website with the Editor (Mostly Used)
- Go to wix editor-> media-> upload media->add logo
- Go to wix editor-> media-> upload media->add banner
- Add Elements -> text, image, button, menu, video, socials icons ..etc
****************************************
How to make URL and SEO
https://www.youtube.com/watch?v=H-DgyD_rTyo
Step-1->
1- Go to Wix Editor-> Site-> My dashboard
2- Click on contacts-> Marketing & SEO-> Get found on google -> Get Started
3- What’s your business or brand name? -> Binary Web Solutions-> next
4- Click on online
5- Which keywords do you want to use in your checklist? (enter keywords rank your website -> Enter 3 important keywort eg. Binary Technical blog)
Step-2-> Settings-> Website Settings-> Enter site name -> Set fav icon-> set social links-> Click on save.
Step-3-> On Page SEO
1- Go to Wix Editor-> click on pages & menus->
2- Site Menu-> Click on 3 dots-> SEO basics-> Enter Site title, url, Des etc...
Meta title-> No. 1 Wbsite creating service in Mumbai | Binary Web Solutions
Meta title-> put related content (Limit 50 char to 300 char)
All Images put alt tag
Go to google webmaster tool & bing webmaster-> and verify website-> copy and put code in Wix dashboard-> Setting seo-> paste and generate site map
3- Important Mandatory Notice-> 1 <H1> tag include in website home page and set keyword is must
Step-4-> Create Backlinks and do Off Page SEO
********************************************
How to Change or Update URL
Site Menu-> Click on 3 dots-> SEO basics-> Enter Site title, url, Des etc...
Or
1- Go to Wix Editor-> Site-> My dashboard
2- Click on my site-> Go to MySites->
2- Go to Site Actions -> Rename Site-> Enter Site Name and put url-> Save
****************************************
Online booking system
Make new website for restaurant And start RND for booking system
https://www.youtube.com/watch?v=Gv09QQxcmXU
https://www.youtube.com/watch?v=-bcKCI-4Asw
1- Business Info => Go to dashboard-> Settings-> Business Info->enter business name, short description, and select category
enter email id, phone no, on location-> Put address, time 24 hours
2- Connect Payment => Go to dashboard-> Settings-> Accept Payments
3- Setup Online Ordering => Go to dashboard->Restaurants->orders->show here all order details-> Click on Setting->here put pickup, delivery
Online booking system Apps
Go to add apps-> Wix app market -Add apps
1- Wix Restaurants Menu
2- Wix Restaurants Order
3- Wix Table Reservations
****************************************
Starting with Wix Velo Code
---------------------------
Create a Database
1- Goto Content Manager -> Collection-> New collection
Enter collection name-> User Profile
How to create custom Wix forms
---------------------------
https://www.youtube.com/watch?v=CObN26-1qKU
https://www.youtube.com/watch?v=xdH8YdCfGnE
1- Goto wix editor-> add elements-> input-> add text input, upload button (add file), rich text(text box), button(Text & Icon button)
2- and connect all field to database
3- Goto content manager-> main-> Add Content Elements-> Form dataset
For Frontend
4- Goto content manager-> collections-> user profiles-> add blank dynamic page
********************************************************************************
How to create custom tabs in Wix
-------------------------------
1- Goto wix editor-> box-> multi-state box-> take ist box
2- click on manage states-> create duplicate state
3- go to velo code-> give id every box-> click properties & events-> give same id & different state id
4- add 3 buttons (out of multi-state box)-> put unique id
5- put velo code
https://support.wix.com/en/article/velo-tutorial-working-with-multi-state-boxes-and-code
$w.onReady(function () {
$w("#aboutbtn").onClick(() => {
$w('#demostatebox').changeState("aboutState");
} );
$w("#joinbtn").onClick(() => {
$w('#demostatebox').changeState("joinState");
} );
$w("#contactbtn").onClick(() => {
$w('#demostatebox').changeState("contactState");
} );
});
********************************************************************************
How to rotate infinite any image or text on WIX or Wix Animation
------------------------------------------------
https://www.editorx.com/infiniterotation
// Velo API Reference: https://www.wix.com/velo/reference/api-overview/introduction
import wixAnimations from 'wix-animations';
const infinity_rotation_timeline = wixAnimations.timeline({ repeat: -1 });
$w.onReady(function (){
initRotationAnimation();
});
function initRotationAnimation() {
const element_to_rotate =
$w('#handBgId');
infinity_rotation_timeline.add(element_to_rotate, {
rotate: 360,
duration: 40000,
easing: 'easeLinear'
}).play();
}
**********************************************
Wix Training
-----------------------------------
https://wix.zoom.us/rec/share/Gbxa7SKkuBAnsac63Ch5giW25p8S55AORiv74F0FzovP5O1jjn66f4aSwEnbXpVg.zhoLkVuxlY-u5TBz
Passcode: m6Yuse!N-99
**********************************************
How to hide and show image on wix
-----------------------------------------
$w.onReady(function () {
$w('#hideButton').onClick((event) => {
$w('#image').hide();
})
$w('#showButton').onClick((event) => {
$w('#image').show();
})
});
******************************************
How to add and remove border on click on button
---------------------------------------------------
1- first declare variable on top of $w.onReady function
const btnActiveBorderColor = "#F4A336";
const btnActiveBorderWidth = "5px";
const btnBorderColor = "#ffffff";
const btnBorderWidth = "0px";
2- second put button click selector id under onReady function
$w.onReady(function (){
$w("#clientID1").onClick((event) => {
$w('#myClientBox').changeState("myClientState1");
$w("#clientID1").style.borderColor = btnActiveBorderColor;
$w("#clientID1").style.borderWidth = btnActiveBorderWidth;
//$w("#clientID1").style.borderRadius = "10px";
//$w("#clientID1").style.borderColor = "#F4A336";
$w("#clientID2").style.borderColor = btnBorderColor;
$w("#clientID2").style.borderWidth = btnBorderWidth;
$w("#clientID3").style.borderColor = btnBorderColor;
$w("#clientID3").style.borderWidth = btnBorderWidth;
} );
$w("#clientID2").onClick(() => {
$w('#myClientBox').changeState("myClientState2");
$w("#clientID2").style.borderColor = btnActiveBorderColor;
$w("#clientID2").style.borderWidth = btnActiveBorderWidth;
$w("#clientID1").style.borderColor = btnBorderColor;
$w("#clientID1").style.borderWidth = btnBorderWidth;
$w("#clientID3").style.borderColor = btnBorderColor;
$w("#clientID3").style.borderWidth = btnBorderWidth;
} );
$w("#clientID3").onClick(() => {
$w('#myClientBox').changeState("myClientState3");
$w("#clientID3").style.borderColor = btnActiveBorderColor;
$w("#clientID3").style.borderWidth = btnActiveBorderWidth;
$w("#clientID1").style.borderColor = btnBorderColor;
$w("#clientID1").style.borderWidth = btnBorderWidth;
$w("#clientID2").style.borderColor = btnBorderColor;
$w("#clientID2").style.borderWidth = btnBorderWidth;
} );
});
*************************************************
How can add dynamic services
https://www.youtube.com/watch?v=qTmtvJRdO9c
How can add dynamic pricing table
-------------------------------------
add app -> wix pricing plan
https://www.youtube.com/watch?v=-WWN_jVtcVY
*************************************************
Creating Objects, Dynamic page, Preset dynamic page
----------------------------------------------
1- Go to content manager-> create collection (Our Team)
2- And in collection create field Name(Title), description, team member image and insert data
3- Go to page add blank repeater -> and connect to database
4- Go to content manager-> and click on dataset-> go tp page and drag dataset which section dynamic, and click dataset manage content here and use setting to add limit
Dynamic page-> https://www.youtube.com/watch?v=XdCCeKbniag&t=600s
Changing Fonts in Wix Theme Manager- whole website
https://www.youtube.com/watch?v=aRrFEcaUwLM
https://www.youtube.com/watch?v=7tzVHPl6JqE
add more fields in form
https://support.wix.com/en/article/wix-bookings-request-adding-different-types-of-fields-to-the-wix-booking-form
*************************************************
Create components and dynamic any title and description
-------------------------------------------
1- create collection and insert data
2- go to page create deatasetand connect titlr in collection title, description in collection description
*************************************************************************
How To Add Custom Element or Web Components on wix
---------------------------------------------------
Custom Elements in Velo with three.js
https://www.youtube.com/watch?v=a9gqQDByleU&t=896s
HTml component
https://www.wix.com/velo/example/hello-html-component
Web Components consist of custom element and shadow DOM.
https://www.youtube.com/watch?v=tkQRQ8jBgnM&t=137s
How to create custom component
https://support.wix.com/en/article/velo-example-coding-a-more-robust-custom-element
https://developer.mozilla.org/en-US/docs/Web/API/Web_components
1- goto packages and search three.js instaal it
2- Goto Editor -> Click add elements-> embed code-> custom elements
3- Width-> 648 px, height->480px -> set this standard size
4- go to choose source -> select velo-> select three.js or create a new
5- goto public & backend
6- custom element rename it pink-three-cubejs
7- change tag name-> pink-three-cubejs
9- add text(paragraph) in page-> change text-> clicked: 0 times
10- and change text box id in-> clickTextbox
11- and change custom element id is canvas
12- and put code in page.js under on $w.onReady(function(){
//put code here
}
---------------------
Web component= Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated
away from the rest of your code — and utilize them in your web apps.. it consist of 3 main technologies
1- custom element: A set of JavaScript APIs that allow you to define custom elements and their behavior, which can then be used as desired in your user interface.
2- shadow DOM:A set of JavaScript APIs for attaching an encapsulated "shadow" DOM tree to an element — which is rendered separately from the main document DOM — and controlling associated functionality. In this way, you can keep an element's features private, so they can be scripted and styled without the fear of collision with other parts of the document.
3- Html Template: The <template> and <slot> elements enable you to write markup templates that are not displayed in the rendered page. These can then be reused multiple times as the basis of a custom element's structure.
-------------------------------------
Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.
Web Components aims to solve such problems — it consists of three main technologies
1. Custom elements- A set of JavaScript APIs that allow you to define custom elements and their behavior, which can then be used as desired in your user interface.
2. Shadow DOM- A set of JavaScript APIs for attaching an encapsulated "shadow" DOM tree to an element — which is rendered separately from the main document DOM — and controlling associated functionality. In this way, you can keep an element's features private, so they can be scripted and styled without the fear of collision with other parts of the document.
3. HTML templates The template and slot elements enable you to write markup templates that are not displayed on the rendered page. These can then be reused multiple times as the basis of a custom element's structure.
*******************************************
Here is the sample code provided in the basic example:
pink-three-cubejs.js
--------------------
import * as THREE from 'three';
let render, camera, scene, cube, animationRequestId;
const init = () => {
scene = new THREE.Scene();
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
const directionalLight2 = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(0, 4, 2);
directionalLight.position.set(0, -4, 2);
scene.add(directionalLight);
scene.add(directionalLight2)
cube = new createCube(0xFFC0CB, {x: 0, y: 0, z: 0})
cube.rotation.x += 0.5
scene.add(cube);
const fov = 60;
const aspect = 640/480;
const near = 0.1;
const far = 100;
camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0,0,5);
render = new THREE.WebGLRenderer( { antialias: true } );
render.setSize(640, 480);
render.render(scene,camera);
animateCube(cube);
return render.domElement;
}
const createCube = (hexColor,position) => {
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshPhongMaterial({color: hexColor})
const cube = new THREE.Mesh(geometry, material);
cube.position.set(position.x,position.y,position.z)
return cube;
}
const animateCube = () => {
animationRequestId = requestAnimationFrame(animateCube);
cube.rotation.x += 0.01;
cube.rotation.z += 0.01;
render.render(scene,camera);
}
class PinkThreeJS extends HTMLElement {
constructor(){
super();
}
connectedCallback(){
this.appendChild(init());
this.addEventListener('click', () => {
this.dispatchEvent(new CustomEvent('clickedCanvas'));
})
}
attributeChangedCallback(name, oldValue, newValue) {
if(name === 'animation'){
cancelAnimationFrame(animationRequestId);
}
}
static get observedAttributes(){
return ['animation'];
}
}
customElements.define('pink-threejs-cube', PinkThreeJS);
*************************************************************************************
Now we define the actual custom element class.
- The
myLogoDisplay class is the class of the custom element, which we'll use when registering the custom element. - We use standard
constructor() and super() functions to create an instance of the element. connectedCallback() is a lifecycle callback function that is triggered automatically when the element is connected. When the custom element is able to start rendering on the site, the two parts of our logo image can be displayed, with the help of the createImg() function.Our last step is to register the custom element class with the customElements.define(name, class) method.
Once registered, new custom elements can be used in your site.
- The first parameter, pink-threejs-cube, maps to the tag name, which we'll soon define in the Wix Editor.
- The second parameter, PinkThreeJS, is the class name of the custom element.
customElements.define('my-logo-display', myLogoDisplay);
************************************************************
//App HTML page includes JS
<html>
<body>
<h2>HEADING</h2>
<p id="divid"></p>
<script>
var car_name = ["Mazda", "Volvo", "Nissan", "Ford", "Skoda", "Audi"];
var string = "";
var i;
for (i = 0; i < car_name.length; i++) {
string += car_name[i] + "<br>";
}
document.getElementById("divid").innerHTML = string;
</script>
</body>
</html>
**************************************
No comments:
Post a Comment