[[wwLink = {"linkPage": 69703} | text = Publisher's course]]

[[wwLink = {"linkPage": 99378} | text = Developers]]

Start building for free

[[wwLink = {"linkPage": 69703} | text = Publisher's course]]

[[wwLink = {"linkPage": 99378} | text = Developers]]

TRY WEWEB FOR FREE

Adding Elements

1:02

Adding Elements

Customize your template

To get started, choose a template and create your website for free.


Click [[wwLink={"linkExt":"https://manager.weweb.app/learn/website-management"}|text=here]] to find out how to choose a template and create a website.

Edit your elements

First of all switch the section your want to edit on edit mode by clicking on [[wwObject=13]]


To add a new element to a section, place your mouse cursor where you want to add your element and click on [[wwObject=14]] then a window opens with options you to add the element of your choice it can be: text, imag, button etc .....

Click on the element of your choice and it will be added directly to your page.

Let's add here for example an image below this text

Switch to edit mode by clicking on the pen icon

Then click on [[wwObject=10]] to open the elements window and choose "Image".

An empty image has just been added below the text, all you have to do is replace it with another image selected from your image library.

[[wwObject=0]]This addition principle is the same for all elements of the window.

How to replace one element by another?

You can also change the type of an added element.

For example, if you want to change the previous added image into a video, just click on the image and then click on "Options" in the pop-up menu.

Choose the option "CHANGE OBJECT TYPE".

And choose the video in the elements window .

The image has just been turned into a video.


Each element can be transformed into another element on your page.

Ready to customize your site? Create your [[wwLink={"linkExt":"https://login.weweb.app/"}|text=WeWeb]] site now!

Adding links

2:04

Adding links

An action at click can be set up for each element on your page.

You can add a link to a button as well as to an image, text, icon, etc...

How do I add a link to an item?

Click on the item you want to add a link to, to open the popup

In this pop up click on "Options" and then on [[wwObject=14]]


A new interface opens and from it you can define which action you want to apply to your element when you click on it.

  1. Choose External link to redirect to a page external to your site.
  2. Choose Internal link to redirect to a page internal to your site.
  3. Choose Section link to redirect to an internal section of your website.
  4. Choose Open Popup to open a window on click .
  5. Choose Download a file to download a per-click document.

How to add a link to a text?

Highlight the words to which you want to add a link .

Then in the text tool bar, click on the icon that looks like a chain.

This will give you access to the same link adding options we just reviewed.

You now know how to add a click action to elements.

Create your [[wwLink={"linkExt":"https://login.weweb.app/"}|text=WeWeb]] site now!

Color management

2:16

Color management

One of the ways to make your site more aesthetic and enhance the user experience is to play with colors. We explain how this works and tips to help you choose the right colors are provided at the end of this article.

How to change the color?

To get started click on [[wwObject=15]] and switch to edit mode .


To change the background color of your page, click on [[wwObject=16]]and switch to 3D mode to display all the layers that make up your page .

Then click on the background to bring up the pop up colors.

In the color pop up window click on "Color" to open the interface from which you can manage your colors.


We put at your disposal a wide range of colors, and for more customization add your own hexa code.

Each time you use a color on your site, we create a history of colors that you can find by clicking on the icon in the shape of a clock.

How do I make a colour gradient?

From the pop up of colors click on "Options" then on "SELECT GRADIANT".

Choose your colors and set the angle of your gradient as you wish.

Click on "CHANGE COLOR STYLE" to change the style of your color.

Remember to limit the use of bright colors, choose a maximum of 3 colors that complement each other.


A good combination of colors will make your site more pleasant to visit for the reader. Here are online tools that can help you compose your colors, such as: [[wwLink={"linkExt":"https://coolors.co/app"}|text=coolors ]]; [[wwLink={"linkExt":"https://colorhunt.co/"}|text=color hunt ]]

Ready to customize your site? Create your [[wwLink={"linkExt":"https://login.weweb.app/"}|text=WeWeb]] site now!

Icons management

2:03

Icons management

How do you add icons to your site?

To add an icon in a section, place your mouse cursor where you want to add an icon, then click on [[wwObject=8]] and add the Icon element from the elements window .

An icon is added directly on your page and has no style .


You will therefore be able to customize it so that it gets the style that you want.

How to change the style of an icon?

To edit an icon, click on the icon and a pop-up window will appear. Choose "Options" and access more options to customize your icon.

Click on "SELECTION" and access a library of royalty-free icons.

Customize your icon by clicking on "CHANGE ICON STYLE".

Create your [[wwLink={"linkExt":"https://login.weweb.app/"}|text=WeWeb]] site now!

Image management

3:13

Image management

How to add and modify an image?

To start place the cursor of your mouse where you want to add the image, then click on the sign [[wwObject=8]]

and add the Image element from the element window .

Click on " Options " to open the window from which you will be able to manage the parameters of your image.

[[wwObject=0]] Click on SELECT IMAGE and access your image library to select the image of your choice or download a new one by clicking on UPLOAD NEW IMAGE .


[[wwObject=0]] You can define a ratio height / width to your image to change its format to fit in portrait or landscape.


To do so click on CHANGE IMAGE RATIO .

[[wwObject=0]] Click on CHANGE IMAGE STYLE and change the style of your image as you wish

Think accessibility!

It is important to add a description to your image so that it can be visible to visually impaired people.

WeWeb helps you improve your accessibility with the "ALT TEXT" feature.

Ready to boost your site? Create your [[wwLink={"linkExt":"https://login.weweb.app/"}|text=WeWeb]] site now!


Button management

1:49

Button management

Buttons are elements that once highlighted promote interaction on your site and improve your SEO.

How to add buttons on your site?

To add a button in a section, place the cursor of your mouse where you want to add a button and click on [[wwObject=8]] and add the Button item from the Items window .

A button is added directly on your page and has no style .

You will be able to customize it so that it is the style you want.

How do I change the style of a button?

To edit a button click on the orange icon located on the top left of your button, a pop-up appears, click on "Options" and access more options to customize your button.

Change the appearance of your button by clicking on "CHANGE BUTTON STYLE".

Add a link to your button by clicking on "CHANGE LINK".

  • You can decide that when you click your button you will be redirected to another website, to another page of your website or directly to another section of your website.


  •  You can also decide to download a document by clicking on the button .

Ready to boost the interaction on your site? Create your [[wwLink={"linkExt":"https://login.weweb.app/"}|text=WeWeb]] site now!


Row

1:26

Row

The Row element allows you to align different elements horizontally. It can be used to create a navigation bar wherever you want on your page.

How to add a row on your site?

To add a row in a section, place your mouse cursor where you want to add the row, then click on [[wwObject=8]]and add the Row element from the element window .

A row is added directly on your page. Click on [[wwObject=12]], the items window opens again, click on "button" for example to add a button inside the row. When you hover the mouse over this button, the button's icon [[wwObject=13]]appears again on each side of it.

To manage the alignment of each element in the row click on "Options".


Then click on "STYLE" and align the elements as you wish within the row.

Create your [[wwLink={"linkExt":"https://login.weweb.app/"}|text=WeWeb]] site now!


Iframe

1:08

Iframe

The iframe element can be used to display the content of an external page on your site. It can be used to display on your site your Twitter news, a linkedin page, instagram or a Calendly calendar.

How to display external content on your site?

Let's see how to display your Twitter news for example on your site.


First, click [[wwLink={"linkExt":"https://publish.twitter.com/#"}|text=here]] and paste the URL of your Twitter and copy the code that was generated.

Then on your site, place your mouse cursor where you want to display your external content. Then click on [[wwObject=8]]and add the Iframe element from the element window .

It appears like this on your site, click again on "Options".

Then on "ADD IFRAME SOURCE".

Then paste the source code.

And here's your Twitter news has just been added to your site.

[[wwObject=11]]Make sure you always paste the source code to display your external content.

Create your [[wwLink={"linkExt":"https://login.weweb.app/"}|text=WeWeb]] site now!


Slider

2:14

Slider

The slider is an element that allows you to scroll through images in a carousel .

How to add a slider on your site?

To add a slider in a section, place the cursor of your mouse where you want to add a slider then click on[[wwObject=8]] and add the Slider element from the element window .

A slider is added directly on your page and does not include any image.

Click on the slider and make the pop-up appear, select "Image" and add an image on each slider.

To add more images in the slider, click on any image and in the pop up window click "After" to add an image to the right of the one you selected, or "Before" to add an image to the left of the one you selected.


To remove an image from the slider, click on it and click "Remove".

How to change the appearance of a slider?


To change the appearance of the slider, click the pink icon in the top right corner, make the pop-up window appear, click on "Options" and access more options to edit the slider.


Change the appearance of your slider by clicking on "CHANGE SLIDER STYLE".

Ready to boost the interaction on your site? Create your [[wwLink={"linkExt":"https://login.weweb.app/"}|text=WeWeb]] site now!


Google Maps

1:52

Introduction to the editor

WeWeb is a website editor, which allows you to easily create your fully functional site and quickly update its content (text, image, video etc.) without the need for programming skills. Let's find out how it works.

Access the editor

From the dashboard, access the editor by clicking on [[wwObject=2]]. Uwill open once your site is displayed in the publisher as it is seen by your visitors is more commonly called WYSIWYG for "what you see is what you get." It is made up of different pages and each page

is made up of different sections represented by a blue pen-shaped icon [[wwObject = 5]]

From the dashboard, access the editor by clicking on [[wwObject=2]]. Uwill open once your site is displayed in the publisher as it is seen by your visitors is more commonly called WYSIWYG for "what you see is what you get." It is made up of different pages and each page

is made up of different sections represented by a blue pen-shaped icon [[wwObject = 5]]

Access the editor

From the dashboard, access the editor by clicking on [[wwObject=2]]. Uwill open once your site is displayed in the publisher as it is seen by your visitors is more commonly called WYSIWYG for "what you see is what you get." It is made up of different pages and each page

is made up of different sections represented by a blue pen-shaped icon [[wwObject = 5]]

Pour gérer le zoom et la position des marqueurs , il vous suffit de cliquer sur " Options" dans le pop up et sur “CONFIG THE MAP ELEMENT " .

Depuis cette interface, vous pouvez gérer l'apparence des marqueurs sur la carte : mettez un chiffre inférieur à 5 pour avoir une vue sur la France entière et supérieur à 10 pour avoir une vue sur une ville.

Vous savez maintenant comment ajouter et parametrer une carte Google Map sur votre site .

Ready to have fun? Create your site[[wwLink = {"linkExt": "https://login.weweb.app/"} | text = WeWeb]]now!

Introduction to the editor

Website management

Section editing

Elements Edition

Animations

Referencing / metadata

WYSIWYG Editor - Elements Edition

NAVIGATION

[[wwLink = {"linkExt": "https://www.weweb.io/editor"} | text = Editor]]

[[wwLink = {"linkExt": "https://www.weweb.io/components"} | text = Components]]

[[wwLink = {"linkExt": "https://www.weweb.io/pricing"} | text = Pricing]]

LEARN

[[wwLink = {"linkPage": 69703} | text = Tutorials]]

[[wwLink = {"linkExt": "https://learn.weweb.io/documentation"} | text = Documentation]]

BUSINESS

[[wwLink = {"linkExt": "https://www.weweb.io/legal-notice"} | text = Legal notices]]

[[wwLink = {"linkExt": "https://policy.weweb.io/"} | text = Terms and conditions]]

[[wwLink = {"linkExt": "https://jobs.stationf.co/companies/weweb"} | text = We are recruiting!]]

COMMUNITY

© 2019 WEWEB SAS - All rights reserved - contact@weweb.io