ماژول کناری نمونه

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.

صفحه نخست

صفحات

ویژگی ها

افزونه ها

آموزش ها

ماژول کناری نمونه

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
نقشه گوگل
در برخی موارد نیاز داریم از html سفارشی برای استفاده از طرح بندی هایی که در این نسخه دمو در برخی ماژول ها نشان داده شده است ، استفاده کنیم.کد زیر در این قالب مورد استفاده قرار گرفته شده است:

ویدئودر صفحه اصلی:

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.


<div class="video_overlay_wrap video_large" style="max-height:700px;min-height:250px;background:url(images/video_preload.jpg);" data-sr="scale up 2%, over 0.5s, wait 0.8s">
<video muted autoplay="autoplay" loop="loop" src="images/video.mp4"></video>
<div class="video_overlay_text_wrap">
<div class="video_overlay_text_wrap_inner">
<h2>Business & Marketing Experts</h2>
The ultimate modern and corporate template for every type of business<br />
<a class="readon" href="index.php/features-mainmenu-47/template-specific-features" style="margin-right:13px;">Read More</a><a class="readon gray_readon" href="index.php/features-mainmenu-47/template-specific-features" style="margin-left:13px;">Features</a>
<div style="clear:both;height:0px;"></div>
</div>
</div>
</div>

متن وسط چین:

در هر موقعیتی می توان منتشر کرد


<div class="centered_text">
<h2>Ambient is the perfect choice for your business website</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipiicing elit sed do eiusmod tempor incid dunt ut lorem ipsum labore et dolore magna aliqua Aliquam adipiscing egestas leo Duis et erat aliquam.</span>
</div>

باکس آیکن:

این باکس ها مانند اسلاید برای نمایش S5 Tab منتشر می شود.اگر می خواهید تنها یک باکس تکی داشته باشید در موقعیتی که باکس تکی را منتشر می کنید از پسوند کلاس gray_no_padding- استفاده کنید.


<div class="icon_image_box_wrap">
<div class="icon_image_box_outer" style="visibility: visible; ">
<div class="icon_image_box">
<img src="/ambient/images/top4.jpg" alt="">
<div class="icon_outer_wrap">
<div class="icon_hover">
<a href="/ambient/index.php/features-mainmenu-47/template-specific-features" class="ion-link icon_element"></a>
</div>
<div class="icon_non_hover">
<span class="ion-ios-list icon_element"></span>
</div>
</div>
<h3><strong>Team</strong> Projects</h3>
<span class="icon_image_box_text">Eiusmod tempor incid dunt ut labore et dolore magna aliqua Lorem ipsum dolor sit amet, consectetur adipi icing elit sed do.</span>
</div>
</div>
<div class="icon_image_box_outer" style="visibility: visible; ">
<div class="icon_image_box">
<img src="/ambient/images/top5.jpg" alt="">
<div class="icon_outer_wrap">
<div class="icon_hover">
<a href="/ambient/index.php/features-mainmenu-47/template-specific-features" class="ion-link icon_element"></a>
</div>
<div class="icon_non_hover">
<span class="ion-android-chat icon_element"></span>
</div>
</div>
<h3><strong>Friendly</strong> Service</h3>
<span class="icon_image_box_text">Lorem ipsum dolor sit amet, consectetur adipi icing elit sed do eiusmod tempor incid dunt ut labore et lorem dolore magna aliqua.</span>
</div>
</div>
<div class="icon_image_box_outer" style="visibility: visible; ">
<div class="icon_image_box">
<img src="/ambient/images/top6.jpg" alt="">
<div class="icon_outer_wrap">
<div class="icon_hover">
<a href="/ambient/index.php/features-mainmenu-47/template-specific-features" class="ion-link icon_element"></a>
</div>
<div class="icon_non_hover">
<span class="ion-ipad icon_element"></span>
</div>
</div>
<h3><strong>Best</strong> Technology</h3>
<span class="icon_image_box_text">Aliquam ut mollis mi, id congue augue. Morbi diam ipsum, dictum vel erat et, interdum bibendum ipsum. In a lacinia risus lorem.</span>
</div>
</div>
<div style="clear:both;height:0px;"></div>
</div>

درباره شرکت ما:

این کد را می توانید در هر موقعیتی با پسوند white_large- استفاده کنید.برای سایز تصویر پس زمینه  مقدار cover تنظیم شده است که کل این بخش رو پوشش بدهد.


<div class="about_left">
<span class="sub_title">Small business connection, big business results</span>
Quisque non nibh sed metus commodo convallis. Duis a tellus ut neque laoreet fermentum. Sed ante sapien, aliquam dignissim ex eu, dapibus pellentesque velit. Fusce vestibulum porta turpis eu aliquet.
<br><br>
Nullam elementum ante sit amet fringilla facilisis. Donec tincidunt vehicula tincidunt. Proin tincidunt interdum risus, id imperdiet urna. Sed pulvinar vitae enim hendrerit consequat. Pellentesque pharetra eu tellus sed aliquam. Nunc mollis nibh et odio posuere, id semper eros pulvinar.
<br><br>
<a href="/ambient/index.php/features-mainmenu-47/template-specific-features" class="readon">Read More</a>
<div style="clear:both;height:0px;"></div>
</div>
<div class="about_right" style="visibility: visible; ">
<img src="/ambient/images/man.png" class="large_image" alt="">
<div style="clear:both;height:0px;"></div>
</div>
<div style="clear:both;height:0px;"></div>

