Sidebar Embed Paragraph
Droopler Documentation
Paragraph settings
{"custom_class":"theme-primary","heading_type":"h1"}
Full Example
If you need to insert some external iframe to your website, use Side Embed Paragraph. It is perfect for maps and videos. Below you can a fully responsive Google Maps widget. It stretches when you resize the browser window.
Paragraph settings
{"custom_class":" theme-default","heading_type":"h2"}
Main Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum mi elit, id commodo ligula viverra vitae. Aliquam lorem diam, lobortis at ante et, gravida blandit enim. Ut bibendum egestas sem. Nulla porttitor lorem in erat maximus, id vulputate est auctor. Curabitur consectetur nec ante ac ornare. Nam aliquam elit ex. Nam feugiat nulla pulvinar nunc commodo, eget faucibus mauris egestas.
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d10019.548437096011!2d16.9733284!3d51.110543!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x15d28d9cdc4aa64f!2sDroptica+Sp.+z+o.o.!5e0!3m2!1spl!2spl!4v1534140503730" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
{"custom_class":" theme-default","heading_type":"h2","embed_layout":"right"}
Main Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum mi elit, id commodo ligula viverra vitae. Aliquam lorem diam, lobortis at ante et, gravida blandit enim. Ut bibendum egestas sem. Nulla porttitor lorem in erat maximus, id vulputate est auctor. Curabitur consectetur nec ante ac ornare. Nam aliquam elit ex. Nam feugiat nulla pulvinar nunc commodo, eget faucibus mauris egestas.
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d10019.548437096011!2d16.9733284!3d51.110543!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x15d28d9cdc4aa64f!2sDroptica+Sp.+z+o.o.!5e0!3m2!1spl!2spl!4v1534140503730" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
{"custom_class":"theme-secondary full-example","embed_layout":"left"}
Full-Width Example
There is a "Full width" layout available. It spans the embed 100% width and pulls the description to the left. If you select the "Invert colors" option, the text background becomes white.
Paragraph settings
{"custom_class":" theme-default","heading_type":"h2"}
Main Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum mi elit, id commodo ligula viverra vitae. Aliquam lorem diam, lobortis at ante et, gravida blandit enim. Ut bibendum egestas sem. Nulla porttitor lorem in erat maximus, id vulputate est auctor. Curabitur consectetur nec ante ac ornare. Nam aliquam elit ex. Nam feugiat nulla pulvinar nunc commodo, eget faucibus mauris egestas.
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d10019.548437096011!2d16.9733284!3d51.110543!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x15d28d9cdc4aa64f!2sDroptica+Sp.+z+o.o.!5e0!3m2!1spl!2spl!4v1534140503730" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
{"custom_class":"theme-secondary full-width-example","embed_layout":"full"}
YouTube Example
Side Embed can contain a video from YouTube, Dailymotion, and other providers. Just copy the iframe code to Droopler. The responsiveness of the video depends on its source, as you can see below, Youtube embeds do not stretch in the container. Instead, they get black borders.
Paragraph settings
{"custom_class":" theme-default","heading_type":"h2"}
Main Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum mi elit, id commodo ligula viverra vitae. Aliquam lorem diam, lobortis at ante et, gravida blandit enim. Ut bibendum egestas sem. Nulla porttitor lorem in erat maximus, id vulputate est auctor. Curabitur consectetur nec ante ac ornare. Nam aliquam elit ex. Nam feugiat nulla pulvinar nunc commodo, eget faucibus mauris egestas.
<iframe allow="autoplay" width="560" height="315" src="https://www.youtube.com/embed/6yO16tVGC1w?showinfo=0&rel=0&modestbranding=1&title=&fs=0&controls=0" frameborder="0" allowfullscreen=""></iframe>
{"custom_class":"youtube-example theme-default","embed_layout":"left"}
