Adyfico

Hi,

The ‘website and blog’ vs ‘blog’ options can depend on the specific theme installed. Typically, the ‘blog’ option sets the home page to display the latest blogs, while the ‘website and blog’ displays a static page as the homepage (with a blog page in the menu).

One way to change the ‘website and blog’ into a ‘blog’ is to set the blog page as home and delete any unwanted pages (e.g. services).

Change Homepage to Blog:
In dashboard, navigate to Settings>Reading and change the ‘Front page displays’ to ‘Your latest posts’

Delete Unwanted Pages:
In dashboard, navigate to Pages>All Pages>[unwanted page title], hover over unwanted page title and select ‘Trash’
Repeat as necessary

Hi,

I haven’t tried it, but the WP Easy Columns plugin allows you to use shortcuts to create custom columns/grids (e.g. 1/3 and 2/3).

Also, it might be easier to break up the titles and images into 4 elements (2 titles and 2 images), linking each pair to the respective blog.

Hi,

CSS can be a bit tricky, but yes, use the Customizer/Additional CSS. Changing the look/feel with CSS will depend on the theme, and the size of the logo, tagline, containers, etc.

Whenever there is an issue with a web page display, the first step is to use out-of-the-box browser developer tools to analyze the elements causing the problem.

Press f12 while viewing the page in a browser and this should open a developer console in the browser.
Find the ‘Inspect Element’ feature in the developer console (e.g. Chrome: top right ‘box with cursor’ icon)
Click on the element of interest (e.g. your tagline) and view the CSS controlling that element in the developer console.

In many cases, the display attribute is set to ‘block’, which will cause the tagline to fall below the icon. Fix this by changing the display setting from ‘block’ to ‘inline’ using the Additional CSS function in the Customizer.

Finally, set the margins and padding to create the desired effect. NOTE: be sure to check the spacing on smaller screen sizes (e.g. mobile) and different browsers to confirm solution works for all users.

The following CSS is overkill but should do the trick (with some tweaking). Check the class names of your logo and tagline; use the Inspect Element function to find the class names – e.g. <div class=”site-description”>Tag Line</div> where the class name is: site-description.

Paste this in the Additional CSS:

.custom-logo {
display: inline;
}
.site-title-wrapper {
display: inline;
width: 300px;
}
.site-title {
display: inline;
padding-bottom: 20px;
margin: 0;
margin-top: 10px;
margin-left: -10px;
position: absolute;
font-size: 2em;
}
.site-description {
display: inline;
position: absolute;
margin-top: 50px;
}
______________________________

NOTE: in some cases, you may need to override the existing CSS with ‘!important’. Use this trick when CSS updates appear crossed-out in the developer console.
e.g.
.site-description {
display: inline !important;
position: absolute !important;
margin-top: 50px !important;
}