Como configurar POP UPS – O MECANISMO CONSTRUTOR DE WEBSITES

Para usar um dos pop-ups em sua página de destino, você precisará adicionar o código pop-up à página, para isso basta copiar o código pop-up daqui e colá-lo na origem de qualquer seção no construtor após o código existente e o pop-up trabalhe na página inteira, para abrir o pop-up a partir de um link ou botão, basta alternar o construtor para o modo “Details” , pressionar o link ou o botão e, em seguida, colocar o #popup_id no campo de link, por exemplo # popup_1.

Você pode assistir a este vídeo para Edição e personalização de pop-ups predefinidos do PixBuilder: 
https://www.youtube.com/watch?v=-AEWipK9HR8&list=PLhuQqRln0YTH0bk1_akRxB62iYwTIM81r

Se você não estiver usando qualquer uma das secções pop-up pré-definidos no construtor, então você tem que adicionar o código do pop-up para a página, e para isso basta copiar o código do pop-up a partir do artigo da base de conhecimento e colá-lo em fonte de qualquer seção na construtor após o código existente e o pop-up funcionará em toda a página, para adicionar o pop-up a links e botões, basta alternar para o modo Details , pressionar o link ou o botão e, em seguida, colocar o #popup_id no campo link exemplo # popup_1 .

Para editar o pop-up, basta alternar para o modo de content , pressionar o link ou o botão do pop-up e alternar para Detail mode e personalizar o estilo pop-up como a explicação no vídeo.

Escolha aqui qual o melhor POP UP para representar seu projeto.

POP UP  – 1   POP UP  – 2   POP UP  – 3   POP UP  – 4   POP UP  – 5   POP UP  – 6   POP UP  – 7   POP UP  – 8   POP UP  – 9   POP UP  – 10   POP UP  – 11   POP UP  – 12

 

Popup id is #popup_1

<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>
</div>

 

Popup id is #popup_2

<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>
</div>

 

Popup id is #popup_3

<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>
</div>

 

Popup id is #popup_4

<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>
</div>

 

Popup id is #popup_5

<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>
</div>

 

Popup id is #popup_6

<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>
</div>

 

Popup id is #popup_7

<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>
</div>

 

Popup id is #popup_8

<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>
</div>

 

Popup id is #popup_9

<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>
</div>

 

Popup id is #popup_10

<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>
</div>

 

Popup id is #popup_11

<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>
</div>

 

Popup id is #popup_12

<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!1s0x47
e66e1f06e2b70f%3A0x40b82c3688c9460!2sParis%2C+France!5e0!3m2!1sen!2s!4v1408382253934″></iframe>
               </div>
           </div>
       </div>
   </div>
</div>