Components
41
Accordion Block Benifits Grid Block 404 Card Stack Careers Grid Case Study Carousel Case Study Hero Content Columns Content Image Content Image Accordion Content Video Cta Block Example Featured Blog Hero Featured Resource Hero Form Cta Form Hero Full Width Image Homepage Hero Hover List Image Hero Image Mask Image Testimonial Carousel Industry Insights Latest News List Columns Logo Scroller Map Block Post Feed Resource Grid Split Hero Split Text Statement Statistics Row Team Filter Team Grid Testimonial Carousel Testimonial Carousel Text Highlight Tools Grid Two Column List

Content Columns

View example

TikTok works by allowing users to record 15 seconds worth of video at regular intervals. Once recorded, users can then choose whether or not to add music to their clips. They can also choose to add filters and stickers to their videos before uploading them to TikTok. All videos created on TikTok are automatically saved to the user’s profile. Users are able to see how many likes, comments, shares and favourites their videos receive. They can also keep track of how much time has passed since they posted their last video.

There are several ways to monetise your account on TikTok. You can earn money by either selling your products or advertising your brand.

There are three types of ads on TikTok:

  • Sponsored Videos – These are advertisements that appear in front of a popular song or TV show.
  • Promoted Posts – These are advertisements that appear above content from popular creators.
  • Influencer Marketing – Brands pay influencers to promote their product on TikTok.

Here are several interesting TikTok stats:

There are no ACF fields assigned to this component.

				
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";

.block-content-columns {
	padding-top: clamp(rem-calc(30), 5vw, rem-calc(100));
	padding-bottom: clamp(rem-calc(30), 5vw, rem-calc(100));

	&__intro {
		margin-bottom: rem-calc(50);
	}

	.--sticky {
		@include bp($lg) {
			position: sticky;
			top: rem-calc(140);
		}
	}

	.row {
		&--columns {
			gap: rem-calc(48 0);

			@include bp($lg) {
				gap: 0;
			}
		}
	}
}
{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/content-columns",
    "title": "Content columns",
    "description": "Content columns block",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-content-columns.php"
    },
    "supports": {
        "anchor": true,
        "align": false,
        "color": {
            "background": true,
            "text": false,
            "gradients": true
        },
        "spacing": {
            "padding": [
				"top",
				"bottom"
			],
            "margin": [
                "top",
                "bottom"
            ]
        }
    },
    "style": "file:../../assets/css/content-columns/block-content-columns.css"
}
There are is no readme file with this component.