باکس قیمت:

در هر موقعیتی می تواند منتشر داده شود.


<div class="price_display">

<div class="s5_pricetable_column" style="visibility: visible; ">
<div class="s5_pricetable_column_padding">
<div class="s5_title">Standard</div>
<div class="s5_price_wrap">
<span class="dollarsign">$</span><span class="price">299</span><span class="month">/per month</span>
</div>
<div class="s5_options">
<div class="s5_option">
4 Hours Coaching
</div>
<div class="s5_option">
Website Analysis
</div>
<div class="s5_option">
Audit Report
</div>
<div class="s5_option">
Phone Support
</div>
<div class="s5_option">
Team Development
</div>
</div>

</div>
</div>

<div class="s5_pricetable_column recommended" style="visibility: visible; ">
<div class="s5_pricetable_column_padding">
<div class="s5_title">Platinum</div>
<div class="s5_price_wrap">
<span class="dollarsign">$</span><span class="price">499</span><span class="month">/per month</span>
</div>
<div class="s5_options">
<div class="s5_option">
20 Hours Coaching
</div>
<div class="s5_option">
Website Analysis
</div>
<div class="s5_option">
Complete Financial Report
</div>
<div class="s5_option">
Individualized Support
</div>
<div class="s5_option">
Team Flow Chart
</div>
</div>

</div>
</div>
<div style="clear:both;height:0px;"></div>
</div>

نظرات مشتریان:

این مطلب یک ماژول از نوع S5 Tab Show می باشد.در مدیریت این ماژول برای تب ها می توان از تصاویر استفاده کرد.در زیر متن مورد استفاده برای هر نقل قول وجود دارد.


<div class="customer_quote">
“Lorem ipsum dolor sit amet, consectetur aled leium adipiscing elit. Donec et eleifend libero dignissim sit ametlobo tis vestibulum lorem ipsum ligula et malesuada fames ac ante ipsum primis in faucibus.”<br>
<span class="customer_quote_name">
<strong>Bruce Washington</strong>
<span class="ion-android-star active_star"></span>
<span class="ion-android-star active_star"></span>
<span class="ion-android-star active_star"></span>
<span class="ion-android-star active_star"></span>
<span class="ion-android-star inactive_star"></span>
</span>
</div>

ردیف آمار:

در هر موقعیتی می توان منتشر داد.در کد زیر میتوانید رنگ  هر کدام از باکس ها و آیکن ها را تغییر دهید.


<div class="stats_row">
<div class="stats_1 stats_item" style="background:#0E5B90;; visibility: visible; ">
<span class="ion-coffee stats_icon"></span>
<span class="stats_number">2523</span>
<span class="stats_text">Cups of Coffee</span>
</div>
<div class="stats_2 stats_item" style="background:#1782CC;; visibility: visible; ">
<span class="ion-person-stalker stats_icon"></span>
<span class="stats_number">213</span>
<span class="stats_text">Clients Worked</span>
</div>
<div class="stats_3 stats_item" style="background:#1EA0FB;; visibility: visible; ">
<span class="ion-folder stats_icon"></span>
<span class="stats_number">587</span>
<span class="stats_text">Projects Done</span>
</div>
<div class="stats_4 stats_item" style="background:#6FC2FC;; visibility: visible; ">
<span class="ion-gear-b stats_icon"></span>
<span class="stats_number">4715</span>
<span class="stats_text">Hours of Work</span>
</div>
<div style="clear:both;height:0px;"></div>
</div>

>محل نوشته پایین سایت:

می تواند در هر موقعیتی انتشار داده شود.


<div class="bottom_text_boxes">
<div class="bottom_text_left" style="visibility: visible; ">
<h3>Take Your Marketing To The Next Level</h3>
Lorem ipsum dolor sit amet, consectetur aled leium adipiscing elitd onec ete lorem.<br>
<a href="/ambient/index.php/features-mainmenu-47/template-specific-features" class="readon">Read More</a>
</div>
<div class="bottom_text_right" style="visibility: visible; ">
<h3>We Work For You</h3>
Aled leium adipiscing elit. Donec et eleifend libero dignissim sit ametlobo tis vestibulum lorem ipsum ligula et malesuada fames ac ante ipsum primis.
</div>
<div style="clear:both;height:0px;"></div>
</div>

آیکن شبکه های اجتماعی و شماره تماس ها:

در موقعیت custom_1 انتشار داده شود.چیزی که در تصویر زیر می بینید در واقع دو ماژولی است که در موقعیت custom_1 منتشر شده است.


