Drag & drop section #1
Note: this Documentation is still on beta.
how use the theme:
Go to theme >> Change Theme >> Upload the theme >> after you upload the theme, go select it the custom theme (The theme is named Industrial Lite) >> And you are good to go.
HOW TO CHANGE THE COLOR Background of the SECTION
Go to the Design Tab >> Select the layout you are using >> Locate the section you want to change using the search >> Locate the section's style
For example:
For example:
<!-- Drag and Drop Team Section-->
<div id="team-section" style="background:#e4e8ea">
Now, you've located the section's style, go visit: http://www.color-hex.com/ for color hex codes.
Now since, you selected a hex code, go change the hex code written in the section's style.
For example:
Now since, you selected a hex code, go change the hex code written in the section's style.
For example:
<!-- Drag and Drop Team Section-->
<div id="team-section" style="background:#878787">
That's all and don't for get to hit save.
HOW TO CHANGE THE Image BACKGROUND OF THE SECTION
Go the Design Tab >> Select the layout you are using >> Locate the section you want to change >> Upload your image file to assets >>
Now since you uploaded your image to assets, go to the layout you want to modify and locate the section you want to change in that layout.
For example:
For example:
<!-- Drag and Drop Client Section-->
<div id="client-section" style="background:#fbc011">
Now since you locate the code of the section, change what's written in the style of the section and change it to the code written below:
background: linear-gradient(rgba(14, 0, 121, 0.5), rgba(110, 80, 80, 0.5)),url(files/theme/backgroundimage.jpg);
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
For example:
<!-- Drag and Drop Client Section-->
<div id="client-section" style="background: linear-gradient(rgba(14, 0, 121, 0.5), rgba(110, 80, 80, 0.5)),url(files/theme/backgroundimage.jpg);
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;">
Now since, you added the code, go to the image url and change into something like this: files/theme/yourimage.jpg
For example:
For example:
<!-- Drag and Drop Client Section-->
<div id="client-section" style="background: linear-gradient(rgba(14, 0, 121, 0.5), rgba(110, 80, 80, 0.5)),url(files/theme/yourimage.jpg);
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;">
NOTE: If you would like to get rid of the gradient, well remove "background: linear-gradient(rgba(14, 0, 121, 0.5), rgba(110, 80, 80, 0.5))" remove, and let "background: url(files/theme/yourimage.jpg)" remain to the section's style.
For example:
For example:
<!-- Drag and Drop Client Section-->
<div id="client-section" style="background: url(files/theme/yourimage.jpg);
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;">
That's all and don't for get to hit save.