Additional CSS classes: Media & Text Block- full width image

In the Astratic Theme, we have added new CSS classes that allow you to create an element in the full width of the screen. On one side there is a graphic / photo / movie and on the other side there is text on a colored background.

In addition, the element is responsive, it works so that on a small display the graphics / photo / movie will be positioned above or below (depending on what class we use) the text on the background.

How to use the CSS class?

  • In the editor, add a group block:
Group block
  • Set group width to ‘Full width’
Full width
  • In the block settings, add one of the 4 new classes
CSS classes
 --half-cover-right-responsive-img-bottom

sets the photo / video on the right and with a small screen it sets the photo / video below the text

 --half-cover-right-responsive-img-top 

sets the photo / video on the right and with a small screen it positions the photo / video above the text

 --half-cover-left-responsive-img-bottom 

sets the photo / video on the left and with a small screen it sets the photo / video below the text

--half-cover-left-responsive-img-top

sets the photo / video on the left and with a small screen it positions the photo / video above the text

  • Optionally, you can add a background color for the group
Background color setting
  • In the group, insert the block ‘Cover’
Cover block
  • For the ‘Cover’ block, select a photo or video from the media library as the background
Cover
  • Set the ‘Cover’ block to the full width of the screen
Full width
  • In the ‘Cover’ block, click on the default paragraph and delete it.
  • In its place, put a ‘column’ block and set it to 2 columns.
  • In the columns you can add blocks according to the standard editor functionality. An example of use is shown in the photo below.

Have any questions? It there anything we can help? Write about it in the comments below ????

Add the first comment and start a discussion

Leave a Reply

Your email address will not be published. Required fields are marked *

Need help?

Thank you!

success

We will answer to your message as soon as possible

Need a help? support-icon

This site uses cookies to optimize the use of it and for statistical purposes in accordance with Privacy Policy. The conditions for storing cookie files can be specified in Browser Settings. Further using the site and not blocking cookies means that you accept the use of these files.

Service namePurposeSettings
Service nameCookies required for the operation of the website.
Google AnalyticsAnalytical purposes.
DisqusCookies required for the operation of the comments system.