Speech Bubble Tutorial
<div class="speech-bubble3 round float" style="background: linear-gradient(#b3b3b3, #fff);">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec sapien dui. Nunc leo dui, accumsan eget scelerisque non, cursus sit amet sem. Duis luctus tellus egestas enim rutrum, nec venenatis arcu lacinia."<br /></div>
Step 1
- Copy all of the text to the left.
Step 2
For this example we have chosen to use the 3 column text section.
Other compatible sections and examples are shown below this tutorial.
- Drag and drop the section onto your page.
Step 3
- Double-click the section to edit the text.
- Click the Source button in the Body Text area.
- Paste your copied text in the body section.
Step 4
Replace the text highlighted with your own quote.
<div class="speech-bubble3 round float" style="background: linear-gradient(#b3b3b3, #fff);">"I find maths challenging but other times ok. I find long multiplication confusing but the teachers always support us and give us time to practice."<br />
Year 2 Pupil</div>
1 Column Speech Bubbles
The section we used to create this Speech Bubble was the standard 1 column text box, example shown to the left.
Year 4 Pupil
2 Columns Speech Bubbles
The section we used to create this Speech Bubble was the 2 column text/image section, example shown to the left.
Year 4 Pupil
Year 4 Pupil
3 Columns Speech Bubbles
The section we used to create this Speech Bubble was the 3 column text/image section, example shown to the left.
Year 4 Pupil
Year 4 Pupil
Year 4 Pupil
4 Columns Speech Bubbles
The section we used to create this Speech Bubble was the 4 column text/image section, example shown to the left.
Year 4 Pupil
Year 4 Pupil
Year 4 Pupil
Year 4 Pupil