Hướng dẫn tạo Popup cho Landing Page

Video hướng dẫn cài POPUP cho LandingPage 1

Video hướng dẫn cài POPUP cho LandingPage 2

#popup_1

[code language=”html”]
<div id="popup_1" class="well pix_popup  pop_hidden" >
<div class="center_text">
<div class="big_icon light_blue">
<span class="pi pixicon-paperplane"></span>
</div>
<span class="editContent"><h4 class="margin_bottom"><strong>Subscription Form</strong></h4></span>
<p  class="editContent">You can add unlimited fields directly from HTML</p>
<form id="contact_form" class="pix_form">
<div id="result"></div>
<input type="text" name="NAME" id="name" placeholder="Your Full Name" class="pix_text">
<input type="email" name="email" id="email" placeholder="Your Email" class="pix_text">
<input type="text" name="NUMBER" id="number" placeholder="Your Phone Number" class="pix_text">
<span class="send_btn">
<button type="submit" class="submit_btn pix_text" id="submit_btn_6">
<span class="editContent">Send Information</span>
</button>
</span>
<span class="pix_text"><span class="pix_note editContent">*Some dummy text goes here.</span></span>
</form>
</div>
[/code]

#popup_2

[code language=”html”]
<div id="popup_2" class="well pix_popup pop_style_1 pop_hidden light_gray_bg">
    <div class="center_text ">
        <div class="big_icon dark_red">
            <span class="pi pixicon-clipboard2"></span>
        </div>
        <span class="editContent"><h4 class="margin_bottom pix_text"><strong>Reservation Form</strong></h4></span>
        <p class="editContent">You can add unlimited fields directly from HTML</p>
        <form id="contact_form" class="pix_form">
            <div id="result"></div>
            <input type="text" name="name" id="name" placeholder="Your Full Name" class="pix_text">
            <input type="email" name="email" id="email" placeholder="Your Email" class="pix_text">
            <input type="text" name="number" id="number" placeholder="Your Phone Number" class="pix_text">
            <select name="numberp" class="pix_text">
                <option value="1">One Person</option>
                <option value="2">Two Person</option>
                <option value="3">Three Person</option>
                <option value="+4">More</option>
            </select>
            
            <span class="send_btn">
                <button type="submit" class="orange_bg submit_btn pix_text" id="submit_btn_6">
                    <span class="editContent">Send Information</span>
                </button>
            </span>
            <span class="pix_text"><span class="pix_note editContent">*Some dummy text goes here.</span></span>
        </form>
    </div>
[/code]

#popup_3

[code language=”html”]
<div id="popup_3" class="well pop_hidden">
  <div class="sixteen columns pix_popup">
  <div class="eight columns alpha">
    <div class="center_text pix_popup2">
        <div class="big_map">
          <h4 class="bold_text margin_bottom">Contact Information</h4>
          <p>You can add unlimited fields directly from HTML</p>
          <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d83998.91163207508!2d2.3470599!3d48.85885894999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e1f06e2b70f%3A0x40b82c3688c9460!2sParis%2C+France!5e0!3m2!1sen!2s!4v1408382253934"></iframe>
        </div>
    </div>

    </div>

    <div class="eight columns omega">
    <div class="center_text pix_popup2">
        <div class="big_icon green_blue">
            <span class="pi pixicon-map2"></span>
        </div>
        <span class="editContent"><h4 class="margin_bottom pix_text"><strong>Contact Form with Map</strong></h4></span>
        <p class="editContent">You can add unlimited fields directly from HTML</p>
        <form id="contact_form" class="pix_form">
            <div id="result"></div>
            <input type="text" name="name" id="name" placeholder="Your Full Name" class="pix_text">
            <input type="email" name="email" id="email" placeholder="Your Email" class="pix_text">
            <textarea name="message" rows="3" id="message" placeholder="Your Message" class="pix_text"></textarea>
            <span class="send_btn">
                <button type="submit" class="submit_btn green_blue_bg pix_text" id="submit_btn_6">
                    <span class="editContent">Send Information</span>
                </button>
            </span>
            <span class="pix_text"><span class="pix_note editContent">*Some dummy text goes here.</span></span>
        </form>
    </div>

    </div>
    </div></pre>
<pre>[/code]

#popup_4

