-
Template RestoCooks WARC : INSTALLATION
Step 1Open WebAcappella Responsive and import a project :
Sauvegarde Template Resto Cooks.waprj
Step 2Upload the plugins folder on your server via your FTP
client.In this folder you can find the files allowing to operate
the plugins on the site.
Note :rgba code corresponds to rgb + opacity. To get your rgb
code, enter your hexa color code in Google’s search bar. The last
value corresponds to opacity. 0 = transparent, 1 = Opaque. 0.5 =
half transparent
-
Step 3.1Customization of the menu
HTML code is placed in a subpage. This way you can make a
modification and apply it to all your pages. Here is the
corresponding part of the menu html code that you can change :
ACCUEILMENUGALERIEBAR À VINCONTACT
Your social networks URL
See below how to change social networks icons
Anchors names on the pageSee below how to name anchors
Tabs names (apparent on the site)
-
To change or add anchors. Anchors are already in the page. They
are not very apparent but are placed in html elements, above
titles.
You can copy this html code in order to add anchors and change
anchor names
To change social networks icons.You can copy/paste lines in
order to add social networks. To change icons, please check this
site : http://fontawesome.io/icons/In the Brand Icons
category, click on the desired icon and copy only the red part of
the code beginning by « fa » and paste it, replacing the
existing code in menu html.
To add your logo.Name your logo file : logo.png and place it in
the images folder (plugins => MenuBigMama => images)
WARNING : for optimal display, image dimensions must not exceed
300 px width and 80 px height.
To change mobile menu icon, replace the image placed in the
images folder (plugins => MenuBigMama => css =>
images)
For secondary pages menu.Anchors names must be preceded by
index.html in order to get back to main page.
Anchor name
http://fontawesome.io/icons/
-
Step 3.2Customization of the menu css
- Line 56 : change space between logo and top of menu - Line 65
: change space between tabs and top of menu - Line 491 : change
menu banner color - Line 492 : change menu font- Line 496 : change
tabs color when overview- Line 503 : change tabs font size - Line
507 : change tabs color (inactive)- Line 511 : change active tabs
color (only in One Page mode)
- Line 157 : change space between social networks icons and top
of menu- Line 329 : change social networks icons size- Line 330 :
change social networks icons color- Line 333 : change social
networks icons opacity when overview- Line 389 : change scrolling
banner color for social networks in mobile menu mode - Line 402 :
change social networks mobile icons size - Line 404 : change social
networks mobile icons opacity when overview - Line 413 : change
thickness and color of separator when opening mobile menu - Line
415 : change space between separator and top of menu- Line 480 :
change space between social networks icons - Line 499 : change
social networks mobile icons color- Line 429 : change mobile menu
banner height (40px)
-
Step 4.1Customization of the images overview effect (Magic
Hover)
You will find the following code in the HTML elements placed in
the page:
If you wish another effect, you can choose the desired code here
: https://tontonduweb.com/previews-warc/noticeCode-magicHover3/
Images are in the images folder (plugins => magicHoverP3
=> images). You can replace them with yours. No special
dimension is requeired. Image will automatically adapt.Please note
that this plugin dosen’t allow to change stickers size.
Step 4.2To customize effects in the css, please refer to Magic
Hover Pack 3 user manual, from step 7.
VOTRE TITRE
Lorem ipsum duis dolor voluptate
- Replace the # by the URL of the page towards which user is
redirected if he clicks on the image. If this is a page of your
website, you can write for example : services.html
- This is the image’s name- Here is the Title- And then the
description
https://tontonduweb.com/previews-warc/noticeCode-magicHover3/
-
Step 5Customization of Call to action (sentence with moving
button)
You can find this at the line 36 of the html code :
Above in the code, here’s what you can change :
Voir le menu
Replace textReplace url of the page towards which you want to
redirect the buttonButton text
.textcall {margin-right: 20px;font-size: 40px;line-height:
2.5em;color: #ffffff;
}.btn.btn-default {
background: transparent;border: #ffffff solid 2px;radius:
0px;color: #ffffff;font-size: 18px;font-weight: bold;width:
200px;height: auto;margin-top: -20px;
}.btn.btn-default:hover {
background: #1a4a72;border: #ffffff solid 2px;color:
#ffffff;
Sentence settings- Space at the right side of the text- Text
size- Space between the lines (this can be useful when the texts
goes to next line with some screen sizes)- Text color
Per default button settings- Button color, here there is no
background color for the button, thus we inscribe
« transparent »- Border color and thickness- Corners
curves- Button text color- Button text size- Button text weight -
Button width
Button settings when overview- Button color - Border color -
Text color
-
Step 6.1Customization of the « mosaïque d’images »
The mosaique folder contains a css folder, a fonts folder and a
img folder.In the img folder, you will find the pictures that you
can replace with yours. Be careful to keep the same file name.
Please prefer images of a maximum size of 100Ko.
Step 6.2In WARC, select the html element in which the mosaic is
placed and click on the “édition du code html“ button. For each
image, here’s what the block of corresponding code lines looks like
:
Step 6.3To add or delete images to your mosaic, you just have to
delete or copy/paste the block of code lines.
If you like one
overview effect more than others, you can copy/paste the figure
class name. Ex : name is effect-layla
WARNING : It is imperative to leave the box in MODE
ÉTENDUE.
9. 10. 11. 12. Nice Lily13.
Lily likes to play with crayons and pencils
14.
-
Step 7Customization of the Anim Effect titles
You will find the following code in the HTML elements placed in
the page:
The list of effects that you can use is in the file : Liste
des effets du plugin Anim Effect.pdf
Step 8Customization of the Google Map
Please refer to this tutorial :
https://www.tontonduweb.com/personnaliser-une-carte-google-maps-dans-webacappella-responsive/
EFFET ANIMATION WEBACAPPELLA
- In red : effect’s name. Open the effects list and copy it
replacing this one.
- In yellow : change title font- In green : choose text
alignment, among left,
center, or right.- In blue : title size- In purple : title
color- In turquoise : your title (capital or lowercase
letters)
https://www.tontonduweb.com/personnaliser-une-carte-google-maps-dans-webacappella-responsive/