<strong>1-800-555-1212</strong><br>
<strong><a href="javascript:;">info@domain.com</a></strong>
<a href="http://www.facebook.com/shape5.templates" target="_blank" class="social_icon ion-social-facebook"></a>
<a href="https://twitter.com/shape_5" target="_blank" class="social_icon ion-social-twitter"></a>
<a href="javascript:;" class="social_icon ion-social-googleplus"></a>
<a href="javascript:;" class="social_icon ion-social-rss"></a>
ماژول Mail Chimp Signup در این صفحه نمایش داده می شود.این ماژول قدرت گرفته از آجاکس است و به کاربران این اجازه را می دهد که مستقیما ثبت نام کرده و در لیست MailChimp اضاف شود و مدیر این ماژول را شما تعیین کنید. همه آنچه که شما لازم است انجام بدهید این است که List ID و MailChimp API Key که منحصر به فرد شماست، را وارد کنید.طرح بندی ماژول که در اینجا نشان داده شده است، اختصاصا برای این قالب به همراه باز نویسی css سفارشی سازی شده است و نمی توان آن را برای سایر قالبها به کار برد.همین ماژول می تواند با سایر قالب ها نیز به کار رود ولی با طرح بندی پیش فرض یا سایر طرح بندی ها در جای خودش.

ماژول پاپ آپ تماس سریع ترین روش برای ارسال ایمیل بازدیدکنندگان سایت به شما است.این ماژول توسط پلاگین قدرتمند کپچا ی گوگل محافظت شده است و برای بررسی خطا و ارسال ایمیل از آجاکس استفاده می کند.https://www.google.com/recaptcha.اطمینان حاصل کنید که تابع پی اچ پی mail() بر روی سرور شما فعال شده و ایمیلی از ماژول ارسال نمی شود. این ماژول در موقعیت گوشه پایین سمت راست سایت قرار می گیرد..

پیشنهاد می کنیم این ماژول را در موقعیت پایین سایت منتشر کنید.به عنوان مثال این ماژول در این نسخه نمایشی در موقعیت "bottom_menu" منتشر شده است.

توجه: این یک گفتگوی زنده نیست ، بلکه فقط ایمیل ارسال می کند.

امکانات در یک نگاه:

  • قدرت گرفته از آجاکس
  • Google reCaptchaکنترل اسپم از طریق
  • تنظیم رنگ و رنگ hover
  • نام، ایمیل و پیام را وارد کنید و دکمه ارسال را بزنید
  • ارسال ایمیل با استفاده از تابع پی اچ پی ()mail
آیکون Ion یک نوع فونت آیکنی است که مانند وکتور مقیاس پذیر است و می توان با استفاده از دستور Css فونت، رنگ ، پس زمینه و افکت hover و سایر خصوصیات را سفارشی سازی کرد . در زیر چند نمونه از این ویژگی ها را در عمل می بینید. برای مشاهده لیست تمامی آیکون هایی که در دسترس هستند به سایت http://ionicons.com/ مراجعه کنید.

نمونه آیکون های مدور:

<div class="icon_outer_wrap">
<div class="icon_hover">
<a href="" class="ion-link icon_element"></a>
</div>
<div class="icon_non_hover">
<span class="ion-headphone icon_element"></span>
</div>
</div>


نمونه های Icon:

<span class="ion-camera" style="display: inline-block;font-size:2.5em;"></span>




نمایش استایل شیت کامل

ویژگی اسکرول صفحه توسط اسکریپتی که در آدرس زیر یافت می شود ساخته شده است: https://github.com/julianlloyd/scrollReveal.js این اسکریپت به شما اجازه افزودن "data-scroll-reveal" به عناصر HTML برای ساختن اسکرول متحرک را می دهد. پیشنهاد ما اینست که به DIV یا SPAN اضافه شود. DIV فقط می تواند حرکت دهد در حالیکه تگ SPAN برای محو کردن آن است. وقتی شما کد را به DIV اضافه کردید، صفحه را دوباره لود کنید و به پایین اسکرول کنید و می بینید که متحرک می شود. البته این حرکت یک بار انجام خواهد شد تا زمانی که شما صفحه را دوباره لود کنید. ویژگی بزرگ این اسکریپت اینست که می توانید از انگلیسی ساده برای توضیح اینکه چطور عناصر HTML میخواهد متحرک شود استفاده کنید.

نمونه آن در عمل ( اگر چیزی ندیدید دوباره صفحه را لود کنید):

ورود از چپ و رفتن 50px به بالا در 1.33 ثانیه
ورود از پایین بعد از یک ثانیه
2.5 ثانیه صبر کردن و سپس 100 پیکسل باز شدن


کد استفاده شده برای بالا:

<div data-scroll-reveal="enter left and move 50px over 1.33s"> Enter from the left and move up 50px in 1.33 seconds. </div>

<div data-scroll-reveal="enter from the bottom after 1s"> Enter from the bottom after 1 second. </div>

<div data-scroll-reveal="wait 2.5s and then ease-in-out 100px"> Wait 2.5 seconds and then ease-in-out 100px. </div>

کاربرد:

برای بحث و اطلاعات بیشتر در مورد این ویژگی به اینجا مراجعه کنیدhttps://github.com/julianlloyd/scrollReveal.js

نقشه گوگل

  • fa-IR
  • English (UK)