لعلك وأنت تبحث في صفحات الإنترنت قد تجد صفحات أو مقالات ببدايتها وواجهتها صورة معبرة عن المحتوى للموقع وبها لوجو الموقع بشكل جذاب وعليها جمل متحركة أو جمل تظهر بشكل مميز وبعدها زرارين واحد منهم لرابط بأهم ما قد يحتويه الموقع أو الصفحة والأخر وهو للتواصل مع مالك الموقع للإستفسار عن خدمة أو منتج مما يثير الفضول لديك كيف أستطيع الحصول على كود بسيط وسهل مجرد كود واحد سهل الإستخدام والتعديل للوصول لنتيجة مشابهة جداً وقد تكون أفضل.
ومن المميزات القوية للغاية لتلك الإضافة هي أن الكثير جداً منا أصبح متسرع ويريد خلاصة الخلاصة من أول ما يفتح الصفحة أو المقالة ولهذا كانت إضافة الهيرو تلبي تلك الحاجة فبكل بساطة 4 جمل كمثال صغيرة وسريعة تعرف الزائر عما يحتويه هذا الموقع وكذلك صورة توضح أكثر محتوى الموقع مع لوجو الموقع وبعدها زرارين إما للوصول لأهم منتج أو خدمة بالموقع وزرار أخر للوصول للتواصل مع مالك الموقع لأي إستفسار يريد وليس هناك إختصار غير منقص من توضيح ما هو محتوى الموقع أفضل من ذلك.
وهذه الإضافة تحديداً تعتبر في كثير من الأحيان سبب مباشر في زيادة عدد التحويلات والمبيعات وكذلك توصيل المحتوى والوصول للهدف من هذا الموقع وما يريد إيصاله للزائر بأقل وقت مما يعني نجاح أكبر وأما من لديه وقت أكثر ويريد التعرف أكثر على بقية المحتوى فلديه بقية الصفحة والموقع أو المقالة ليتعرف أكثر بدون أية مشكلات.
ولعل البعض قد يسأل
ما هي أفضل إضافة هيرو للموقع ولصفحات الهبوط؟
ما هي أفضل إضافة مجانية لهيرو صفحة هبوط أو موقع؟
كيف أجد هيرو صفحة هبوط والتعديل عليها بدون الحاجة لمعرفة برمجية؟
كل هذا وأكثر ستجده بكامل المقالة
وبالبداية سترى أكثر من كود مميز لإضافة هيرو المواقع وصفحات الهبوط ومع كل معاينة للكود تجد الكود كامل ومجاني أسفله مباشرة وبأخر المقال ستجد كيفية التعديل على إضافة الهيرو بكل سهولة وبساطة بدون أية مشكلات إطلاقاً.
معاينة كود رقم 1
كود رقم 1
<div class="maincontainer034">
<div id="slogan471"></div>
<a href="#"><button class="btn930">إتصل بنا</button></a>
<a href="#"><button class="btn632">تعرف على منتجاتنا</button></a>
</div>
<style>
.maincontainer034{
width:100%;
height:300px;
margin:0 auto;
padding:0;
background:linear-gradient(rgba(0, 0, 0, 0.4), rgba(162, 150, 255, 0.4)), url(https://cdn.pixabay.com/photo/2017/11/27/21/31/computer-2982270_1280.jpg);
background-position:center;
background-repeat: no-repeat;
background-size: cover;
border-radius:10px;
text-align:center;
position:relative;
box-shadow:3px 3px 10px #000 , 3px -3px 10px #000 ;
transition:1000ms;
}
.maincontainer034:hover{
background:linear-gradient(rgba(0, 0, 0, 0.3), rgba(162, 150, 255, 0.3)), url(https://cdn.pixabay.com/photo/2017/11/27/21/31/computer-2982270_1280.jpg);
background-position:center;
background-repeat: no-repeat;
background-size: cover;
transform:translate(0px, 3px);
}
#slogan471{
text-align:center;
color:#fff;
font-size:30px;
font-family:cairo !important;
font-weight:bold;
padding-top: 120px;
text-shadow:3px 3px 10px #2a2a2a , 3px -3px 10px #2a2a2a ;
line-height:40px;
transition:300ms;
animation: bin583am 2s 1 ease;
}
.btn930{
padding:4px;
text-align:center;
font-family:cairo !important;
margin:50px auto 10px auto;
border-radius:10px;
cursor:pointer;
border:1px solid #fff;
background:linear-gradient(#fafafa,#e1e1e1);
font-size:18px;
color:#6e6e6e;
box-shadow:3px 3px 10px #e1e1e1 , 3px -3px 10px #e1e1e1 ;
position:absolute;
bottom:10px;
left:38%;
transition:300ms;
animation: bin583am 2s 1 ease;
}
.btn632{
padding:4px;
text-align:center;
font-family:cairo !important;
margin:50px auto 10px auto;
border-radius:10px;
cursor:pointer;
border:1px solid #fff;
background:linear-gradient(#fafafa,#e1e1e1);
font-size:18px;
color:#6e6e6e;
box-shadow:3px 3px 10px #e1e1e1 , 3px -3px 10px #e1e1e1 ;
position:absolute;
bottom:10px;
right:38%;
transition:300ms;
animation: bin583am 2s 1 ease;
}
.btn930:hover , .btn632:hover{
background:linear-gradient(#e1e1e1,#fafafa);
transform:scale(1.02);
color:darkblue;
}
@media (max-width:1510px) {
.btn930{
left:40%;
}
.btn632{
right:40%;
}
}
@media (max-width:1345px) {
.btn930{
left:39%;
}
.btn632{
right:39%;
}
}
@media (max-width:1222px) {
.btn930{
left:37%;
}
.btn632{
right:37%;
}
}
@media (max-width:1039px) {
.btn930{
left:35%;
}
.btn632{
right:35%;
}
}
@media (max-width:865px) {
.btn930{
left:33%;
}
.btn632{
right:33%;
}
}
@media (max-width:761px) {
.btn930{
left:30%;
}
.btn632{
right:30%;
}
}
@media (max-width:665px) {
.btn930{
left:27%;
}
.btn632{
right:27%;
}
}
@media (max-width:561px) {
.btn930{
left:24%;
}
.btn632{
right:24%;
}
}
@media (max-width:500px) {
.btn930{
left:20%;
}
.btn632{
right:20%;
}
}
@media (max-width:430px) {
.btn930{
left:15%;
}
.btn632{
right:15%;
}
#slogan471{
font-size:23px;
}
}
@media (max-width:369px) {
.btn930{
left:10%;
}
.btn632{
right:10%;
}
}
@media (max-width:326px) {
.btn930{
left:5%;
}
.btn632{
right:5%;
}
}
@-webkit-keyframes bin583am {
0% {
opacity: 0;
-webkit-transform: scale(.3);
}
50% {
opacity: 1;
-webkit-transform: scale(1.01);
}
70% {
-webkit-transform: scale(.9);
}
100% {
-webkit-transform: scale(1);
}
}
@keyframes bin583am {
0% {
opacity: 0;
transform: scale(.3);
}
50% {
opacity: 1;
transform: scale(1.01);
}
70% {
transform: scale(.9);
}
100% {
transform: scale(1);
}
}
.bin583am.go {
-webkit-animation-name: bin583am;
animation-name: bin583am;
}
</style>
<script>
// All your slogans
const sloganArray293 = [
"مرحباً بكم في موقع مو للمعلوميات",
"الموقع يقدم أفضل المقالات عن التقنية وتطوير المواقع",
"فقط لا تنسى زيارتنا لمعرفة جديد الموقع",
"ويمكنك التواصل معنا عبر ازرار التواصل التالية",
];
// Initial slogan index
let sloganIndex372 = 0;
// Slogan container
const element = document.getElementById("slogan471");
// Set first slogan on render
element.innerHTML = sloganArray293[sloganIndex372];
// The last interval in which something changed, starting from 0 and will be updated by the function
let lastIntervalTimestamp = 0;
// Start of function
function render(now) {
// If the interval is 0
// or "right now" minus timestamp is equal or higher than 4 seconds
// do the following
if (!lastIntervalTimestamp || now - lastIntervalTimestamp >= 4 * 1000) {
// Update the timestamp to right now
lastIntervalTimestamp = now;
// Update the slogan in the container
element.innerHTML = sloganArray293[sloganIndex372];
// Progress the slogan index along by 1
++sloganIndex372;
// If the slogan index is at the last of the slogan array flip to 0
if (sloganIndex372 >= sloganArray293.length) {
sloganIndex372 = 0;
}
}
// Rerun the whole function again when finished, this happens constantly while the animation API runs
requestAnimationFrame(render);
}
// Start the function when the very first animation frame is requested, aka when the browser is ready
window.requestAnimationFrame(render);
</script>
معاينة كود رقم 2
كود رقم 2
<div class="maincontainer034b2">
<div id="slogan471b2"></div>
<div id="slogan471b21"></div>
<div id="slogan471b22"></div>
<div id="slogan471b23"></div>
<a href="#"><button class="btn930b2">إتصل بنا</button></a>
<a href="#"><button class="btn632b2">تعرف على منتجاتنا</button></a>
</div>
<style>
.maincontainer034b2{
width:100%;
height:300px;
margin:0 auto;
padding:0;
background:linear-gradient(rgba(0, 0, 0, 0.4), rgba(162, 150, 255, 0.4)), url(https://cdn.pixabay.com/photo/2017/11/27/21/31/computer-2982270_1280.jpg);
background-position:center;
background-repeat: no-repeat;
background-size: cover;
border-radius:10px;
text-align:center;
position:relative;
box-shadow:3px 3px 10px #000 , 3px -3px 10px #000 ;
transition:1000ms;
}
.maincontainer034b2:hover{
background:linear-gradient(rgba(0, 0, 0, 0.3), rgba(162, 150, 255, 0.3)), url(https://cdn.pixabay.com/photo/2017/11/27/21/31/computer-2982270_1280.jpg);
background-position:center;
background-repeat: no-repeat;
background-size: cover;
transform:translate(0px, 3px);
}
#slogan471b2{
text-align:center;
color:#fff;
font-size:25px;
font-family:cairo !important;
font-weight:bold;
padding-top: 10px;
text-shadow:3px 3px 10px #2a2a2a , 3px -3px 10px #2a2a2a ;
line-height:40px;
transition:300ms;
animation: boncni95 2s 1 ease;
}
#slogan471b21{
text-align:center;
color:#fff;
font-size:25px;
font-family:cairo !important;
font-weight:bold;
padding-top: 10px;
text-shadow:3px 3px 10px #2a2a2a , 3px -3px 10px #2a2a2a ;
line-height:40px;
transition:300ms;
animation: boncni95 2s 1 ease;
}
#slogan471b22{
text-align:center;
color:#fff;
font-size:25px;
font-family:cairo !important;
font-weight:bold;
padding-top: 10px;
text-shadow:3px 3px 10px #2a2a2a , 3px -3px 10px #2a2a2a ;
line-height:40px;
transition:300ms;
animation: boncni95 2s 1 ease;
}
#slogan471b23{
text-align:center;
color:#fff;
font-size:25px;
font-family:cairo !important;
font-weight:bold;
padding-top: 10px;
text-shadow:3px 3px 10px #2a2a2a , 3px -3px 10px #2a2a2a ;
line-height:40px;
transition:300ms;
animation: boncni95 2s 1 ease;
}
.btn930b2{
padding:4px;
text-align:center;
margin:50px auto 10px auto;
font-family:cairo !important;
border-radius:10px;
cursor:pointer;
border:1px solid #fff;
background:linear-gradient(#fafafa,#e1e1e1);
font-size:18px;
color:#6e6e6e;
box-shadow:3px 3px 10px #e1e1e1 , 3px -3px 10px #e1e1e1 ;
position:absolute;
bottom:10px;
left:38%;
transition:300ms;
animation: boncni95 2s 1 ease;
}
.btn632b2{
padding:4px;
text-align:center;
margin:50px auto 10px auto;
font-family:cairo !important;
border-radius:10px;
cursor:pointer;
border:1px solid #fff;
background:linear-gradient(#fafafa,#e1e1e1);
font-size:18px;
color:#6e6e6e;
box-shadow:3px 3px 10px #e1e1e1 , 3px -3px 10px #e1e1e1 ;
position:absolute;
bottom:10px;
right:38%;
transition:300ms;
animation: boncni95 2s 1 ease;
}
.btn930b2:hover , .btn632b2:hover{
background:linear-gradient(#e1e1e1,#fafafa);
transform:scale(1.02);
color:darkblue;
}
@media (max-width:1510px) {
.btn930b2{
left:40%;
}
.btn632b2{
right:40%;
}
}
@media (max-width:1345px) {
.btn930b2{
left:39%;
}
.btn632b2{
right:39%;
}
}
@media (max-width:1222px) {
.btn930b2{
left:37%;
}
.btn632b2{
right:37%;
}
}
@media (max-width:1039px) {
.btn930b2{
left:35%;
}
.btn632b2{
right:35%;
}
}
@media (max-width:865px) {
.btn930b2{
left:33%;
}
.btn632b2{
right:33%;
}
}
@media (max-width:761px) {
.btn930b2{
left:30%;
}
.btn632b2{
right:30%;
}
}
@media (max-width:665px) {
.btn930b2{
left:27%;
}
.btn632b2{
right:27%;
}
}
@media (max-width:561px) {
.btn930b2{
left:24%;
}
.btn632b2{
right:24%;
}
}
@media (max-width:500px) {
.btn930b2{
left:20%;
}
.btn632b2{
right:20%;
}
}
@media (max-width:472px) {
#slogan471b2, #slogan471b21, #slogan471b22, #slogan471b23{
font-size:20px;
}
}
@media (max-width:430px) {
.btn930b2{
left:15%;
}
.btn632b2{
right:15%;
}
#slogan471b2, #slogan471b21, #slogan471b22, #slogan471b23{
font-size:16px;
}
}
@media (max-width:369px) {
.btn930b2{
left:10%;
}
.btn632b2{
right:10%;
}
}
@media (max-width:326px) {
.btn930b2{
left:5%;
}
.btn632b2{
right:5%;
}
}
@media (max-width:312px) {
#slogan471b2, #slogan471b21, #slogan471b22, #slogan471b23{
font-size:14px;
}
}
@-webkit-keyframes boncni95 {
0% {
opacity: 0;
-webkit-transform: scale(.3);
}
50% {
opacity: 1;
-webkit-transform: scale(1.01);
}
70% {
-webkit-transform: scale(.9);
}
100% {
-webkit-transform: scale(1);
}
}
@keyframes boncni95 {
0% {
opacity: 0;
transform: scale(.3);
}
50% {
opacity: 1;
transform: scale(1.01);
}
70% {
transform: scale(.9);
}
100% {
transform: scale(1);
}
}
.boncni95.go {
-webkit-animation-name: boncni95;
animation-name: boncni95;
}
</style>
<script>
// All your slogans
const sloganArray293b2 = [
"مرحباً بكم في موقع مو للمعلوميات",
];
// Initial slogan index
let sloganIndex372b2 = 0;
// Slogan container
const elementb2 = document.getElementById("slogan471b2");
// Set first slogan on renderb2
elementb2.innerHTML = sloganArray293b2[sloganIndex372b2];
// The last interval in which something changed, starting from 0 and will be updated by the function
let lastIntervalTimestampb2 = 0;
// Start of function
function renderb2(nowb2) {
// If the interval is 0
// or "right nowb2" minus timestamp is equal or higher than 4 seconds
// do the following
if (!lastIntervalTimestampb2 || nowb2 - lastIntervalTimestampb2 >= 4 * 1000) {
// Update the timestamp to right nowb2
lastIntervalTimestampb2 = nowb2;
// Update the slogan in the container
elementb2.innerHTML = sloganArray293b2[sloganIndex372b2];
// Progress the slogan index along by 1
++sloganIndex372b2;
// If the slogan index is at the last of the slogan array flip to 0
if (sloganIndex372b2 >= sloganArray293b2.length) {
sloganIndex372b2 = 0;
}
}
}
// Start the function when the very first animation frame is requested, aka when the browser is ready
window.requestAnimationFrame(renderb2);
const sloganArray293b21 = [
"الموقع يقدم أفضل المقالات عن التقنية وتطوير المواقع",
];
// Initial slogan index
let sloganIndex372b21 = 0;
// Slogan container
const elementb21 = document.getElementById("slogan471b21");
elementb2.innerHTML = sloganArray293b2[sloganIndex372b2];
// Set first slogan on renderb2
elementb21.innerHTML = sloganArray293b21[sloganIndex372b21];
// The last interval in which something changed, starting from 0 and will be updated by the function
let lastIntervalTimestampb21 = 0;
// Start of function
function renderb21(nowb21) {
// If the interval is 0
// or "right nowb2" minus timestamp is equal or higher than 4 seconds
// do the following
if (!lastIntervalTimestampb21 || nowb21 - lastIntervalTimestampb21 >= 8 * 1000) {
// Update the timestamp to right nowb2
lastIntervalTimestampb21 = nowb21;
// Update the slogan in the container
elementb21.innerHTML = sloganArray293b21[sloganIndex372b21];
// Progress the slogan index along by 1
++sloganIndex372b21;
// If the slogan index is at the last of the slogan array flip to 0
if (sloganIndex372b21 >= sloganArray293b21.length) {
sloganIndex372b21 = 0;
}
}
}
// Start the function when the very first animation frame is requested, aka when the browser is ready
window.requestAnimationFrame(renderb21);
const sloganArray293b22 = [
"فقط لا تنسى زيارتنا لمعرفة جديد الموقع",
];
// Initial slogan index
let sloganIndex372b22 = 0;
// Slogan container
const elementb22 = document.getElementById("slogan471b22");
// Set first slogan on renderb2
elementb22.innerHTML = sloganArray293b22[sloganIndex372b22];
// The last interval in which something changed, starting from 0 and will be updated by the function
let lastIntervalTimestampb22 = 0;
// Start of function
function renderb22(nowb22) {
// If the interval is 0
// or "right nowb2" minus timestamp is equal or higher than 4 seconds
// do the following
if (!lastIntervalTimestampb22 || nowb22 - lastIntervalTimestampb22 >= 12 * 1000) {
// Update the timestamp to right nowb2
lastIntervalTimestampb22 = nowb22;
// Update the slogan in the container
elementb22.innerHTML = sloganArray293b22[sloganIndex372b22];
// Progress the slogan index along by 1
++sloganIndex372b22;
// If the slogan index is at the last of the slogan array flip to 0
if (sloganIndex372b22 >= sloganArray293b22.length) {
sloganIndex372b22 = 0;
}
}
}
// Start the function when the very first animation frame is requested, aka when the browser is ready
window.requestAnimationFrame(renderb22);
const sloganArray293b23 = [
"ويمكنك التواصل معنا عبر ازرار التواصل التالية",
];
// Initial slogan index
let sloganIndex372b23 = 0;
// Slogan container
const elementb23 = document.getElementById("slogan471b23");
// Set first slogan on renderb2
elementb23.innerHTML = sloganArray293b23[sloganIndex372b23];
// The last interval in which something changed, starting from 0 and will be updated by the function
let lastIntervalTimestampb23 = 0;
// Start of function
function renderb23(nowb23) {
// If the interval is 0
// or "right nowb2" minus timestamp is equal or higher than 4 seconds
// do the following
if (!lastIntervalTimestampb23 || nowb23 - lastIntervalTimestampb23 >= 16 * 1000) {
// Update the timestamp to right nowb2
lastIntervalTimestampb23 = nowb23;
// Update the slogan in the container
elementb23.innerHTML = sloganArray293b23[sloganIndex372b23];
// Progress the slogan index along by 1
++sloganIndex372b23;
// If the slogan index is at the last of the slogan array flip to 0
if (sloganIndex372b23 >= sloganArray293b23.length) {
sloganIndex372b23 = 0;
}
}
}
// Start the function when the very first animation frame is requested, aka when the browser is ready
window.requestAnimationFrame(renderb23);
</script>
معاينة كود رقم 3
كود رقم 3
<div class="maincontainer034c3">
<div id="slogan471c3"><p>مرحباً بكم في موقع مو للمعلوميات</p></div>
<div id="slogan471c31"><p>الموقع يقدم أفضل المقالات عن التقنية وتطوير المواقع</p></div>
<div id="slogan471c32"><p></p>فقط لا تنسى زيارتنا لمعرفة جديد الموقع</div>
<div id="slogan471c33"><p></p>ويمكنك التواصل معنا عبر ازرار التواصل التالية</div>
<a href="#"><button class="btn930c3">إتصل بنا</button></a>
<a href="#"><button class="btn632c3">تعرف على منتجاتنا</button></a>
</div>
<style>
.maincontainer034c3{
width:100%;
height:300px;
margin:0 auto;
padding:0;
background:linear-gradient(rgba(0, 0, 0, 0.4), rgba(162, 150, 255, 0.4)), url(https://cdn.pixabay.com/photo/2017/11/27/21/31/computer-2982270_1280.jpg);
background-position:center;
background-repeat: no-repeat;
background-size: cover;
border-radius:10px;
text-align:center;
position:relative;
box-shadow:3px 3px 10px #000 , 3px -3px 10px #000 ;
transition:1000ms;
}
.maincontainer034c3:hover{
background:linear-gradient(rgba(0, 0, 0, 0.3), rgba(162, 150, 255, 0.3)), url(https://cdn.pixabay.com/photo/2017/11/27/21/31/computer-2982270_1280.jpg);
background-position:center;
background-repeat: no-repeat;
background-size: cover;
transform:translate(0px, 3px);
}
#slogan471c3{
text-align:center;
color:#fff;
font-size:30px;
font-family:cairo !important;
font-weight:bold;
padding-top: 10px;
text-shadow:3px 3px 10px #2a2a2a , 3px -3px 10px #2a2a2a ;
line-height:40px;
transition:300ms;
animation: obin432oUp 2s 1 ease;
}
#slogan471c31{
text-align:center;
color:#fff;
font-size:30px;
font-family:cairo !important;
font-weight:bold;
padding-top: 20px;
text-shadow:3px 3px 10px #2a2a2a , 3px -3px 10px #2a2a2a ;
line-height:40px;
transition:300ms;
animation: obin432oUp 3s 1 ease;
}
#slogan471c32{
text-align:center;
color:#fff;
font-size:30px;
font-family:cairo !important;
font-weight:bold;
padding-top: 20px;
text-shadow:3px 3px 10px #2a2a2a , 3px -3px 10px #2a2a2a ;
line-height:40px;
transition:300ms;
animation: obin432oUp 4s 1 ease;
}
#slogan471c33{
text-align:center;
color:#fff;
font-size:30px;
font-family:cairo !important;
font-weight:bold;
padding-top: 20px;
text-shadow:3px 3px 10px #2a2a2a , 3px -3px 10px #2a2a2a ;
line-height:40px;
transition:300ms;
animation: obin432oUp 5s 1 ease;
}
#slogan471c3 p , #slogan471c31 p , #slogan471c32 p ,#slogan471c33 p {
margin:0 auto;
}
.btn930c3{
padding:4px;
text-align:center;
font-family:cairo !important;
margin:50px auto 10px auto;
border-radius:10px;
cursor:pointer;
border:1px solid #fff;
background:linear-gradient(#fafafa,#e1e1e1);
font-size:18px;
color:#6e6e6e;
box-shadow:3px 3px 10px #e1e1e1 , 3px -3px 10px #e1e1e1 ;
position:absolute;
bottom:10px;
left:38%;
transition:300ms;
animation: obin432o 6s 1 ease;
}
.btn632c3{
padding:4px;
text-align:center;
font-family:cairo !important;
margin:50px auto 10px auto;
border-radius:10px;
cursor:pointer;
border:1px solid #fff;
background:linear-gradient(#fafafa,#e1e1e1);
font-size:18px;
color:#6e6e6e;
box-shadow:3px 3px 10px #e1e1e1 , 3px -3px 10px #e1e1e1 ;
position:absolute;
bottom:10px;
right:38%;
transition:300ms;
animation: obin432o 6s 1 ease;
}
.btn930c3:hover , .btn632c3:hover{
background:linear-gradient(#e1e1e1,#fafafa);
transform:scale(1.02);
color:darkblue;
}
@media (max-width:1510px) {
.btn930c3{
left:40%;
}
.btn632c3{
right:40%;
}
}
@media (max-width:1345px) {
.btn930c3{
left:39%;
}
.btn632c3{
right:39%;
}
}
@media (max-width:1222px) {
.btn930c3{
left:37%;
}
.btn632c3{
right:37%;
}
}
@media (max-width:1039px) {
.btn930c3{
left:35%;
}
.btn632c3{
right:35%;
}
}
@media (max-width:865px) {
.btn930c3{
left:33%;
}
.btn632c3{
right:33%;
}
}
@media (max-width:762px) {
.btn930c3{
left:30%;
}
.btn632c3{
right:30%;
}
#slogan471c3 , #slogan471c31 , #slogan471c32 , #slogan471c33 {
font-size:25px;
}
}
@media (max-width:665px) {
.btn930c3{
left:27%;
}
.btn632c3{
right:27%;
}
}
@media (max-width:638px) {
#slogan471c3 , #slogan471c31 , #slogan471c32 , #slogan471c33 {
font-size:20px;
}
}
@media (max-width:561px) {
.btn930c3{
left:24%;
}
.btn632c3{
right:24%;
}
}
@media (max-width:513px) {
#slogan471c3 , #slogan471c31 , #slogan471c32 , #slogan471c33 {
font-size:16px;
}
}
@media (max-width:500px) {
.btn930c3{
left:20%;
}
.btn632c3{
right:20%;
}
}
@media (max-width:430px) {
.btn930c3{
left:15%;
}
.btn632c3{
right:15%;
}
#slogan471c3 , #slogan471c31 , #slogan471c32 , #slogan471c33 {
font-size:16px;
padding-top: 5px;
text-shadow:1px 1px 5px #2a2a2a , 1px -1px 5px #2a2a2a ;
}
}
@media (max-width:369px) {
.btn930c3{
left:10%;
}
.btn632c3{
right:10%;
}
#slogan471c3 , #slogan471c31 , #slogan471c32 , #slogan471c33 {
font-size:16px;
padding-top: 2px;
}
}
@media (max-width:326px) {
.btn930c3{
left:5%;
}
.btn632c3{
right:5%;
}
}
@media (max-width:315px) {
#slogan471c3 , #slogan471c31 , #slogan471c32 , #slogan471c33 {
font-size:14px;
padding-top: 1px;
}
}
@-webkit-keyframes obin432o {
0% {
opacity: 0;
-webkit-transform: scale(.3);
}
50% {
opacity: 1;
-webkit-transform: scale(1.01);
}
70% {
-webkit-transform: scale(.9);
}
100% {
-webkit-transform: scale(1);
}
}
@keyframes obin432o {
0% {
opacity: 0;
transform: scale(.3);
}
50% {
opacity: 1;
transform: scale(1.01);
}
70% {
transform: scale(.9);
}
100% {
transform: scale(1);
}
}
.obin432o.go {
-webkit-animation-name: obin432o;
animation-name: obin432o;
}
@-webkit-keyframes obin432oUp {
0% {
opacity: 0;
-webkit-transform: translateY(400px);
}
60% {
-webkit-transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@keyframes obin432oUp {
0% {
opacity: 0;
transform: translateY(400px);
}
60% {
transform: translateY(-30px);
}
80% {
transform: translateY(10px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.obin432oUp.go {
-webkit-animation-name: obin432oUp;
animation-name: obin432oUp;
}
</style>
التعديل
الأمر بسيط للغاية بالبداية علينا إختيار نوع الخط للإضافة حتى تعمل معك بنوع الخط الذي تريده وإن كنت لا تعرف فيمكنك تخطي تلك الخطوة أما لو تعرف الخط الذي يعمل به القالب لديك أو صفحة الهبوط فيمكنك حينها تغيير نوع خط إضافة هيرو لنوع الخط الخاص بصفحتك أو موقعك وهو كالأتي نبحث عن الجملة
font-family:cairo !important;
ثم تقوم بتغيير الكلمة
cairo
وهو نوع الخط الذي أستخدمه لنوع الخط الذي تستخدمه أنت وستجد الجملة مكررة 3 مرات وعليك تغيير نوع الخط 3 مرات كذلك.
بعدها علينا تغيير صورة الخلفية للصورة التي تريدها أنت والأمر سهل جداً فقط عليك البحث عن الجملة
https://cdn.pixabay.com/photo/2017/11/27/21/31/computer-2982270_1280.jpg
وتغييرها برابط الصورة التي تريد وضعها كخلفية للإضافة وعليك مراعاة أن تكون مقاسات الصورة بالطول والعرض مناسبة للإضافة وكذلك يفضل أن تكون الصورة توضح محتوى الموقع وتعبر عنه وكذلك أن تحتوي على لوجو الموقع وستجد هذا الرابط موجود بالإضافة مرتين وعليك تغيير هذا الرابط مرتين أيضاً.
الأن لتغيير المحتوى الكتابي للأربع جمل فقط عليك البحث عن الجمل التالية جملة تلو الأخرى
مرحباً بكم في موقع مو للمعلوميات
الموقع يقدم أفضل المقالات عن التقنية وتطوير المواقع
فقط لا تنسى زيارتنا لمعرفة جديد الموقع
ويمكنك التواصل معنا عبر ازرار التواصل التالية
وتغيير تلك الجمل بالإضافة للجمل الدعائية التي تريد وضعها بدلاً من تلك فقط عليك مراعاة أن تكون الجمل صغيرة ولا تزيد بعدد الكلمات عن تلك الأربع جمل حتى لا يفسد التصميم وتتداخل العبارات والجمل فتلك الإضافة مكتوب عباراتها وجملها بعدد كلمات محدد مناسب لها وإن زاد عدد الكلمات بأي جملة فقد تفسد إسلوب عرض الإضافة وتتشابك الجمل بشكل ليس جيد.
وأما لتغيير الكلمات الموجودة بالأزرار فقط عليك البحث عن الجملتين
تعرف على منتجاتنا
إتصل بنا
وتغييرهما بأي كلمات تريد ولتغيير رابط كل زرار فقط عليك البحث بنفس السطر عن الجملة
href="#"
وستجدها موجودة ومكررة مرتين الأول للزرار الأول والثانية للزرار الثاني فقط كل ما عليك هو تغيير العلامة
#
بأي رابط تريد بداخل الموقع أو خارجه بحيث ينتقل الزائر لتلك الصفحة والرابط بالضغط على الزرار.
ونلاحظ أن خلفية الإضافة بها لون بنفسجي خفيف لتغييره فقط إبحث عن الجملة
rgba(162, 150, 255
وقم بتغيير الثلاثة خانات بثلاث أرقام لأي أرقام ألوان أخرى من نوع RGB ويمكنك إختيار كود اللون بالبحث بجوجل عن العبارة " html color picker " وتحدد اللون وتختار وبالترتيب خانات الأرقام للون من نوع RGB لتصل للون الذي تريده والذي يناسب موقعك وستجد الكود مرتين وعليك تغييره مرتين كذلك.
ولتغيير خلفية الأزرار إن كنت تريد ذلك ولا أنصح بذلك إلا إن كنت ملم بشكل جيد بتناسق الألوان ففي تلك الحالة عليك إختيار لونين فاتحين جداً أحدهم فاتح قليلاً والأخر فاتح للغاية فقط عليك البحث عن الجملة
#fafafa
وتغييرها لكود اللون الذي تريد وعليك تغيير هذا الكود بكود لون من نوع HEX فقط إبحث بجوجل عن العبارة " html color picker " وحدد اللون الذي تريده وإستبدله به وبنفس الطريقة إبحث عن الجملة
#e1e1e1
وإستبدلها باللون الثاني لتدرج الزرار بنفس الطريقة وستجد كل كود مكرر 3 مرات وعليك تغييره 3 مرات كذلك.
وأما عن تغيير لون الكتابة على الزرار فقط قم بالبحث عن الجملة
#6e6e6e
وستجدها مرتين وقم بتغييرها بكود لون أخر كما تم الشرح سابقاً وكذلك إبحث عن الجملة
darkblue
وغيرها لأي كود لون من نوع HEX وهو لون للخط يظهر عند تمرير سهم الماوس على الزرار.
وبالأخير لو كنت تريد تغيير لون الخط بالعبارات الأربعة فقط إبحث بالكود عن الجملة
color:#fff
وقم بتغيير الكود
#fff
لأي كود لون أخر بالطريقة التي تم شرحها سابقاً وأنصح بإختيار لون فاتح جداً أو كما هو مناسب لصورة الخلفية وألوان موقعك.
الأن أصبح لديك هيرو لصفحة الهبوط أو لموقعك مميز جداً وبمؤثرات مبهرة وشكل جمالي رائع ويمكنك تعديله بكل سهولة وبساطة ووضعه بمقالتك أو موقعك ليعمل بدون أية مشكلات ومتجاوب مع الموبايل وجميع مقاسات الشاشة وهو بالفعل سيضيف لصفحتك وموقعك لمسة إحترافية مميزة وبشكل مجاني تماماً.
الخلاصة
يجب عليك لكي تتفرد بشكل وطابع موقعك أو صفحتك وحتى بمقالتك أن تجعله إحترافي جداً وحديث ومميز بأحدث وأجمل الإضافات التي بالفعل ستغير من شكل الموقع بل ووظيفته للأفضل بمراحل ومن ضمن أهم الإضافات لعمل ذلك هيرو الصفحة أو واجهة الصفحة وإن وضعتها بالجمل الرنانة المحفزة والمنتجات والخدمات المهمة وبالشكل المطلوب بالتأكيد سيعود ذلك عليك بالنفع وبزيادة التفاعل الإيجابي للزوار وهو ما نطمح إليه جميعاً.