[code language=”html”]
<div id="popup_4" class="well pix_popup pop_hidden" pix-class="subscribe_popup">
    <div class="center_text">
        <span class="editContent"><h4 class="margin_bottom pix_text"><strong>Subscription Form</strong></h4></span>
        <p class="editContent">You can add unlimited fields directly from HTML</p>
        <form id="contact_form" class="pix_form">
            <div id="result"></div>
            <input type="email" name="email" id="email" placeholder="Enter Your Email" class="pix_text">
            <span class="send_btn">
                <button type="submit" class="submit_btn pix_text" id="submit_btn_6">
                    <span class="editContent">Subscibe To Newsletter</span>
                </button>
            </span>
        </form>
    </div></pre>
<pre>[/code]

#popup_5

[code language=”html”]
<div id="popup_5" class="well pix_popup pop_hidden">
    <div class="center_text">
        <div class="big_icon orange">
            <span class="pi pixicon-envelope"></span>
        </div>
        <h4 class="bold_text margin_bottom">Contact Form</h4>
        <p>You can add unlimited fields directly from HTML</p>
        <form id="contact_form" class="pix_form ">
            <div id="result"></div>            
            <input type="email" name="email" id="email" placeholder="Your Email" class="pix_text">
            <textarea name="message" rows="3" id="message" placeholder="Your Message" class="pix_text"></textarea>
            <span class="send_btn">
                <button type="submit" class="submit_btn green_1_bg pix_text" id="submit_btn_6">
                    <span class="editContent">Send Information</span>
                </button>
            </span>
            <span class="pix_note">*Some dummy text goes here.</span>
        </form>
    </div></pre>
<pre>[/code]

#popup_6

[code language=”html”]
<div id="popup_6" class="well pix_popup pop_hidden blue_bg dark">
    <div class="center_text ">
        <span class="editContent"><h4 class="margin_bottom pix_text"><strong>Subscription Form</strong></h4></span>
        <p class="editContent">You can add unlimited fields directly from HTML Builder</p>
        <form id="contact_form" class="pix_form">
            <div id="result"></div>
            <input type="text" name="name" id="name" placeholder="Your Full Name" class="pix_text">
            <input type="email" name="email" id="email" placeholder="Enter Your Email" class="pix_text">
            <span class="send_btn">
                <button type="submit" class="submit_btn pix_text orange_bg" id="submit_btn_6">
                    <span class="editContent">Subscibe To Newsletter</span>
                </button>
            </span>
        </form>
    </div></pre>
<pre>[/code]

#popup_7

[code language=”html”]
<div id="popup_7" class="well pix_popup  pop_hidden " >
    <div class="center_text">
        <div class="big_icon orange">
            <span class="pi pixicon-flag2"></span>
        </div>
        <span class="editContent"><h4 class="margin_bottom pix_text"><strong>Additional Informations</strong></h4></span>
        <p class="editContent">You can add unlimited fields directly from HTML via FLATPACK form builder</p>
        <form id="contact_form" class="pix_form">
            <div id="result"></div>        
            <div class="ten ">
                <div class="five columns">
                    <div class="small_padding_right">
                        <input type="email" name="email" id="email" placeholder="Your Email" class="" class="pix_text">
                    </div>
                </div>
                <div class="five columns">
                        <input type="text" name="name" id="name" placeholder="Your Full Name" class="pix_text">
                </div>
            </div>    

            <textarea name="message" rows="3" id="message" placeholder="Your Message" class="pix_text"></textarea>
            <span class="send_btn">
                <button type="submit" class="submit_btn green_1_bg pix_text" id="submit_btn_6">
                    <span class="editContent">Send Information</span>
                </button>
            </span>
            <span class="pix_text"><span class="pix_note editContent">*Some dummy text goes here.</span></span>
        </form>
    </div>
[/code]

#popup_8

[code language=”html”]
<div id="popup_8" class="well pix_popup  pop_hidden" >
    <div class="center_text">
        <div class="big_icon dark_yellow">
            <span class="pi pixicon-video2"></span>
        </div>
        <span class="editContent"><h4 class="normal_title margin_bottom pix_text"><strong>Video Popup</strong></h4></span>
        <p class="editContent">You can edit the popup directly from PixBuilder</p>
        <span class="pix_video">
            <iframe width="560" height="315" src="https://www.youtube.com/embed/Da4pTvROe78?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
        </span>
    </div>
[/code]

#popup_9

