Cwicly - Thursday Theme Day #8 - WordPress Gutenberg

[Music] hi there fideli from the quickly team welcome back to another thursday theme day where we showcase our latest design today i will be sharing with you my latest olivia design layout available in the quickly design library and later on we will see how to build a complex looking structure for an about element that is actually straightforward and simple let's take a look at it this week we decided to create a design in the spirit of a simple photography portfolio therefore we kept our shapes and structures fairly neutral and rectangular we thought it was important not to give any of our elements any borders or rounded border edges so that the focus remained on the image block elements and heightened the accessibility to information our design stays within a close range of a bluish-gray tint that makes for a neutral look we also wanted to play around in the pastel world by having a light baby blue centered environment every colored element stays within the same hue and vibrancy to create a soothing and relaxed atmosphere that is in tune with the growing trend of muted colors a little tip i have that one can keep in mind is to not always settle for a black color typography though it might be the easiest route because it can sometimes be too harsh on certain colors for example in this design black wouldn't have felt right because it would have shattered the relaxed atmosphere we're trying to create and it would have generated dissonance instead i opted for a muted lavender color that does a great job of being readable while also feeling conquerors with the rest of the design this design is simple in its color palette and conception so it was crucial to have interesting and dynamic design elements to create an invitation to discovery our portfolio element shows this aspect of perfectly at first glance it doesn't look like anything special but once you hover on the element more information reveals itself in a manner that invites users to discover all the other portfolio items we also combine dynamism with uncommon elements such as our cta element that seems straight to the point and kept to the bare minimum however with the use of relative styling when you hover an unusual visual effect is triggered where the image and button scale in size i thought it was a great way to grab the user's attention since they're likely to want to trigger the effect again because of its satisfying visual quality which in turn could lead to a higher conversion rate additionally the large image block makes it hard to miss a cta button our testimonial's element is also uncommon in the structure since instead of the traditional use of sliders we decided to have all our testimonials present on the page it once again feels dynamic because you need to scroll to read them through and as with the cta button the user is sure not to miss any valuable information that shines a positive light on the brand thus giving them a good impression now we will see in more detail how we can drastically change the look of our hero in a few clicks and later on how we built our about element here we are in the gutenberg editor in our heroes element as you can see all our blocks are simply on top of each other which there's nothing wrong with and could have been left as such but it looks flat and boring we can elevate this look in a few clicks by moving our paragraph h1 heading and image block down towards the edge of the section that will create a seamless flow between our hero and about element before we do we can quickly add our custom css rule to our div that will vertically place it on its side that will subtly encourage our users to explore their website don't worry we'll be sure to have it down below for you to recreate on your own designs let's select our div and head to the advanced tab and into the custom css panel and paste our rule in then let's head to the layout panel and absolute it by placing it on the right at 0 pixels now let's select our image block and head to the advanced tab and the layout panel and place it relatively to -85 pixels from the bottom as you can see our image is very far from touching the edge but that's because we have to get rid of the padding that quickly has by default let's head to the advanced tab and the margin and padding panel and delete the padding on either side now selecting our h1 heading and navigating to the advanced tab and the layout panel we can relatively set it to -153 pixels from the bottom as you can see the heading is being cut off by the image but all we need to do is to set the headings z index to one now let's repeat the same process for the paragraph by relatively placing it at -158 pixels from the bottom it looks nice on desktop but let's make sure it looks as good on other screens let's switch to tablet view as you can see our paragraph and h1 heading are now placed too low on our page so let's rectify this let's select a paragraph head to the advanced tab and into the layout panel and relatively place it to minus 115 pixels from the bottom let's repeat the same process with our heading but place it to minus 125 pixels from the bottom on mobile view we can repeat the same process once again by placing them more towards the top however i don't like the placement of our image block because having it overflowing onto the other section could make our design look squeezed together and crowded instead we can opt for a different look that is more appropriate on mobileview let's select this section and head to the advanced tab into the sizing panel and give it a 100 view height next we can place our image block to 0 pixels from the bottom in the layout panel and repeat the process for our paragraph for our heading we can place it at -28 pixels from the bottom and there you have it as you clearly see we have revolutionized the look of the design and not with much trouble now let's move on to building an about element with an interesting layout that has a seemingly complicated look but that's actually really simple here we are again in the gutenberg editor i've already added our light baby blue background color by the way i'm using my global colors the way our about page is structured is the following a column containing an image block and a paragraph an absolutely position h2 heading a quote icon and finally another paragraph our h2 heading is resistance which makes this about page stand out by its dynamic movement with its placement and relative styling let's add a columns block quickly by default sets three fractions but i only want two so let's click on edit grid layout and bring the number of fractions down to 2 and delete the third module let's exit it and in the add remove columns block panel let's hit the minus symbol we can also set a 30 column in row gap selecting our first column let's add our image block let's also remember to use the vertical direction and center our column let's set its width to 75 and select the cover object fit option selecting our second column let's select the vertical direction and flex start it let's add our 20 pixel font size paragraph and it's deep lavender color let's select a column and head to the advanced tab and the margin and padding panel because i would like our paragraph to be further away from the top than it is now let's give it a 50 pixel top padding i like to ensure my designs responsiveness gradually as i design it to make sure i don't forget to do it so let's switch to tablet view and select our columns block let's edit the grid layout and set the number of fractions to 1 and delete the second and third module let's also bring down our paragraphs font size to 18 pixels let's now add a 100 pixel font size h2 heading that will be placed in between our columns block let's give it our deep lavender font color and also set a white background color in the highlight property for it to be readable later on when it's overlaid on the image block heading to the advanced tab into the sizing panel let's set a 45 percent width now it is time to place it absolutely so let's head to the advanced tab and into the layout panel and absolute it by placing it at 525 pixels at the top and 360 pixels to the right we are now going to get its class name because we are going to relative style it so that when we hover on the section the heading subtly moves a little to the side in order to enhance the idea of movement on the page selecting our section let's head to the advanced tab and scroll down to the relative styling panel and add one let's rename it to a convenient name set the combinator to descendant the selector type to class and paste in the class name we just copied let's now edit it by clicking the editor button since we're in normal mode we can already add our transition duration in the effects panel and set it to 0.5 seconds switching to hover mode let's navigate to the transforms panel and toggle the translate property and set x to 15 pixels let's exit the relative styling editor and as you can see now when i hover on my section the heading has a nice motion let's switch the tablet view to make sure it looks responsive our font size now looks huge and awkwardly placed let's bring down its font size to 80 pixels and head to the advanced tab and enter the sizing panel and set its width to 100 percent our heading is almost out of our page so let's fix its position by heading to the layout panel and selecting a position of absolute with minus 30 pixels to the right on mobile view let's repeat the same process by bringing down its font size to 50 pixels and in the layout panel absolutely positioning it to 350 pixels to the top now we can add a 55 pixel size icon and set the same deep lavender as previously lastly we can use the copy link feature to copy our previous paragraph this feature allows us to have one main paragraph that controls the style of our other paragraph as you can see i can tweak my first paragraph's font size color and background color and the other paragraph takes on new style with ease however let's select our linked paragraph and head to the advanced tab to the sizing panel and set its width to 65 percent because i want to create the illusion that this paragraph is part of the same structure as our columns block to create a homogeneous ensemble now our section needs some breathing space so let's select our columns block and head to the margin and panning panel and give it a 150 pixel bottom margin then selecting our icon we can give it a 30 pixel bottom margin on tablet view let's set this width to 100 in order to better match our first paragraph's width and as you can see the space between our columns block and our quote icon is too large now so all we need to do is head over to the margin and padding panel and give it a 50 pixel bottom margin on mobile view we can bring down our icon size to 45 pixels and that's all there is to it with a few adjustments and simple modifications you can turn simple structures into intricate looking ones without much trouble thank you for watching i hope you enjoyed this week's design as always if you have any questions or maybe even requests for next week's theme be sure to let us know down below see you soon bye [Music] you

Channel: Cwicly

Views: 233

Keywords: wordpress, gutenberg, layout, design, website, webdesign, cwicly, plugin, theme, number8, video, tutorial, about, element, relativestyling, style, sleek, modern

Id: KKTli4Uk-aM

Length: 14min 5sec (845 seconds)

Published: Thu Dec 16 2021