Czytelność i przejrzystość treści zamieszczonych na blogu ma ogromny wpływ na długość pozostania użytkownika na stronie internetowej. Dlatego tak ważne jest zastosowanie odpowiedniego formatowania w treści artykułów.

Poniżej znajdziesz wiele przykładów, które mogą Cię zainspirować do zastosowania na swoim blogu o ile używasz systemu StarFunnel. Artykuł ten będzie stale aktualizowany o nowe style, które zostaną dodane do szablonu bloga.

Zobacz jak wykorzystaliśmy style w naszych artykułach

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

button button button-4

<a class="button" href="#">Text</a> or <a class="button button-4" href="#">Text</a>

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

button button-2 button button-3

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

button button-red button button-3 button-red

Praesent id dolor non erat viverra volutpat. Fusce tellus libero, luctus adipiscing, tincidunt vel, egestas vitae, eros. Vestibulum mollis, est id rhoncus volutpat, dolor velit tincidunt neque, vitae pellentesque ante sem eu nisl.

Donec facilisis, magna eget elementum pellentesque, augue arcu aliquet eros, eget convallis mauris ante quis magna.

button button-grey button button-grey button-large

Mauris lobortis. Aliquam lacinia purus. Pellentesque magna. Mauris euismod metus nec tortor. Phasellus elementum, quam a <code>To write a source code or info!</code> imperdiet, ligula felis faucibus enim, eu malesuada nunc felis sed turpis. Morbi convallis luctus tortor. Integer bibendum lacinia velit. Suspendisse mi lorem, porttitor ut, interdum et, lobortis a, lectus.

button button-block

Duis eu ante. Integer at sapien. Praesent sed nisl tempor est pulvinar tristique. Maecenas non lorem quis mi laoreet adipiscing.

<blockquote> <p>Text quote</p><small>Someone famous<cite title="Source Title"></cite></small> </blockquote>
Someone famousSource Title

Vestibulum mollis, est id rhoncus volutpat, dolor velit tincidunt neque, vitae pellentesque ante sem eu nisl. Donec facilisis, magna eget elementum pellentesque.

button button-blue button button-blue button-xlarge

Donec facilisis, magna eget elementum pellentesque, augue arcu aliquet eros, eget convallis mauris ante quis magna.

<pre><p>Sample text here…</p></pre>

button button-grey button-small button button-grey button-xsmall

Nam id turpis sit amet neque cursus luctus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque id tortor. In vitae sapien. Nunc quis tellus.

button button-orange button button-orange button-medium

Font Awesome

Go to the website for list of free icons https://fontawesome.com/icons?d=gallery&m=free

Choose an icon from the list or search by name:

Copy the code of the selected icon

Type in HTML <i class="fas fa-address-book"></i> to have icon

Additional Styling

<i class="fas fa-camera-retro fa-xs"></i>

<i class="fas fa-camera-retro fa-sm"></i>

<i class="fas fa-camera-retro fa-lg"></i>

<i style="color:green" class="fas fa-camera-retro fa-2x"></i>

<i style="color:orange" class="fas fa-camera-retro fa-3x"></i>

<i style="color:blue" class="fas fa-camera-retro fa-5x"></i>

<i style="color:red" class="fas fa-camera-retro fa-7x"></i>

<i style="color:tomato" class="fas fa-camera-retro fa-10x"></i>

More tuttorials from Font Awesome