[code language=”html”]
<div id="popup_9" class="well pix_popup  pop_hidden" >
    <div class="center_text">
        <div class="pix_inline_block">
        <div class="six columns">
            <span class="editContent"><h4 class="normal_title margin_bottom pix_text"><strong>Popup With Buttons</strong></h4></span>
                <p class="editContent">Seamlessly empower fully researched growth strategies and interoperable internal.</p>
                <a href="#" class="pix_button btn_normal green_1_bg pix_button_flat bold_text"><i class="pi pixicon-layout"></i>
                    <span class="editContent">First Button</span>
                </a>
                <a href="#" class="pix_button btn_normal orange_bg pix_button_flat bold_text"><i class="pi pixicon-image"></i>
                    <span class="editContent">Second Button</span>
                </a>
            </div>
        </div>
    </div>
[/code]

#popup_10

[code language=”html”]
<div id="popup_10" class="well pop_hidden" pix-class="subscribe_popup">
    <div class="h_padding margin_vertical">
        <div class="center_text margin_bottom_30 margin_vertical">
            <span class="editContent"><h4 class="margin_bottom pix_text"><strong>Subscription Form</strong></h4></span>
            <p class="light_gray editContent">Seamlessly empower fully researched growth strategies and interoperable internal.</p>
        </div>
        <form id="contact_form" class="pix_form ">
            <div class="sixteen columns center_text">
                <div id="result"></div>
            </div>
            <div class="clearfix"></div>
            <div class="sixteen columns center_text">
                <div class="one-third column alpha">
                    <input type="text" name="name" id="name" placeholder="Your Full Name" class="pix_text">
                </div>
                <div class="one-third column">
                    <input type="email" name="email" id="email" placeholder="Your Email" class="" class="pix_text">
                </div>
                <div class="one-third column omega">
                    <span class="send_btn">
                        <button type="submit" class="submit_btn green_1_bg pix_text" id="submit_btn_6">
                            <span class="editContent">Send Information</span>
                        </button>
                    </span>
                </div>
            </div>
            <div class="clearfix"></div>
        </form>
    </div>
[/code]

#popup_11

[code language=”html”]
<div id="popup_11" class="well pix_popup pop_hidden">
    <div clas="sixteen columns pix_inline_block">
        <div class="pix_inline_block">
            <div class="center_text ten columns">            
                <div class="big_icon dark_yellow">
                    <span class="pi pixicon-mobile"></span>
                </div>
                <div class="pix_inline_block">
                <div>
                    <span class="editContent"><h4 class="normal_title margin_bottom pix_text"><strong>Popup For Applications</strong></h4></span>
                    <p class="editContent">Seamlessly empower fully researched growth strategies and interoperable internal empower fully researched Applications stores.</p>
                    <a href="#" class="pix_button dark_gray pix_button_line bold_text margin_h margin_v"><i class="pi pixicon-apple"></i>
                        <span class="editContent">Apple Store</span>
                    </a>
                    <a href="#" class="pix_button green_1 pix_button_line bold_text margin_h margin_v"><i class="pi pixicon-android"></i>
                        <span class="editContent">
                            Google Play
                        </span>
                    </a>
                    <a href="#" class="pix_button blue_text pix_button_line bold_text margin_h margin_v"><i class="pi pixicon-windows8"></i>
                        <span class="editContent">
                            Windows Store
                        </span>
                    </a>
                </div>
                </div>
            </div>
        </div>
    </div>
[/code]

#popup_12

[code language=”html”]
<div id="popup_12" class="well pop_hidden">
    <div class="sixteen columns pix_popup">
        <div class="eight columns alpha">
            <div class="pix_popup2">
                <div class="big_icon left_text green_blue">
                    <span class="pi pixicon-briefcase2"></span>
                </div>
                <span class="editContent"><h4 class="normal_title margin_bottom pix_text"><strong>Business-y Details</strong></h4></span>
                <p class="normal_text editContent">
                    <strong>Postal Address</strong><br>
                        PO Box 16122 Collins Street West<br>
                        Victoria 8007 Australia<br>
                    <strong>Envato Headquarters</strong><br>
                        121 King Street, Melbourne <br>
                        Victoria 3000 Australia<br>
                    <strong>Envato Pty Ltd</strong><br>
                        ABN 11 119 159 741<br>
                    <strong>Phone: +61 3 8376 6284</strong><br>
                </p>
                <p class="normal_text light_gray editContent">
                    Support requests are not handled by phone. You can get help quickly and easily at the Envato Help Center.
                </p>
                
            </div>
        </div>
        <div class="eight columns omega">
            <div class="center_text pix_popup2">
                <div class="big_map">
                  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d83998.91163207508!2d2.3470599!3d48.85885894999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e1f06e2b70f%3A0x40b82c3688c9460!2sParis%2C+France!5e0!3m2!1sen!2s!4v1408382253934"></iframe>
                </div>
            </div>
        </div>
    </div>
[/code]