Close Menu

Lookbook

Put on a show with print-style layouts that make a carousel on desktop and spread out on mobile.

Usage

If you want your site to have some magazine looks, check out our Lookbook Plugin. Give your site some print-style looks to add some style and intrigue for your viewers.

Parent Settings

The Lookbook block has a few parent block settings in addition to child block settings. There are additional child block settings for the blocks you select for your slides, but mostly the child settings are the same for each block. Remember to access these settings, you must have the parent block selected.

Wraparound

You have the option to toggle Wraparound off or on. If on, your text will wraparound your selected image. If off, your text will appear just above or below your image instead of alongside it. There is no “correct” or preferred option here, it is contingent on whatever look you are going for. Try swapping between on and off to see what you think looks better.

Autoplay

Determine whether you want your Lookbook to auto cycle through by toggling this field on and entering in an Autoplay Interval value in seconds. Otherwise, toggling off will allow your viewers to cycle through the Lookbook at their own pace. This really depends on what type of content you are putting in the slides. If it is something that doesn’t require much engagement, we recommend turning on autoplay.

Block Width

Blocks can be set to one of three widths in the editor: Default, Wide, or Full. Blocks will interact with adjacent blocks differently depending on their width.

Adjusting Block Width

The block width setting is found in your block context bar, which will show up above the current block that you have selected. A block that supports the block widths will show its current width icon in the context bar, and clicking it will allow you to change the width.

If you have the Top Toolbar setting selected, the block context bar will always show at the top of your page, not at the top of your block.

Default Width

The default width of your content is determined by the value set in your Customizer. You can find this setting under Styles » Widths » Content Width. This is the default width of most text-based content and most blog pages. We recommend keeping this set so that your content retains maximum readability, which most studies agree is around 50-60 characters per line.

Wide Width

Wide width content will take up 75% of the available width on the page or the default content width set on your site—whichever is larger. In effect, this makes content take up more of the available screen real estate. When used in conjunction with other wide width blocks, you can shape your webpages in many different ways.

Full Width

Full width content will always take up 100% of the available width on the page. When placed next to default or wide width content, margin will be applied to the full width block to give it some room to breath. When two full width blocks are placed next to each other, however, they will suction together and form a cohesive unit with no margin in between them.

Child Settings

There are four types of blocks you can add to your Lookbook: Cover Slide, Image Collage, Image Blocks, Copy Slide. They each have their own set of child settings, although many of the fields you can edit do overlap. We like to think of the Cover Slide and Copy Slide as being very similar and the same goes for the Image Collage and Image Blocks. First we will go over the shared child settings amongst all four blocks.

Reverse Print

Toggling reverse print will flip the colors from your standard palette to white, which increases contrast and readability when text is placed on dark backgrounds.

You’ll find the reverse print toggle in the block sidebar. Enabling reverse print will affect the block its enabled on as well as everything inside of it. If the block contains Inner Blocks, reverse print will cascade to all descendants.

We recommend using reverse print whenever a block has a dark background and using white text would increase its contrast. While you can set text color on core blocks like Headings and Paragraphs, we strongly recommend using the block-level reverse print instead. This way, you’ll be able to quickly toggle all the content if you change the background color in the future. All Inner Blocks will respect the reverse print setting, even those without color settings themselves.

To read more about contrast requirements on the web, visit here.

Text Fields

There are corresponding text fields in your block editor to change the text/copy that appears in your selected child block. The text fields that appear for you are dependent on which child block you have selected to put in your lookbook: Lead, Headline, Subheadline, Body, and/or Copy Areas.

Just for Cover Slide and Copy Slide Block

Background Image

Use a photo from your media library or upload a new one to use as a background.

Choose a Background Image

You can choose a background image in the block sidebar by clicking on the ‘Choose Photo’ button. You’ll be prompted to select a photo from your media library or upload a new one.

Once you’ve selected a photo to use as your background, new options will take the place of the one you used to select the photo. The first is a simple button to remove the image that you’ve selected, allowing you to start this over.

The second is the Focal Point selector. This tool allows you to select the most important point of your photo that your website will try to always keep visible. Because of the responsive nature of the web, images used as a background must stretch and cover the area when viewed on different device sizes, but this focal point allows you to keep what’s important in frame.

Set an Overlay

Whether you need to darken or tint an image to maintain the legibility of text on top of it or as a stylistic choice, there are many situations where you’ll want to add an overlay to your background image. The overlay tool in your block sidebar lets you choose a color from your palette (with the addition of pure black or pure white). The overlay opacity slider will determines how much overlay to apply to the background image, with 100% being solid color.

Select X as the overlay color to disable the overlay completely, or set its opacity to 0%.

Background Attachment

Some blocks allow you to set the background attachment. A background with Fixed attachment will remain anchored to the browser window as the user scrolls, creating a parallax effect.

Just for Image Collage and Image Blocks

For your gallery select your photos or upload them in the block editor. Keep in mind you can choose a maximum of 5 images for an Image Collage and a maximum of 4 for Image Blocks.

Background Color

Choose any color from your palette to create a background.

Choosing a Background Color

You can choose a color from the block sidebar that will fill your block with a background color. The color options presented here will be colors from your site’s color palette, which you can edit in the Customizer. When using a dark background color, be sure to toggle the Reverse Print option to make sure your text remains legible.